forked from
juliet.paris/streamplace-spa
minimal streamplace frontend
viewer count overlay
+8
-8
+8
-8
src/components/StreamCard.tsx
+8
-8
src/components/StreamCard.tsx
···
21
21
href={`/${props.handle}`}
22
22
class="group border-sp-border bg-sp-surface hover:border-sp-accent overflow-hidden rounded-lg border transition-colors"
23
23
>
24
-
<div class="bg-sp-bg aspect-video w-full overflow-hidden">
24
+
<div class="bg-sp-bg relative aspect-video w-full overflow-hidden">
25
25
{thumbUrl() ? (
26
26
<img src={thumbUrl()} alt="" class="h-full w-full object-cover" loading="lazy" />
27
27
) : (
···
29
29
<span class="text-3xl">▶</span>
30
30
</div>
31
31
)}
32
+
<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">
33
+
<span
34
+
class="bg-sp-accent inline-block h-2 w-2 rounded-full"
35
+
style={{ animation: "pulse-live 3s ease-in-out infinite" }}
36
+
/>
37
+
{props.viewerCount}
38
+
</div>
32
39
</div>
33
40
<div class="group-hover:bg-sp-accent/10 flex gap-3 p-3 transition-colors">
34
41
{props.avatarUrl ? (
···
39
46
<div class="min-w-0 flex-1">
40
47
<div class="truncate text-sm font-medium">{props.title}</div>
41
48
<div class="text-sp-dim truncate text-xs">@{props.handle}</div>
42
-
<div class="text-sp-dim mt-1 flex items-center gap-1.5 text-xs">
43
-
<span
44
-
class="bg-sp-accent inline-block h-2 w-2 rounded-full"
45
-
style={{ animation: "pulse-live 3s ease-in-out infinite" }}
46
-
/>
47
-
{props.viewerCount} watching
48
-
</div>
49
49
</div>
50
50
</div>
51
51
</A>