/* 聆譯 — shared components & hooks */ const { useState, useEffect, useRef } = React; const DATA = window.APP_DATA; /* ---------------- icons ---------------- */ const I = { mic: , tab: , speaker: , speakerOff: , power: , stop: , swap: , flip: , search: , check: , caretDown: , user: , chat: , ear: , gear: , back: , close: , chevR: , headphone: , upload: , doc: , info: , globe: , gauge: , spark: , key: , eye: , eyeOff: , shield: , trash: , alert: , plug: , record: , expand: , compress: , }; function Svg({ children, vb = "0 0 24 24" }) { return {children}; } /* ---------------- backend url helper ---------------- 後台「後端服務位址」可留空(=同源,本機開發用),也可填正式網址。 會自動去掉結尾的 /v1 與斜線,再接上 /api/... 路徑。 */ function backendApi(backendUrl, pathname) { const base = (backendUrl || "").trim().replace(/\/v1\/?$/i, "").replace(/\/+$/, ""); return base + pathname; } /* ---------------- 時間戳(字幕段落用) ---------------- */ function fmtClock(ts) { const d = ts ? new Date(ts) : new Date(); const p = (n) => String(n).padStart(2, "0"); return p(d.getHours()) + ":" + p(d.getMinutes()) + ":" + p(d.getSeconds()); } /* ---------------- status bar ---------------- */ function StatusBar({ dark }) { const [t, setT] = useState(() => clock()); useEffect(() => { const id = setInterval(() => setT(clock()), 20000); return () => clearInterval(id); }, []); function clock() { const d = new Date(); return d.getHours() + ":" + String(d.getMinutes()).padStart(2, "0"); } return (
{t}
); } /* ---------------- waveform ---------------- */ function Wave() { return ; } /* ---------------- connection pill + popover ---------------- */ const CONN_STATES = { ok: { label: "已連線", color: "var(--ok)", desc: "穩定" }, warn: { label: "重新連線中…", color: "var(--warn)", desc: "暫時中斷" }, lag: { label: "延遲偏高", color: "var(--warn)", desc: "網路擁塞" }, err: { label: "無法使用", color: "var(--err)", desc: "請檢查網路" }, }; function ConnPill({ state, latency, onClick }) { const s = CONN_STATES[state]; const dotClass = state === "ok" ? "dot" : state === "err" ? "dot err" : "dot warn"; return ( ); } function ConnPopover({ state, latency, onClose }) { const order = ["ok", "lag", "warn", "err"]; return ( <>
{order.map(k => { const s = CONN_STATES[k]; return (
{s.label} {k === state && state === "ok" && latency ? latency + "ms" : s.desc}
); })}
); } /* ---------------- language picker sheet ---------------- */ function LangPicker({ title, subtitle, current, exclude, onPick, onClose }) { const [q, setQ] = useState(""); const list = DATA.LANGS.filter(l => { if (exclude && l.id === exclude) return false; if (!q) return true; const s = (l.native + " " + l.en + " " + l.code).toLowerCase(); return s.includes(q.toLowerCase()); }); const common = list.filter(l => l.common); const rest = list.filter(l => !l.common); const Row = (l) => ( ); return (
e.stopPropagation()}>

{title}

{subtitle}

{I.search} setQ(e.target.value)} autoFocus={false} />
{!q && common.length > 0 &&
常用
} {(q ? list : common).map(Row)} {!q && rest.length > 0 &&
所有語言
} {!q && rest.map(Row)}
); } /* ---------------- 全螢幕切換 ---------------- Android Chrome 可隱藏網址列與系統列;iOS iPhone 不支援 Fullscreen API, 請改用「加入主畫面」以全螢幕網頁 App 開啟(由 manifest 處理)。 */ function useFullscreen() { const [fs, setFs] = useState(!!(document.fullscreenElement || document.webkitFullscreenElement)); useEffect(() => { const on = () => setFs(!!(document.fullscreenElement || document.webkitFullscreenElement)); document.addEventListener("fullscreenchange", on); document.addEventListener("webkitfullscreenchange", on); return () => { document.removeEventListener("fullscreenchange", on); document.removeEventListener("webkitfullscreenchange", on); }; }, []); const supported = !!(document.documentElement.requestFullscreen || document.documentElement.webkitRequestFullscreen); const toggle = () => { const el = document.documentElement; if (!document.fullscreenElement && !document.webkitFullscreenElement) { (el.requestFullscreen || el.webkitRequestFullscreen || function () {}).call(el); } else { (document.exitFullscreen || document.webkitExitFullscreen || function () {}).call(document); } }; return { fs, toggle, supported }; } function FullscreenBtn({ className }) { const { fs, toggle, supported } = useFullscreen(); if (!supported) return null; // iPhone Safari:隱藏(改用加入主畫面) return ( ); } Object.assign(window, { I, Svg, backendApi, fmtClock, useFullscreen, FullscreenBtn, StatusBar, Wave, ConnPill, ConnPopover, LangPicker, CONN_STATES });