Add Mobiles links + select player when clicking on panel-heading (ins…

…tead of radios)
phpMyDomo · Oct 19, 2016 · 4a9d436 · 4a9d436
1 parent f5472dc
commit 4a9d436
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 32 deletions.
diff --git a/www/inc/lang/en/squeeze.php b/www/inc/lang/en/squeeze.php
@@ -49,8 +49,14 @@
 $lang['mute']			="Mute On/Off";
 
 
-// global ###################################################
-$lang['all_players']	="All Players";
+// Blocks ###################################################
+$lang['selected_player']="Selected Player";
+$lang['all_players']	="Global Controls";
+
+$lang['link_server']	="Local Server";
+$lang['link_ios']		="Launch IOS App.";
+$lang['link_android']	="Launch Android App.";
+
 
 $lang['g_mute_on']		="Muted";
 $lang['g_mute_off']		="Normal";
@@ -66,6 +72,5 @@
 $lang['g_shuffle_songs']	="Art.";
 $lang['g_shuffle_albums']	="Alb.";
 
-$lang['all_server']		="Server";
 
 ?>
diff --git a/www/inc/page/squeeze.php b/www/inc/page/squeeze.php
@@ -30,6 +30,7 @@ function Run(){
 
 		$data['players']=$this->_RequestPlayersFull();
 		$data['prefs']=$this->vars;
+		$data['agent']=$this->_DetectMobileBrowser();
 
 		// debug @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 		if($_GET['debugall']){
@@ -317,6 +318,17 @@ private function _ListSounds(){
 			$this->o_kernel->PageError(500,"The clock sound directory ($path_files) does not contain any .mp3 file.");			
 	}
 
+	//----------------------------------------------------------------------------------
+	private function _DetectMobileBrowser(){
+			$useragent=$_SERVER['HTTP_USER_AGENT'];
+			if(preg_match('#android#i', $useragent)){
+				return 'android';
+			}
+			if(preg_match('#iPhone|iPad|iPod|IOS#i', $useragent)){
+				return 'ios';
+			}
+	}
+
 
 } 
 ?>
diff --git a/www/inc/smarty/skins/default/pages/squeeze.tpl b/www/inc/smarty/skins/default/pages/squeeze.tpl
@@ -1,6 +1,5 @@
 {* ##################################################################################### *}
 {function MakePlayerTitle row=''}
-	<input type='radio' name='selectedPlayer' class="jsSelectedPlayer" value='{$row.f_jsid}'>
 	<div class="pull-right player_right">
 	{$my_item=$row.status.playlist_loop.{$row.status.playlist_cur_index}}
 		<span class='player_fulltitle'>
@@ -116,9 +115,9 @@ $(document).ready(function(){
 </script>
 
 {foreach from=$data.players item=row }
-		<div class="panel panel-info pmd_panel sqz_panel" id='jsPlayer_{$row.f_jsid}'>
+		<div class="panel panel-info pmd_panel pmd_panel_sqz jsSqzPlayer" id='jsPlayer_{$row.f_jsid}' data-jsid='{$row.f_jsid}'>
 			<div class="panel-heading">{MakePlayerTitle row=$row}</div>
-			<div class="panel-body jsSqzPlayer">
+			<div class="panel-body">
 {MakePlayer row=$row}
 			</div>	
 		</div>
@@ -137,19 +136,31 @@ https://github.com/Logitech/slimserver/blob/public/7.9/IR/Default.map
 {* All Block -------------------------------------------------- *}
 
 		<div class="panel panel-default block_right pmd_panel jsCurrentPlayer" id="block_sqz_current">
-			<div class="panel-heading text-center jsCurrentPlayerHead">Selected Player</div>
+			<div class="panel-heading text-center jsCurrentPlayerHead">{$l.selected_player}</div>
 			<div class="panel-body-full jsCurrentPlayerBody">
 			
 			</div>
 		</div>
 
 
+		<div class="pmd_panel block_right" id="block_sqz_links">
+			<div class="panel-body-full">
+			<ul class="list-group">
+{if $data.agent !='ios'}
+    			<li class="list-group-item"><a class="btn btn-sm btn-info btn-block" target="_blank" href="market://search?q=pname:com.logitech.squeezeboxremote"><i class='fa fa-fw fa-android'></i> {$l.link_android}</a></li>
+{/if}
+{if $data.agent !='android'}
+				<li class="list-group-item"><a  class="btn btn-sm btn-info btn-block" target="_blank" href="https://itunes.apple.com/fr/app/logitech-squeezebox-controller/id431302899?mt=8"><i class='fa fa-fw fa-apple'></i> {$l.link_ios}</a></li>
+{/if}
+				<li class="list-group-item"><a  class="btn btn-sm btn-info btn-block" target="_blank" href="{$data.prefs.url_server}" target='_blank'><i class='fa fa-fw fa-exchange'></i> {$l.link_server}</a></i>
+			</ul>
+			</div>
+		</div>
 
-		<div class="panel panel-default block_right pmd_panel" id="block_sqz_all">
+
+		<div id="block_all_players" class="text-center">
 			<div class="panel-heading text-center">{$l.all_players}</div>
-		</div>
 
-		<div id="block_all_players">
 			<div class="but_all but_all_transport">
 				<div class="btn-group" role="group">
 					{MakeButton id='ALL' mode='play'	txt='&nbsp;'}
@@ -197,11 +208,5 @@ https://github.com/Logitech/slimserver/blob/public/7.9/IR/Default.map
 
 
 
-
-		<div class="panel panel-default block_right pmd_panel" id="block_sqz_server">
-			<div class="panel-heading text-center"><a href="{$data.prefs.url_server}" target='_blank'>{$l.all_server}</a></div>
-		</div>
-
-
 {/capture}
 {include file="{$p.template}/layout.tpl"}
diff --git a/www/static/global/css/main.css b/www/static/global/css/main.css
@@ -290,7 +290,7 @@ html, body {
 	text-align: right;
 	padding-right: 4px;
 	font-size: 14px;
-	white-space: nowrap;
+	/*white-space: nowrap;*/
 	font-weight: bold;
 	color: #333;
 }
@@ -955,10 +955,10 @@ html, body {
 
 /* @group Page Squeeze 
 ----------------------------------------------------------------- */
-#body_squeeze .sqz_panel .panel-heading{
+#body_squeeze .pmd_panel_sqz .panel-heading{
 	overflow: hidden;
 }
-#body_squeeze .sqz_panel .player_right{
+#body_squeeze .pmd_panel_sqz .player_right{
 	text-align: right;
 }
 #body_squeeze .player_radio{
@@ -971,39 +971,47 @@ html, body {
 	font-size: 9px;
 	text-transform: uppercase;
 }
-#body_squeeze .sqz_panel .player_links{
+
+
+#body_squeeze .pmd_panel_sqz .player_links{
 	margin-left: 10px;
 }
-#body_squeeze .sqz_panel .player_artist{
+#body_squeeze .pmd_panel_sqz .player_artist{
 	margin-right: 3px;
 }
