Switch getSongList()/listsongs to return json only and generate html in javascript

This commit is contained in:
Junior 2025-04-18 10:53:04 -04:00
parent 8f23b77ace
commit 70886bacba
3 changed files with 37 additions and 12 deletions

View File

@ -31,9 +31,9 @@ system("HOME=" . WEBUSERHOMEDIR . " && ../scripts/homeaudio_togglemute.pl -show"
$data['muted'] = ($retval == 0) ? false : true; $data['muted'] = ($retval == 0) ? false : true;
$data['currentsong'] = array("art"=>"", "title"=>"", "artist"=>"", "album"=>"", "year"=>""); $data['currentsong'] = array("art"=>"", "title"=>"", "artist"=>"", "album"=>"", "year"=>"");
$data['songhistory'] = array(); $data['songhistory'] = array();
$data['songlist'] = "";
if ( $row = $sth->fetch(PDO::FETCH_ASSOC) ) { if ( $row = $sth->fetch(PDO::FETCH_ASSOC) ) {
$song = new Song($row['songid']); $song = new Song($row['songid']);
$data['currentsong']["id"] = $song->getID();
$data['currentsong']["arturl"] = $song->getArtFile(ARTURL); $data['currentsong']["arturl"] = $song->getArtFile(ARTURL);
$data['currentsong']["title"] = $song->getTitle(HTMLSAFE); $data['currentsong']["title"] = $song->getTitle(HTMLSAFE);
$data['currentsong']["artist"] = $song->getArtist(HTMLSAFE); $data['currentsong']["artist"] = $song->getArtist(HTMLSAFE);
@ -43,21 +43,13 @@ if ( $row = $sth->fetch(PDO::FETCH_ASSOC) ) {
while ( $row = $sth->fetch() ) { while ( $row = $sth->fetch() ) {
$song = new Song($row['songid']); $song = new Song($row['songid']);
$curdata = array(); $curdata = array();
$curdata["id"] = $song->getID();
$curdata["arturl"] = $song->getArtFile(ARTURL); $curdata["arturl"] = $song->getArtFile(ARTURL);
$curdata["title"] = $song->getTitle(HTMLSAFE); $curdata["title"] = $song->getTitle(HTMLSAFE);
$curdata["artist"] = $song->getArtist(HTMLSAFE); $curdata["artist"] = $song->getArtist(HTMLSAFE);
$curdata["album"] = $song->getAlbum(HTMLSAFE); $curdata["album"] = $song->getAlbum(HTMLSAFE);
$curdata["year"] = $song->getYear(HTMLSAFE); $curdata["year"] = $song->getYear(HTMLSAFE);
$data['songhistory'][] = $curdata; $data['songhistory'][] = $curdata;
$data['songlist'] .= "<div class='songlist_song_container'>\n";
$data['songlist'] .= " <div class='songlist_img_container'><img class='songlist_img' src='{$song->getArtFile(ARTURL)}'></div>\n";
$data['songlist'] .= " <div class='songlist_details_container'>\n";
$data['songlist'] .= " <p class='nomargin'><span class='playing_label'>Title:</span> {$song->getTitle(HTMLSAFE)}</p>\n";
$data['songlist'] .= " <p class='nomargin'><span class='playing_label'>Artist:</span> {$song->getArtist(HTMLSAFE)}</p>\n";
$data['songlist'] .= " <p class='nomargin'><span class='playing_label'>Album:</span> {$song->getAlbum(HTMLSAFE)}</p>\n";
$data['songlist'] .= " </div>\n";
$data['songlist'] .= "</div>\n";
$data['songlist'] .= "<hr class='songlist'>\n";
} }
header('Content-Type: application/json'); header('Content-Type: application/json');

View File

@ -228,6 +228,12 @@ div.songlist_details_container {
margin-left: 0.25em; margin-left: 0.25em;
float: left; float: left;
} }
div.songlist_details_container p {
margin: 0px;
}
div.songlist_details_container span {
font-weight: bold;
}
hr.songlist { hr.songlist {
width: 65%; width: 65%;
} }

View File

@ -7,6 +7,7 @@ var gettingSongList = false;
var gettingJukeboxList = false; var gettingJukeboxList = false;
var searchTimeout = null; var searchTimeout = null;
var queueTarget = 0; var queueTarget = 0;
var paused = true;
$(document).ready(function() { $(document).ready(function() {
$('#tabs').tabs({ $('#tabs').tabs({
@ -57,7 +58,7 @@ $(document).ready(function() {
toggleMute($(this), 'show'); toggleMute($(this), 'show');
getSongList(); getSongList();
getQueueTarget(); getQueueTarget();
refreshTimerObj = setInterval('getSongList()', 10000); refreshTimerObj = setInterval('doIntervalQuery()', 10000);
//document.documentElement.requestFullscreen(); //document.documentElement.requestFullscreen();
}); });
@ -180,6 +181,32 @@ function updateChristmasButton(active) {
} }
} }
function doIntervalQuery() {
if ( paused ) return;
getSongList();
}
function togglePause() {
paused = !paused;
console.log("Paused: " + (paused) ? "True" : "False");
}
function generateSongListHTML(type, songs) {
var body = "";
songs.forEach(function(item, index, arr) {
body += "<div id='" + type + "_" + item.id + "' class='songlist_song_container'>";
body += "<div class='songlist_img_container'><img class='songlist_img' src='" + item.arturl + "' /></div>";
body += "<div class='songlist_details_container'>";
body += "<p><span>Title:</span> " + item.title + "</p>";
body += "<p><span>Artist:</span> " + item.artist + "</p>";
body += "<p><span>Album:</span> " + item.album + "</p>";
body += "</div>";
body += "</div>";
body += "<hr class='songlist'>";
});
return body;
}
function getSongList() { function getSongList() {
gettingSongList = true; gettingSongList = true;
$.ajax({ $.ajax({
@ -195,7 +222,7 @@ function getSongList() {
$('#playing_artist').html(data.currentsong.artist); $('#playing_artist').html(data.currentsong.artist);
$('#playing_album').html(data.currentsong.album); $('#playing_album').html(data.currentsong.album);
$('#playing_year').html(data.currentsong.year); $('#playing_year').html(data.currentsong.year);
$('#history_contents').html(data.songlist); $('#history_contents').html(generateSongListHTML("hist", data.songhistory));
updateChristmasButton(data.christmas); updateChristmasButton(data.christmas);
updateMuteButton(data.muted); updateMuteButton(data.muted);
$('#christmas_freq').val(data.christmasfreq); $('#christmas_freq').val(data.christmasfreq);