minimal streamplace frontend
0
fork

Configure Feed

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

fix thumbnail refresh

Juliet 8e08e996 5b306a90

+9 -7
+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">&#9654;</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">