Live wall: saved views in the URL hash, per-viewer memory, kiosk mode (#234)
- liveWall.ts: WallLink carries layers (short stable keys), z/lat/lon, base, tourMs, kiosk and an f.<name> filter pass-through for #235; parse/serialise stay pure and round-trip; old inc/cam/tour links parse. - MapView: overlays/basemap/viewport come from initialLayers/initialBase/ initialView (defaults unchanged); onViewStateChange reports layer, base and region-view changes (debounced). Initially-checked overlays now start "shown" (react-leaflet adds a checked overlay before the control can fire overlayadd). Closing an incident flies back to the pre-drill view (#137). - wallPrefs.ts: per-browser last layers/base/view in localStorage, every access wrapped; precedence hash > remembered > defaults. - LiveView: one effect mirrors wall + map state into the hash; hash edits remount the map with the new view; Copy view link; configurable tour. - Kiosk (?kiosk=1 or #kiosk): no nav, fullscreen button (auto on first touch), Screen Wake Lock re-acquired on visibility, reconnect banner (offline / useCalls error) with backoff reload, 18-20 px type via a data-kiosk attribute and Tailwind arbitrary variants. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Logan Cusano
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
7bee87b147
commit
afd2bc463d
@@ -7,8 +7,14 @@
|
||||
* KPIs, transcript ticker, scrubber with incident bands, auto-tour and deep
|
||||
* links (#inc=…&cam=…&tour). Every MapView layer stays — nodes, incidents,
|
||||
* paths, ADS-B, AIS, cameras, viewsheds, traffic events, NEXRAD.
|
||||
*
|
||||
* Saved views (server-26#234): overlays, basemap and viewport live in the
|
||||
* URL hash too (lib/liveWall.ts wallHash), so a reload or a copied link comes
|
||||
* back the same; each browser also remembers its last view (lib/wallPrefs.ts).
|
||||
* Precedence: hash > remembered > defaults. `?kiosk=1` / `#kiosk` is the
|
||||
* wall-display mode (lib/useKiosk.ts).
|
||||
*/
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
import { useNodes } from "@/lib/useNodes";
|
||||
import { useActiveCalls, useCalls } from "@/lib/useCalls";
|
||||
@@ -21,8 +27,12 @@ import { severityRank } from "@/lib/severity";
|
||||
import type { Camera, Ny511Response } from "@/lib/types";
|
||||
import {
|
||||
NEAR_CAMERA_KM, bboxAround, groupCallsByIncident, incidentPoints, km, nearestCameras, onAirIncidentIds,
|
||||
parseWallHash, wallHash, worstFirst, type LatLon, type NearCamera, type WallLink,
|
||||
parseWallHash, sameView, wallHash, worstFirst, type LatLon, type NearCamera, type WallLink,
|
||||
} from "@/lib/liveWall";
|
||||
import { loadWallPrefs, resolveWallView, saveWallPrefs } from "@/lib/wallPrefs";
|
||||
import { announceKioskChange, kioskInQuery, stripKioskQuery, useKiosk } from "@/lib/useKiosk";
|
||||
import { KioskBanner, KioskControls } from "@/components/live/KioskControls";
|
||||
import type { MapViewState } from "@/components/MapView";
|
||||
import { TimeScrubber } from "@/components/TimeScrubber";
|
||||
import { TranscriptTicker } from "@/components/live/TranscriptTicker";
|
||||
import { CameraDrill } from "@/components/live/CameraDrill";
|
||||
@@ -33,6 +43,17 @@ import { usePipelineHealth } from "@/lib/usePipelineHealth";
|
||||
const MapView = dynamic(() => import("@/components/MapView"), { ssr: false });
|
||||
|
||||
const TOUR_MS = 20_000;
|
||||
// 10-foot type for kiosk walls (server-26#234): scales every small text class
|
||||
// under the wall root — including MapView's rail and WallPanels, which are not
|
||||
// edited for it — to 18-20 px. Literal strings so Tailwind's scanner sees them.
|
||||
const KIOSK_TYPE = [
|
||||
"[&[data-kiosk]_.text-xs]:text-[18px]", "[&[data-kiosk]_.text-xs]:leading-snug",
|
||||
"[&[data-kiosk]_.text-sm]:text-[20px]", "[&[data-kiosk]_.text-sm]:leading-snug",
|
||||
"[&[data-kiosk]_[class*='text-[9px]']]:text-[18px]",
|
||||
"[&[data-kiosk]_[class*='text-[10px]']]:text-[18px]",
|
||||
"[&[data-kiosk]_[class*='text-[11px]']]:text-[18px]",
|
||||
"[&[data-kiosk]_.w-56]:w-80",
|
||||
].join(" ");
|
||||
const PIN_KEY = "drb.wall.pinnedCameras";
|
||||
const MAX_PINNED = 6;
|
||||
const EVENTS_POLL_MS = 2 * 60 * 1000;
|
||||
@@ -92,7 +113,7 @@ export function LiveView() {
|
||||
const activeIncidents = useActiveIncidents();
|
||||
// Wide-ish recent window: feeds incident paths, the call spine, the ticker
|
||||
// and the scrubber's density bars. Real recent calls, not a fixture.
|
||||
const { calls: recentCalls, loading: callsLoading } = useCalls(500);
|
||||
const { calls: recentCalls, loading: callsLoading, error: callsError } = useCalls(500);
|
||||
const { aircraft } = useAircraft();
|
||||
const { vessels } = useVessels();
|
||||
const [clock, setClock] = useState<string>("");
|
||||
@@ -108,19 +129,78 @@ export function LiveView() {
|
||||
}, []);
|
||||
|
||||
// ── Wall state, mirrored in the URL hash ──────────────────────────────────
|
||||
// `link` = where the wall is (incident/camera/tour/kiosk/filters);
|
||||
// `mapState` = what the map looks like (layers/base/viewport). Both are
|
||||
// written back to the hash by one effect, so the address bar is always a
|
||||
// working "this exact view" link. null until the hash has been read, so
|
||||
// MapView never mounts with the wrong initial view.
|
||||
const [link, setLinkState] = useState<WallLink>({ inc: null, cam: null, tour: false });
|
||||
const [mapState, setMapState] = useState<MapViewState | null>(null);
|
||||
const mapStateRef = useRef<MapViewState | null>(null);
|
||||
mapStateRef.current = mapState;
|
||||
/** Bumped when a hash edit changes layers/base/view: MapView remounts with them. */
|
||||
const [mapGen, setMapGen] = useState(0);
|
||||
const [kioskQuery, setKioskQuery] = useState(false);
|
||||
useEffect(() => {
|
||||
const read = () => setLinkState(parseWallHash(window.location.hash));
|
||||
read();
|
||||
window.addEventListener("hashchange", read);
|
||||
return () => window.removeEventListener("hashchange", read);
|
||||
const read = (first: boolean) => {
|
||||
const parsed = parseWallHash(window.location.hash);
|
||||
const { layers, base, view, ...nav } = parsed;
|
||||
setLinkState(nav);
|
||||
const cur = mapStateRef.current;
|
||||
const next = resolveWallView({ layers, base, view }, first || !cur ? loadWallPrefs() : cur);
|
||||
if (first || !cur) setMapState(next);
|
||||
else if (!sameView(cur, next)) { setMapState(next); setMapGen((g) => g + 1); }
|
||||
};
|
||||
setKioskQuery(kioskInQuery());
|
||||
read(true);
|
||||
const onHash = () => read(false);
|
||||
window.addEventListener("hashchange", onHash);
|
||||
return () => window.removeEventListener("hashchange", onHash);
|
||||
}, []);
|
||||
const setLink = useCallback((next: WallLink) => {
|
||||
setLinkState(next);
|
||||
const h = wallHash(next);
|
||||
window.history.replaceState(null, "", h || window.location.pathname + window.location.search);
|
||||
useEffect(() => {
|
||||
if (!mapState) return;
|
||||
const h = wallHash({ ...link, ...mapState });
|
||||
if (h !== window.location.hash) {
|
||||
window.history.replaceState(window.history.state, "", window.location.pathname + window.location.search + h);
|
||||
}
|
||||
announceKioskChange();
|
||||
}, [link, mapState]);
|
||||
const patchLink = useCallback((p: Partial<WallLink>) => setLinkState((cur) => ({ ...cur, ...p })), []);
|
||||
const onViewStateChange = useCallback((s: MapViewState) => {
|
||||
setMapState((cur) => {
|
||||
// Keep a known viewport if the map hasn't reported one yet.
|
||||
const next = { ...s, view: s.view ?? cur?.view };
|
||||
saveWallPrefs(next);
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const [copied, setCopied] = useState<"ok" | "fail" | null>(null);
|
||||
const copyViewLink = useCallback(() => {
|
||||
const done = (r: "ok" | "fail") => { setCopied(r); setTimeout(() => setCopied(null), 2000); };
|
||||
try {
|
||||
navigator.clipboard.writeText(window.location.href).then(() => done("ok"), () => done("fail"));
|
||||
} catch {
|
||||
done("fail");
|
||||
}
|
||||
}, []);
|
||||
|
||||
// ── Kiosk ─────────────────────────────────────────────────────────────────
|
||||
const kiosk = kioskQuery || !!link.kiosk;
|
||||
const kioskState = useKiosk(kiosk, callsError);
|
||||
const toggleKiosk = useCallback(() => {
|
||||
if (kiosk) {
|
||||
stripKioskQuery();
|
||||
setKioskQuery(false);
|
||||
patchLink({ kiosk: false });
|
||||
} else {
|
||||
patchLink({ kiosk: true });
|
||||
// This click is the user gesture fullscreen needs.
|
||||
if (!kioskState.fullscreen) kioskState.toggleFullscreen();
|
||||
}
|
||||
}, [kiosk, kioskState, patchLink]);
|
||||
const tourMs = link.tourMs ?? TOUR_MS;
|
||||
|
||||
const [pinned, setPinned] = useState<Camera[]>([]);
|
||||
useEffect(() => { setPinned(loadPinned()); }, []);
|
||||
const pinnedIds = useMemo(() => new Set(pinned.map((c) => c.id)), [pinned]);
|
||||
@@ -185,13 +265,13 @@ export function LiveView() {
|
||||
}, [servingPinned, sorted, nearById]);
|
||||
|
||||
// ── Navigation ────────────────────────────────────────────────────────────
|
||||
const selectIncident = useCallback((id: string) => setLink({ inc: id, cam: null, tour: false }), [setLink]);
|
||||
const openCamera = useCallback((c: Camera) => setLink({ ...link, cam: c.id, tour: false }), [link, setLink]);
|
||||
const selectIncident = useCallback((id: string) => patchLink({ inc: id, cam: null, tour: false }), [patchLink]);
|
||||
const openCamera = useCallback((c: Camera) => patchLink({ cam: c.id, tour: false }), [patchLink]);
|
||||
const stepUp = useCallback(() => {
|
||||
if (link.cam) setLink({ ...link, cam: null, tour: false });
|
||||
else if (link.inc) setLink({ inc: null, cam: null, tour: false });
|
||||
else if (link.tour) setLink({ ...link, tour: false });
|
||||
}, [link, setLink]);
|
||||
if (link.cam) patchLink({ cam: null, tour: false });
|
||||
else if (link.inc) patchLink({ inc: null, cam: null, tour: false });
|
||||
else if (link.tour) patchLink({ tour: false });
|
||||
}, [link, patchLink]);
|
||||
useEffect(() => {
|
||||
const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") stepUp(); };
|
||||
window.addEventListener("keydown", onKey);
|
||||
@@ -211,20 +291,18 @@ export function LiveView() {
|
||||
const next = () => {
|
||||
setLinkState((cur) => {
|
||||
const i = cur.inc ? tourList.indexOf(cur.inc) : -1;
|
||||
const nxt: WallLink = { inc: tourList[(i + 1) % tourList.length], cam: null, tour: true };
|
||||
window.history.replaceState(null, "", wallHash(nxt));
|
||||
return nxt;
|
||||
return { ...cur, inc: tourList[(i + 1) % tourList.length], cam: null, tour: true };
|
||||
});
|
||||
setTourStart(Date.now());
|
||||
};
|
||||
if (!link.inc || !tourList.includes(link.inc)) next();
|
||||
else setTourStart(Date.now());
|
||||
const id = setInterval(next, TOUR_MS);
|
||||
const id = setInterval(next, tourMs);
|
||||
const prog = setInterval(() => setTourNow(Date.now()), 500);
|
||||
return () => { clearInterval(id); clearInterval(prog); };
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [link.tour, tourList.join(",")]);
|
||||
const tourPct = link.tour && tourStart ? Math.min(100, ((tourNow - tourStart) / TOUR_MS) * 100) : 0;
|
||||
}, [link.tour, tourList.join(","), tourMs]);
|
||||
const tourPct = link.tour && tourStart ? Math.min(100, ((tourNow - tourStart) / tourMs) * 100) : 0;
|
||||
|
||||
// ── KPIs ──────────────────────────────────────────────────────────────────
|
||||
const count = (sev: string) => activeIncidents.filter((i) => i.severity === sev).length;
|
||||
@@ -245,14 +323,14 @@ export function LiveView() {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div data-kiosk={kiosk ? "" : undefined} className={`flex flex-col h-full ${KIOSK_TYPE}`}>
|
||||
{/* ── Wall bar: drill crumbs · KPIs · auto-tour · clock ── */}
|
||||
<div className="shrink-0 flex flex-wrap items-center gap-x-4 gap-y-1 px-3 py-1.5 border-b border-line bg-surface/95 text-xs">
|
||||
<nav aria-label="Drill level" className="flex items-center gap-0.5">
|
||||
{crumb("Region", !link.inc, true, () => setLink({ inc: null, cam: null, tour: false }))}
|
||||
{crumb("Region", !link.inc, true, () => patchLink({ inc: null, cam: null, tour: false }))}
|
||||
<span className="text-ink-muted">›</span>
|
||||
{crumb(selected?.title ? `Incident: ${selected.title.slice(0, 32)}` : "Incident", !!link.inc && !link.cam, !!link.inc,
|
||||
() => setLink({ ...link, cam: null, tour: false }))}
|
||||
() => patchLink({ cam: null, tour: false }))}
|
||||
<span className="text-ink-muted">›</span>
|
||||
{crumb("Camera", !!link.cam, !!link.cam, () => undefined)}
|
||||
</nav>
|
||||
@@ -268,7 +346,7 @@ export function LiveView() {
|
||||
</div>
|
||||
<div className="ml-auto flex items-center gap-3">
|
||||
<TruthStrip health={health} placement="chips" />
|
||||
<button type="button" aria-pressed={link.tour} onClick={() => setLink({ ...link, cam: null, tour: !link.tour })}
|
||||
<button type="button" aria-pressed={link.tour} onClick={() => patchLink({ cam: null, tour: !link.tour })}
|
||||
title="Wall mode: cycle through active incidents, worst first"
|
||||
className={`px-2 py-0.5 rounded border ${link.tour ? "bg-accent text-white border-accent" : "border-line text-ink-2 hover:text-ink"}`}>
|
||||
Auto-tour
|
||||
@@ -278,9 +356,15 @@ export function LiveView() {
|
||||
<span className="block h-full bg-accent" style={{ width: `${tourPct}%` }} />
|
||||
</span>
|
||||
)}
|
||||
<button type="button" onClick={copyViewLink} title="Copy a link to this exact view: layers, map position, selection"
|
||||
className="px-2 py-0.5 rounded border border-line text-ink-2 hover:text-ink whitespace-nowrap" aria-live="polite">
|
||||
{copied === "ok" ? "Link copied" : copied === "fail" ? "Copy failed — use the address bar" : "Copy view link"}
|
||||
</button>
|
||||
<KioskControls kiosk={kiosk} state={kioskState} onToggleKiosk={toggleKiosk} />
|
||||
<span className="font-mono text-ink-2 tabular-nums">{clock}</span>
|
||||
</div>
|
||||
</div>
|
||||
<KioskBanner banner={kioskState.banner} onRetry={kioskState.retryNow} />
|
||||
<TruthStrip health={health} placement="bar" />
|
||||
|
||||
<div className="flex-1 min-h-0 flex flex-col lg:flex-row">
|
||||
@@ -288,7 +372,7 @@ export function LiveView() {
|
||||
{/* Degraded → grey the map and its incident rail (the rail lives inside
|
||||
MapView, so it is wrapped here rather than edited). */}
|
||||
<div className={`w-full h-full transition-[filter,opacity] ${health.degraded ? "grayscale opacity-60" : ""}`}>
|
||||
{nodesLoading || callsLoading ? (
|
||||
{nodesLoading || callsLoading || !mapState ? (
|
||||
<div className="w-full h-full flex items-center justify-center text-ink-muted text-sm">Loading map…</div>
|
||||
) : (
|
||||
<MapView
|
||||
@@ -302,6 +386,11 @@ export function LiveView() {
|
||||
onOpenCamera={openCamera}
|
||||
onAir={onAir}
|
||||
camCountByIncident={camCountByIncident}
|
||||
key={mapGen}
|
||||
initialLayers={mapState.layers}
|
||||
initialBase={mapState.base}
|
||||
initialView={mapState.view}
|
||||
onViewStateChange={onViewStateChange}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@@ -317,7 +406,7 @@ export function LiveView() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<aside className="lg:w-[360px] lg:shrink-0 flex-1 lg:flex-none min-h-0 overflow-y-auto border-t lg:border-t-0 lg:border-l border-line bg-surface"
|
||||
<aside className={`${kiosk ? "lg:w-[480px]" : "lg:w-[360px]"} lg:shrink-0 flex-1 lg:flex-none min-h-0 overflow-y-auto border-t lg:border-t-0 lg:border-l border-line bg-surface`}
|
||||
aria-live="polite" aria-label={selected ? "Incident detail" : "Region overview"}>
|
||||
{selected ? (
|
||||
<IncidentPanel
|
||||
@@ -365,7 +454,7 @@ export function LiveView() {
|
||||
incidentTitle={selected?.title}
|
||||
pinned={pinnedIds.has(drillCam.id)}
|
||||
onTogglePin={() => togglePin(drillCam)}
|
||||
onClose={() => setLink({ ...link, cam: null })}
|
||||
onClose={() => patchLink({ cam: null })}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user