nik/watch-party
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added JP TL

Browse Source
This commit is contained in:
Nik Afiq 2025-11-05 15:28:17 +09:00
parent 8805b45477
commit 4d939838d1
3 changed files with 71 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="jp">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />

16
frontend/src/index.css
View File

@ -4,6 +4,7 @@
--text: #e6eef8; --text: #e6eef8;
--subtle: #9fb3c8; --subtle: #9fb3c8;
--accent: #79c0ff; --accent: #79c0ff;
--header-h: 56px;
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
@ -145,7 +146,7 @@ kbd {
} }
/* ====== Site chrome (outside card) ====== */ /* ====== Site chrome (outside card) ====== */
.site { .site {
min-height: 100%; min-height: 100dvh;
position: relative; position: relative;
/* push-mode: the content will slide right when sidebar is open */ /* push-mode: the content will slide right when sidebar is open */
} }
@ -153,11 +154,9 @@ kbd {
.site-header { .site-header {
position: fixed; position: fixed;
z-index: 50; z-index: 50;
top: 16px; top: 0; left: 16px; right: 16px;
left: 16px; display: flex; gap: 12px; align-items: center;
display: flex; height: var(--header-h);
gap: 12px;
align-items: center;
} }
.burger { .burger {
@ -229,11 +228,10 @@ kbd {
/* Main content wrapper; centers the card like before */ /* Main content wrapper; centers the card like before */
.site-content { .site-content {
min-height: 100%; min-height: calc(100dvh - var(--header-h));
display: grid; display: grid;
place-items: center; place-items: center;
padding: 24px; padding: calc(var(--header-h) + 12px) 24px 32px;
transition: transform 180ms ease;
} }
/* ====== Card stays as you had ====== */ /* ====== Card stays as you had ====== */

88
frontend/src/pages/ShowsPage.tsx
View File

@ -5,15 +5,31 @@ type Show = {
ep_num: number; ep_num: number;
ep_title: string; ep_title: string;
season_name: string; season_name: string;
start_time: string; // "HH:MM:SS" start_time: string;
playback_length: string; // "HH:MM:SS" or "MM:SS" playback_length: string;
date_created: string; date_created: string;
}; };
const GET_URL = "/api/v1/shows"; const GET_URL = "/api/v1/shows";
const POST_URL = "/api/v1/current"; const POST_URL = "/api/v1/current";
const HHMMSS = /^([01]\d|2[0-3]):[0-5]\d:[0-5]\d$/; const HHMM = /^(\d{1,2}):([0-5]\d)$/;
function toHHMMSS(v: string): string | null {
const m = v.trim().match(HHMM);
if (!m) return null;
const h = Math.abs(parseInt(m[1], 10));
if (h > 23) return null;
const hh = String(h).padStart(2, "0");
const mm = m[2];
return `${hh}:${mm}:00`;
}
function toHHMM(v: string): string | null {
const m = v.trim().match(/^(\d{1,2}):([0-5]\d)$/);
if (!m) return null;
const h = Number(m[1]); if (h > 23) return null;
return `${String(h).padStart(2, "0")}:${m[2]}`;
}
export default function ShowsPage() { export default function ShowsPage() {
const [shows, setShows] = useState<Show[]>([]); const [shows, setShows] = useState<Show[]>([]);
@ -21,10 +37,11 @@ export default function ShowsPage() {
const [posting, setPosting] = useState(false); const [posting, setPosting] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
// form state // フォーム状態
const [selectedId, setSelectedId] = useState<number | null>(null); const [selectedId, setSelectedId] = useState<number | null>(null);
const [startTime, setStartTime] = useState(""); const [startTime, setStartTime] = useState("");
// 一覧取得
useEffect(() => { useEffect(() => {
let cancelled = false; let cancelled = false;
(async () => { (async () => {
@ -35,7 +52,7 @@ export default function ShowsPage() {
const data = (await res.json()) as Show[]; const data = (await res.json()) as Show[];
if (!cancelled) setShows(data); if (!cancelled) setShows(data);
} catch (e: any) { } catch (e: any) {
if (!cancelled) setError(e.message || "Failed to load shows"); if (!cancelled) setError(e.message || "番組一覧の取得に失敗しました。");
} finally { } finally {
if (!cancelled) setLoading(false); if (!cancelled) setLoading(false);
} }
@ -47,23 +64,27 @@ export default function ShowsPage() {
async function submit() { async function submit() {
setError(null); setError(null);
if (!selectedId) { setError("Pick an episode first"); return; } if (!selectedId) { setError("エピソードを選択してください。"); return; }
if (startTime && !HHMMSS.test(startTime)) { setError("Start time must be HH:MM:SS"); return; }
let payload: any = { id: selectedId };
if (startTime) {
const normalized = toHHMMSS(startTime);
if (!normalized) { setError("開始時刻は HH:MM の形式で入力してください。"); return; }
payload.start_time = normalized; // API expects HH:MM:SS
}
try { try {
setPosting(true); setPosting(true);
const body: any = { id: selectedId };
if (startTime) body.start_time = startTime;
const res = await fetch(POST_URL, { const res = await fetch(POST_URL, {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify(body), body: JSON.stringify(payload),
}); });
if (!res.ok) throw new Error(`POST failed (${res.status})`); if (!res.ok) throw new Error(`POST 失敗 (${res.status})`);
// success UX
setStartTime(""); setStartTime("");
} catch (e: any) { } catch (e: any) {
setError(e.message || "Failed to set current"); setError(e.message || "現在のエピソード設定に失敗しました。");
} finally { } finally {
setPosting(false); setPosting(false);
} }
@ -71,13 +92,15 @@ export default function ShowsPage() {
return ( return (
<div className="shows-page"> <div className="shows-page">
<h2 className="h1" style={{ marginBottom: 8 }}>Shows</h2> <h2 className="h1" style={{ marginBottom: 8 }}>エピソード一覧</h2>
<p className="subtle" style={{ marginTop: 0 }}>Pick an episode, set optional start time (HH:MM:SS), then “Set current”.</p> <p className="subtle" style={{ marginTop: 0 }}>
エピソードを選択し、必要であれば開始時刻（HH:MM）を入力して「現在のエピソードに設定」を押してください。
</p>
{loading && <div className="subtle">Loading…</div>} {loading && <div className="subtle">読み込み中…</div>}
{error && <div className="timer-status" style={{ color: "#f88" }}>{error}</div>} {error && <div className="timer-status" style={{ color: "#f88" }}>{error}</div>}
{!loading && shows.length === 0 && <div className="subtle">No shows.</div>} {!loading && shows.length === 0 && <div className="subtle">エピソードがありません。</div>}
{shows.length > 0 && ( {shows.length > 0 && (
<div className="shows-grid"> <div className="shows-grid">
@ -87,9 +110,11 @@ export default function ShowsPage() {
className={`show-card ${selectedId === s.id ? "selected" : ""}`} className={`show-card ${selectedId === s.id ? "selected" : ""}`}
onClick={() => setSelectedId(s.id)} onClick={() => setSelectedId(s.id)}
> >
<div className="title">Ep {s.ep_num}: {s.ep_title}</div> <div className="title">第{s.ep_num}話：{s.ep_title}</div>
<div className="season subtle">{s.season_name}</div> <div className="season subtle">{s.season_name}</div>
<div className="meta subtle">Start {s.start_time} • Length {s.playback_length}</div> <div className="meta subtle">
開始 {s.start_time.slice(0,5)}・長さ {s.playback_length.slice(0,5)}
</div>
</button> </button>
))} ))}
</div> </div>
@ -98,19 +123,32 @@ export default function ShowsPage() {
<div className="form-row"> <div className="form-row">
<input <input
className="input" className="input"
placeholder="Start time (HH:MM:SS) — optional" type="text"
inputMode="numeric"
placeholder="HH:MM"
value={startTime} value={startTime}
onChange={e => setStartTime(e.target.value.trim())} onChange={(e) => setStartTime(e.target.value)}
maxLength={8} onBlur={(e) => {
const v = toHHMM(e.target.value);
if (v) setStartTime(v);
}}
/> />
<button className="primary" disabled={posting || !selectedId || (!!startTime && !HHMMSS.test(startTime))} onClick={submit}> <button
{posting ? "Setting…" : "Set current"} className="primary"
disabled={
posting ||
!selectedId ||
(!!startTime && !toHHMMSS(startTime))
}
onClick={submit}
>
{posting ? "設定中…" : "現在のエピソードに設定"}
</button> </button>
</div> </div>
{current && ( {current && (
<div className="subtle" style={{ marginTop: 8 }}> <div className="subtle" style={{ marginTop: 8 }}>
Selected: Ep {current.ep_num} — {current.ep_title} 選択中：第{current.ep_num}話「{current.ep_title}」
</div> </div>
)} )}
</div> </div>