@camstack/ui-library 1.1.13 → 1.1.15

package/dist/composites/cap-settings/TimelineControls.d.ts

@@ -13,9 +13,10 @@ interface TimelineControlsProps {
 }
 /**
  * Date selector + zoom-in / zoom-out buttons for the recording timeline.
- * Zoom cycles through ZOOM_LEVELS (widest → narrowest), centred on the
- * current view midpoint. Horizontal pan is wired via wheel events in
- * RecordingTimeline directly.
+ * Zoom cycles through ZOOM_LEVELS (widest → narrowest), anchored on the view's
+ * RIGHT edge — so on today's timeline "now" stays pinned to the right instead
+ * of drifting to a midday range. Horizontal pan (wheel) then moves the window
+ * back/forward in time. Pan is wired via wheel events in RecordingTimeline.
  */
 export declare function TimelineControls({ day, onDayChange, view, dayBounds, onViewChange, }: TimelineControlsProps): import("react").JSX.Element;
 export {};

package/dist/composites/cap-settings/recording-timeline-model.d.ts

@@ -58,10 +58,17 @@ export declare function dayWindow(date: Date, nowMs: number): DayWindow;
 /** Available zoom levels in ms, from widest (24h) to narrowest (15 min). */
 export declare const ZOOM_LEVELS: readonly number[];
 /**
- * Produce a `levelMs`-wide DayWindow centred on `centerMs`, clamped within
- * `dayBounds`. If `levelMs >= dayBounds span`, returns `dayBounds` unchanged.
+ * Produce a `levelMs`-wide window whose RIGHT edge stays anchored at
+ * `rightEdgeMs` (clamped within `dayBounds`), rather than centring on the view
+ * midpoint. On today's timeline the view's right edge is "now", so zooming this
+ * way keeps the most recent footage pinned to the right instead of drifting to
+ * a midday range that no longer contains now. Panning then moves back/forward.
+ *
+ * Falls back to `dayBounds` when `levelMs` meets or exceeds the day span (can't
+ * show a wider window than the day holds — e.g. early morning with little
+ * elapsed time).
  */
-export declare function zoomWindow(_current: DayWindow, dayBounds: DayWindow, levelMs: number, centerMs: number): DayWindow;
+export declare function zoomWindowAnchoredRight(dayBounds: DayWindow, levelMs: number, rightEdgeMs: number): DayWindow;
 /**
  * Shift `win` by `deltaMs`, preserving width, clamped within `dayBounds`.
  */

package/dist/index.cjs

@@ -32695,23 +32695,21 @@ var ZOOM_LEVELS = [
 	15 * 6e4
 ];
 /**
-* Produce a `levelMs`-wide DayWindow centred on `centerMs`, clamped within
-* `dayBounds`. If `levelMs >= dayBounds span`, returns `dayBounds` unchanged.
+* Produce a `levelMs`-wide window whose RIGHT edge stays anchored at
+* `rightEdgeMs` (clamped within `dayBounds`), rather than centring on the view
+* midpoint. On today's timeline the view's right edge is "now", so zooming this
+* way keeps the most recent footage pinned to the right instead of drifting to
+* a midday range that no longer contains now. Panning then moves back/forward.
+*
+* Falls back to `dayBounds` when `levelMs` meets or exceeds the day span (can't
+* show a wider window than the day holds — e.g. early morning with little
+* elapsed time).
 */
