added support for iOS devices

diff --git a/package.json b/package.json
index 493248ac1956fe6e44a5dcd475b720a17db4ee86..f154bed8ee048abf1b489645372577e304e1fb7a 100644 (file)
--- a/package.json
+++ b/package.json
@@ -12,5 +12,5 @@
   "engine": {
     "node": "0.6.x"
   },
-  "version": "0.1.1-5"
+  "version": "0.1.1-6"
 }
\ No newline at end of file

diff --git a/public/static/css/bootstrap.min.css b/public/static/css/bootstrap.min.css
index 42bad2108c1e5e6e38b36234e6f43365135251b0..9d89c769bbe44332ec43a01afb97560a20901dee 100644 (file)
--- a/public/static/css/bootstrap.min.css
+++ b/public/static/css/bootstrap.min.css
@@ -236,6 +236,128 @@ legend+.control-group{margin-top:18px;-webkit-margin-top-collapse:separate;}
 button.btn,input[type="submit"].btn{*padding-top:2px;*padding-bottom:2px;}button.btn::-moz-focus-inner,input[type="submit"].btn::-moz-focus-inner{padding:0;border:0;}
 button.btn.large,input[type="submit"].btn.large{*padding-top:7px;*padding-bottom:7px;}
 button.btn.small,input[type="submit"].btn.small{*padding-top:3px;*padding-bottom:3px;}
