@camstack/ui-library 1.1.16 → 1.1.17

package/dist/index.cjs

@@ -7710,6 +7710,240 @@ function ensureMfHostInit() {
 	});
 }
 //#endregion
+//#region src/lib/recorded-control-protocol.ts
+/** Serialize a command for `RTCDataChannel.send` (matches the server schema). */
+function serializeRecordedCommand(cmd) {
+	return JSON.stringify(cmd);
+}
+/**
+* Playback mode reported by the server session. `live` = the shared live feed
+* owns the track; every other value describes the recorded feeder.
+*/
+var RECORDED_PLAYBACK_MODES = [
+	"live",
+	"loading",
+	"playing",
+	"paused",
+	"gap",
+	"ended",
+	"error"
+];
+function isRecordedPlaybackMode(value) {
+	return typeof value === "string" && RECORDED_PLAYBACK_MODES.includes(value);
+}
+/**
+* Parse a raw server→client control frame. Returns `null` on any malformed
+* payload (bad JSON, unknown discriminator, wrong field types).
+*/
+function parseRecordedServerMessage(raw) {
+	let parsed;
+	try {
+		parsed = JSON.parse(raw);
+	} catch {
+		return null;
+	}
+	if (typeof parsed !== "object" || parsed === null) return null;
+	const obj = { ...parsed };
+	if (obj.t === "state" && isRecordedPlaybackMode(obj.state)) return {
+		kind: "state",
+		state: obj.state
+	};
+	if (obj.t === "position" && typeof obj.epochMs === "number") return {
+		kind: "position",
+		epochMs: obj.epochMs
+	};
+	return null;
+}
+//#endregion
+//#region src/lib/scrub-controller.ts
+/**
+* scrub-controller — shared scrub-position state for timeline surfaces (R9).
+*
+* Ported from the proven srcV2 viewer implementation
+* (camstack/srcV2/recording/scrub-controller.ts): the same throttle,
+* commit-dedupe, and live→recorded-bypass semantics, now driving the
+* admin-ui `RecordingTimeline` through the `camstack-control` datachannel.
+*
+* Two layers:
+*   1. Pure reducer + helpers (unit-tested, no React deps):
+*      scrubReducer, shouldEmit, shouldCommit, cursorFractionFor,
+*      makeScrubBridge
+*   2. useScrubController hook: thin React glue that bridges the reducer
+*      to a PlaybackControlSink (e.g. the recorded-playback datachannel).
+*/
+var initialScrubState = {
+	scrubbing: false,
+	scrubEpoch: null,
+	playheadEpoch: null,
+	lastSource: null
+};
+function scrubReducer(state, action) {
+	switch (action.type) {
+		case "begin": return {
+			...state,
+			scrubbing: true,
+			scrubEpoch: null,
+			lastSource: action.source
+		};
+		case "update": return {
+			...state,
+			scrubbing: true,
+			scrubEpoch: action.epoch,
+			lastSource: action.source
+		};
+		case "end": return {
+			...state,
+			scrubbing: false,
+			scrubEpoch: null,
+			playheadEpoch: action.epoch,
+			lastSource: action.source
+		};
+		case "seek": return {
+			...state,
+			scrubbing: false,
+			scrubEpoch: null,
+			playheadEpoch: action.epoch,
+			lastSource: action.source
+		};
+		case "playhead":
+			if (state.scrubbing) return state;
+			return {
+				...state,
+				playheadEpoch: action.epoch
+			};
+		case "reset": return initialScrubState;
+		default: return state;
+	}
+}
+/**
+* Throttle decision for continuous `update` emits (default ~70 ms).
+* Returns true when enough time has elapsed since the last emit.
+*/
+function shouldEmit(lastEmitMs, now, throttleMs = 70) {
+	return now - lastEmitMs >= throttleMs;
+}
+/** Epochs within this many ms of the last commit count as the SAME target. */
+var COMMIT_DEDUPE_TOLERANCE_MS = 750;
+/** Only dedupe against a commit made within this recent window. */
+var COMMIT_DEDUPE_WINDOW_MS = 2e3;
+/**
+* Decide whether a `seek`/`scrubCommit` should actually hit the playback sink.
+* Each commit reloads the server feeder (loading→playing) and visibly stutters
+* playback; firing the same (or a near-identical) target twice in quick
+* succession produces a redundant reload. Drop a commit only when it targets
+* essentially the SAME epoch as the last commit AND that commit was recent — a
+* genuinely different target, or a re-seek to the same spot after the window,
+* always commits.
+*/
+function shouldCommit(last, epoch, now, toleranceMs = 750, windowMs = COMMIT_DEDUPE_WINDOW_MS) {
+	if (last === null) return true;
+	const sameTarget = Math.abs(epoch - last.epoch) <= toleranceMs;
+	const recent = now - last.at <= windowMs;
+	return !(sameTarget && recent);
+}
+/**
+* The active cursor position (scrub target while scrubbing, else playhead)
+* expressed as a 0..1 fraction across the day window.
+* Returns null when no position is known or the day window is degenerate.
+*/
+function cursorFractionFor(state, day) {
+	const epoch = state.scrubbing ? state.scrubEpoch : state.playheadEpoch;
+	if (epoch === null) return null;
+	const span = day.to - day.from;
+	if (span <= 0) return null;
+	return Math.min(1, Math.max(0, (epoch - day.from) / span));
+}
+/**
+* Builds the always-active bridge callbacks from a sink, a dispatch, and the
+* throttle ref. Pure (no React) so it can be unit-tested directly: the hook
+* just wraps the result in `useMemo`.
+*
+* Every gesture drives the sink immediately — there is no VOD-active gate.
+*/
+function makeScrubBridge(sink, dispatch, lastEmitRef, lastCommitRef = { current: null }, isPlayerLive = () => false) {
+	const commit = (epoch, fire) => {
+		const now = Date.now();
+		if (isPlayerLive()) {
+			lastCommitRef.current = {
+				epoch,
+				at: now
+			};
+			fire(epoch);
+			return;
+		}
+		if (!shouldCommit(lastCommitRef.current, epoch, now)) return;
+		lastCommitRef.current = {
+			epoch,
+			at: now
+		};
+		fire(epoch);
+	};
+	return {
+		beginScrub: (source) => {
+			dispatch({
+				type: "begin",
+				source
+			});
+			sink.scrubStart();
+		},
+		updateScrub: (epoch, source) => {
+			dispatch({
+				type: "update",
+				epoch,
+				source
+			});
+			const now = Date.now();
+			if (!shouldEmit(lastEmitRef.current, now)) return;
+			lastEmitRef.current = now;
+			sink.scrubTo(epoch);
+		},
+		endScrub: (epoch, source) => {
+			dispatch({
+				type: "end",
+				epoch,
+				source
+			});
+			commit(epoch, sink.scrubCommit);
+		},
+		seek: (epoch, source) => {
+			dispatch({
+				type: "seek",
+				epoch,
+				source
+			});
+			commit(epoch, sink.seek);
+		},
+		setPlayhead: (epoch) => dispatch({
+			type: "playhead",
+			epoch
+		}),
+		reset: () => dispatch({ type: "reset" })
+	};
+}
+/**
+* Owns the shared scrub position and bridges it to a playback control sink.
+*
+* The bridge is always active: any gesture (drag or tap) drives the sink
+* immediately. There is no VOD-active gate — the timeline always drives
+* playback while frame-push mode is on.
+*
+* @param sink Always-active playback control surface (e.g. the datachannel)
+* @param isPlayerLive Synchronous getter for "is the player on the live
+*   edge?" — lets a live→recorded commit bypass dedupe so the seek always
+*   reaches the server.
+*/
+function useScrubController(sink, isPlayerLive = () => false) {
+	const [state, dispatch] = (0, react$1.useReducer)(scrubReducer, initialScrubState);
+	const lastEmitRef = (0, react$1.useRef)(0);
+	const lastCommitRef = (0, react$1.useRef)(null);
+	const isPlayerLiveRef = (0, react$1.useRef)(isPlayerLive);
+	isPlayerLiveRef.current = isPlayerLive;
+	return {
+		state,
+		...(0, react$1.useMemo)(() => makeScrubBridge(sink, dispatch, lastEmitRef, lastCommitRef, () => isPlayerLiveRef.current()), [sink])
+	};
+}
+//#endregion
 //#region node_modules/lucide-react/dist/esm/shared/src/utils/mergeClasses.js
 /**
 * @license lucide-react v0.576.0 - ISC
@@ -32548,6 +32782,100 @@ function useVodPlayback() {
 	return (0, react$1.useContext)(VodPlaybackContext);
 }
 //#endregion
+//#region src/contexts/recorded-playback.tsx
+/**
+* RecordedPlayback — shared context wiring the hero player's
+* `camstack-control` RTCDataChannel to the Recording timeline (R9).
+*
+* The hero `StreamPanel` (host side) BINDS the channel that
+* `CameraStreamPlayer` opens on the live WebRTC session; the Recording
+* widget's `RecordingTimeline` (controller side) SENDS frame-push playback
+* commands over it (seek / scrubCommit / setRate / goLive — the broker's
+* `TimelineSession` drives the `RecordedFeeder` on the SAME session, so
+* recorded frames arrive on the same `<video>` element) and OBSERVES the
+* server's playback state + ~1 Hz position reports.
+*
+* This is the admin-ui port of the shipped viewer's default recorded path
+* (srcV2 → embed → `camstack-control`), replacing "manifest-window HLS only".
+* The HLS VOD path (VodPlayback context) remains available as a fallback.
+*
+* Built on `createSharedContext` (NOT a plain `createContext`) so it crosses
+* the Module-Federation boundary — same mechanism as `vod-playback`.
+* Consumers outside a provider get the inert default: `bindControlChannel`
+* is null (StreamPanel then opens NO datachannel — plain live player) and
+* `channelOpen` is false (RecordingTimeline stays on the HLS path).
+*/
+var RecordedPlaybackContext = createSharedContext("camstack:recorded-playback", {
+	bindControlChannel: null,
+	channelOpen: false,
+	mode: "live",
+	positionMs: null,
+	send: () => false
+});
+function RecordedPlaybackProvider({ children }) {
+	const channelRef = (0, react$1.useRef)(null);
+	const [channelOpen, setChannelOpen] = (0, react$1.useState)(false);
+	const [mode, setMode] = (0, react$1.useState)("live");
+	const [positionMs, setPositionMs] = (0, react$1.useState)(null);
+	const bindControlChannel = (0, react$1.useCallback)((channel) => {
+		channelRef.current = channel;
+		const markClosed = () => {
+			if (channelRef.current !== channel) return;
+			channelRef.current = null;
+			setChannelOpen(false);
+			setMode("live");
+			setPositionMs(null);
+		};
+		channel.onopen = () => {
+			if (channelRef.current === channel) setChannelOpen(true);
+		};
+		channel.onclose = markClosed;
+		channel.onerror = markClosed;
+		channel.onmessage = (e) => {
+			if (channelRef.current !== channel) return;
+			const data = e.data;
+			if (typeof data !== "string") return;
+			const msg = parseRecordedServerMessage(data);
+			if (!msg) return;
+			if (msg.kind === "position") setPositionMs(msg.epochMs);
+			else {
+				setMode(msg.state);
+				if (msg.state === "live") setPositionMs(null);
+			}
+		};
+		if (channel.readyState === "open") setChannelOpen(true);
+		else if (channel.readyState === "closed" || channel.readyState === "closing") markClosed();
+		else setChannelOpen(false);
+	}, []);
+	const send = (0, react$1.useCallback)((cmd) => {
+		const channel = channelRef.current;
+		if (!channel || channel.readyState !== "open") return false;
+		channel.send(serializeRecordedCommand(cmd));
+		return true;
+	}, []);
+	const value = (0, react$1.useMemo)(() => ({
+		bindControlChannel,
+		channelOpen,
+		mode,
+		positionMs,
+		send
+	}), [
+		bindControlChannel,
+		channelOpen,
+		mode,
+		positionMs,
+		send
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RecordedPlaybackContext.Provider, {
+		value,
+		children
+	});
+}
+/** @returns the recorded-playback control surface (inert outside a provider). */
+function useRecordedPlayback() {
+	return (0, react$1.useContext)(RecordedPlaybackContext);
+}
+//#endregion
 //#region src/composites/cap-settings/recording-spans.ts
 /**
 * Merge availability ranges (across every profile) into the union of distinct
@@ -32793,8 +33121,12 @@ function axisTicks(fromMs, toMs, count) {
 }
 //#endregion
 //#region src/composites/cap-settings/CoverageTrack.tsx
-function CoverageTrack({ windowFrom, windowTo, spans, playheadMs, onSeek }) {
+function CoverageTrack({ windowFrom, windowTo, spans, playheadMs, onSeek, onScrubStart, onScrubMove, onScrubEnd }) {
 	const [hoverInfo, setHoverInfo] = (0, react$1.useState)(null);
+	const scrubEnabled = Boolean(onScrubEnd);
+	const [dragging, setDragging] = (0, react$1.useState)(false);
+	/** Last epoch reported during the drag — commit target on cancel/release. */
+	const lastDragMsRef = (0, react$1.useRef)(null);
 	const msFromEvent = (e) => {
 		const rect = e.currentTarget.getBoundingClientRect();
 		if (rect.width <= 0) return null;
@@ -32802,10 +33134,43 @@ function CoverageTrack({ windowFrom, windowTo, spans, playheadMs, onSeek }) {
 		return windowFrom + Math.min(1, Math.max(0, ratio)) * (windowTo - windowFrom);
 	};
 	const handleClick = (e) => {
+		if (scrubEnabled) return;
 		const ms = msFromEvent(e);
 		if (ms === null) return;
 		onSeek(ms);
 	};
+	const handlePointerDown = (e) => {
+		if (!scrubEnabled) return;
+		e.currentTarget.setPointerCapture(e.pointerId);
+		setDragging(true);
+		onScrubStart?.();
+		const ms = msFromEvent(e);
+		if (ms !== null) {
+			lastDragMsRef.current = ms;
+			onScrubMove?.(ms);
+		}
+	};
+	const handlePointerMove = (e) => {
+		if (!scrubEnabled || !dragging) return;
+		const ms = msFromEvent(e);
+		if (ms === null) return;
+		lastDragMsRef.current = ms;
+		onScrubMove?.(ms);
+	};
+	const handlePointerUp = (e) => {
+		if (!scrubEnabled || !dragging) return;
+		setDragging(false);
+		const ms = msFromEvent(e) ?? lastDragMsRef.current;
+		lastDragMsRef.current = null;
+		if (ms !== null) onScrubEnd?.(ms);
+	};
+	const handlePointerCancel = () => {
+		if (!dragging) return;
+		setDragging(false);
+		const ms = lastDragMsRef.current;
+		lastDragMsRef.current = null;
+		if (ms !== null) onScrubEnd?.(ms);
+	};
 	const handleMouseMove = (e) => {
 		const ms = msFromEvent(e);
 		if (ms === null) return;
@@ -32829,10 +33194,15 @@ function CoverageTrack({ windowFrom, windowTo, spans, playheadMs, onSeek }) {
 		className: "relative",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-testid": "coverage-track",
+			"data-scrubbing": dragging ? "true" : "false",
 			onClick: handleClick,
+			onPointerDown: handlePointerDown,
+			onPointerMove: handlePointerMove,
+			onPointerUp: handlePointerUp,
+			onPointerCancel: handlePointerCancel,
 			onMouseMove: handleMouseMove,
 			onMouseLeave: handleMouseLeave,
-			className: "relative h-5 cursor-pointer overflow-hidden rounded bg-background/40",
+			className: `relative h-5 overflow-hidden rounded bg-background/40 ${scrubEnabled ? "cursor-ew-resize touch-none select-none" : "cursor-pointer"}`,
 			role: "group",
 			"aria-label": "Recorded coverage timeline",
 			children: [spans.map((s) => {
@@ -33131,6 +33501,15 @@ var PAN_MS_PER_PX = 18e3 / 100;
 var EVENT_PRE_MS = 5e3;
 var EVENT_POST_MS = 1e4;
 var EMPTY_RANGES = [];
+var MODE_LABELS = {
+	live: "Live",
+	loading: "Loading…",
+	playing: "Playing",
+	paused: "Paused",
+	gap: "No footage",
+	ended: "Ended",
+	error: "Error"
+};
 function RecordingTimeline({ deviceId }) {
 	const system = useSystem();
 	const vod = useVodPlayback();
@@ -33138,6 +33517,51 @@ function RecordingTimeline({ deviceId }) {
 	const [playheadMs, setPlayheadMs] = (0, react$1.useState)(null);
 	const [busyKey, setBusyKey] = (0, react$1.useState)(null);
 	const [playbackError, setPlaybackError] = (0, react$1.useState)(null);
+	const recorded = useRecordedPlayback();
+	const { send: sendControl, mode: recordedMode, positionMs: recordedPositionMs } = recorded;
+	const [forceHls, setForceHls] = (0, react$1.useState)(false);
+	const framePush = recorded.channelOpen && !forceHls;
+	const framePushRef = (0, react$1.useRef)(framePush);
+	framePushRef.current = framePush;
+	const sink = (0, react$1.useMemo)(() => ({
+		scrubStart: () => {},
+		scrubTo: () => {},
+		scrubCommit: (epochMs) => {
+			sendControl({
+				t: "scrubCommit",
+				epoch: epochMs
+			});
+		},
+		seek: (epochMs) => {
+			sendControl({
+				t: "seek",
+				epoch: epochMs
+			});
+		}
+	}), [sendControl]);
+	const recordedModeRef = (0, react$1.useRef)(recordedMode);
+	recordedModeRef.current = recordedMode;
+	const { state: scrubState, beginScrub, updateScrub, endScrub, seek: scrubSeek, setPlayhead, reset: resetScrub } = useScrubController(sink, (0, react$1.useCallback)(() => recordedModeRef.current === "live", []));
+	(0, react$1.useEffect)(() => {
+		if (recordedPositionMs !== null) setPlayhead(recordedPositionMs);
+	}, [recordedPositionMs, setPlayhead]);
+	(0, react$1.useEffect)(() => {
+		if (!recorded.channelOpen || recordedMode === "live") resetScrub();
+	}, [
+		recorded.channelOpen,
+		recordedMode,
+		resetScrub
+	]);
+	const handleGoLive = (0, react$1.useCallback)(() => {
+		sendControl({ t: "goLive" });
+		resetScrub();
+	}, [sendControl, resetScrub]);
+	const handleRateToggle = (0, react$1.useCallback)(() => {
+		sendControl({
+			t: "setRate",
+			rate: recordedModeRef.current === "paused" ? 1 : 0
+		});
+	}, [sendControl]);
 	const [enabledKinds, setEnabledKinds] = (0, react$1.useState)(() => new Set(ALL_KINDS));
 	const toggleKind = (0, react$1.useCallback)((kind) => {
 		setEnabledKinds((current) => {
@@ -33291,6 +33715,10 @@ function RecordingTimeline({ deviceId }) {
 	const handleSeek = (0, react$1.useCallback)((clickMs) => {
 		const target = seekTargetForSpans(clickMs, spans);
 		if (!target) return;
+		if (framePushRef.current) {
+			scrubSeek(target.fromMs, "timeline");
+			return;
+		}
 		const label = `Recording · ${new Date(target.fromMs).toLocaleString(void 0, {
 			month: "short",
 			day: "numeric",
@@ -33298,14 +33726,31 @@ function RecordingTimeline({ deviceId }) {
 			minute: "2-digit"
 		})}`;
 		playWindow(`seek:${target.fromMs}`, target.fromMs, target.toMs, label, target.fromMs);
-	}, [spans, playWindow]);
+	}, [
+		spans,
+		playWindow,
+		scrubSeek
+	]);
+	const handleScrubStart = (0, react$1.useCallback)(() => {
+		beginScrub("timeline");
+	}, [beginScrub]);
+	const handleScrubMove = (0, react$1.useCallback)((ms) => {
+		updateScrub(ms, "timeline");
+	}, [updateScrub]);
+	const handleScrubEnd = (0, react$1.useCallback)((ms) => {
+		endScrub(seekTargetForSpans(ms, spans)?.fromMs ?? ms, "timeline");
+	}, [spans, endScrub]);
 	const handlePlayClip = (0, react$1.useCallback)((clip) => {
+		if (framePushRef.current) {
+			scrubSeek(clip.timestamp - EVENT_PRE_MS, "timeline");
+			return;
+		}
 		const label = `${clip.label} · ${new Date(clip.timestamp).toLocaleTimeString(void 0, {
 			hour: "2-digit",
 			minute: "2-digit"
 		})}`;
 		playWindow(`event:${clip.id}`, clip.timestamp - EVENT_PRE_MS, clip.timestamp + EVENT_POST_MS, label, clip.timestamp);
-	}, [playWindow]);
+	}, [playWindow, scrubSeek]);
 	const handleSelectBucket = (0, react$1.useCallback)((index) => {
 		setSelectedBucket((cur) => cur === index ? null : index);
 	}, []);
@@ -33313,6 +33758,8 @@ function RecordingTimeline({ deviceId }) {
 	const densityLoading = eventDensityQuery.isLoading;
 	const drillLoading = (objectDrill.isLoading || motionDrill.isLoading || audioDrill.isLoading) && drillEnabled;
 	const ticks = (0, react$1.useMemo)(() => axisTicks(view.fromMs, view.toMs, 5), [view.fromMs, view.toMs]);
+	const displayPlayheadMs = framePush ? scrubState.scrubbing ? scrubState.scrubEpoch : scrubState.playheadEpoch : playheadMs;
+	const showRateToggle = framePush && (recordedMode === "playing" || recordedMode === "paused");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "space-y-3",
 		children: [
@@ -33331,6 +33778,45 @@ function RecordingTimeline({ deviceId }) {
 				dayBounds: computedDayBounds,
 				onViewChange: handleViewChange
 			}),
+			recorded.channelOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-testid": "frame-push-status-row",
+				className: "flex flex-wrap items-center gap-2 text-[10px]",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"data-testid": "frame-push-mode-chip",
+						className: `inline-flex items-center gap-1 rounded px-1.5 py-0.5 font-semibold uppercase tracking-wider ${framePush && recordedMode !== "live" ? recordedMode === "error" ? "bg-rose-500/15 text-rose-400" : "bg-primary/15 text-primary" : "bg-background/40 text-foreground-subtle"}`,
+						children: framePush ? MODE_LABELS[recordedMode] : "HLS mode"
+					}),
+					framePush && recordedPositionMs !== null && !scrubState.scrubbing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "tabular-nums text-foreground-subtle",
+						children: new Date(recordedPositionMs).toLocaleTimeString()
+					}) : null,
+					showRateToggle ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						"data-testid": "frame-push-rate-toggle",
+						onClick: handleRateToggle,
+						className: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 font-medium text-foreground-subtle transition-colors hover:bg-surface-hover hover:text-foreground",
+						title: recordedMode === "paused" ? "Resume playback" : "Pause playback",
+						children: [recordedMode === "paused" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Play, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pause, { className: "h-3 w-3" }), recordedMode === "paused" ? "Resume" : "Pause"]
+					}) : null,
+					framePush && recordedMode !== "live" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						"data-testid": "frame-push-go-live",
+						onClick: handleGoLive,
+						className: "inline-flex items-center gap-1 rounded bg-danger/10 px-1.5 py-0.5 font-medium text-danger transition-colors hover:bg-danger/20",
+						title: "Return to the live stream",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Radio, { className: "h-3 w-3" }), "Go live"]
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"data-testid": "frame-push-hls-toggle",
+						onClick: () => setForceHls((v) => !v),
+						className: `ml-auto inline-flex items-center gap-1 rounded px-1.5 py-0.5 font-medium transition-colors ${forceHls ? "bg-primary/15 text-primary" : "text-foreground-subtle hover:bg-surface-hover hover:text-foreground"}`,
+						title: "Play recordings through the HLS player instead of the live WebRTC session",
+						children: "HLS"
+					})
+				]
+			}) : null,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				ref: trackAreaRef,
 				onWheel: handleWheel,