-function zoomWindow(_current, dayBounds, levelMs, centerMs) {
+function zoomWindowAnchoredRight(dayBounds, levelMs, rightEdgeMs) {
 	if (levelMs >= dayBounds.toMs - dayBounds.fromMs) return dayBounds;
-	let fromMs = centerMs - levelMs / 2;
-	let toMs = centerMs + levelMs / 2;
-	if (fromMs < dayBounds.fromMs) {
-		fromMs = dayBounds.fromMs;
-		toMs = fromMs + levelMs;
-	}
-	if (toMs > dayBounds.toMs) {
-		toMs = dayBounds.toMs;
-		fromMs = toMs - levelMs;
-	}
+	const toMs = Math.min(Math.max(rightEdgeMs, dayBounds.fromMs + levelMs), dayBounds.toMs);
 	return {
-		fromMs,
+		fromMs: toMs - levelMs,
 		toMs
 	};
 }
@@ -33026,9 +33024,10 @@ function parseDateInput(value) {
 }
 /**
 * Date selector + zoom-in / zoom-out buttons for the recording timeline.
-* Zoom cycles through ZOOM_LEVELS (widest → narrowest), centred on the
-* current view midpoint. Horizontal pan is wired via wheel events in
-* RecordingTimeline directly.
+* Zoom cycles through ZOOM_LEVELS (widest → narrowest), anchored on the view's
+* RIGHT edge — so on today's timeline "now" stays pinned to the right instead
+* of drifting to a midday range. Horizontal pan (wheel) then moves the window
+* back/forward in time. Pan is wired via wheel events in RecordingTimeline.
 */
 function TimelineControls({ day, onDayChange, view, dayBounds, onViewChange }) {
 	const handleDateChange = (e) => {
@@ -33050,16 +33049,16 @@ function TimelineControls({ day, onDayChange, view, dayBounds, onViewChange }) {
 		}
 		return best;
 	})();
-	const centerMs = (view.fromMs + view.toMs) / 2;
+	const rightEdgeMs = view.toMs;
 	const handleZoomIn = () => {
 		const nextLevel = ZOOM_LEVELS[Math.min(currentLevelIdx + 1, ZOOM_LEVELS.length - 1)];
 		if (nextLevel === void 0) return;
-		onViewChange(zoomWindow(view, dayBounds, nextLevel, centerMs));
+		onViewChange(zoomWindowAnchoredRight(dayBounds, nextLevel, rightEdgeMs));
 	};
 	const handleZoomOut = () => {
 		const nextLevel = ZOOM_LEVELS[Math.max(currentLevelIdx - 1, 0)];
 		if (nextLevel === void 0) return;
-		onViewChange(zoomWindow(view, dayBounds, nextLevel, centerMs));
+		onViewChange(zoomWindowAnchoredRight(dayBounds, nextLevel, rightEdgeMs));
 	};
 	const canZoomIn = currentLevelIdx < ZOOM_LEVELS.length - 1;
 	const canZoomOut = currentLevelIdx > 0;
@@ -37361,8 +37360,12 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 		updateState("connecting");
 		const abort = new AbortController();
 		connectAbortRef.current = abort;
+		const t0 = performance.now();
+		const ms = () => Math.round(performance.now() - t0);
+		const timing = {};
 		try {
 			const iceServers = await getIceServers?.();
+			timing.iceServersMs = ms();
 			if (!mountedRef.current || abort.signal.aborted) return;
 			const pc = new RTCPeerConnection({ iceServers: [...iceServers ?? [], { urls: "stun:stun.l.google.com:19302" }] });
 			if (!seamless) pcRef.current = pc;
@@ -37385,6 +37388,7 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 				}
 			};
 			pc.ontrack = (event) => {
+				if (timing.firstTrackMs === void 0) timing.firstTrackMs = ms();
 				console.debug("[WebRTC] ontrack (client-offer)", event.track.kind, event.track.readyState);
 				combinedStream.addTrack(event.track);
 				if (seamless) {
@@ -37396,11 +37400,20 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 					videoRef.current.play().catch(() => {});
 				}
 			};
