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 1/5] 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>
                     ))}

From 71ab2cfe86a5d7ca0e1c42d8a55bbfd02aa03a13 Mon Sep 17 00:00:00 2001
From: Nik Afiq <nik.afiq98@ymail.com>
Date: Wed, 5 Nov 2025 16:08:30 +0900
Subject: [PATCH 2/5] Remove input requirement

---
 frontend/src/pages/ShowsPage.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/ShowsPage.tsx b/frontend/src/pages/ShowsPage.tsx
index 1baab19..d829f8d 100644
--- a/frontend/src/pages/ShowsPage.tsx
+++ b/frontend/src/pages/ShowsPage.tsx
@@ -85,12 +85,17 @@ export default function ShowsPage() {
         setError(null);
         if (!selectedId) { setError("エピソードを選択してください。"); return; }
 
-        let payload: any = { id: selectedId };
+        const selected = shows.find(s => s.id === selectedId);
+        if (!selected) { setError("選択中のエピソードが見つかりません。"); return; }
 
-        if (startTime) {
+        const payload: any = { id: selectedId };
+
+        if (startTime.trim()) {
             const normalized = toHHMMSS(startTime);
             if (!normalized) { setError("開始時刻は HH:MM の形式で入力してください。"); return; }
-            payload.start_time = normalized;  // API expects HH:MM:SS
+            payload.start_time = normalized;
+        } else {
+            payload.start_time = selected.start_time;
         }
 
         try {
@@ -101,7 +106,6 @@ export default function ShowsPage() {
                 body: JSON.stringify(payload),
             });
             if (!res.ok) throw new Error(`POST 失敗 (${res.status})`);
-            setStartTime("");
         } catch (e: any) {
             setError(e.message || "現在のエピソード設定に失敗しました。");
         } finally {

From 78887105fecf02532e2fceac4dc1b14bd773cea5 Mon Sep 17 00:00:00 2001
From: Nik Afiq <nik.afiq98@ymail.com>
Date: Wed, 5 Nov 2025 16:17:40 +0900
Subject: [PATCH 3/5] Sorted show

---
 frontend/src/pages/ShowsPage.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/ShowsPage.tsx b/frontend/src/pages/ShowsPage.tsx
index d829f8d..ce9054d 100644
--- a/frontend/src/pages/ShowsPage.tsx
+++ b/frontend/src/pages/ShowsPage.tsx
@@ -69,7 +69,8 @@ export default function ShowsPage() {
                 const res = await fetch(GET_URL, { cache: "no-store" });
                 if (!res.ok) throw new Error(`HTTP ${res.status}`);
                 const data = (await res.json()) as Show[];
-                if (!cancelled) setShows(data);
+                data.sort((a, b) => a.id - b.id);   // ASC
+                setShows(data);
             } catch (e: any) {
                 if (!cancelled) setError(e.message || "番組一覧の取得に失敗しました。");
             } finally {
@@ -131,7 +132,10 @@ export default function ShowsPage() {
                         <button
                             key={s.id}
                             className={`show-card ${selectedId === s.id ? "selected" : ""}`}
-                            onClick={() => setSelectedId(s.id)}
+                            onClick={() => {
+                                setSelectedId(s.id);
+                                setStartTime(s.start_time.slice(0, 5));
+                            }}
                         >
                             <div className="title">第{s.ep_num}話：{s.ep_title}</div>
                             <div className="season subtle">{s.season_name}</div>

From 3495cd38b50128606fcec8ff8de8676d1dec6c6c Mon Sep 17 00:00:00 2001
From: Nik Afiq <nik.afiq98@ymail.com>
Date: Wed, 5 Nov 2025 17:19:40 +0900
Subject: [PATCH 4/5] Added page redirect after set show

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

diff --git a/frontend/src/pages/ShowsPage.tsx b/frontend/src/pages/ShowsPage.tsx
index ce9054d..551046f 100644
--- a/frontend/src/pages/ShowsPage.tsx
+++ b/frontend/src/pages/ShowsPage.tsx
@@ -1,4 +1,5 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState, useRef } from "react";
+import { useNavigate } from "react-router-dom";
 
 type Show = {
     id: number;
@@ -12,6 +13,7 @@ type Show = {
 
 const GET_URL = "/api/v1/shows";
 const POST_URL = "/api/v1/current";
+const REDIRECT_DELAY_MS = 1200;
 
 const HHMM = /^(\d{1,2}):([0-5]\d)$/;
 
@@ -36,6 +38,8 @@ export default function ShowsPage() {
     const [loading, setLoading] = useState(true);
     const [posting, setPosting] = useState(false);
     const [error, setError] = useState<string | null>(null);
+    const navigate = useNavigate();
+    const redirectTid = useRef<number | null>(null);
 
     // フォーム状態
     const [selectedId, setSelectedId] = useState<number | null>(null);
@@ -82,6 +86,10 @@ export default function ShowsPage() {
 
     const current = useMemo(() => shows.find(s => s.id === selectedId) || null, [shows, selectedId]);
 
+    useEffect(() => {
+        return () => { if (redirectTid.current) window.clearTimeout(redirectTid.current); };
+    }, []);
+
     async function submit() {
         setError(null);
         if (!selectedId) { setError("エピソードを選択してください。"); return; }
@@ -107,6 +115,11 @@ export default function ShowsPage() {
                 body: JSON.stringify(payload),
             });
             if (!res.ok) throw new Error(`POST 失敗 (${res.status})`);
+            setError("設定しました。少々お待ちください…");
+            redirectTid.current = window.setTimeout(
+                () => navigate("/", { replace: true }),
+                REDIRECT_DELAY_MS
+            );
         } catch (e: any) {
             setError(e.message || "現在のエピソード設定に失敗しました。");
         } finally {

From f1eeb65fe884bb9bea50fc242258ac32cd0a8fa3 Mon Sep 17 00:00:00 2001
From: Nik Afiq <nik.afiq98@ymail.com>
Date: Wed, 5 Nov 2025 17:48:09 +0900
Subject: [PATCH 5/5] Added delay in redirect

---
 frontend/src/pages/ShowsPage.tsx | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/frontend/src/pages/ShowsPage.tsx b/frontend/src/pages/ShowsPage.tsx
index 551046f..7b41bf9 100644
--- a/frontend/src/pages/ShowsPage.tsx
+++ b/frontend/src/pages/ShowsPage.tsx
@@ -13,7 +13,7 @@ type Show = {
 
 const GET_URL = "/api/v1/shows";
 const POST_URL = "/api/v1/current";
-const REDIRECT_DELAY_MS = 1200;
+const REDIRECT_DELAY_S = 3;
 
 const HHMM = /^(\d{1,2}):([0-5]\d)$/;
 
@@ -38,8 +38,10 @@ export default function ShowsPage() {
     const [loading, setLoading] = useState(true);
     const [posting, setPosting] = useState(false);
     const [error, setError] = useState<string | null>(null);
-    const navigate = useNavigate();
+    const [redirectIn, setRedirectIn] = useState<number | null>(null);
     const redirectTid = useRef<number | null>(null);
+    const isRedirecting = redirectIn !== null;
+    const navigate = useNavigate();
 
     // フォーム状態
     const [selectedId, setSelectedId] = useState<number | null>(null);
@@ -83,13 +85,16 @@ export default function ShowsPage() {
         })();
         return () => { cancelled = true; };
     }, []);
+    useEffect(() => {
+        return () => {
+            if (redirectTid.current) {
+                window.clearInterval(redirectTid.current);
+            }
+        };
+    }, []);
 
     const current = useMemo(() => shows.find(s => s.id === selectedId) || null, [shows, selectedId]);
 
-    useEffect(() => {
-        return () => { if (redirectTid.current) window.clearTimeout(redirectTid.current); };
-    }, []);
-
     async function submit() {
         setError(null);
         if (!selectedId) { setError("エピソードを選択してください。"); return; }
@@ -115,11 +120,13 @@ export default function ShowsPage() {
                 body: JSON.stringify(payload),
             });
             if (!res.ok) throw new Error(`POST 失敗 (${res.status})`);
-            setError("設定しました。少々お待ちください…");
-            redirectTid.current = window.setTimeout(
-                () => navigate("/", { replace: true }),
-                REDIRECT_DELAY_MS
-            );
+            setRedirectIn(REDIRECT_DELAY_S);
+            const start = Date.now();
+            redirectTid.current = window.setInterval(() => {
+                const left = REDIRECT_DELAY_S - Math.floor((Date.now() - start) / 1000);
+                if (left <= 0) { window.clearInterval(redirectTid.current!); navigate("/", { replace: true }); }
+                else setRedirectIn(left);
+            }, 250);
         } catch (e: any) {
             setError(e.message || "現在のエピソード設定に失敗しました。");
         } finally {
@@ -178,11 +185,12 @@ export default function ShowsPage() {
                     disabled={
                         posting ||
                         !selectedId ||
+                        isRedirecting ||
                         (!!startTime && !toHHMMSS(startTime))
                     }
                     onClick={submit}
                 >
-                    {posting ? "設定中…" : "現在のエピソードに設定"}
+                    {redirectIn !== null ? `設定しました（${redirectIn}）` : posting ? "設定中…" : "現在のエピソードに設定"}
                 </button>
             </div>