From e828fa31a53037cf55b7170485ba9756009f4c13 Mon Sep 17 00:00:00 2001
From: Nik Afiq <nik.afiq98@ymail.com>
Date: Wed, 5 Nov 2025 16:03:19 +0900
Subject: [PATCH] Fixed display

---
 frontend/src/pages/ShowsPage.tsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/ShowsPage.tsx b/frontend/src/pages/ShowsPage.tsx
index 79c3e2d..1baab19 100644
--- a/frontend/src/pages/ShowsPage.tsx
+++ b/frontend/src/pages/ShowsPage.tsx
@@ -41,6 +41,25 @@ export default function ShowsPage() {
     const [selectedId, setSelectedId] = useState<number | null>(null);
     const [startTime, setStartTime] = useState("");
 
+    function formatPlaybackLen(v: string): string {
+        const parts = v.split(":").map(Number);
+        if (parts.length === 2) {
+            // already MM:SS
+            const [mm, ss] = parts;
+            return `${String(mm).padStart(2, "0")}:${String(ss).padStart(2, "0")}`;
+        }
+        if (parts.length === 3) {
+            const [hh, mm, ss] = parts;
+            if (hh <= 0) {
+                // show MM:SS when hours are zero
+                return `${String(mm).padStart(2, "0")}:${String(ss).padStart(2, "0")}`;
+            }
+            // show HH:MM:SS when hours exist
+            return `${String(hh).padStart(2, "0")}:${String(mm).padStart(2, "0")}:${String(ss).padStart(2, "0")}`;
+        }
+        return v; // fallback (unexpected format)
+    }
+
     // 一覧取得
     useEffect(() => {
         let cancelled = false;
@@ -113,7 +132,7 @@ export default function ShowsPage() {
                             <div className="title">第{s.ep_num}話：{s.ep_title}</div>
                             <div className="season subtle">{s.season_name}</div>
                             <div className="meta subtle">
-                                開始 {s.start_time.slice(0,5)}・長さ {s.playback_length.slice(0,5)}
+                                開始 {s.start_time.slice(0, 5)}・長さ {formatPlaybackLen(s.playback_length)}
                             </div>
                         </button>
                     ))}