+			let timingLogged = false;
 			pc.oniceconnectionstatechange = () => {
 				if (!mountedRef.current) return;
 				const iceState = pc.iceConnectionState;
 				console.debug("[WebRTC] ICE state (client-offer):", iceState);
 				if (iceState === "connected" || iceState === "completed") {
+					if (!timingLogged) {
+						timingLogged = true;
+						timing.iceConnectedMs = ms();
+						console.info("[WebRTC timing] client-offer connected", {
+							streamKey,
+							...timing
+						});
+					}
 					reconnectAttemptsRef.current = 0;
 					if (seamless) swapInOnce();
 					updateState("playing");
@@ -37428,9 +37441,13 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 				onControlChannelRef.current(control);
 			}
 			const offer = await pc.createOffer();
+			timing.offerCreatedMs = ms();
 			await pc.setLocalDescription(offer);
+			timing.localSetMs = ms();
 			if (!mountedRef.current || abort.signal.aborted) return;
+			const signalingStart = ms();
 			const { sessionId: sid, sdpAnswer } = await handleOffer(pc.localDescription?.sdp ?? offer.sdp ?? "");
+			timing.signalingRttMs = ms() - signalingStart;
 			sessionId = sid;
 			sessionIdsRef.current.add(sid);
 			activeSessionIdRef.current = sid;
@@ -37445,6 +37462,7 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 				type: "answer",
 				sdp: sdpAnswer
 			});