+[class^="icon-"],[class*=" icon-"]{display:inline-block;width:14px;height:14px;line-height:14px;vertical-align:text-top;background-image:url("../images/glyphicons-halflings.png");background-position:14px 14px;background-repeat:no-repeat;*margin-right:.3em;}[class^="icon-"]:last-child,[class*=" icon-"]:last-child{*margin-left:0;}
+.icon-white{background-image:url("../images/glyphicons-halflings-white.png");}
+.icon-glass{background-position:0 0;}
+.icon-music{background-position:-24px 0;}
+.icon-search{background-position:-48px 0;}
+.icon-envelope{background-position:-72px 0;}
+.icon-heart{background-position:-96px 0;}
+.icon-star{background-position:-120px 0;}
+.icon-star-empty{background-position:-144px 0;}
+.icon-user{background-position:-168px 0;}
+.icon-film{background-position:-192px 0;}
+.icon-th-large{background-position:-216px 0;}
+.icon-th{background-position:-240px 0;}
+.icon-th-list{background-position:-264px 0;}
+.icon-ok{background-position:-288px 0;}
+.icon-remove{background-position:-312px 0;}
+.icon-zoom-in{background-position:-336px 0;}
+.icon-zoom-out{background-position:-360px 0;}
+.icon-off{background-position:-384px 0;}
+.icon-signal{background-position:-408px 0;}
+.icon-cog{background-position:-432px 0;}
+.icon-trash{background-position:-456px 0;}
+.icon-home{background-position:0 -24px;}
+.icon-file{background-position:-24px -24px;}
+.icon-time{background-position:-48px -24px;}
+.icon-road{background-position:-72px -24px;}
+.icon-download-alt{background-position:-96px -24px;}
+.icon-download{background-position:-120px -24px;}
+.icon-upload{background-position:-144px -24px;}
+.icon-inbox{background-position:-168px -24px;}
+.icon-play-circle{background-position:-192px -24px;}
+.icon-repeat{background-position:-216px -24px;}
+.icon-refresh{background-position:-240px -24px;}
+.icon-list-alt{background-position:-264px -24px;}
+.icon-lock{background-position:-287px -24px;}
+.icon-flag{background-position:-312px -24px;}
+.icon-headphones{background-position:-336px -24px;}
+.icon-volume-off{background-position:-360px -24px;}
+.icon-volume-down{background-position:-384px -24px;}
+.icon-volume-up{background-position:-408px -24px;}
+.icon-qrcode{background-position:-432px -24px;}
+.icon-barcode{background-position:-456px -24px;}
+.icon-tag{background-position:0 -48px;}
+.icon-tags{background-position:-25px -48px;}
+.icon-book{background-position:-48px -48px;}
+.icon-bookmark{background-position:-72px -48px;}
+.icon-print{background-position:-96px -48px;}
+.icon-camera{background-position:-120px -48px;}
+.icon-font{background-position:-144px -48px;}
+.icon-bold{background-position:-167px -48px;}
+.icon-italic{background-position:-192px -48px;}
+.icon-text-height{background-position:-216px -48px;}
+.icon-text-width{background-position:-240px -48px;}
+.icon-align-left{background-position:-264px -48px;}
+.icon-align-center{background-position:-288px -48px;}
+.icon-align-right{background-position:-312px -48px;}
+.icon-align-justify{background-position:-336px -48px;}
+.icon-list{background-position:-360px -48px;}
+.icon-indent-left{background-position:-384px -48px;}
+.icon-indent-right{background-position:-408px -48px;}
+.icon-facetime-video{background-position:-432px -48px;}
+.icon-picture{background-position:-456px -48px;}
+.icon-pencil{background-position:0 -72px;}
+.icon-map-marker{background-position:-24px -72px;}
+.icon-adjust{background-position:-48px -72px;}
+.icon-tint{background-position:-72px -72px;}
+.icon-edit{background-position:-96px -72px;}
+.icon-share{background-position:-120px -72px;}
+.icon-check{background-position:-144px -72px;}
+.icon-move{background-position:-168px -72px;}
+.icon-step-backward{background-position:-192px -72px;}
+.icon-fast-backward{background-position:-216px -72px;}
+.icon-backward{background-position:-240px -72px;}
+.icon-play{background-position:-264px -72px;}
+.icon-pause{background-position:-288px -72px;}
+.icon-stop{background-position:-312px -72px;}
+.icon-forward{background-position:-336px -72px;}
+.icon-fast-forward{background-position:-360px -72px;}
+.icon-step-forward{background-position:-384px -72px;}
+.icon-eject{background-position:-408px -72px;}
+.icon-chevron-left{background-position:-432px -72px;}
+.icon-chevron-right{background-position:-456px -72px;}
+.icon-plus-sign{background-position:0 -96px;}
+.icon-minus-sign{background-position:-24px -96px;}
+.icon-remove-sign{background-position:-48px -96px;}
+.icon-ok-sign{background-position:-72px -96px;}
+.icon-question-sign{background-position:-96px -96px;}
+.icon-info-sign{background-position:-120px -96px;}
+.icon-screenshot{background-position:-144px -96px;}
+.icon-remove-circle{background-position:-168px -96px;}
+.icon-ok-circle{background-position:-192px -96px;}
+.icon-ban-circle{background-position:-216px -96px;}
+.icon-arrow-left{background-position:-240px -96px;}
+.icon-arrow-right{background-position:-264px -96px;}
+.icon-arrow-up{background-position:-289px -96px;}
+.icon-arrow-down{background-position:-312px -96px;}
+.icon-share-alt{background-position:-336px -96px;}
+.icon-resize-full{background-position:-360px -96px;}
+.icon-resize-small{background-position:-384px -96px;}
+.icon-plus{background-position:-408px -96px;}
+.icon-minus{background-position:-433px -96px;}
+.icon-asterisk{background-position:-456px -96px;}
+.icon-exclamation-sign{background-position:0 -120px;}
+.icon-gift{background-position:-24px -120px;}
+.icon-leaf{background-position:-48px -120px;}
+.icon-fire{background-position:-72px -120px;}
+.icon-eye-open{background-position:-96px -120px;}
+.icon-eye-close{background-position:-120px -120px;}
+.icon-warning-sign{background-position:-144px -120px;}
+.icon-plane{background-position:-168px -120px;}
+.icon-calendar{background-position:-192px -120px;}
+.icon-random{background-position:-216px -120px;}
+.icon-comment{background-position:-240px -120px;}
+.icon-magnet{background-position:-264px -120px;}
+.icon-chevron-up{background-position:-288px -120px;}
+.icon-chevron-down{background-position:-313px -119px;}
+.icon-retweet{background-position:-336px -120px;}
+.icon-shopping-cart{background-position:-360px -120px;}
+.icon-folder-close{background-position:-384px -120px;}
+.icon-folder-open{background-position:-408px -120px;}
+.icon-resize-vertical{background-position:-432px -119px;}
+.icon-resize-horizontal{background-position:-456px -118px;}
 .modal-open .dropdown-menu{z-index:2050;}
 .modal-open .dropdown.open{*z-index:2050;}
 .modal-open .popover{z-index:2060;}

