forked from
juliet.paris/streamplace-spa
minimal streamplace frontend
fix thumbnail refresh
+9
-7
+9
-7
src/components/StreamCard.tsx
+9
-7
src/components/StreamCard.tsx
···
1
1
import { A } from "@solidjs/router";
2
+
import { createSignal, onCleanup } from "solid-js";
2
3
3
4
export interface StreamCardProps {
4
5
handle: string;
···
9
10
thumbRef?: string;
10
11
}
11
12
12
-
function getThumbnailUrl(handle: string): string {
13
-
return `https://stream.place/api/playback/${encodeURIComponent(handle)}/stream.jpg?ts=${Date.now()}`;
14
-
}
15
-
16
13
export function StreamCard(props: StreamCardProps) {
17
-
const thumbUrl = () => getThumbnailUrl(props.handle);
14
+
const [ts, setTs] = createSignal(Date.now());
15
+
const interval = setInterval(() => setTs(Date.now()), 15_000);
16
+
onCleanup(() => clearInterval(interval));
17
+
18
+
const thumbUrl = () =>
19
+
`https://stream.place/api/playback/${encodeURIComponent(props.handle)}/stream.jpg?ts=${ts()}`;
18
20
19
21
return (
20
22
<A
···
25
27
{thumbUrl() ? (
26
28
<img src={thumbUrl()} alt="" class="h-full w-full object-cover" loading="lazy" />
27
29
) : (
28
-
<div class="text-sp-dim flex h-full items-center justify-center">
29
-
<span class="text-3xl">▶</span>
30
+
<div class="flex h-full items-center justify-center">
31
+
<img src="/favicon.svg" alt="" class="h-10 w-10 opacity-50" />
30
32
</div>
31
33
)}
32
34
<div class="absolute bottom-3 left-3 flex items-center gap-1.5 rounded bg-black/70 px-2 py-1 text-xs text-white backdrop-blur-sm">