Skip to content

Commit

Permalink
Improve code for renderer metadata display
Browse files Browse the repository at this point in the history 
- Consolidate redundant code so spotify and deezer can use the same css and js
- Some fixes for layout and position of the buttons
  • Loading branch information
@moodeaudio
moodeaudio committed Dec 4, 2024
1 parent 01983fc commit c7d073e
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 104 deletions.
18 changes: 8 additions & 10 deletions www/css/media.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;}
Expand Down Expand Up @@ -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);}
Expand Down
25 changes: 9 additions & 16 deletions www/css/panels.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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,
Expand Down
6 changes: 2 additions & 4 deletions www/header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down
3 changes: 1 addition & 2 deletions www/inc/renderer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' : '';
Expand Down
123 changes: 51 additions & 72 deletions www/js/playerlib.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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':
Expand Down Expand Up @@ -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') {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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') {
Expand All @@ -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') {
Expand Down Expand Up @@ -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>';
Expand All @@ -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 {
Expand All @@ -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
Expand Down

0 comments on commit c7d073e

Please sign in to comment.