Personal Site
0
fork

Configure Feed

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

Add proper content to now-playing popup (SSE data not yet loaded) and add layout

+72 -5
+72 -5
src/components/playing/NowPlaying.astro
··· 8 8 import mp3PlaybackHead from "/assets/mp3/playback-head.png"; 9 9 import boxTlbr from "/assets/box-tlbr.png"; 10 10 import popoutSpeech from "/assets/popout-speech.png"; 11 + import smallBoxMask from "/assets/small-box-mask.png"; 11 12 12 13 const track = await spotifyNowPlaying().catch((err) => { 13 14 if (!(err instanceof SpotifyError)) throw new Error("Unhandled exception"); ··· 16 17 console.error(err.code, err.human, err.details); 17 18 return err; 18 19 }); 20 + 21 + const dataTrack = ( 22 + t: typeof track, 23 + ): t is Exclude<typeof track, SpotifyError | null> => 24 + !(track instanceof SpotifyError || !track); 19 25 --- 20 26 21 27 <section ··· 29 35 --mp3-playback-head-png: url(${mp3PlaybackHead.src}); 30 36 --box-tlbr-png: url("${boxTlbr.src}"); 31 37 --popout-speech-png: url("${popoutSpeech.src}"); 38 + --small-box-mask-png: url("${smallBoxMask.src}"); 32 39 `} 33 40 > 34 41 <div ··· 47 54 48 55 <div class="record"> 49 56 <img 50 - src={track instanceof SpotifyError || !track 57 + src={!dataTrack(track) 51 58 ? "https://undefined/" 52 59 : track.album.images[0].url} 53 60 alt="" ··· 61 68 </div> 62 69 63 70 <now-playing> 64 - test 71 + <a 72 + slot="title" 73 + href={(dataTrack(track) && track.external_urls.spotify) || ""} 74 + > 75 + {dataTrack(track) && track.name}</a 76 + > 77 + <span slot="album">{dataTrack(track) && track.album.name}</span> 78 + <span slot="artists"> 79 + { 80 + dataTrack(track) && 81 + track.artists 82 + .map((artist) => ( 83 + <a href={artist.external_urls.spotify}>{artist.name}</a> 84 + )) 85 + // inject a comma before each entry in the list except the first one 86 + // flatmap flattens the returned array into the new map 87 + .flatMap((x, i) => (i === 0 ? x : [", ", x])) 88 + } 89 + </span> 90 + <img 91 + slot="art" 92 + src={!dataTrack(track) 93 + ? "https://undefined/" 94 + : track.album.images[0].url} 95 + alt="" 96 + /> 65 97 66 98 <template shadowrootmode="open" shadowrootdelegatesfocus> 67 - <slot is:inline /> 68 - 69 - <input type="text" /> 99 + <div class="layout"> 100 + <span class="name"> 101 + <slot is:inline name="title" /> 102 + (<slot is:inline name="album" />) 103 + </span> 104 + <span class="artists"> 105 + <slot is:inline name="artists" /> 106 + </span> 107 + <div class="art"> 108 + <slot is:inline name="art" /> 109 + </div> 110 + </div> 70 111 71 112 <style> 72 113 :host { ··· 99 140 background-size: contain; 100 141 background-position: center; 101 142 background-repeat: no-repeat; 143 + } 144 + } 145 + 146 + .layout { 147 + display: grid; 148 + grid-template: 149 + "name art" auto 150 + "artists art" auto 151 + / 1fr 80px; 152 + align-items: center; 153 + justify-content: center; 154 + 155 + .name { 156 + grid-area: name; 157 + align-self: end; 158 + } 159 + 160 + .artists { 161 + grid-area: artists; 162 + align-self: start; 163 + } 164 + 165 + .art { 166 + grid-area: art; 167 + width: 80px; 168 + height: 80ps; 102 169 } 103 170 } 104 171 </style>