Personal Site
Listen to SSE from server
+65
-7
+65
-7
src/components/playing/NowPlaying.astro
+65
-7
src/components/playing/NowPlaying.astro
···
1
1
---
2
-
import { nowPlaying, SpotifyError } from "./spotify";
2
+
import { spotifyNowPlaying, SpotifyError } from "./spotify";
3
3
4
-
const track = await nowPlaying().catch((err) => {
4
+
const track = await spotifyNowPlaying().catch((err) => {
5
5
if (!(err instanceof SpotifyError)) throw new Error("Unhandled exception");
6
6
console.error(err.code, err.human, err.details);
7
7
8
8
if (err.code === "NO_CONTENT") return null;
9
9
return err;
10
10
});
11
-
12
-
console.log(track);
13
11
---
14
12
15
-
<section class="playing">
13
+
<section class="playing" id="now-playing">
16
14
{
17
15
track ? (
18
16
!(track instanceof SpotifyError) ? (
···
31
29
) : (
32
30
<>
33
31
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>
32
+
<code style="word-wrap: break-word;">
33
+
{JSON.stringify(track.details)}
34
+
</code>
35
+
<script set:html={`console.log(${JSON.stringify(track.details)})`} />
36
36
</>
37
37
)
38
38
) : (
···
40
40
)
41
41
}
42
42
</section>
43
+
44
+
<script>
45
+
import {
46
+
type SpotifyError,
47
+
type nowPlaying,
48
+
isNowPlaying,
49
+
isSpotifyError,
50
+
type SpotifyErrorInit,
51
+
} from "./spotify/client";
52
+
53
+
const nowPlayingEl = document.getElementById("now-playing");
54
+
if (!nowPlayingEl) throw new Error("Could not find #now-playing");
55
+
56
+
const renderNowPlaying = (playing: Exclude<nowPlaying, null>) => {
57
+
nowPlayingEl.innerHTML = `
58
+
Now playing:
59
+
<img
60
+
src=${
61
+
playing.album.images.sort(
62
+
(a, b) => b.width + b.height - (a.width + a.height),
63
+
)[0].url
64
+
}
65
+
alt=""
66
+
/>
67
+
${playing.name} by ${playing.artists.map((x) => x.name).join(",")}`;
68
+
};
69
+
70
+
const renderSilent = () => {
71
+
nowPlayingEl.innerHTML = "Nothing is playing :(";
72
+
};
73
+
74
+
const renderError = (err: SpotifyError | SpotifyErrorInit) => {
75
+
nowPlayingEl.innerHTML = `
76
+
Error occurred ${err.code} - ${err.human} <br />
77
+
<code style="word-wrap: break-word;">
78
+
${JSON.stringify(err.details)}
79
+
</code>`;
80
+
};
81
+
82
+
const events = new EventSource("/now-playing-sse");
83
+
events.addEventListener("playing", (ev) => {
84
+
const playing = JSON.parse(ev.data);
85
+
86
+
// nothing is playing
87
+
if (playing === null) return renderSilent();
88
+
89
+
// something is playing
90
+
if (isNowPlaying(playing) && playing !== null)
91
+
return renderNowPlaying(playing);
92
+
93
+
// check if its an error
94
+
if (isSpotifyError(playing)) return renderError(playing);
95
+
96
+
// server sent strange response
97
+
console.error("Unexpected value sent from server:", playing)
98
+
// continue as normal as the previous value WAS ok
99
+
});
100
+
</script>