diff --git a/public/static/css/style.css b/public/static/css/style.css
index 8eac4f796a2d999b4700abddb5e8c6071b5aa071..1adf825eef168df7a4597c68ee8ef138fd7662bb 100644 (file)
--- a/public/static/css/style.css
+++ b/public/static/css/style.css
@@ -108,6 +108,18 @@ input {
        background-color: #6184b7;
        width:0px;
 }
+#touch-backdrop {
+       width:220px;
+       height:137px;
+       -webkit-border-radius:5px;
+       -moz-border-radius:5px;
+       border-radius:5px;
+       background:rgba(50,50,50,0.8);
+}
+#touch-play {
+       margin-top: 54px;
+       margin-left: 77px;
+}
 #volume {
        height:154px;
 }

diff --git a/public/static/images/glyphicons-halflings-white.png b/public/static/images/glyphicons-halflings-white.png
new file mode 100644 (file)
index 0000000..a20760b
Binary files /dev/null and b/public/static/images/glyphicons-halflings-white.png differ

diff --git a/public/static/images/glyphicons-halflings.png b/public/static/images/glyphicons-halflings.png
new file mode 100644 (file)
index 0000000..92d4445
Binary files /dev/null and b/public/static/images/glyphicons-halflings.png differ

diff --git a/public/static/js/client.js b/public/static/js/client.js
index 35c769fdc3f9ad151a85cb20f41181bc3511f535..1cc49bccac9b3f6585b256ed3ec8a99b9d580a6d 100644 (file)
--- a/public/static/js/client.js
+++ b/public/static/js/client.js
@@ -1,5 +1,8 @@
 var App = {
-
+       
+       touchplay: null,
+       elapsedtime: 0,
+       jplayer: null,
        nickname: null,
        socket: null,
        pvtmgsto: null,
@@ -25,7 +28,8 @@ var App = {
                        html += '<div class="modal-body"><p>'+msg+'</p></div>';
                        html += '<div class="modal-footer">';
                        html += '<input id="login" class="" type="text" name="nickname" />';
-                       html += '<button id="join" class="btn btn-primary">Join the game</button></div>';
+                       html += '<button id="join" class="btn btn-primary">';
+                       html += '<i class="icon-user icon-white"></i> Join the game</button></div>';
 
                        $(html).appendTo($('#modal'));
                        var login = $('#login');
@@ -277,14 +281,18 @@ var App = {
        },
 
        loadTrack: function(data) {
-               $('#player').jPlayer("mute");
-               $('#player').jPlayer("setMedia", {m4a: data.previewUrl});
+               App.jplayer.jPlayer("mute");
+               App.jplayer.jPlayer("setMedia", {m4a: data.previewUrl});
        },
 
        // Play a track 
        playTrack: function(data) {
-               $('#player').jPlayer("unmute");
-               $('#player').jPlayer("play");
+               if (App.touchplay) {
+                       App.touchplay.removeClass("btn-danger disabled").addClass("btn-success");
+                       App.touchplay.html('<i class="icon-play icon-white"></i> Play');
+               }
+               App.jplayer.jPlayer("unmute");
+               App.jplayer.jPlayer("play");
                App.updateUsers(data);
                //console.log(Date.now(), 'countdown started');
                App.cassetteAnimation(Date.now()+30000, true);
@@ -335,7 +343,13 @@ var App = {
                        $('#tape-left').css('left', offsetleft+'px');
                        $('#tape-right').css('left', offsetright+'px');
                }
-               $('#countdown').text((forward) ? secleft.toFixed(1) : Math.round(secleft));
+               if (forward) {
+                       $('#countdown').text(secleft.toFixed(1));
+                       if (App.touchplay) {App.elapsedtime = 30 - Math.round(secleft);}
+               }
+               else {
+                       $('#countdown').text(Math.round(secleft));
+               }
                if (App.stopanimation || millisleft < 50) {
                        //console.log(Date.now(), 'countdown stopped');
                        return;
@@ -345,6 +359,10 @@ var App = {
 
        // Add track info
        addTrackInfo: function(data) {
+               if (App.touchplay) {
+                       App.touchplay.removeClass("btn-success").addClass("btn-danger disabled");
+                       App.touchplay.html('<i class="icon-play icon-white"></i> Wait');
+               }
                App.cassetteAnimation(Date.now()+5000, false);
                var html = '<li class="bordered"><img class="artwork" src="'+data.artworkUrl+'"/>';
                html += '<div class="info"><div class="artist">'+data.artistName+'</div>';
@@ -410,7 +428,7 @@ var App = {
        // Let the user know when he / she has disconnected
        disconnect: function() {
                App.stopanimation = true;
-               $('#player').jPlayer("stop");
+               App.jplayer.jPlayer("stop");
                var errormsg = "ERROR: You have disconnected.";
                var errorspan = $("<span class='error'></span>");
                errorspan.text(errormsg);
@@ -512,7 +530,7 @@ var App = {
 
                        handleIcon(volume);
                        oldvalue = volume;
-                       $("#player").jPlayer("volume", volume); 
+                       App.jplayer.jPlayer("volume", volume);  
                };
 
                volumebutton.hover(function() {
@@ -548,7 +566,7 @@ var App = {
                        if (!clicked) {
                                clicked = true;
                                if (oldvalue !== 0) {
-                                       $("#player").jPlayer("volume", 0);
+                                       App.jplayer.jPlayer("volume", 0);
                                        positionVolumeHandle(0);
                                        handleIcon(0);
                                }
@@ -556,7 +574,7 @@ var App = {
                        else {
                                clicked = false;
                                if (oldvalue !== 0) {
-                                       $("#player").jPlayer("volume", oldvalue);
+                                       App.jplayer.jPlayer("volume", oldvalue);
                                        positionVolumeHandle(oldvalue);
                                        handleIcon(oldvalue);
                                }
@@ -578,12 +596,26 @@ var App = {
                }
                App.socket = io.connect("http://binb.nodejitsu.com/", {'reconnect':false});
                App.socket.on("connect", function() {
-                       $("#player").jPlayer({
+                       App.jplayer = $("#player").jPlayer({
                                ready: function() {
                                        App.setNickName();
                                        if (!$.jPlayer.platform.mobile && !$.jPlayer.platform.tablet) {
                                                App.addVolumeControl();
                                        }
+                                       else {
+                                               var touchbackdrop = $('<div id="touch-backdrop">'+
+                                                       '<button id="touch-play" class="btn btn-danger disabled">'+
+                                                               '<i class="icon-play icon-white"></i> Wait'+
+                                                       '</button></div>').appendTo("#cassette");
+                                               App.touchplay = $('#touch-play');
+                                               App.touchplay.click(function() {
+                                                       if (!$(this).hasClass("btn-danger")) {
+                                                               App.touchplay = null;
+                                                               App.jplayer.jPlayer('play', App.elapsedtime);
+                                                               touchbackdrop.remove();
+                                                       }
+                                               });
+                                       }
                                },
                                swfPath: "/static/swf/",
                                supplied: "m4a",