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

Fixed time out of sync not showing

Browse Source
This commit is contained in:
Nik Afiq 2025-11-11 22:48:42 +09:00
parent 062c659cde
commit d915375c7f
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/TimeSyncNotice.tsx
View File

@ -8,17 +8,15 @@ function formatMs(ms: number) {
export default function TimeSyncNotice({ export default function TimeSyncNotice({
thresholdMs = 500, thresholdMs = 500,
endpoint,
intervalMs, intervalMs,
lang = "ja", lang = "ja",
}: { }: {
thresholdMs?: number; thresholdMs?: number;
endpoint?: string;
intervalMs?: number; intervalMs?: number;
lang?: "ja" | "en"; lang?: "ja" | "en";
}) { }) {
// removed `error` // removed `error`
const { skewMs, rttMs, recheck } = useTimeSkew({ endpoint, intervalMs }); const { skewMs, rttMs, recheck } = useTimeSkew({ intervalMs });
const [dismissed, setDismissed] = useState<boolean>(() => { const [dismissed, setDismissed] = useState<boolean>(() => {
try { return sessionStorage.getItem("timesync.dismissed") === "1"; } catch { return false; } try { return sessionStorage.getItem("timesync.dismissed") === "1"; } catch { return false; }

8
frontend/src/hooks/useTimeSkew.ts
View File

@ -1,4 +1,5 @@
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { API_ENDPOINT } from "../api/endpoint";
/** /**
* Measures client clock skew vs server time {now: <ms since epoch, UTC>}. * Measures client clock skew vs server time {now: <ms since epoch, UTC>}.
@ -9,6 +10,8 @@ import { useEffect, useRef, useState } from "react";
* offset ≈ ((t0 + t1)/2) - s * offset ≈ ((t0 + t1)/2) - s
* Positive offset => client is AHEAD by that many ms. * Positive offset => client is AHEAD by that many ms.
*/ */
const TIME_URL_ENDPOINT = API_ENDPOINT.v1.TIME;
export function useTimeSkew(opts?: { export function useTimeSkew(opts?: {
endpoint?: string; // e.g., "/api/time" or `${import.meta.env.BASE_URL}api/time` endpoint?: string; // e.g., "/api/time" or `${import.meta.env.BASE_URL}api/time`
intervalMs?: number; // how often to recheck; default 5 min intervalMs?: number; // how often to recheck; default 5 min
@ -16,7 +19,6 @@ export function useTimeSkew(opts?: {
enabled?: boolean; // allow turning off; default true enabled?: boolean; // allow turning off; default true
}) { }) {
const { const {
endpoint = "/api/time",
intervalMs = 5 * 60_000, intervalMs = 5 * 60_000,
samples = 1, samples = 1,
enabled = true, enabled = true,
@ -29,7 +31,7 @@ export function useTimeSkew(opts?: {
const measureOnce = async () => { const measureOnce = async () => {
const t0 = Date.now(); const t0 = Date.now();
const res = await fetch(endpoint, { cache: "no-store" }); const res = await fetch(TIME_URL_ENDPOINT, { cache: "no-store" });
const t1 = Date.now(); const t1 = Date.now();
if (!res.ok) throw new Error(`HTTP ${res.status}`); if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json(); const data = await res.json();
@ -81,7 +83,7 @@ export function useTimeSkew(opts?: {
if (timerRef.current) window.clearInterval(timerRef.current); if (timerRef.current) window.clearInterval(timerRef.current);
}; };
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [endpoint, intervalMs, samples, enabled]); }, [intervalMs, samples, enabled]);
return { skewMs, rttMs, error, recheck: measure }; return { skewMs, rttMs, error, recheck: measure };
} }