hawk / commit
Mostly styling and text changes.
README.md | 6 ++++- public/index.html | 62 +++++++++++++++++++++++++++++++------------------ public/js/main.js | 4 ++++ public/styles/style.css | 12 ++++++++-- 4 files changed, 58 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 9ec7c4c..bdf03b6 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,11 @@ You can specify a duration (for example, "5:32"), and *Hawk* will find a song in your Spotify library with that length, and with a single click you can start playing that song. -The name *Hawk* comes from the movie [Hudson Hawk](https://www.imdb.com/title/tt0102070), where [Bruce Willis sings songs of particular lengths in order to time things](https://www.youtube.com/watch?v=I6WXVqg48Qs). Yeah, it's weird, but I was also wondering what it would take to make this. This project ended up taking just two days, and the core functionality was working in the first few hours. Check out the git history to see how this thing evolved. I'm pretty happy with the result, but it definitely needs a designer's touch. Pull requests are welcome! +The name *Hawk* comes from the movie [Hudson Hawk](https://www.imdb.com/title/tt0102070), where [Bruce Willis sings songs of particular lengths in order to time things](https://www.youtube.com/watch?v=I6WXVqg48Qs). + +Yeah, it's weird, but I was also wondering what it would take to make this. This project ended up taking just two days, and the core functionality was working in the first few hours. Check out the git history to see how this thing evolved. + +I'm pretty happy with the result, but it definitely needs a designer's touch. Pull requests are welcome! ## Links diff --git a/public/index.html b/public/index.html index 767bc76..e3daaea 100644 --- a/public/index.html +++ b/public/index.html @@ -34,14 +34,24 @@ with that length, and with a single click you can start playing that song. </div> <div> - The name <b>Hawk</b> comes from the movie - <a href="https://www.imdb.com/title/tt0102070/" target="_blank">Hudson Hawk</a>, - where <a href="https://www.youtube.com/watch?v=I6WXVqg48Qs" target="_blank">Bruce Willis sings songs of - particular lengths in order to time things</a>. Yeah, it's weird, but I was also wondering what it would - take to make this. This project ended up taking just two days, - and the core functionality was working in the first few hours. Check out the git history to see how this - thing evolved. - I'm pretty happy with the result, but it definitely needs a designer's touch. Pull requests are welcome! + <div> + + The name <b>Hawk</b> comes from the movie + <a href="https://www.imdb.com/title/tt0102070/" target="_blank">Hudson Hawk</a>, + where <a href="https://www.youtube.com/watch?v=I6WXVqg48Qs" target="_blank">Bruce Willis sings songs of + particular lengths in order to time things</a>. + </div> + <div> + + Yeah, it's weird, but I was also wondering what it would + take to make this. This project ended up taking just two days, + and the core functionality was working in the first few hours. Check out the git history to see how this + thing evolved. + </div> + <div> + + I'm pretty happy with the result, but it definitely needs a designer's touch. Pull requests are welcome! + </div> </div> <div> Found an issue? Please report it by <a href="https://gitlab.com/PavelSafronov/hawk/-/issues/new" @@ -103,11 +113,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> - Hawk version <span id="version"></span> - </div> - <div> - Updated on <span id="updated"></span> + <div id="updated-info"> </div> <div> <a href="https://gitlab.com/PavelSafronov/hawk" target="_blank">Source</a> @@ -118,15 +124,6 @@ </div> </div> - <!-- SCRIPTS --> - <script src="js/version.js"></script> - <script src="js/signin.js"></script> - <script src="js/db.js"></script> - <script src="js/api.js"></script> - <script src="js/template.js"></script> - <script src="js/collapsible.js"></script> - <script src="js/main.js"></script> - <!-- TEMPLATES --> <template id="found-song-item"> <div class="song"> @@ -173,10 +170,29 @@ <div class="song-info"> <span class="song-name">${name}</span> <span class="song-artist">${artist}</span> - <progress class="song-progress" value="${progressPercent}" max="100"></progress> + <div class="song-duration"> + <span>${progress}</span> + <progress class="song-progressbar" value="${progressPercent}" max="100"></progress> + <span>${duration}</span> + </div> </div> </div> </template> + <template id="updatedInfoTemplate"> + <div> + Last updated on <a href="https://gitlab.com/PavelSafronov/hawk/-/commit/${version}" + target="_blank">${updated}</a> + </div> + </template> + + <!-- SCRIPTS --> + <script src="gen/version.js"></script> + <script src="js/signin.js"></script> + <script src="js/db.js"></script> + <script src="js/api.js"></script> + <script src="js/template.js"></script> + <script src="js/collapsible.js"></script> + <script src="js/main.js"></script> </body> diff --git a/public/js/main.js b/public/js/main.js index 6f31943..e2ccef5 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -55,6 +55,8 @@ async function setCurrentPlayingSong() { let smallestImage = images[images.length - 1]; const albumArtUrl = smallestImage.url; 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, { @@ -63,6 +65,8 @@ async function setCurrentPlayingSong() { albumArtUrl: albumArtUrl, songUrl: songUrl, progressPercent: progressPercent, + progress: progress, + duration: totalDuration }); } currentSongSpan.innerHTML = html; diff --git a/public/styles/style.css b/public/styles/style.css index e25ef72..6625f4f 100644 --- a/public/styles/style.css +++ b/public/styles/style.css @@ -140,8 +140,8 @@ button { margin: .25em; } -.song-progress { - height: 2rem; +.song-progressbar { + height: 1rem; border-radius: 2rem; -webkit-appearance: none; -moz-appearance: none; @@ -149,3 +149,11 @@ button { width: 100%; } +.song-duration { + display: flex; + justify-content: space-between; + font-size: 1em; +} +.song-duration>span { + margin: 0 .5em; +} \ No newline at end of file