vielle.dev
Personal Site
Use new API in <NowPlaying />
+28
-17
src/components/playing/NowPlaying.astro
+28
-17
src/components/playing/NowPlaying.astro
···
1
---
2
-
import { getTrack, nowPlayingSongID } from "./spotify";
3
4
-
const nowPlaying = await nowPlayingSongID();
5
6
-
if (nowPlaying instanceof Error) return console.error("nowPlaying", nowPlaying);
7
8
-
const track = nowPlaying ? await getTrack(nowPlaying) : null;
9
-
if (track instanceof Error) return console.error("track", track);
10
---
11
12
<section class="playing">
13
{
14
track ? (
15
-
<>
16
-
Now playing:
17
-
<img
18
-
src={
19
-
track.album.images.sort(
20
-
(a, b) => b.width + b.height - (a.width + a.height),
21
-
)[0].url
22
-
}
23
-
alt=""
24
-
/>
25
-
{track.name} by {track.artists.map((x) => x.name).join(",")}
26
-
</>
27
) : (
28
<>Nothing is playing :(</>
29
)
···
1
---
2
+
import { nowPlaying, SpotifyError } from "./spotify";
3
4
+
const track = await nowPlaying().catch((err) => {
5
+
if (!(err instanceof SpotifyError)) throw new Error("Unhandled exception");
6
+
console.error(err.code, err.human, err.details);
7
8
+
if (err.code === "NO_CONTENT") return null;
9
+
return err;
10
+
});
11
12
+
console.log(track);
13
---
14
15
<section class="playing">
16
{
17
track ? (
18
+
!(track instanceof SpotifyError) ? (
19
+
<>
20
+
Now playing:
21
+
<img
22
+
src={
23
+
track.album.images.sort(
24
+
(a, b) => b.width + b.height - (a.width + a.height),
25
+
)[0].url
26
+
}
27
+
alt=""
28
+
/>
29
+
{track.name} by {track.artists.map((x) => x.name).join(",")}
30
+
</>
31
+
) : (
32
+
<>
33
+
Error occurred {track.code} - {track.human} <br />
34
+
<code style="word-wrap: break-word;">{JSON.stringify(track.details)}</code>
35
+
<script set:html={`console.log(${JSON.stringify(track.details)})`}></script>
36
+
</>
37
+
)
38
) : (
39
<>Nothing is playing :(</>
40
)