hawk / commit
Consolidated templating code, removed some old code, made "no song currently playing" into a template as well.
public/index.html | 30 +++++++++--------------------- public/js/controls.js | 17 +++++++++-------- public/js/main.js | 13 +++++-------- public/js/template.js | 6 ++++++ 4 files changed, 29 insertions(+), 37 deletions(-) diff --git a/public/index.html b/public/index.html index 49f3bb2..335ab13 100644 --- a/public/index.html +++ b/public/index.html @@ -119,7 +119,7 @@ <div id="footer"> <button id="signout" class="signedin" onclick="signOut()">Sign Out</button> <button id="clear-cache" class="signedin" onclick="clearDb()">Clear Cache</button> - <div id="updated-info"> + <div id="info"> </div> <div> <a href="https://gitlab.com/PavelSafronov/hawk" target="_blank">Source</a> @@ -165,25 +165,6 @@ <span>${artist}</span> </span> </div> - - <!-- <div> - <button onclick="playChosenSong('${name}', '${trackId}')"> - <span class="icon-and-label"> - <span class="material-symbols-outlined"> - play_arrow - </span> - <span>Play</span> - </span> - </button> - <button onclick="window.open('${trackHref}')"> - <span class="icon-and-label"> - <span class="material-symbols-outlined"> - link - </span> - <span>Open</span> - </span> - </button> - </div> --> </div> </template> <template id="playing-song"> @@ -227,12 +208,19 @@ </div> </div> </template> - <template id="updatedInfoTemplate"> + <template id="app-info"> <div> Last updated on <a href="https://gitlab.com/PavelSafronov/hawk/-/commit/${version}" target="_blank">${updated}</a> </div> </template> + <template id="no-song-playing"> + <div> + <span> + Nothing playing + </span> + </div> + </template> <!-- SCRIPTS --> <script src="gen/version.js"></script> diff --git a/public/js/controls.js b/public/js/controls.js index 79f3bcd..073bac4 100644 --- a/public/js/controls.js +++ b/public/js/controls.js @@ -46,8 +46,7 @@ async function searchForMatch() { const images = album.images; let smallestImage = images[images.length - 1]; const albumArtUrl = smallestImage.url; - const songItem = document.querySelector('#found-song-item'); - const html = interpolate(songItem.innerHTML, { + const params = { name: track.name, album: track.album.name, artist: track.artists[0].name, @@ -56,7 +55,9 @@ async function searchForMatch() { albumArtUrl: albumArtUrl, trackId: track.id, trackHref: track.external_urls.spotify - }); + }; + + const html = createTemplatedHtml('found-song-item', params); resultsDiv.innerHTML += html; }); } @@ -132,7 +133,7 @@ async function setCurrentPlayingSong() { const currentTrack = await getPlayingTrack(); let html; if (!currentTrack) { - html = 'Nothing playing'; + html = createTemplatedHtml('no-song-playing', {}) } else { const album = currentTrack.item.album; const item = currentTrack.item; @@ -144,9 +145,7 @@ async function setCurrentPlayingSong() { const songUrl = item.external_urls.spotify; const progress = formatDuration(currentTrack.progress_ms); const totalDuration = formatDuration(item.duration_ms); - - const songItem = document.querySelector('#playing-song'); - html = interpolate(songItem.innerHTML, { + const params = { name: name, artist: album.artists[0].name, album: album.name, @@ -155,7 +154,9 @@ async function setCurrentPlayingSong() { progressPercent: progressPercent, progress: progress, duration: totalDuration - }); + }; + + html = createTemplatedHtml('playing-song', params) } currentSongSpan.innerHTML = html; } diff --git a/public/js/main.js b/public/js/main.js index 204af60..064102b 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -5,14 +5,11 @@ if (isLocal) { } // set version and updated info -const updateInfoDiv = document.getElementById("updated-info"); -const updateInfoTemplate = document.querySelector("#updatedInfoTemplate"); -if (updateInfoTemplate) { - updateInfoDiv.innerHTML = interpolate(updateInfoTemplate.innerHTML, { - version: hawkInfo.version, - updated: hawkInfo.updated - }); -} +const params = { + version: hawkInfo.version, + updated: hawkInfo.updated +}; +document.getElementById("info").innerHTML = createTemplatedHtml('app-info', params) // handle redirect from Spotify const urlParams = new URLSearchParams(window.location.search); diff --git a/public/js/template.js b/public/js/template.js index a77573f..ce973fd 100644 --- a/public/js/template.js +++ b/public/js/template.js @@ -16,4 +16,10 @@ function htmlToElement(html) { html = html.trim(); // Never return a text node of whitespace as the result template.innerHTML = html; return template.content.firstChild; +} + +function createTemplatedHtml(templateId, params) { + const template = document.querySelector(`#${templateId}`); + const html = interpolate(template.innerHTML, params); + return html; } \ No newline at end of file