-#body_squeeze .sqz_panel .player_title{
+#body_squeeze .pmd_panel_sqz .player_title{
 	margin-left: 3px;
 	font-style: italic;
 }
-#body_squeeze .sqz_panel .player_duration{
+#body_squeeze .pmd_panel_sqz .player_duration{
 	margin-left: 5px;
 }
 
-#body_squeeze .sqz_panel .player_links A{
+#body_squeeze .pmd_panel_sqz .player_links A{
 	margin-left: 5px;
 }
 
-#body_squeeze .sqz_panel .but_player{
+#body_squeeze .pmd_panel_sqz .but_player{
 	display: inline-block;
 	margin-right: 20px;
 	white-space: nowrap;
 	overflow: hidden;
 	margin-bottom: 8px;
 }
-#body_squeeze .sqz_panel .player_volume{
+#body_squeeze .pmd_panel_sqz .player_volume{
 	display: inline-block;
 	width: 30px;
 	text-align: center;
 	vertical-align: middle;
 	font-size: 14px;
 }
 
+#body_squeeze .pmd_panel_sqz.jsSelected{
+	border: 1px solid rgba(0,0,0,0.3);
+}
+
+
+
 #body_squeeze #block_all_players .but_all{
 	margin-bottom: 20px;
 }

diff --git a/www/static/global/js/squeeze.js b/www/static/global/js/squeeze.js
@@ -2,10 +2,15 @@
 jQuery( document ).ready(function() {
 
 	/* ----- Slected Player ------------------ */
-	$('.jsSelectedPlayer').on('change', function(){
-			selected_player_jsid=$(this).filter(':checked').val();
+	$('.jsSqzPlayer .panel-heading').on('click', function(){
+			var panel=$(this).closest('.jsSqzPlayer');
+			selected_player_jsid=panel.attr('data-jsid');
+			$('.jsSqzPlayer').removeClass('jsSelected');
+			panel.addClass('jsSelected');
 			var player_name = $('#jsPlayer_'+selected_player_jsid).find('.player_name').html();
 	  		$('.jsCurrentPlayer .jsCurrentPlayerHead').html(player_name);
+	  		$('.jsCurrentPlayer .jsCurrentPlayerBody').html('');
+
 	});
 	$('.jsSelectedPlayer:checked').trigger('change');
 
@@ -16,8 +21,6 @@ jQuery( document ).ready(function() {
 		var id	=$(this).attr('data-id');
 		var v1	=$(this).attr('data-v1');
 		var v2	=$(this).attr('data-v2');
-		var id_player=$(this).closest('.jsSqzPlayer');
-		var volume=parseInt(id_player.find('.jsSqzVolume').html());
 		var do_reload=true;
 		if(type=='cue'){
 			SqzSetCue(v1,v2);
@@ -28,6 +31,9 @@ jQuery( document ).ready(function() {
 			return;
 		}
 		if(v1=='voldown' || v1=='volup'){
+			var id_player=$(this).closest('.jsSqzPlayer');
+			var volume=parseInt(id_player.find('.jsSqzVolume').html());
+
 			v2=parseInt(v2);
 			if(v1=='voldown'){
 				volume=volume - v2;

diff --git a/www/static/skins/black/css/skin.css b/www/static/skins/black/css/skin.css
@@ -1,5 +1,6 @@
 /* @override 
 	http://domo.lo.lo/static/skins/black/css/skin.css
+	http://domodev.lo.lo/static/skins/black/css/skin.css
 	http://domodev.dev.440net.net/static/skins/black/css/skin.css
 */
 
@@ -36,8 +37,12 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2d30', end
 
 
 }
-#body_home .block_right .panel-body-full{
-	background-color: #000;
+.block_right .panel-body,
+.block_right .panel-body-full{
+}
+.block_right .list-group .list-group-item{
+	background: none;
+	border-color: #000;
 }
 
 .pmd_panel .panel-body,
@@ -79,9 +84,14 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2d30', end
 	border-color: #000;
 }
 
+
 #body_squeeze .player_radio{
 	text-shadow: none;
 	color: #000;
 	background-color: rgba(255,255,255,0.09);
 }
+#body_squeeze .pmd_panel_sqz.jsSelected{
+	border: 1px solid rgba(255,255,255,0.2);
+	background-color: rgb(20,20,21);
+}