hawk / commit
Added a list of pre-configured times, each of which is a link that sets the search time accordingly.
public/index.html | 28 +++++++++++++++++----------- public/js/controls.js | 29 +++++++++++++++++++++++++++++ public/js/main.js | 5 ++++- public/styles/main.css | 15 +++++++++++++++ public/styles/song.css | 5 ----- 5 files changed, 65 insertions(+), 17 deletions(-) diff --git a/public/index.html b/public/index.html index d40e625..647eee8 100644 --- a/public/index.html +++ b/public/index.html @@ -89,18 +89,24 @@ <div> <h3>Search for a song by duration:</h3> </div> - <div> - <span id="minutes"> - <input id="minutes-input" type="number" min="0" max="59" value="5" onclick="this.select();" /> - <label for="minutes-input">min</label> - </span> - <span id="seconds"> - <input id="seconds-input" type="number" min="0" max="59" value="32" onclick="this.select();" /> - <label for="seconds-input">sec</label> - </span> - <button id="search" onclick="searchForMatch()">Search</button> + <div class="flex"> + <div class="left"> + <span id="minutes"> + <input id="minutes-input" type="number" min="0" max="59" value="5" onclick="this.select();" /> + <label for="minutes-input">min</label> + </span> + <span id="seconds"> + <input id="seconds-input" type="number" min="0" max="59" value="32" onclick="this.select();" /> + <label for="seconds-input">sec</label> + </span> + <span> + <ul id="times"></ul> + </span> + </div> + <div class="right"> + <button id="search" onclick="searchForMatch()">Search</button> + </div> </div> - <div class="flex"> <div id="status"></div> </div> diff --git a/public/js/controls.js b/public/js/controls.js index 3d14665..da882ee 100644 --- a/public/js/controls.js +++ b/public/js/controls.js @@ -49,6 +49,11 @@ async function playChosenSong(trackName, trackId) { setCurrentPlayingSong(); } +function setTime(minutes, seconds) { + document.getElementById('minutes-input').value = minutes; + document.getElementById('seconds-input').value = seconds; +} + async function searchForMatch() { const searchButton = document.getElementById('search'); searchButton.setAttribute('disabled', 'disabled'); @@ -157,6 +162,9 @@ async function setCurrentPlayingSong() { if (!currentTrack) { html = createTemplatedHtml('no-song-playing', {}) } else { + if (!currentTrack || !currentTrack.item) { + return; + } const album = currentTrack.item.album; const item = currentTrack.item; const name = item.name; @@ -276,3 +284,24 @@ function saveDeviceId(deviceId) { function getSavedDeviceId() { return localStorage.getItem('active_device_id'); } + +function configureTimesList() { + timesUl = document.getElementById('times'); + const createLi = (minutes, seconds) => { + const li = document.createElement('li'); + const a = document.createElement('a'); + a.href = '#'; + a.onclick = () => { + setTime(minutes, seconds); + }; + a.innerText = `${minutes}:${seconds.toFixed(2).toString().padStart(5, '0').slice(0, 2)}`; + li.appendChild(a); + return li; + } + timesUl.appendChild(createLi(0, 30)); + timesUl.appendChild(createLi(1, 0)); + timesUl.appendChild(createLi(2, 0)); + timesUl.appendChild(createLi(3, 0)); + timesUl.appendChild(createLi(4, 0)); + timesUl.appendChild(createLi(5, 0)); +} \ No newline at end of file diff --git a/public/js/main.js b/public/js/main.js index 4dcfb13..714aaf5 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -41,4 +41,7 @@ if (userIsSignedIn) { } // periodically lookup the active device -configureDevicesList(); \ No newline at end of file +configureDevicesList(); + +// configure times +configureTimesList(); \ No newline at end of file diff --git a/public/styles/main.css b/public/styles/main.css index 81ce4fd..65e9151 100644 --- a/public/styles/main.css +++ b/public/styles/main.css @@ -123,4 +123,19 @@ button { #status.error { background-color: pink; +} + +#times { + list-style: none; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin: 1em 0; + padding: 1em 0; +} + +#times li:not(:last-child)::after { + content: "|"; + margin: 0 0.5em; } \ No newline at end of file diff --git a/public/styles/song.css b/public/styles/song.css index 9430e67..2ded25f 100644 --- a/public/styles/song.css +++ b/public/styles/song.css @@ -21,12 +21,7 @@ } .found-song { - /* border 1px black */ - border: 2px solid black; margin: .5em 0; - padding: 0 .5em; - - display: flex; align-items: start; padding: 0 1em;