From: Luigi Pinca Date: Sat, 25 Feb 2012 20:24:55 +0000 (+0100) Subject: added volume control X-Git-Url: https://git.saalbach.dev/?a=commitdiff_plain;h=6e80c8dc4ffb516d34d20e90a9b1a60ecf7810e2;p=binbsis50.git added volume control --- 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 79e2066..e8b8b2d 100644 Binary files a/public/static/images/sprites.png and b/public/static/images/sprites.png differ diff --git a/public/static/js/client.js b/public/static/js/client.js index 6d4293b..35c769f 100644 --- a/public/static/js/client.js +++ b/public/static/js/client.js @@ -18,7 +18,7 @@ var App = { // Prompt for name and send it. setNickName: function(msg) { - if (!msg) { + if (!msg) { msg = "What's your name?"; var html = '

Welcome to Binb

'; @@ -60,7 +60,7 @@ var App = { // Your submitted name was invalid invalidNickName: function(data) { - App.setNickName(data.feedback+"
Try 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); } };