@camera.ui/browser 0.1.5 → 0.1.7

package/dist/index.d.ts

@@ -1601,6 +1601,7 @@ export declare interface UseSnapshotReturn {
     snapshotSrc: ComputedRef<string | undefined>;
     snapshotTimestamp: ComputedRef<number | undefined>;
     isLoading: ComputedRef<boolean>;
+    isRefreshing: ComputedRef<boolean>;
     refresh: () => Promise<void>;
 }
 

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Logger } from "@camera.ui/logger";
-import { computed, effectScope, inject, markRaw, onBeforeUnmount, readonly, ref, shallowReactive, shallowRef, toValue, watch } from "vue";
+import { computed, effectScope, inject, markRaw, onBeforeUnmount, reactive, readonly, ref, shallowReactive, shallowRef, toValue, watch } from "vue";
 import { tryOnScopeDispose, useTimeoutFn, whenever } from "@vueuse/core";
 import { SensorType } from "@camera.ui/sdk";
 import { isNoRespondersError } from "@camera.ui/rpc";
@@ -666,6 +666,7 @@ function useTabVisibility() {
 //#region src/composables/useSnapshot.ts
 var REVOKE_DELAY_MS = 5e3;
 var SERVER_CLOCK_STEP_MS = 6e4;
+var REFRESH_LINGER_MS = 500;
 var snapshotCache = /* @__PURE__ */ new Map();
 var timestampCache = /* @__PURE__ */ new Map();
 var takenAtCache = /* @__PURE__ */ new Map();
@@ -673,6 +674,10 @@ var stampCache = /* @__PURE__ */ new Map();
 var urlCache = /* @__PURE__ */ new Map();
 var subscribers = /* @__PURE__ */ new Map();
 var pendingLoads$2 = /* @__PURE__ */ new Map();
+var refreshingCameras = reactive(/* @__PURE__ */ new Set());
+var refreshLingers = /* @__PURE__ */ new Map();
+var forcedRefreshes = /* @__PURE__ */ new Map();
+var serverClockOffset = 0;
 function notify(cameraId) {
 	subscribers.get(cameraId)?.forEach((cb) => cb());
 }
@@ -687,7 +692,9 @@ function fetchSnapshotShared(deviceManager, id, forceFresh = false) {
 		} finally {
 			if (device) releaseCameraDevice(device);
 		}
-	})().finally(() => pendingLoads$2.delete(id));
+	})().finally(() => {
+		if (pendingLoads$2.get(id) === promise) pendingLoads$2.delete(id);
+	});
 	pendingLoads$2.set(id, promise);
 	return promise;
 }
