hawk / commit
Minor refactoring, changed the font size to be em, instead of px. Added borders around returned songs. Made divs and other elements a bit more balanced.
public/index.html | 48 +++++++++++++++++++++---------------------- public/main.js | 61 ++++++++++++++++++++++++++++++------------------------- public/style.css | 27 +++++++++++++++--------- 3 files changed, 74 insertions(+), 62 deletions(-) diff --git a/public/index.html b/public/index.html index a383007..628086d 100644 --- a/public/index.html +++ b/public/index.html @@ -18,7 +18,7 @@ <span>(${duration})</span> </div> <div class="buttons"> - <span class="button" onclick="playTrack('${trackId}')"> + <span class="button" onclick="playChosenSong('${trackId}')"> <span class="material-symbols-outlined"> play_arrow </span> @@ -57,33 +57,33 @@ </div> <div id="controls"> <div> - <div> - <h3>Currently playing: - <span id="current-song"></span> - </h3> - </div> - <div> - <span class="button" onclick="pauseOrPlay()"> - <span class="material-symbols-outlined"> - play_pause - </span> - <span>Play/Pause</span> + <h3>Currently playing: + <span id="current-song"></span> + </h3> + </div> + <div> + <span class="button" onclick="pauseOrPlay()"> + <span class="material-symbols-outlined"> + play_pause </span> - </div> + <span>Play/Pause</span> + </span> </div> <div> <h3>Search for a song by duration:</h3> </div> - <span id="minutes"> - <input id="minutes-input" type="number" min="0" max="59" value="5" /> - <label for="minutes-input">min</label> - </span> - <span id="seconds"> - <input id="seconds-input" type="number" min="0" max="59" value="32" /> - <label for="seconds-input">sec</label> - </span> - <button id="search">Search</button> + <div> + <span id="minutes"> + <input id="minutes-input" type="number" min="0" max="59" value="5" /> + <label for="minutes-input">min</label> + </span> + <span id="seconds"> + <input id="seconds-input" type="number" min="0" max="59" value="32" /> + <label for="seconds-input">sec</label> + </span> + <button id="search" onclick="searchForMatch()">Search</button> + </div> <div> <h3>Found songs:</h3> @@ -94,10 +94,10 @@ </div> <div id="footer"> <div> - Hawk Version <span id="version"></span> + Hawk version <span id="version"></span> </div> <div> - Updated <span id="updated"></span> + Updated on <span id="updated"></span> </div> <div> <a href="https://gitlab.com/PavelSafronov/hawk" target="_blank">Source</a> diff --git a/public/main.js b/public/main.js index 43d896d..a1a931c 100644 --- a/public/main.js +++ b/public/main.js @@ -34,8 +34,34 @@ if (showSignInButton) { const signOutButton = document.getElementById('signout'); signOutButton.addEventListener('click', signOut); -const searchButton = document.getElementById('search'); -searchButton.addEventListener('click', async () => { +async function setCurrentPlayingSong() { + const currentSongSpan = document.getElementById('current-song'); + const currentTrack = await getPlayingTrack(); + console.debug(currentTrack); + if (currentTrack && currentTrack.is_playing) { + currentSongSpan.innerText = `${currentTrack.item.name} by ${currentTrack.item.artists[0].name}`; + } else { + currentSongSpan.innerText = 'Nothing playing'; + } +} + +function formatDuration(ms) { + // Convert milliseconds to total seconds + let totalSeconds = Math.floor(ms / 1000); + + // Calculate minutes and seconds + let minutes = Math.floor(totalSeconds / 60); + let seconds = totalSeconds % 60; + + // Ensure seconds are always 2 digits + let formattedSeconds = seconds.toString().padStart(2, '0'); + + // Return formatted string + return `${minutes}:${formattedSeconds}`; +} + +async function searchForMatch() { + const searchButton = document.getElementById('search'); searchButton.setAttribute('disabled', 'disabled'); try { const minutes = document.getElementById('minutes-input').value; @@ -61,32 +87,6 @@ searchButton.addEventListener('click', async () => { } finally { searchButton.removeAttribute('disabled'); } -}); - -async function setCurrentPlayingSong() { - const currentSongSpan = document.getElementById('current-song'); - const currentTrack = await getPlayingTrack(); - console.debug(currentTrack); - if (currentTrack && currentTrack.is_playing) { - currentSongSpan.innerText = `${currentTrack.item.name} by ${currentTrack.item.artists[0].name}`; - } else { - currentSongSpan.innerText = 'Nothing playing'; - } -} - -function formatDuration(ms) { - // Convert milliseconds to total seconds - let totalSeconds = Math.floor(ms / 1000); - - // Calculate minutes and seconds - let minutes = Math.floor(totalSeconds / 60); - let seconds = totalSeconds % 60; - - // Ensure seconds are always 2 digits - let formattedSeconds = seconds.toString().padStart(2, '0'); - - // Return formatted string - return `${minutes}:${formattedSeconds}`; } async function search(minutes, seconds) { @@ -123,4 +123,9 @@ async function pauseOrPlay() { await play(); } setCurrentPlayingSong(); +} + +async function playChosenSong(trackId) { + await playTrack(trackId); + setCurrentPlayingSong(); } \ No newline at end of file diff --git a/public/style.css b/public/style.css index 3f74433..27ccd13 100644 --- a/public/style.css +++ b/public/style.css @@ -1,5 +1,6 @@ body { font-family: sans-serif; + font-size: 1.5em; margin: 0; padding: 0; max-width: 600px; @@ -50,7 +51,7 @@ div { #footer { margin-top: 1em; text-align: center; - font-size: 8px; + font-size: .5em; display: flex; align-items: center; } @@ -59,18 +60,10 @@ div { margin-top: 5em; } -/* media query for screens smaller than 600px */ -@media (max-width: 600px) { - body { - font-size: 18px; - /* increase the font size */ - } -} - .material-symbols-outlined { font-variation-settings: 'FILL' 0, - 'wght' 400, + 'wght' 1200, 'GRAD' 0, 'opsz' 24 } @@ -88,4 +81,18 @@ div { .buttons { display: flex; justify-content: start; +} + +/* media query for screens smaller than 600px */ +@media (max-width: 600px) { + body { + font-size: 4em; + /* increase the font size */ + } +} + +.song { + /* border 1px black */ + border: 1px solid black; + margin: .5em; } \ No newline at end of file