+			timing.answerSetMs = ms();
 			console.debug("[WebRTC] Client-offer answer set (trickle)", { sessionId: sid.slice(0, 8) });
 			if (getIceCandidates) {
 				const seen = /* @__PURE__ */ new Set();

package/dist/index.js

@@ -32671,23 +32671,21 @@ var ZOOM_LEVELS = [
 	15 * 6e4
 ];
 /**
-* Produce a `levelMs`-wide DayWindow centred on `centerMs`, clamped within
-* `dayBounds`. If `levelMs >= dayBounds span`, returns `dayBounds` unchanged.
+* Produce a `levelMs`-wide window whose RIGHT edge stays anchored at
+* `rightEdgeMs` (clamped within `dayBounds`), rather than centring on the view
+* midpoint. On today's timeline the view's right edge is "now", so zooming this
+* way keeps the most recent footage pinned to the right instead of drifting to
+* a midday range that no longer contains now. Panning then moves back/forward.
+*
+* Falls back to `dayBounds` when `levelMs` meets or exceeds the day span (can't
+* show a wider window than the day holds — e.g. early morning with little
+* elapsed time).
 */
-function zoomWindow(_current, dayBounds, levelMs, centerMs) {
+function zoomWindowAnchoredRight(dayBounds, levelMs, rightEdgeMs) {
 	if (levelMs >= dayBounds.toMs - dayBounds.fromMs) return dayBounds;
-	let fromMs = centerMs - levelMs / 2;
-	let toMs = centerMs + levelMs / 2;
-	if (fromMs < dayBounds.fromMs) {
-		fromMs = dayBounds.fromMs;
-		toMs = fromMs + levelMs;
-	}
-	if (toMs > dayBounds.toMs) {
-		toMs = dayBounds.toMs;
-		fromMs = toMs - levelMs;
-	}
+	const toMs = Math.min(Math.max(rightEdgeMs, dayBounds.fromMs + levelMs), dayBounds.toMs);
 	return {
-		fromMs,
+		fromMs: toMs - levelMs,
 		toMs
 	};
 }
@@ -33002,9 +33000,10 @@ function parseDateInput(value) {
 }
 /**
 * Date selector + zoom-in / zoom-out buttons for the recording timeline.
-* Zoom cycles through ZOOM_LEVELS (widest → narrowest), centred on the
-* current view midpoint. Horizontal pan is wired via wheel events in
-* RecordingTimeline directly.
+* Zoom cycles through ZOOM_LEVELS (widest → narrowest), anchored on the view's
+* RIGHT edge — so on today's timeline "now" stays pinned to the right instead
+* of drifting to a midday range. Horizontal pan (wheel) then moves the window
+* back/forward in time. Pan is wired via wheel events in RecordingTimeline.
 */
 function TimelineControls({ day, onDayChange, view, dayBounds, onViewChange }) {
 	const handleDateChange = (e) => {
@@ -33026,16 +33025,16 @@ function TimelineControls({ day, onDayChange, view, dayBounds, onViewChange }) {
 		}
 		return best;
 	})();
-	const centerMs = (view.fromMs + view.toMs) / 2;
+	const rightEdgeMs = view.toMs;
 	const handleZoomIn = () => {
 		const nextLevel = ZOOM_LEVELS[Math.min(currentLevelIdx + 1, ZOOM_LEVELS.length - 1)];
 		if (nextLevel === void 0) return;
-		onViewChange(zoomWindow(view, dayBounds, nextLevel, centerMs));
+		onViewChange(zoomWindowAnchoredRight(dayBounds, nextLevel, rightEdgeMs));
 	};
 	const handleZoomOut = () => {
 		const nextLevel = ZOOM_LEVELS[Math.max(currentLevelIdx - 1, 0)];
 		if (nextLevel === void 0) return;
-		onViewChange(zoomWindow(view, dayBounds, nextLevel, centerMs));
+		onViewChange(zoomWindowAnchoredRight(dayBounds, nextLevel, rightEdgeMs));
 	};
 	const canZoomIn = currentLevelIdx < ZOOM_LEVELS.length - 1;
 	const canZoomOut = currentLevelIdx > 0;
@@ -37337,8 +37336,12 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 		updateState("connecting");
 		const abort = new AbortController();
 		connectAbortRef.current = abort;
+		const t0 = performance.now();
+		const ms = () => Math.round(performance.now() - t0);
+		const timing = {};
 		try {
 			const iceServers = await getIceServers?.();
+			timing.iceServersMs = ms();
 			if (!mountedRef.current || abort.signal.aborted) return;
 			const pc = new RTCPeerConnection({ iceServers: [...iceServers ?? [], { urls: "stun:stun.l.google.com:19302" }] });
 			if (!seamless) pcRef.current = pc;
@@ -37361,6 +37364,7 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 				}
 			};
 			pc.ontrack = (event) => {
+				if (timing.firstTrackMs === void 0) timing.firstTrackMs = ms();
 				console.debug("[WebRTC] ontrack (client-offer)", event.track.kind, event.track.readyState);
 				combinedStream.addTrack(event.track);
 				if (seamless) {
@@ -37372,11 +37376,20 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 					videoRef.current.play().catch(() => {});
 				}
 			};
+			let timingLogged = false;
 			pc.oniceconnectionstatechange = () => {
 				if (!mountedRef.current) return;
 				const iceState = pc.iceConnectionState;
 				console.debug("[WebRTC] ICE state (client-offer):", iceState);
 				if (iceState === "connected" || iceState === "completed") {
+					if (!timingLogged) {
+						timingLogged = true;
+						timing.iceConnectedMs = ms();
+						console.info("[WebRTC timing] client-offer connected", {
+							streamKey,
+							...timing
+						});
+					}
 					reconnectAttemptsRef.current = 0;
 					if (seamless) swapInOnce();
 					updateState("playing");
@@ -37404,9 +37417,13 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 				onControlChannelRef.current(control);
 			}
 			const offer = await pc.createOffer();
+			timing.offerCreatedMs = ms();
 			await pc.setLocalDescription(offer);
+			timing.localSetMs = ms();
 			if (!mountedRef.current || abort.signal.aborted) return;
+			const signalingStart = ms();
 			const { sessionId: sid, sdpAnswer } = await handleOffer(pc.localDescription?.sdp ?? offer.sdp ?? "");
+			timing.signalingRttMs = ms() - signalingStart;
 			sessionId = sid;
 			sessionIdsRef.current.add(sid);
 			activeSessionIdRef.current = sid;
@@ -37421,6 +37438,7 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 				type: "answer",
 				sdp: sdpAnswer
 			});
+			timing.answerSetMs = ms();
 			console.debug("[WebRTC] Client-offer answer set (trickle)", { sessionId: sid.slice(0, 8) });
 			if (getIceCandidates) {
 				const seen = /* @__PURE__ */ new Set();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.1.13",
+  "version": "1.1.15",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",