hawk / commit

Added links for song/album/artist, and report errors during playback.

0c3c57b69b5db2e2919ae942b4da4a008cb0dfd0 · Pavel Safronov · 2023-10-17 18:43:47 -0700 · parents 1e82c571687e

Added links for song/album/artist, and report errors during playback.
(The errors reporting is a temporary hack: if there isn't an active device, trying to play the track will always fail. What's needed is logic to find a device to use, and if that fails, present device options to the user and make them pick one.)

 public/index.html     | 24 ++++++++++++++++++------
 public/js/api.js      |  9 +++++++--
 public/js/controls.js |  9 +++++++--
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/public/index.html b/public/index.html
index 335ab13..05d4562 100644
--- a/public/index.html
+++ b/public/index.html
@@ -152,17 +152,23 @@
                     <span class="material-symbols-outlined">
                         music_note
                     </span>
-                    <span>${name}</span>
+                    <span>
+                        <a href="${songUrl}" target="_blank">${name}</a>
+                    </span>
                 </span>
                 <span class="song-album icon-and-label">
                     <span class="material-symbols-outlined">
                         album
                     </span>
-                    <span>${album}</span>
+                    <span>
+                        <a href="${albumUrl}" target="_blank">${album}</a>
+                    </span>
                 </span>
                 <span class="song-artist icon-and-label">
                     <span class=" material-symbols-outlined">group</span>
-                    <span>${artist}</span>
+                    <span>
+                        <a href="${artistUrl}" target="_blank">${artist}</a>
+                    </span>
                 </span>
             </div>
         </div>
@@ -188,17 +194,23 @@
                     <span class="material-symbols-outlined">
                         music_note
                     </span>
-                    <span>${name}</span>
+                    <span>
+                        <a href="${songUrl}" target="_blank">${name}</a>
+                    </span>
                 </span>
                 <span class="song-album icon-and-label">
                     <span class="material-symbols-outlined">
                         album
                     </span>
-                    <span>${album}</span>
+                    <span>
+                        <a href="${albumUrl}" target="_blank">${album}</a>
+                    </span>
                 </span>
                 <span class="song-artist icon-and-label">
                     <span class=" material-symbols-outlined">group</span>
-                    <span>${artist}</span>
+                    <span>
+                        <a href="${artistUrl}" target="_blank">${artist}</a>
+                    </span>
                 </span>
                 <div class="song-duration">
                     <span>${progress}</span>
diff --git a/public/js/api.js b/public/js/api.js
index 9a9bf2b..0bff57e 100644
--- a/public/js/api.js
+++ b/public/js/api.js
@@ -81,7 +81,8 @@ async function batchGetTracks(albumIds, statusCallback) {
                 track.album = {
                     id: album.id,
                     name: album.name,
-                    images: album.images
+                    images: album.images,
+                    external_urls: album.external_urls
                 }
                 return track;
             }));
@@ -131,7 +132,7 @@ async function getTracks(albumId, statusCallback) {
 async function playTrack(trackId) {
     let accessToken = await getAccessToken();
     console.info(`Playing track ${trackId}`);
-    await fetch(`https://api.spotify.com/v1/me/player/play`, {
+    const response = await fetch(`https://api.spotify.com/v1/me/player/play`, {
         method: 'PUT',
         headers: {
             Authorization: 'Bearer ' + accessToken
@@ -140,6 +141,10 @@ async function playTrack(trackId) {
             uris: [`spotify:track:${trackId}`]
         })
     });
+    if (response.status != 204) {
+        const json = await response.json();
+        throw new Error(`Failed to play track ${trackId}: ${response.status}\n${JSON.stringify(json)}`);
+    }
 }
 
 async function getPlayingTrack() {
diff --git a/public/js/controls.js b/public/js/controls.js
index 073bac4..96acb07 100644
--- a/public/js/controls.js
+++ b/public/js/controls.js
@@ -51,8 +51,10 @@ async function searchForMatch() {
                     album: track.album.name,
                     artist: track.artists[0].name,
                     duration: formatDuration(track.duration_ms),
-                    songUrl: track.external_urls.spotify,
                     albumArtUrl: albumArtUrl,
+                    songUrl: track.external_urls.spotify,
+                    albumUrl: album.external_urls.spotify,
+                    artistUrl: track.artists[0].external_urls.spotify,
                     trackId: track.id,
                     trackHref: track.external_urls.spotify
                 };
@@ -153,7 +155,10 @@ async function setCurrentPlayingSong() {
             songUrl: songUrl,
             progressPercent: progressPercent,
             progress: progress,
-            duration: totalDuration
+            duration: totalDuration,
+            songUrl: item.external_urls.spotify,
+            albumUrl: album.external_urls.spotify,
+            artistUrl: album.artists[0].external_urls.spotify,
         };
 
         html = createTemplatedHtml('playing-song', params)