@@ -33348,8 +33834,13 @@ function RecordingTimeline({ deviceId }) {
 							windowFrom: view.fromMs,
 							windowTo: view.toMs,
 							spans,
-							playheadMs,
-							onSeek: handleSeek
+							playheadMs: displayPlayheadMs,
+							onSeek: handleSeek,
+							...framePush ? {
+								onScrubStart: handleScrubStart,
+								onScrubMove: handleScrubMove,
+								onScrubEnd: handleScrubEnd
+							} : {}
 						})]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -33386,7 +33877,7 @@ function RecordingTimeline({ deviceId }) {
 				onLoadMore: handleLoadMore
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "text-[11px] text-foreground-subtle",
-				children: "Click the coverage bar to play from any point, or a density bar to browse that window's events."
+				children: framePush ? "Click or drag the coverage bar to play from any point (frames play in the main player above), or click a density bar to browse that window’s events." : "Click the coverage bar to play from any point, or a density bar to browse that window’s events."
 			})
 		]
 	});
@@ -38674,6 +39165,7 @@ function ImageOffIcon({ className }) {
 }
 function StreamPanel({ serverUrl, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, playbackUrl, playbackAuthToken, onExitPlayback, posterUrl, streams, activeStreamId: controlledStreamId, onStreamChange, deviceName, phase, pipelineMetrics, detections, defaultShowDetections = true, defaultShowMotion = false, streamStats, autoPlay = false, showPlayStop = false, snapshotSrc, snapshotLoading = false, onRefreshSnapshot, showStreamStats = false, children, extraOverlay, ptzAvailable = false, ptzShown = false, ptzOverlay, onPtzToggle, intercomAvailable = false, intercomShown = false, onIntercomToggle, chromeless = false, className }) {
 	const registeredButtons = usePlayerToolbarButtons();
+	const recordedPlayback = useRecordedPlayback();
 	const [isPlaying, setIsPlaying] = (0, react$1.useState)(autoPlay);
 	const [showDetections, setShowDetections] = (0, react$1.useState)(defaultShowDetections);
 	const [showMotion, setShowMotion] = (0, react$1.useState)(defaultShowMotion);
@@ -38979,6 +39471,7 @@ function StreamPanel({ serverUrl, createSession, sendAnswer, handleOffer, getIce
 					addIceCandidate,
 					getIceCandidates,
 					closeSession,
+					...recordedPlayback.bindControlChannel ? { onControlChannel: recordedPlayback.bindControlChannel } : {},
 					...posterUrl ? { posterUrl } : {},
 					overlay: anyOverlay || extraOverlay || ptzOverlayVisible ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 						anyOverlay && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DetectionOverlay, {
@@ -43622,6 +44115,8 @@ exports.CHIP_INACTIVE = CHIP_INACTIVE;
 exports.CLASS_COLORS = CLASS_COLORS;
 exports.COLUMN_BREAKPOINT_CLASS = COLUMN_BREAKPOINT_CLASS;
 exports.COLUMN_PRIORITY = COLUMN_PRIORITY;
+exports.COMMIT_DEDUPE_TOLERANCE_MS = COMMIT_DEDUPE_TOLERANCE_MS;
+exports.COMMIT_DEDUPE_WINDOW_MS = COMMIT_DEDUPE_WINDOW_MS;
 exports.CONTROL_CAP_NAMES = CONTROL_CAP_NAMES;
 exports.CONTROL_FILLS = CONTROL_FILLS;
 exports.CameraStreamPlayer = CameraStreamPlayer;
@@ -43756,9 +44251,11 @@ exports.PrivacyMaskSettings = PrivacyMaskSettings;
 exports.ProviderBadge = ProviderBadge;
 exports.PtzPanel = PtzPanel;
 exports.QrCode = QrCode;
+exports.RECORDED_PLAYBACK_MODES = RECORDED_PLAYBACK_MODES;
 exports.RIGHT = RIGHT;
 exports.ROLE_DESCRIPTOR = ROLE_DESCRIPTOR;
 exports.RadialGauge = RadialGauge;
+exports.RecordedPlaybackProvider = RecordedPlaybackProvider;
 exports.RecordingPanel = RecordingPanel;
 exports.ResponseLog = ResponseLog;
 exports.SECTION_BODY = SECTION_BODY;
@@ -43842,6 +44339,7 @@ exports.coverHighlight = coverHighlight;
 exports.createLucideIcon = createLucideIcon;
 exports.createSharedContext = createSharedContext;
 exports.createTheme = require_theme_index.createTheme$1;
+exports.cursorFractionFor = cursorFractionFor;
 exports.darkColors = require_theme_index.darkColors$1;
 exports.defaultTheme = require_theme_index.defaultTheme$1;
 exports.deriveDeviceKind = deriveDeviceKind;
@@ -43859,12 +44357,14 @@ exports.getPhaseVisual = getPhaseVisual;
 exports.groupChildrenByLayout = groupChildrenByLayout;
 exports.hardwareLabel = hardwareLabel;
 exports.humidifierTint = humidifierTint;
+exports.initialScrubState = initialScrubState;
 exports.isAbsentProvider = isAbsentProvider;
 exports.isAbsentProvider$1 = isAbsentProvider;
 exports.isFieldVisible = isFieldVisible;
 exports.lawnMowerActivityMeta = lawnMowerActivityMeta;
 exports.lightColors = require_theme_index.lightColors$1;
 exports.loadRemoteBundle = loadRemoteBundle;
+exports.makeScrubBridge = makeScrubBridge;
 exports.metadataEntries = metadataEntries;
 exports.metadataString = metadataString;
 exports.mirror = mirror;
@@ -43872,11 +44372,16 @@ exports.mountAddonPage = mountAddonPage;
 exports.nextSort = nextSort;
 exports.normalizeForSearch = normalizeForSearch;
 exports.overrideEntityIdFromLink = overrideEntityIdFromLink;
+exports.parseRecordedServerMessage = parseRecordedServerMessage;
 exports.providerIcons = providerIcons;
 exports.resolveContainerPrimary = resolveContainerPrimary;
 exports.resolveControlAlign = resolveControlAlign;
 exports.resolveDeviceControl = resolveDeviceControl;
 exports.resolvePrimaryChild = resolvePrimaryChild;
+exports.scrubReducer = scrubReducer;
+exports.serializeRecordedCommand = serializeRecordedCommand;
+exports.shouldCommit = shouldCommit;
+exports.shouldEmit = shouldEmit;
 exports.sortRows = sortRows;
 exports.statusIcons = statusIcons;
 exports.tankAlert = tankAlert;
@@ -44482,6 +44987,7 @@ exports.usePtzSavePreset = usePtzSavePreset;
 exports.usePtzSetAutofocus = usePtzSetAutofocus;
 exports.usePtzStop = usePtzStop;
 exports.useRebootReboot = useRebootReboot;
+exports.useRecordedPlayback = useRecordedPlayback;
 exports.useRecordingApplyDeviceSettingsPatch = useRecordingApplyDeviceSettingsPatch;
 exports.useRecordingGetAvailability = useRecordingGetAvailability;
 exports.useRecordingGetDaysWithRecordings = useRecordingGetDaysWithRecordings;
@@ -44500,6 +45006,7 @@ exports.useRemoteComponent = useRemoteComponent;
 exports.useScriptRunnerGetStatus = useScriptRunnerGetStatus;
 exports.useScriptRunnerRun = useScriptRunnerRun;
 exports.useScriptRunnerStop = useScriptRunnerStop;
+exports.useScrubController = useScrubController;
 exports.useSettingsStoreCount = useSettingsStoreCount;
 exports.useSettingsStoreDeclareCollection = useSettingsStoreDeclareCollection;
 exports.useSettingsStoreDelete = useSettingsStoreDelete;