Added JP TL
This commit is contained in:
parent
8805b45477
commit
4d939838d1
@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="jp">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
--text: #e6eef8;
|
||||
--subtle: #9fb3c8;
|
||||
--accent: #79c0ff;
|
||||
--header-h: 56px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
@ -145,7 +146,7 @@ kbd {
|
||||
}
|
||||
/* ====== Site chrome (outside card) ====== */
|
||||
.site {
|
||||
min-height: 100%;
|
||||
min-height: 100dvh;
|
||||
position: relative;
|
||||
/* push-mode: the content will slide right when sidebar is open */
|
||||
}
|
||||
@ -153,11 +154,9 @@ kbd {
|
||||
.site-header {
|
||||
position: fixed;
|
||||
z-index: 50;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
top: 0; left: 16px; right: 16px;
|
||||
display: flex; gap: 12px; align-items: center;
|
||||
height: var(--header-h);
|
||||
}
|
||||
|
||||
.burger {
|
||||
@ -229,11 +228,10 @@ kbd {
|
||||
|
||||
/* Main content wrapper; centers the card like before */
|
||||
.site-content {
|
||||
min-height: 100%;
|
||||
min-height: calc(100dvh - var(--header-h));
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
transition: transform 180ms ease;
|
||||
padding: calc(var(--header-h) + 12px) 24px 32px;
|
||||
}
|
||||
|
||||
/* ====== Card stays as you had ====== */
|
||||
|
||||
@ -5,15 +5,31 @@ type Show = {
|
||||
ep_num: number;
|
||||
ep_title: string;
|
||||
season_name: string;
|
||||
start_time: string; // "HH:MM:SS"
|
||||
playback_length: string; // "HH:MM:SS" or "MM:SS"
|
||||
start_time: string;
|
||||
playback_length: string;
|
||||
date_created: string;
|
||||
};
|
||||
|
||||
const GET_URL = "/api/v1/shows";
|
||||
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() {
|
||||
const [shows, setShows] = useState<Show[]>([]);
|
||||
@ -21,10 +37,11 @@ export default function ShowsPage() {
|
||||
const [posting, setPosting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// form state
|
||||
// フォーム状態
|
||||
const [selectedId, setSelectedId] = useState<number | null>(null);
|
||||
const [startTime, setStartTime] = useState("");
|
||||
|
||||
// 一覧取得
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
@ -35,7 +52,7 @@ export default function ShowsPage() {
|
||||
const data = (await res.json()) as Show[];
|
||||
if (!cancelled) setShows(data);
|
||||
} catch (e: any) {
|
||||
if (!cancelled) setError(e.message || "Failed to load shows");
|
||||
if (!cancelled) setError(e.message || "番組一覧の取得に失敗しました。");
|
||||
} finally {
|
||||
if (!cancelled) setLoading(false);
|
||||
}
|
||||
@ -47,23 +64,27 @@ export default function ShowsPage() {
|
||||
|
||||
async function submit() {
|
||||
setError(null);
|
||||
if (!selectedId) { setError("Pick an episode first"); return; }
|
||||
if (startTime && !HHMMSS.test(startTime)) { setError("Start time must be HH:MM:SS"); return; }
|
||||
if (!selectedId) { setError("エピソードを選択してください。"); 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 {
|
||||
setPosting(true);
|
||||
const body: any = { id: selectedId };
|
||||
if (startTime) body.start_time = startTime;
|
||||
const res = await fetch(POST_URL, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (!res.ok) throw new Error(`POST failed (${res.status})`);
|
||||
// success UX
|
||||
if (!res.ok) throw new Error(`POST 失敗 (${res.status})`);
|
||||
setStartTime("");
|
||||
} catch (e: any) {
|
||||
setError(e.message || "Failed to set current");
|
||||
setError(e.message || "現在のエピソード設定に失敗しました。");
|
||||
} finally {
|
||||
setPosting(false);
|
||||
}
|
||||
@ -71,13 +92,15 @@ export default function ShowsPage() {
|
||||
|
||||
return (
|
||||
<div className="shows-page">
|
||||
<h2 className="h1" style={{ marginBottom: 8 }}>Shows</h2>
|
||||
<p className="subtle" style={{ marginTop: 0 }}>Pick an episode, set optional start time (HH:MM:SS), then “Set current”.</p>
|
||||
<h2 className="h1" style={{ marginBottom: 8 }}>エピソード一覧</h2>
|
||||
<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>}
|
||||
|
||||
{!loading && shows.length === 0 && <div className="subtle">No shows.</div>}
|
||||
{!loading && shows.length === 0 && <div className="subtle">エピソードがありません。</div>}
|
||||
|
||||
{shows.length > 0 && (
|
||||
<div className="shows-grid">
|
||||
@ -87,9 +110,11 @@ export default function ShowsPage() {
|
||||
className={`show-card ${selectedId === s.id ? "selected" : ""}`}
|
||||
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="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>
|
||||
))}
|
||||
</div>
|
||||
@ -98,19 +123,32 @@ export default function ShowsPage() {
|
||||
<div className="form-row">
|
||||
<input
|
||||
className="input"
|
||||
placeholder="Start time (HH:MM:SS) — optional"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
placeholder="HH:MM"
|
||||
value={startTime}
|
||||
onChange={e => setStartTime(e.target.value.trim())}
|
||||
maxLength={8}
|
||||
onChange={(e) => setStartTime(e.target.value)}
|
||||
onBlur={(e) => {
|
||||
const v = toHHMM(e.target.value);
|
||||
if (v) setStartTime(v);
|
||||
}}
|
||||
/>
|
||||
<button className="primary" disabled={posting || !selectedId || (!!startTime && !HHMMSS.test(startTime))} onClick={submit}>
|
||||
{posting ? "Setting…" : "Set current"}
|
||||
<button
|
||||
className="primary"
|
||||
disabled={
|
||||
posting ||
|
||||
!selectedId ||
|
||||
(!!startTime && !toHHMMSS(startTime))
|
||||
}
|
||||
onClick={submit}
|
||||
>
|
||||
{posting ? "設定中…" : "現在のエピソードに設定"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{current && (
|
||||
<div className="subtle" style={{ marginTop: 8 }}>
|
||||
Selected: Ep {current.ep_num} — {current.ep_title}
|
||||
選択中：第{current.ep_num}話「{current.ep_title}」
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user