@camera.ui/browser 0.1.4 → 0.1.6

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,9 @@ 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 serverClockOffset = 0;
 function notify(cameraId) {
 	subscribers.get(cameraId)?.forEach((cb) => cb());
 }
@@ -719,6 +723,25 @@ function isOutdated(settings, fetchedAt) {
 function deferRevoke(url) {
 	setTimeout(() => URL.revokeObjectURL(url), REVOKE_DELAY_MS);
 }
+function startSnapshotRefresh(cameraId) {
+	clearTimeout(refreshLingers.get(cameraId));
+	refreshLingers.delete(cameraId);
+	refreshingCameras.add(cameraId);
+}
+function endSnapshotRefresh(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 +762,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 +794,21 @@ 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();
+	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 +828,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 +839,7 @@ function useSnapshot(cameraIdOrName) {
 	let heldDeviceId;
 	let heldDevice;
 	let pendingHoldId;
+	let viewRefreshTimer;
 	const holdRetry = createRetryTimer();
 	let disposed = false;
 	function currentId() {
@@ -829,6 +860,7 @@ function useSnapshot(cameraIdOrName) {
 			heldDeviceId = id;
 			heldDevice = device;
 			cancelHoldRetry();
+			armViewRefresh(id);
 		} catch {
 			if (currentId() === id) scheduleHoldRetry(id);
 		} finally {
@@ -849,12 +881,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 +916,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 +970,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,6 +982,7 @@ function useSnapshot(cameraIdOrName) {
 		snapshotSrc,
 		snapshotTimestamp,
 		isLoading: computed(() => _isLoading.value || !initialLoadDone.value),
+		isRefreshing: computed(() => refreshingCameras.has(currentId())),
 		refresh
 	};
 }
@@ -999,6 +1050,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);
 		const requestedAt = Date.now();
 		try {
 			const result = await requestSnapshot(sourceId, forceNew);
@@ -1008,12 +1060,14 @@ async function createReactiveCameraDevice(rpcOrContext, initialCamera) {
 					sourceId,
 					fetchedAt: result.stamp
 				};
+				if (stamp && result.fetchedAt !== void 0) rememberServerClock(result.fetchedAt, stamp.fetchedAt);
 				setSnapshot(initialCamera._id, result.data, result.fetchedAt, result.fetchedAt ?? requestedAt, stamp);
 				return result.data;
 			}
 			return;
 		} finally {
 			snapshotLoading.value = false;
+			endSnapshotRefresh(initialCamera._id);
 		}
 	}
 	async function requestSnapshot(sourceId, forceNew) {
@@ -1139,7 +1193,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.4",
+  "version": "0.1.6",
   "description": "camera.ui browser client",
   "author": "seydx (https://github.com/cameraui/clients)",
   "type": "module",
@@ -26,7 +26,7 @@
     "prepublishOnly": "npm i --package-lock-only && npm run lint && npm run format && npm run build",
     "test": "vitest run --passWithNoTests",
     "test:watch": "vitest",
-    "update": "updates -M npm,pypi,go,cargo,docker,make --update ./"
+    "update": "updates -M npm,pypi,go,cargo,docker --update ./"
   },
   "peerDependencies": {
     "@camera.ui/logger": ">=0.0.3",
@@ -39,29 +39,29 @@
   "devDependencies": {
     "@camera.ui/logger": "file:../../packages/logger",
     "@camera.ui/rpc": "^1.1.1",
-    "@camera.ui/sdk": "~1.4.4",
+    "@camera.ui/sdk": "~1.4.5",
     "@camera.ui/transport": "file:../../packages/transport",
     "@eneris/push-receiver": "^4.4.0",
-    "@microsoft/api-extractor": "^7.59.4",
+    "@microsoft/api-extractor": "^7.60.1",
     "@stylistic/eslint-plugin": "^5.10.0",
     "@types/webrtc": "^0.0.47",
-    "@typescript-eslint/parser": "^8.72.0",
+    "@typescript-eslint/parser": "^8.72.1",
     "@vitejs/plugin-vue": "^6.0.10",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.9.0",
-    "@vue/language-core": "^3.3.13",
+    "@vue/language-core": "^3.3.14",
     "@vue/tsconfig": "^0.9.1",
     "@vueuse/core": "^15.0.0",
     "@webgpu/types": "^0.1.74",
     "eslint": "9.39.2",
-    "eslint-plugin-vue": "^10.11.1",
+    "eslint-plugin-vue": "^10.12.0",
     "globals": "^17.13.0",
     "prettier": "^3.9.10",
     "rimraf": "^6.1.3",
     "typescript": "5.9.3",
-    "typescript-eslint": "^8.72.0",
+    "typescript-eslint": "^8.72.1",
     "unplugin-dts": "^1.1.2",
-    "updates": "^19.3.0",
+    "updates": "^20.0.0",
     "vite": "^8.3.5",
     "vitest": "^5.0.5",
     "vue": "^3.5.44",