From 6e80c8dc4ffb516d34d20e90a9b1a60ecf7810e2 Mon Sep 17 00:00:00 2001 From: Luigi Pinca Date: Sat, 25 Feb 2012 21:24:55 +0100 Subject: [PATCH] added volume control --- index.html | 5 +- package.json | 2 +- public/static/css/style.css | 109 +++++++++++++++++- public/static/images/sprites.png | Bin 5310 -> 6037 bytes public/static/js/client.js | 192 +++++++++++++++++++++++++------ 5 files changed, 273 insertions(+), 35 deletions(-) diff --git a/index.html b/index.html index 79497cb..3ad3d0c 100644 --- a/index.html +++ b/index.html @@ -41,7 +41,10 @@
-
+
+
+
+

Binb, a beatquest alternative.

tracks.
diff --git a/package.json b/package.json index 1a8b145..493248a 100644 --- a/package.json +++ b/package.json @@ -12,5 +12,5 @@ "engine": { "node": "0.6.x" }, - "version": "0.1.1-4" + "version": "0.1.1-5" } \ No newline at end of file diff --git a/public/static/css/style.css b/public/static/css/style.css index 1e05cad..8eac4f7 100644 --- a/public/static/css/style.css +++ b/public/static/css/style.css @@ -108,6 +108,113 @@ input { background-color: #6184b7; width:0px; } +#volume { + height:154px; +} +#volume-button, #volume-slider, #volume-total, #volume-current, #volume-handle { + position: absolute; +} +#volume-button { + bottom: 0; + height: 20px; + width: 20px; +} +#volume-button .button { + display:block; + height: 18px; + width: 18px; + border:1px solid; + border-color: #CCCCCC #CCCCCC #AAAAAA; + -webkit-border-radius:3px; + -moz-border-radius:3px; + border-radius:3px; + cursor:pointer; + filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffe0e0e0); + background-image:-moz-linear-gradient(top,#fff 0,#e0e0e0 100%); + background-image:-ms-linear-gradient(top,#fff 0,#e0e0e0 100%); + background-image:-o-linear-gradient(top,#fff 0,#e0e0e0 100%); + background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e0e0e0)); + background-image:-webkit-linear-gradient(top,#fff 0,#e0e0e0 100%); + background-image:linear-gradient(to bottom,#fff 0,#e0e0e0 100%); +} +#volume-button .button:hover { + border-color:#999999; + -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25); + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25); +} +#volume-button .button:active { + border-color:#999999 #AAAAAA #CCCCCC; + -webkit-box-shadow: 0px 1px 2px 0px #aaa inset; + -moz-box-shadow: 0px 1px 2px 0px #aaa inset; + box-shadow: 0px 1px 2px 0px #aaa inset; + filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc); + background-image:-moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%); + background-image:-ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%); + background-image:-o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%); + background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc)); + background-image:-webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%); + background-image:linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%); +} +#volume-button .button #icon { + margin: 1px; + width: 16px; + height: 16px; +} +#volume-button .button .volume-none { + background: url('/static/images/sprites.png') no-repeat 0 -112px; +} +#volume-button .button .volume-low { + background: url('/static/images/sprites.png') no-repeat -16px -112px; +} +#volume-button .button .volume-medium { + background: url('/static/images/sprites.png') no-repeat -32px -112px; +} +#volume-button .button .volume-high { + background: url('/static/images/sprites.png') no-repeat -48px -112px; +} +#volume-slider { + display: none; + height: 116px; + width: 20px; + top: -116px; + -webkit-border-radius:3px; + -moz-border-radius:3px; + border-radius:3px; + background: rgba(50, 50, 50, 0.1); + z-index: 1; +} +#volume-total, #volume-current { + left: 8px; + top: 8px; + width: 4px; + height: 100px; +} +#volume-total, #volume-current, #volume-handle { + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; +} +#volume-total { + -webkit-box-shadow: inset 0px 0px 3px 0px #333; + -moz-box-shadow: inset 0px 0px 3px 0px #333; + box-shadow: inset 0px 0px 3px 0px #333; +} +#volume-current { + -webkit-box-shadow: inset 0px 0px 1px 0px #000; + -moz-box-shadow: inset 0px 0px 1px 0px #000; + box-shadow: inset 0px 0px 1px 0px #000; + background-color: #6184b7; +} +#volume-handle { + left: 1px; + width: 16px; + height: 4px; + background: #ddd; + background: rgba(255, 255, 255, 0.9); + cursor: N-resize; + border:1px solid #999; +} #summary { text-align: center; margin-bottom:18px; @@ -257,7 +364,7 @@ input { } #disclaimer { position: absolute; - left: 60px; + left: 60px; bottom: 18px; color: #BFBFBF; width:340px; diff --git a/public/static/images/sprites.png b/public/static/images/sprites.png index 79e20666feb3a2229e86322aab1573c0221e8048..e8b8b2df73bc2ceebbf61b3bc1de0949af7d8d39 100644 GIT binary patch delta 6030 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 N44$rjF6*2UngA$8=;HtY delta 5298 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 again:"); + App.setNickName(data.feedback+"
Try again:"); }, // You joined the game @@ -73,7 +73,7 @@ var App = { App.addChatEntry(joinspan); App.updateUsers(data); - var messagebox = $("#message"); + var messagebox = $("#message"); messagebox.keyup(function(event) { if (event.keyCode === 13) { var val = $.trim(messagebox.val()); @@ -165,8 +165,8 @@ var App = { // Update the list of users updateUsers: function(data) { - var elem = $("#users"); - elem.empty(); + var elem = $("#users"); + elem.empty(); var users = []; for (var key in data.users) { users.push(data.users[key]); @@ -174,16 +174,16 @@ var App = { users.sort(function(a, b) {return b.points - a.points;}); // Flag to test if our private recipient is in the list of active users var found = false; - for (var i=0; i'); + for (var i=0; i'); var pvt = $('P'); var username = $('').text(user.nickname); var points = $('('+user.points+')'); var roundrank = $(''); var roundpoints = $(''); li.append(pvt, username, points, roundrank, roundpoints); - elem.append(li); + elem.append(li); if (App.pvtmsgto === user.nickname) { pvt.show(); username.click(App.clearPrivate); @@ -213,7 +213,7 @@ var App = { username.addClass("correct"); } } - } + } if (!found && App.pvtmsgto) { var recipient = $('#recipient'); var width = recipient.outerWidth(true) + 1; @@ -234,32 +234,32 @@ var App = { } var recipient = $("#recipient"); recipient.css('margin-right','4px'); - recipient.text("To "+nickname+":"); + recipient.text("To "+nickname+":"); var width = recipient.outerWidth(true) + 1; recipient.hide(); $('#message').animate({'width':'-='+width+'px'}, "fast", function() {recipient.show();}); - var el = $("span.name:contains("+nickname+")"); + var el = $("span.name:contains("+nickname+")"); el.prev().show(); el.unbind('click'); el.click(App.clearPrivate); - App.pvtmsgto = nickname; - $("#message").focus(); + App.pvtmsgto = nickname; + $("#message").focus(); }, clearPrivate: function() { var recipient = $("#recipient"); var width = recipient.outerWidth(true) + 1; recipient.css('margin-right','0'); - recipient.text(""); + recipient.text(""); $('#message').animate({'width':'+='+width+'px'}, "fast"); var el = $("span.name:contains("+App.pvtmsgto+")"); el.prev().hide(); el.unbind("click"); - el.click(function() { + el.click(function() { App.addPrivate($(this).text()); }); App.pvtmsgto = null; - $("#message").focus(); + $("#message").focus(); }, // Receive a chat message @@ -271,9 +271,9 @@ var App = { prefix = (App.nickname === data.from) ? '(To '+data.to+')' : '(From '+prefix+')'; msgspan.addClass("private"); } - var msg = prefix+": "+data.chatmsg; - msgspan.text(msg); - App.addChatEntry(msgspan); + var msg = prefix+": "+data.chatmsg; + msgspan.text(msg); + App.addChatEntry(msgspan); }, loadTrack: function(data) { @@ -412,22 +412,22 @@ var App = { App.stopanimation = true; $('#player').jPlayer("stop"); var errormsg = "ERROR: You have disconnected."; - var errorspan = $(""); + var errorspan = $(""); errorspan.text(errormsg); - App.addChatEntry(errorspan); + App.addChatEntry(errorspan); App.addFeedback('Something wrong happened'); - var users = $("#users"); - users.empty(); + var users = $("#users"); + users.empty(); }, // Add a chat entry, whether message, notification, etc. addChatEntry: function(childNode) { - var li = $("
  • "); - li.append(childNode); - var chat = $("#chat"); - chat.append(li); - var chatRaw = document.getElementById("chat"); - chatRaw.scrollTop = chatRaw.scrollHeight; + var li = $("
  • "); + li.append(childNode); + var chat = $("#chat"); + chat.append(li); + var chatRaw = document.getElementById("chat"); + chatRaw.scrollTop = chatRaw.scrollHeight; }, addFeedback: function(txt, style) { @@ -440,6 +440,131 @@ var App = { $('#feedback').text(txt); }, + addVolumeControl: function() { + var volumebutton = $('
    '+ + '
    '+ + '
    '+ // Outer background + '
    '+ // Rail + '
    '+ // Current volume + '
    '+ // Handle + '
    '+ + '
    ').appendTo("#volume"); + var icon = volumebutton.find('#icon'); + var volumeslider = volumebutton.find('#volume-slider'); + var volumetotal = volumebutton.find('#volume-total'); + var volumecurrent = volumebutton.find('#volume-current'); + var volumehandle = volumebutton.find('#volume-handle'); + var mouseisdown = false; + var mouseisover = false; + var oldvalue = 1; + var clicked = false; + + var positionVolumeHandle = function(volume) { + if (!volumeslider.is(':visible')) { + volumeslider.show(); + positionVolumeHandle(volume); + volumeslider.hide(); + return; + } + var totalheight = volumetotal.height(); + var totalposition = volumetotal.position(); + var newtop = totalheight - (totalheight * volume); + volumehandle.css('top', totalposition.top + newtop - (volumehandle.height() / 2)); + volumecurrent.height(totalheight - newtop ); + volumecurrent.css('top', totalposition.top + newtop); + }; + + var handleIcon = function (volume) { + if (volume === 0) { + icon.removeClass().addClass('volume-none'); + } + else if (volume <= 0.33) { + icon.removeClass().addClass('volume-low'); + } + else if (volume <= 0.66) { + icon.removeClass().addClass('volume-medium'); + } + else { + icon.removeClass().addClass('volume-high'); + } + }; + + var handleVolumeMove = function(e) { + var totaloffset = volumetotal.offset(); + var newy = e.pageY - totaloffset.top; + var railheight = volumetotal.height(); + var totalTop = parseInt(volumetotal.css('top').replace(/px/,''),10); + var volume = (railheight - newy) / railheight; + + if (newy < 0) { + newy = 0; + } + else if (newy > railheight) { + newy = railheight; + } + + volumehandle.css('top', totalTop + newy - (volumehandle.height() / 2)); + volumecurrent.height(railheight - newy); + volumecurrent.css('top',newy+totalTop); + + volume = Math.max(0,volume); + volume = Math.min(volume,1); + + handleIcon(volume); + oldvalue = volume; + $("#player").jPlayer("volume", volume); + }; + + volumebutton.hover(function() { + volumeslider.show(); + mouseisover = true; + }, function() { + mouseisover = false; + if (!mouseisdown) { + volumeslider.hide(); + } + }); + + volumeslider.on('mouseover', function() { + mouseisover = true; + }).on('mousedown', function (e) { + handleVolumeMove(e); + mouseisdown = true; + return false; + }); + + $(document).on('mouseup', function (e) { + mouseisdown = false; + if (!mouseisover) { + volumeslider.hide(); + } + }).on('mousemove', function (e) { + if (mouseisdown) { + handleVolumeMove(e); + } + }); + + volumebutton.find('.button').click(function() { + if (!clicked) { + clicked = true; + if (oldvalue !== 0) { + $("#player").jPlayer("volume", 0); + positionVolumeHandle(0); + handleIcon(0); + } + } + else { + clicked = false; + if (oldvalue !== 0) { + $("#player").jPlayer("volume", oldvalue); + positionVolumeHandle(oldvalue); + handleIcon(oldvalue); + } + } + }); + positionVolumeHandle(1); + }, + // Set up the App object. init: function() { $('#modal').modal({keyboard:false,show:false,backdrop:"static"}); @@ -451,11 +576,14 @@ var App = { } }); } - App.socket = io.connect("http://binb.nodejitsu.com/", {'reconnect':false}); + App.socket = io.connect("http://binb.nodejitsu.com/", {'reconnect':false}); App.socket.on("connect", function() { $("#player").jPlayer({ ready: function() { App.setNickName(); + if (!$.jPlayer.platform.mobile && !$.jPlayer.platform.tablet) { + App.addVolumeControl(); + } }, swfPath: "/static/swf/", supplied: "m4a", @@ -465,6 +593,6 @@ var App = { }); App.socket.on('invalidnickname', App.invalidNickName); App.socket.on('ready', App.ready); - App.socket.on("disconnect", App.disconnect); + App.socket.on("disconnect", App.disconnect); } }; -- 2.54.0