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 15811b8b43
commit d42a038a3f
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}