From: Luigi Pinca <luigipinca@gmail.com>
Date: Sun, 26 Feb 2012 15:48:52 +0000 (+0100)
Subject: added support for iOS devices
X-Git-Url: https://git.saalbach.dev/?a=commitdiff_plain;h=a22b9e18b387af7189f3ca29e37a1d6dc14ffcfd;p=binbsis50.git

added support for iOS devices
---

diff --git a/package.json b/package.json
index 493248a..f154bed 100644
--- 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 42bad21..9d89c76 100644
--- 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 8eac4f7..1adf825 100644
--- 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
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
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 35c769f..1cc49bc 100644
--- 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",