Personal Site
Update now playing in place
+5
-27
+5
-27
src/components/playing/NowPlaying.astro
+5
-27
src/components/playing/NowPlaying.astro
···
185
185
186
186
<script>
187
187
import {
188
-
type SpotifyError,
189
188
type nowPlaying,
190
189
isNowPlaying,
191
-
isSpotifyError,
192
-
type SpotifyErrorInit,
193
190
} from "./spotify/client";
194
191
195
192
const nowPlayingEl = document.getElementById("now-playing");
196
193
if (!nowPlayingEl) throw new Error("Could not find #now-playing");
194
+
const art = nowPlayingEl.querySelector(".art")
195
+
if (!art || !(art instanceof HTMLImageElement)) throw new Error("Could not find #now-playing img.art");
197
196
198
197
const renderNowPlaying = (playing: Exclude<nowPlaying, null>) => {
199
-
nowPlayingEl.innerHTML = `
200
-
Now playing:
201
-
<img
202
-
src=${
203
-
playing.album.images.sort(
204
-
(a, b) => b.width + b.height - (a.width + a.height),
205
-
)[0].url
206
-
}
207
-
alt=""
208
-
/>
209
-
${playing.name} by ${playing.artists.map((x) => x.name).join(",")}`;
198
+
art.src = playing.album.images[0].url
210
199
};
211
200
212
201
const renderSilent = () => {
213
-
nowPlayingEl.innerHTML = "Nothing is playing :(";
214
-
};
215
-
216
-
const renderError = (err: SpotifyError | SpotifyErrorInit) => {
217
-
nowPlayingEl.innerHTML = `
218
-
Error occurred ${err.code} - ${err.human} <br />
219
-
<code style="word-wrap: break-word;">
220
-
${JSON.stringify(err.details)}
221
-
</code>`;
202
+
art.src = "https://undefined/"
222
203
};
223
204
224
205
const events = new EventSource("/now-playing-sse");
···
232
213
if (isNowPlaying(playing) && playing !== null)
233
214
return renderNowPlaying(playing);
234
215
235
-
// check if its an error
236
-
if (isSpotifyError(playing)) return renderError(playing);
237
-
238
-
// server sent strange response
216
+
// server sent strange/error response
239
217
console.error("Unexpected value sent from server:", playing)
240
218
// continue as normal as the previous value WAS ok
241
219
});