minimal streamplace frontend
0
fork

Configure Feed

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

viewer count overlay

Juliet a5860977 51ff5f3a

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