@@ -696,6 +703,7 @@ function hookReconnectRefresh(cameraUi, deviceManager) {
 	if (hookedContexts.has(cameraUi)) return;
 	hookedContexts.add(cameraUi);
 	cameraUi.on("reconnected", () => {
+		pendingLoads$2.clear();
 		setTimeout(() => {
 			let delay = 0;
 			for (const id of subscribers.keys()) {
@@ -719,6 +727,32 @@ function isOutdated(settings, fetchedAt) {
 function deferRevoke(url) {
 	setTimeout(() => URL.revokeObjectURL(url), REVOKE_DELAY_MS);
 }
+function startSnapshotRefresh(cameraId, forced = false) {
+	clearTimeout(refreshLingers.get(cameraId));
+	refreshLingers.delete(cameraId);
+	if (forced) forcedRefreshes.set(cameraId, (forcedRefreshes.get(cameraId) ?? 0) + 1);
+	refreshingCameras.add(cameraId);
+}
+function endSnapshotRefresh(cameraId, forced = false) {
+	const running = (forcedRefreshes.get(cameraId) ?? 0) - (forced ? 1 : 0);
+	if (running > 0) {
+		forcedRefreshes.set(cameraId, running);
+		return;
+	}
+	forcedRefreshes.delete(cameraId);
+	clearTimeout(refreshLingers.get(cameraId));
+	const linger = setTimeout(() => {
+		refreshLingers.delete(cameraId);
+		refreshingCameras.delete(cameraId);
+	}, REFRESH_LINGER_MS);
+	refreshLingers.set(cameraId, linger);
+}
+function rememberServerClock(browserTime, serverTime) {
+	serverClockOffset = browserTime - serverTime;
+}
+function toBrowserTime(serverTime) {
+	return serverTime === void 0 ? void 0 : serverTime + serverClockOffset;
+}
 function isOlderThanHeld(cameraId, takenAt, stamp) {
 	const held = stampCache.get(cameraId);
 	if (stamp && held) {
@@ -739,6 +773,8 @@ function setSnapshot(cameraId, data, fetchedAt, takenAt, stamp) {
 			urlCache.delete(cameraId);
 		}
 		snapshotCache.set(cameraId, data);
+		startSnapshotRefresh(cameraId);
+		endSnapshotRefresh(cameraId);
 	}
 	if (fetchedAt !== void 0) timestampCache.set(cameraId, fetchedAt);
 	notify(cameraId);
@@ -769,17 +805,22 @@ function getSnapshotUrl(cameraId) {
 }
 function clearSnapshotCache() {
 	for (const url of urlCache.values()) URL.revokeObjectURL(url);
+	for (const linger of refreshLingers.values()) clearTimeout(linger);
 	urlCache.clear();
 	snapshotCache.clear();
 	timestampCache.clear();
 	takenAtCache.clear();
 	stampCache.clear();
+	refreshLingers.clear();
+	forcedRefreshes.clear();
+	refreshingCameras.clear();
+	serverClockOffset = 0;
 }
 function useSnapshot(cameraIdOrName) {
 	const cameraUi = useCameraUi();
 	const { isConnected } = cameraUi;
 	const deviceManager = useDeviceManager();
-	const { onTabVisible } = useTabVisibility();
+	const { isVisible, onTabVisible } = useTabVisibility();
 	const snapshot = shallowRef();
 	const _isLoading = ref(false);
 	const initialLoadDone = ref(false);
@@ -799,6 +840,7 @@ function useSnapshot(cameraIdOrName) {
 		if (!subscribers.has(cameraId)) subscribers.set(cameraId, /* @__PURE__ */ new Set());
 		const updateFn = () => {
 			snapshot.value = snapshotCache.get(cameraId);
+			armViewRefresh(cameraId);
 		};
 		subscribers.get(cameraId).add(updateFn);
 		return () => {
@@ -809,6 +851,7 @@ function useSnapshot(cameraIdOrName) {
 	let heldDeviceId;
 	let heldDevice;
 	let pendingHoldId;
+	let viewRefreshTimer;
 	const holdRetry = createRetryTimer();
 	let disposed = false;
 	function currentId() {
@@ -829,6 +872,7 @@ function useSnapshot(cameraIdOrName) {
 			heldDeviceId = id;
 			heldDevice = device;
 			cancelHoldRetry();
+			armViewRefresh(id);
 		} catch {
 			if (currentId() === id) scheduleHoldRetry(id);
 		} finally {
@@ -849,12 +893,32 @@ function useSnapshot(cameraIdOrName) {
 		holdRetry.reset();
 	}
 	function releaseHeldDevice() {
+		clearTimeout(viewRefreshTimer);
 		if (heldDeviceId) {
 			if (heldDevice) releaseCameraDevice(heldDevice);
 			heldDeviceId = void 0;
 			heldDevice = void 0;
 		}
 	}
+	function refreshIfOutdated(id) {
+		if (!isConnected.value || !heldDevice || heldDeviceId !== id) return;
+		if (!isOutdated(heldDevice.camera.value.snapshotSettings, timestampCache.get(id))) return;
+		fetchSnapshotShared(deviceManager, id).catch(() => void 0);
+	}
+	function armViewRefresh(id) {
+		clearTimeout(viewRefreshTimer);
+		const settings = heldDevice?.camera.value.snapshotSettings;
+		if (heldDeviceId !== id || settings?.mode !== "onView") return;
+		const maxAgeMs = settings.maxAge * 1e3;
+		const leftMs = (timestampCache.get(id) ?? 0) + maxAgeMs - Date.now();
+		viewRefreshTimer = setTimeout(() => {
+			refreshOnView(id);
+		}, leftMs > 0 ? leftMs : maxAgeMs);
+	}
+	async function refreshOnView(id) {
+		if (isVisible.value && isConnected.value) await fetchSnapshotShared(deviceManager, id).catch(() => void 0);
+		armViewRefresh(id);
+	}
 	function showCached(id) {
 		const cached = snapshotCache.get(id);
 		if (!cached) return false;
@@ -864,7 +928,10 @@ function useSnapshot(cameraIdOrName) {
 	}
 	async function loadSnapshot(id, skipCache = false) {
 		if (!isConnected.value || !id) return;
-		if (!skipCache && showCached(id)) return;
+		if (!skipCache && showCached(id)) {
+			refreshIfOutdated(id);
+			return;
+		}
 		_isLoading.value = true;
 		try {
 			const result = await fetchSnapshotShared(deviceManager, id);
@@ -915,12 +982,7 @@ function useSnapshot(cameraIdOrName) {
 			snapshot.value = void 0;
 		}
 	}, { immediate: true });
-	onTabVisible(() => {
-		const id = currentId();
-		if (!isConnected.value || !heldDevice || heldDeviceId !== id) return;
-		if (!isOutdated(heldDevice.camera.value.snapshotSettings, timestampCache.get(id))) return;
-		fetchSnapshotShared(deviceManager, id).catch(() => void 0);
-	});
+	onTabVisible(() => refreshIfOutdated(currentId()));
 	tryOnScopeDispose(() => {
 		disposed = true;
 		cancelHoldRetry();
@@ -932,14 +994,22 @@ function useSnapshot(cameraIdOrName) {
 		snapshotSrc,
 		snapshotTimestamp,
 		isLoading: computed(() => _isLoading.value || !initialLoadDone.value),
+		isRefreshing: computed(() => refreshingCameras.has(currentId())),
 		refresh
 	};
 }
 //#endregion
 //#region src/composables/useCamera.ts
 var NOT_MODIFIED = "not-modified";
+var CLOCK_SAMPLE_MAX_MS = 5e3;
 var snapshotWithMetaSupport = /* @__PURE__ */ new WeakMap();
 var sensorEventFanouts = /* @__PURE__ */ new WeakMap();
+function replyTime(result, requestedAt) {
+	if (result.stamp === void 0 || result.fetchedAt === void 0) return result.fetchedAt;
+	if (Date.now() - requestedAt > CLOCK_SAMPLE_MAX_MS) return toBrowserTime(result.stamp);
+	rememberServerClock(result.fetchedAt, result.stamp);
+	return result.fetchedAt;
+}
 async function createReactiveCameraDevice(rpcOrContext, initialCamera) {
 	const cameraNamespaces = NamespaceManager.cameraNamespaces(initialCamera._id);
 	const ctx = "rpc" in rpcOrContext && "value" in rpcOrContext.rpc ? rpcOrContext : void 0;
@@ -999,6 +1069,7 @@ async function createReactiveCameraDevice(rpcOrContext, initialCamera) {
 	const hasPtz = computed(() => existingSensorTypes.value.has(SensorType.PTZ));
 	async function fetchSnapshot(sourceId, forceNew) {
 		snapshotLoading.value = true;
+		startSnapshotRefresh(initialCamera._id, forceNew);
 		const requestedAt = Date.now();
 		try {
 			const result = await requestSnapshot(sourceId, forceNew);
@@ -1008,12 +1079,14 @@ async function createReactiveCameraDevice(rpcOrContext, initialCamera) {
 					sourceId,
 					fetchedAt: result.stamp
 				};
-				setSnapshot(initialCamera._id, result.data, result.fetchedAt, result.fetchedAt ?? requestedAt, stamp);
+				const fetchedAt = replyTime(result, requestedAt);
+				setSnapshot(initialCamera._id, result.data, fetchedAt, fetchedAt ?? requestedAt, stamp);
 				return result.data;
 			}
 			return;
 		} finally {
 			snapshotLoading.value = false;
+			endSnapshotRefresh(initialCamera._id, forceNew);
 		}
 	}
 	async function requestSnapshot(sourceId, forceNew) {
@@ -1139,7 +1212,7 @@ async function createReactiveCameraDevice(rpcOrContext, initialCamera) {
 				break;
 			case "snapshot:updated": {
 				const { sourceId, snapshot: data, fetchedAt } = event.data;
-				setSnapshot(initialCamera._id, data, fetchedAt, void 0, sourceId && fetchedAt !== void 0 ? {
+				setSnapshot(initialCamera._id, data, toBrowserTime(fetchedAt), void 0, sourceId && fetchedAt !== void 0 ? {
 					sourceId,
 					fetchedAt
 				} : void 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camera.ui/browser",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "camera.ui browser client",
   "author": "seydx (https://github.com/cameraui/clients)",
   "type": "module",