Enhance ShowDetail component: display season and episode information alongside asset names in a more structured format, improving user experience. Update AirPage to simplify program labels by removing episode index display, ensuring clarity in the streaming interface.

2026-07-24 21:55:28 +03:00
parent 1b078cdfd3
commit 517f11c897
2 changed files with 17 additions and 5 deletions
@@ -188,10 +188,21 @@ export function ShowDetail({ showId }: { showId: string }) {
            </tr>
          </thead>
          <tbody>
-            {show.episodes.map((episode, index) => (
+            {show.episodes.map((episode, index) => {
+              const se = parseEpisode(episode.assetName ?? '')
+              return (
              <tr key={episode.id} className="border-b border-border last:border-0">
                <td className="px-4 py-2 text-muted-foreground">{index + 1}</td>
-                <td className="px-4 py-2">{episode.assetName ?? '—'}</td>
+                <td className="px-4 py-2">
+                  <div className="flex items-center gap-2">
+                    {se && (
+                      <Badge>
+                        S{pad2(se.season)}E{pad2(se.episode)}
+                      </Badge>
+                    )}
+                    <span>{episode.assetName ?? '—'}</span>
+                  </div>
+                </td>
                <td className="px-4 py-2 text-muted-foreground">
                  {formatDuration(episode.durationSeconds)}
                </td>
@@ -212,7 +223,8 @@ export function ShowDetail({ showId }: { showId: string }) {
                  </Button>
                </td>
              </tr>
-            ))}
+              )
+            })}
            {show.episodes.length === 0 && (
              <tr>
                <td className="px-4 py-3 text-muted-foreground" colSpan={5}>