From ed941904a6d1ce4f59c2198f019f2710cd1896ac Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Tue, 16 Jun 2026 09:36:51 +0200
Subject: [PATCH] feat(card): show LIVE/upcoming badge where duration is absent

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.
---
 frontend/src/components/Playlists.tsx  | 15 +++++++++++++--
 frontend/src/components/VideoCard.tsx  | 12 ++++++++++--
 frontend/src/i18n/locales/de/card.json |  2 ++
 frontend/src/i18n/locales/en/card.json |  2 ++
 frontend/src/i18n/locales/hu/card.json |  2 ++
 5 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Playlists.tsx b/frontend/src/components/Playlists.tsx
index 910d9d8..93512f0 100644
--- a/frontend/src/components/Playlists.tsx
+++ b/frontend/src/components/Playlists.tsx
@@ -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}
diff --git a/frontend/src/components/VideoCard.tsx b/frontend/src/components/VideoCard.tsx
index da5db77..8f5d317 100644
--- a/frontend/src/components/VideoCard.tsx
+++ b/frontend/src/components/VideoCard.tsx
@@ -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")}
diff --git a/frontend/src/i18n/locales/de/card.json b/frontend/src/i18n/locales/de/card.json
index 21c06d5..93076be 100644
--- a/frontend/src/i18n/locales/de/card.json
+++ b/frontend/src/i18n/locales/de/card.json
@@ -1,4 +1,6 @@
 {
+  "live": "live",
+  "upcoming": "demnächst",
   "watchedUnmark": "Angesehen — zum Aufheben klicken",
   "markWatched": "Als angesehen markieren",
   "savedRemove": "Gespeichert — zum Entfernen klicken",
diff --git a/frontend/src/i18n/locales/en/card.json b/frontend/src/i18n/locales/en/card.json
index 63798ed..c5fac09 100644
--- a/frontend/src/i18n/locales/en/card.json
+++ b/frontend/src/i18n/locales/en/card.json
@@ -1,4 +1,6 @@
 {
+  "live": "live",
+  "upcoming": "upcoming",
   "watchedUnmark": "Watched — click to unmark",
   "markWatched": "Mark watched",
   "savedRemove": "Saved — click to remove",
diff --git a/frontend/src/i18n/locales/hu/card.json b/frontend/src/i18n/locales/hu/card.json
index a1543e8..8141b46 100644
--- a/frontend/src/i18n/locales/hu/card.json
+++ b/frontend/src/i18n/locales/hu/card.json
@@ -1,4 +1,6 @@
 {
+  "live": "élő",
+  "upcoming": "hamarosan",
   "watchedUnmark": "Megnézve — kattints a visszavonáshoz",
   "markWatched": "Megnézettnek jelöl",
   "savedRemove": "Mentve — kattints az eltávolításhoz",