peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(card): show LIVE/upcoming badge where duration is absent

Browse source 
Live streams and upcoming/premiere videos have no fixed duration, so the
playlist row and video card left a blank where the runtime usually sits.
Show a LIVE (red) or upcoming badge instead, so it's clear the missing
time is by design, not a sync gap.
This commit is contained in:
npeter83 2026-06-16 09:36:51 +02:00
parent c35d4f9184
commit ed941904a6
5 changed files with 29 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/components/Playlists.tsx
View file

@ -110,6 +110,7 @@ function Row({
onPlay: () => void;
onRemove: () => void;
}) {
const { t } = useTranslation();
const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
useSortable({ id: video.id, disabled: readOnly });
const style = {
@ -151,11 +152,21 @@ function Row({
<div className="text-[13px] text-fg truncate">{video.title}</div>
<div className="text-[11px] text-muted truncate">{video.channel_title}</div>
</button>
{video.duration_seconds != null && (
{video.duration_seconds != null ? (
<span className="text-[11px] text-muted tabular-nums">
{formatDuration(video.duration_seconds)}
</span>
)}
) : video.live_status === "live" || video.live_status === "upcoming" ? (
<span
className={`text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded ${
video.live_status === "live"
? "bg-red-500/90 text-white"
: "bg-card border border-border text-muted"
}`}
>
{t(`card.${video.live_status}`)}
</span>
) : null}
{!readOnly && (
<button
onClick={onRemove}

12
frontend/src/components/VideoCard.tsx
View file

@ -154,11 +154,19 @@ function Thumb({
) : (
<div className="w-full h-full" />
)}
{video.duration_seconds != null && (
{video.duration_seconds != null ? (
<span className="absolute bottom-1.5 right-1.5 bg-black/80 text-white text-[11px] font-medium px-1.5 py-0.5 rounded">
{formatDuration(video.duration_seconds)}
</span>
)}
) : video.live_status === "live" || video.live_status === "upcoming" ? (
<span
className={`absolute bottom-1.5 right-1.5 text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded ${
video.live_status === "live" ? "bg-red-500/90 text-white" : "bg-black/80 text-white"
}`}
>
{t(`card.${video.live_status}`)}
</span>
) : null}
{video.live_status === "was_live" && (
<span className="absolute top-1.5 left-1.5 bg-accent text-accent-fg text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded">
{t("card.stream")}