Improve code for renderer metadata display

moodeaudio · moodeaudio · commit c7d073eb980f · 2024-12-04T18:49:00.000-05:00
- Consolidate redundant code so spotify and deezer can use the same css and js
- Some fixes for layout and position of the buttons
diff --git a/www/css/media.css b/www/css/media.css
@@ -123,11 +123,9 @@ body {
 
 	/* Renderer active overlays: Text and button */
 	#inpsrc-indicator {font-size:3.5em;}
-	#inpsrc-msg {top:70%;width:100%}
-	#inpsrc-spotmeta,
-	#inpsrc-deezmeta {position:relative;margin-bottom:3em;}
-	.inpsrc-spotmeta-backdrop,
-	.inpsrc-deezmeta-backdrop {height:auto;}
+	#inpsrc-msg {top:50%;width:100%}
+	#inpsrc-metadata {position:relative;}
+	.inpsrc-metadata-backdrop {height:auto;}
 
 	/* Shutdown, Restart, Reconnect */
 	.reconnect-btn {font-size:2em;}
@@ -358,11 +356,11 @@ body {
 
 	/* Renderer active overlays: Text and button */
 	#inpsrc-indicator {font-size:2.85em;}
-	#inpsrc-spotmeta,
-	#inpsrc-deezmeta {font-size:.5em;}
-	#inpsrc-msg i,
-	#inpsrc-spotmeta-refresh i,
-	#inpsrc-deezmeta-refresh i {font-size:1.25em;}
+	#inpsrc-metadata {font-size:.5em;}
+	#inpsrc-metadata-refresh {padding-bottom:calc(.5em + env(safe-area-inset-bottom));}
+	#inpsrc-metadata-refresh i,
+	#inpsrc-msg i {font-size:1.25em;}
+
 	/* For the configs */
 	#panel-header,
 	.container {margin-left:calc(env(safe-area-inset-left) + 1rem);}
diff --git a/www/css/panels.css b/www/css/panels.css
@@ -90,23 +90,19 @@ html {background-color:inherit;}
 .inpsrc {position:fixed;z-index:9999;backdrop-filter: blur(5px);-webkit-backdrop-filter:blur(5px);overflow:hidden;color:var(--adapttext);background-color:var(--modalbkdr);display:none;}
 #inpsrc-indicator {font-size:1.85em;width:100vw;height:100vh;text-align:center;}
 /* Input source name */
-#inpsrc-msg {animation:fadeIn var(--fadein-rate);}
+#inpsrc-msg {animation:fadeIn var(--fadein-rate);padding-bottom:.5em;}
 .inpsrc-msg-default {padding:0;margin:0;transform:translate(-50%, -50%);top:50%;left:50%;position:fixed;width:100%;}
-.inpsrc-msg-spotify {position:absolute;bottom:0;z-index:9999;}
+.inpsrc-msg-metadata {position:absolute;bottom:0;z-index:9999;}
 #inpsrc-msg a,
-#inpsrc-spotmeta-refresh a,
-#inpsrc-deezmeta-refresh a {color:#eee;}
+#inpsrc-metadata-refresh a {color:#eee;}
 #inpsrc-msg i,
-#inpsrc-spotmeta-refresh i,
-#inpsrc-deezmeta-refresh i {font-size:1.5em;}
+#inpsrc-metadata-refresh i {font-size:1.5em;}
 #inpsrc-msg-text {display:block;font-size:1em;margin-bottom:0.5em;}
 /* Volume control */
 #inpsrc-preamp-volume, #multiroom-receiver-volume {font-size:.7em !important;}
 /* Spotify backdrop cover and metadata */
-.inpsrc-spotmeta-backdrop,
-.inpsrc-deezmeta-backdrop {height:calc(88vh - .5rem);}
-#inpsrc-spotmeta,
-#inpsrc-deezmeta {
+.inpsrc-metadata-backdrop {height:calc(88vh - .5rem);}
+#inpsrc-metadata {
 	position:absolute;
 	display:block;
 	height: 12vh;
@@ -117,19 +113,16 @@ html {background-color:inherit;}
 	font-weight:500;
 	background:linear-gradient(to right, rgba(64,64,64,0.5), rgba(0,0,0,1) 50%, rgba(64,64,64,.5));
 }
-#inpsrc-spotmeta span,
-#inpsrc-deezmeta span {font-size:.75em;font-weight:400;}
-#inpsrc-spotmeta-refresh,
-#inpsrc-deezmeta-refresh {position:absolute;bottom:0;z-index:9999;right:0;float:right;}
+#inpsrc-metadata span {font-size:.75em;font-weight:400;}
+#inpsrc-metadata-refresh {position:absolute;bottom:0;z-index:9999;right:0;float:right;}
 
 /* Buttons */
 .audioinfo-renderer,
 .configure-renderer,
 .disconnect-renderer,
 .turnoff-renderer,
 .turnoff-receiver {border-radius:5rem;background-color:var(--btnshade4);margin:0.2em 1vw;padding:0.5rem 0;font-size:.7em;width:10em;color:inherit;}
-.spotify-renderer,
-.deezer-renderer {border-radius:5rem;background-color:transparent;padding:1em 0;font-size:.6em;width:3em;color:inherit;}
+.renderer-btn {border-radius:5rem;background-color:transparent;padding:1em 0;font-size:.6em;width:3em;color:inherit;}
 
  /* Mask hover effect */
 .audioinfo-renderer:hover,
diff --git a/www/header.php b/www/header.php
@@ -143,10 +143,8 @@
     <div id="inpsrc-indicator" class="inpsrc">
         <div id="inpsrc-backdrop"></div>
         <div id="inpsrc-msg" class="inpsrc-msg-default"></div>
-        <div id="inpsrc-spotmeta"></div>
-        <div id="inpsrc-spotmeta-refresh"></div>
-        <div id="inpsrc-deezmeta"></div>
-        <div id="inpsrc-deezmeta-refresh"></div>
+        <div id="inpsrc-metadata"></div>
+        <div id="inpsrc-metadata-refresh"></div>
     </div>
 
 	<!-- HEADER -->
diff --git a/www/inc/renderer.php b/www/inc/renderer.php
@@ -169,8 +169,7 @@ function startDeezer() {
 	}
 
 	// Output device
-	// NOTE: Specifying Loopback instead of _audioout when Multiroom TX is On greatly reduces audio glitches
-	$device = $_SESSION['audioout'] == 'Local' ? ($_SESSION['multiroom_tx'] == 'On' ? 'plughw:Loopback,0' : '_audioout') : 'btstream';
+	$device = $_SESSION['audioout'] == 'Local' ? '_audioout' : 'btstream';
 
 	// Options
 	$volume_normalization = $cfgDeezer['normalize_volume'] == 'Yes' ? ' --normalize-volume' : '';
diff --git a/www/js/playerlib.js b/www/js/playerlib.js
@@ -549,31 +549,26 @@ function engineCmd() {
                     break;
                 case 'spotactive1':
                 case 'spotactive0':
-    				inpSrcIndicator(cmd[0],
-                        '<span id="inpsrc-msg-text">Spotify Active</span>' +
-                        '<button class="btn spotify-renderer disconnect-spotify" data-job="spotifysvc"><i class="fa-regular fa-sharp fa-xmark"></i></button>' +
-                        receiversBtn(cmd[0]) +
-                        audioInfoBtn(cmd[0]) +
-                        '<a id="inpsrc-spotify-refresh" class="btn spotify-renderer" href="javascript:refreshSpotmeta()"><i class="fa-regular fa-sharp fa-redo"></i></a>'
-                    );
-                    $('#inpsrc-spotmeta-refresh').html('');
-                    break;
-                case 'update_spotmeta':
-                    updateSpotmeta(cmd[1]);
-                    break;
                 case 'deezactive1':
                 case 'deezactive0':
-    				inpSrcIndicator(cmd[0],
-                        '<span id="inpsrc-msg-text">Deezer Active</span>' +
-                        '<button class="btn deezer-renderer disconnect-deezer" data-job="deezersvc"><i class="fa-regular fa-sharp fa-xmark"></i></button>' +
+                    var rendererName = cmd[0].includes('spot') ? 'spotify' : 'deezer';
+                    inpSrcIndicator(cmd[0],
+                        '<span id="inpsrc-msg-text">' +
+                        rendererName.charAt(0).toUpperCase() + rendererName.slice(1) +
+                        ' Active</span>' +
+                        '<button class="btn renderer-btn disconnect-' +
+                        rendererName +
+                        '" data-job="' +
+                        rendererName + 'svc"><i class="fa-regular fa-sharp fa-xmark"></i></button>' +
                         receiversBtn(cmd[0]) +
                         audioInfoBtn(cmd[0]) +
-                        '<a id="inpsrc-deezer-refresh" class="btn deezer-renderer" href="javascript:refreshDeezmeta()"><i class="fa-regular fa-sharp fa-redo"></i></a>'
+                        rendererRefreshBtn()
                     );
-                    $('#inpsrc-deezmeta-refresh').html('');
+                    $('#inpsrc-metadata-refresh').html('');
                     break;
+                case 'update_spotmeta':
                 case 'update_deezmeta':
-                    updateDeezmeta(cmd[1]);
+                    updateInpsrcMeta(cmd[0], cmd[1]); // cmd[1]: metadata
                     break;
                 case 'slactive1':
                 case 'slactive0':
@@ -750,9 +745,10 @@ function engineCmdLite() {
 
 function inpSrcIndicator(cmd, msgText) {
 	UI.currentFile = 'blank';
-    $('#inpsrc-msg').removeClass('inpsrc-msg-spotify');
+    $('#inpsrc-msg').removeClass('inpsrc-msg-metadata');
     $('#inpsrc-msg').addClass('inpsrc-msg-default');
-    $('#inpsrc-spotmeta').html('');
+    $('#inpsrc-msg').css({width:'100%', top:'50%', bottom:'unset'});
+    $('#inpsrc-metadata').hide();
 
     // Set custom backdrop (if any)
     if (SESSION.json['renderer_backdrop'] == 'Yes') {
@@ -783,64 +779,37 @@ function inpSrcIndicator(cmd, msgText) {
 	}
 }
 
-function refreshSpotmeta() {
-    $.getJSON('command/renderer.php?cmd=get_spotmeta', function(data) {
-        updateSpotmeta(data);
+function refreshInpsrcMeta() {
+    cmd = SESSION.json['spotactive'] == '1' ? 'get_spotmeta' : 'get_deezmeta';
+    $.getJSON('command/renderer.php?cmd=' + cmd, function(data) {
+        updateInpsrcMeta(cmd, data);
     });
 }
-function updateSpotmeta(data) {
+function updateInpsrcMeta(cmd, data) {
     $('#inpsrc-msg').removeClass('inpsrc-msg-default');
-    $('#inpsrc-msg').addClass('inpsrc-msg-spotify');
+    $('#inpsrc-msg').addClass('inpsrc-msg-metadata');
     $('#inpsrc-msg-text').text('');
 
     $('#inpsrc-backdrop').css('filter', 'blur(0px)');
     $('#inpsrc-backdrop').css('transform', 'scale(1.0)');
 
-    // data = title;artists;album;duration;coverurl (note duration is in ms)
-    //DEBUG:console.log(data);
+    // Spotify: title;artists;album;duration;coverurl (duration is in ms)
+    // Deezer:  title;artist;album;duration;coverurl (duration is in secs)
     var metadata = data.split(';');
-    $('#inpsrc-backdrop').html('<img class="inpsrc-spotmeta-backdrop" ' + 'src="' + metadata[4] + '">');
-    $('#inpsrc-spotmeta').html(
-        metadata[0] + ' (' + formatSongTime(Math.round(parseInt(metadata[3]) / 1000)) + ')' +
-        '<br>' + '<span>' + metadata[1] + '<br>' + metadata[2] + '</span>'
-    );
-
-    if (window.matchMedia("(orientation: portrait)").matches) {
-        $('#inpsrc-spotmeta-refresh').html('');
-    } else {
-        $('#inpsrc-spotify-refresh').html('');
-        $('#inpsrc-spotmeta-refresh').html('<a class="btn spotify-renderer" href="javascript:refreshSpotmeta()"><i class="fa-regular fa-sharp fa-redo"></i></a>');
-    }
-}
+    var timeDivisor = (cmd == 'get_spotmeta' || cmd == 'update_spotmeta') ? 1000 : 1;
 
-function refreshDeezmeta() {
-    $.getJSON('command/renderer.php?cmd=get_deezmeta', function(data) {
-        updateDeezmeta(data);
-    });
-}
-function updateDeezmeta(data) {
-    $('#inpsrc-msg').removeClass('inpsrc-msg-default');
-    $('#inpsrc-msg').addClass('inpsrc-msg-spotify');
-    $('#inpsrc-msg-text').text('');
-
-    $('#inpsrc-backdrop').css('filter', 'blur(0px)');
-    $('#inpsrc-backdrop').css('transform', 'scale(1.0)');
-
-    // data = title;artist;album;duration;coverurl (note duration is in secs)
-    //DEBUG:console.log(data);
-    var metadata = data.split(';');
-    $('#inpsrc-backdrop').html('<img class="inpsrc-deezmeta-backdrop" ' + 'src="' + metadata[4] + '">');
-    $('#inpsrc-deezmeta').html(
-        metadata[0] + ' (' + formatSongTime(Math.round(parseInt(metadata[3]))) + ')' +
+    $('#inpsrc-backdrop').html('<img class="inpsrc-metadata-backdrop" ' + 'src="' + metadata[4] + '">');
+    $('#inpsrc-metadata').html(
+        metadata[0] + ' (' + formatSongTime(Math.round(parseInt(metadata[3]) / timeDivisor)) + ')' +
         '<br>' + '<span>' + metadata[1] + '<br>' + metadata[2] + '</span>'
     );
 
-    if (window.matchMedia("(orientation: portrait)").matches) {
-        $('#inpsrc-deezmeta-refresh').html('');
-    } else {
-        $('#inpsrc-deezer-refresh').html('');
-        $('#inpsrc-deezmeta-refresh').html('<a class="btn deezer-renderer" href="javascript:refreshDeezmeta()"><i class="fa-regular fa-sharp fa-redo"></i></a>');
-    }
+    inpSrcMetaRefreshBtn();
+
+    $('#inpsrc-metadata').show();
+    // Add !important ?
+    $('#inpsrc-msg').css({width:'unset', top:'unset', bottom:'0', 'margin-bottom':'calc(.5em + env(safe-area-inset-bottom))'});
+    $('#inpsrc-metadata-refresh').css('padding-bottom', 'calc(.5em + env(safe-area-inset-bottom)');
 }
 
 // Show/hide CoverView screen saver
@@ -1407,13 +1376,13 @@ function renderUI() {
     	if (SESSION.json['spotactive'] == '1') {
             inpSrcIndicator('spotactive1',
                 '<span id="inpsrc-msg-text">Spotify Active</span>' +
-                '<button class="btn spotify-renderer disconnect-spotify" data-job="spotifysvc"><i class="fa-regular fa-sharp fa-xmark"></i></button>' +
+                '<button class="btn renderer-btn disconnect-spotify" data-job="spotifysvc"><i class="fa-regular fa-sharp fa-xmark"></i></button>' +
                 receiversBtn('spotactive1') +
                 audioInfoBtn('spotactive1') +
-                '<a id="inpsrc-spotify-refresh" class="btn spotify-renderer" href="javascript:refreshSpotmeta()"><i class="fa-regular fa-sharp fa-redo"></i></a>'
+                rendererRefreshBtn()
             );
 
-            refreshSpotmeta();
+            refreshInpsrcMeta();
     	}
         // Deezer Connect renderer
     	if (SESSION.json['deezactive'] == '1') {
@@ -1422,10 +1391,10 @@ function renderUI() {
                 '<button class="btn deezer-renderer disconnect-deezer" data-job="deezersvc"><i class="fa-regular fa-sharp fa-xmark"></i></button>' +
                 receiversBtn('deezactive1') +
                 audioInfoBtn('deezactive1') +
-                '<a id="inpsrc-deezer-refresh" class="btn deezer-renderer" href="javascript:refreshDeezmeta()"><i class="fa-regular fa-sharp fa-redo"></i></a>'
+                rendererRefreshBtn()
             );
 
-            refreshDeezmeta();
+            refreshInpsrcMeta();
     	}
     	// Squeezelite renderer
     	if (SESSION.json['slactive'] == '1') {
@@ -1472,7 +1441,7 @@ function receiversBtn(rendererActive = '') {
     if (SESSION.json['multiroom_tx'] == 'On') {
         if (rendererActive == 'spotactive1') {
             // data-cmd: multiroom_rx_modal (full modal), multiroom_rx_modal_limited (just the on/off checkbox)
-            var html = '<span class="context-menu"><a class="btn spotify-renderer" href="#notarget" data-cmd="multiroom_rx_modal"><i class="fa-regular fa-sharp fa-speakers"></i></a></span>';
+            var html = '<span class="context-menu"><a class="btn renderer-btn" href="#notarget" data-cmd="multiroom_rx_modal"><i class="fa-regular fa-sharp fa-speakers"></i></a></span>';
         } else if (rendererActive == 'deezactive1') {
             // data-cmd: multiroom_rx_modal (full modal), multiroom_rx_modal_limited (just the on/off checkbox)
             var html = '<span class="context-menu"><a class="btn deezer-renderer" href="#notarget" data-cmd="multiroom_rx_modal"><i class="fa-regular fa-sharp fa-speakers"></i></a></span>';
@@ -1488,7 +1457,7 @@ function receiversBtn(rendererActive = '') {
 // Audio info
 function audioInfoBtn(rendererActive = '') {
     if (rendererActive == 'spotactive1') {
-        var html = '<span><a class="btn spotify-renderer" href="javascript:audioInfoPlayback()"><i class="fa-regular fa-sharp fa-music"></i></a></span>';
+        var html = '<span><a class="btn renderer-btn" href="javascript:audioInfoPlayback()"><i class="fa-regular fa-sharp fa-music"></i></a></span>';
     } else if (rendererActive == 'deezactive1') {
         var html = '<span><a class="btn deezer-renderer" href="javascript:audioInfoPlayback()"><i class="fa-regular fa-sharp fa-music"></i></a></span>';
     } else {
@@ -1498,6 +1467,16 @@ function audioInfoBtn(rendererActive = '') {
     return html;
 }
 
+function rendererRefreshBtn() {
+    html = '<span id="renderer-refresh-btn"><a class="btn renderer-btn" href="javascript:refreshInpsrcMeta()"><i class="fa-regular fa-sharp fa-redo"></i></a></span';
+    return html;
+}
+
+function inpSrcMetaRefreshBtn() {
+    $('#renderer-refresh-btn').html('');
+    $('#inpsrc-metadata-refresh').html('<span><a class="btn renderer-btn" href="javascript:refreshInpsrcMeta()"><i class="fa-regular fa-sharp fa-redo"></i></a></span');
+}
+
 // Generate search url
 function genSearchUrl (artist, title, album) {
     // Search disabled by user

Original file line number	Diff line number	Diff line change
`@@ -169,8 +169,7 @@ function startDeezer() {`
`169`	`169`	`}`
`170`	`170`
`171`	`171`	`// Output device`
`172`		`- // NOTE: Specifying Loopback instead of _audioout when Multiroom TX is On greatly reduces audio glitches`
`173`		`- $device = $_SESSION['audioout'] == 'Local' ? ($_SESSION['multiroom_tx'] == 'On' ? 'plughw:Loopback,0' : '_audioout') : 'btstream';`
	`172`	`+ $device = $_SESSION['audioout'] == 'Local' ? '_audioout' : 'btstream';`
`174`	`173`
`175`	`174`	`// Options`
`176`	`175`	`$volume_normalization = $cfgDeezer['normalize_volume'] == 'Yes' ? ' --normalize-volume' : '';`