feat: enhance MediaItem with additional episode details and update ChannelInfo component

k-tv-frontend/app/(main)/tv/components/channel-info.tsx

@@ -1,25 +1,47 @@
+import type { MediaItemResponse } from "@/lib/types";
+
 interface ChannelInfoProps {
   channelNumber: number;
   channelName: string;
-  showTitle: string;
-  showStartTime: string; // "HH:MM"
-  showEndTime: string; // "HH:MM"
+  item: MediaItemResponse;
+  showStartTime: string;
+  showEndTime: string;
   /** Progress through the current show, 0–100 */
   progress: number;
-  description?: string;
+}
+
+function formatEpisodeLabel(item: MediaItemResponse): string | null {
+  if (item.content_type !== "episode") return null;
+  const parts: string[] = [];
+  if (item.season_number != null) parts.push(`S${item.season_number}`);
+  if (item.episode_number != null) parts.push(`E${item.episode_number}`);
+  return parts.length > 0 ? parts.join(" · ") : null;
 }
 
 export function ChannelInfo({
   channelNumber,
   channelName,
-  showTitle,
+  item,
   showStartTime,
   showEndTime,
   progress,
-  description,
 }: ChannelInfoProps) {
   const clampedProgress = Math.min(100, Math.max(0, progress));
 
+  const isEpisode = item.content_type === "episode";
+  const episodeLabel = formatEpisodeLabel(item);
+  // For episodes: series name as headline (fall back to episode title if missing)
+  const headline = isEpisode && item.series_name ? item.series_name : item.title;
+  // Subtitle: only include episode title when series name is the headline (otherwise
+  // the title is already the headline and repeating it would duplicate it)
+  const subtitle = isEpisode
+    ? item.series_name
+      ? [episodeLabel, item.title].filter(Boolean).join(" · ")
+      : episodeLabel  // title is the headline — just show S·E label
+    : item.year
+    ? String(item.year)
+    : null;
+
   return (
     <div className="flex flex-col gap-2 rounded-lg bg-black/60 p-4 backdrop-blur-md w-80">
       {/* Channel badge */}
@@ -32,14 +54,35 @@ export function ChannelInfo({
         </span>
       </div>
 
-      {/* Show title */}
-      <p className="text-base font-semibold leading-tight text-white">
-        {showTitle}
-      </p>
+      {/* Title block */}
+      <div className="space-y-0.5">
+        <p className="text-base font-semibold leading-tight text-white">
+          {headline}
+        </p>
+        {subtitle && (
+          <p className="text-xs text-zinc-400">{subtitle}</p>
+        )}
+      </div>
 
       {/* Description */}
-      {description && (
-        <p className="line-clamp-2 text-xs text-zinc-400">{description}</p>
+      {item.description && (
+        <p className="line-clamp-2 text-xs leading-relaxed text-zinc-500">
+          {item.description}
+        </p>
+      )}
+
+      {/* Genres */}
+      {item.genres.length > 0 && (
+        <div className="flex flex-wrap gap-1">
+          {item.genres.slice(0, 4).map((g) => (
+            <span
+              key={g}
+              className="rounded bg-zinc-800/80 px-1.5 py-0.5 text-[10px] text-zinc-400"
+            >
+              {g}
+            </span>
+          ))}
+        </div>
       )}
 
       {/* Progress bar */}