Personal Site
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Update now playing in place

+5 -27
+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 });