Merge improvement/live-duration-badge: LIVE/upcoming badge instead of blank duration

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}

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")}

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",

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",

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",