@camera.ui/browser 0.0.119 → 0.0.120

package/dist/index.js

@@ -3350,15 +3350,17 @@ var StreamManager = class {
 		entry.refCount--;
 		if (consumerContainerRef) {
 			entry.consumerContainerRefs.delete(consumerContainerRef);
-			if (entry.refCount > 0 && consumerContainerRef.value === entry.containerElementRef.value) for (const ref of entry.consumerContainerRefs) {
-				const candidate = ref.value;
-				if (candidate && candidate !== consumerContainerRef.value) {
-					entry.containerElementRef = ref;
-					if (entry.sharedVideoElement && entry.sharedVideoElement.parentElement !== candidate) {
-						candidate.appendChild(entry.sharedVideoElement);
-						entry.sharedVideoElement.play().catch(() => {});
+			const video = entry.sharedVideoElement;
+			const releasingContainer = consumerContainerRef.value;
+			const videoParent = video?.parentElement ?? null;
+			if (entry.refCount > 0 && video && (videoParent === releasingContainer || videoParent === null || !videoParent.isConnected)) {
+				const target = this.pickVisibleConsumer(entry, releasingContainer);
+				if (target) {
+					entry.containerElementRef = target.ref;
+					if (video.parentElement !== target.el) {
+						target.el.appendChild(video);
+						video.play().catch(() => {});
 					}
-					break;
 				}
 			}
 		}
@@ -3389,6 +3391,22 @@ var StreamManager = class {
 			resolution: entry.stream.activeResolution.value
 		}));
 	}
+	pickVisibleConsumer(entry, excludeContainer) {
+		let fallback;
+		for (const ref of entry.consumerContainerRefs) {
+			const el = ref.value;
+			if (!el || el === excludeContainer || !el.isConnected) continue;
+			if (el.checkVisibility?.() ?? el.offsetParent !== null) return {
+				ref,
+				el
+			};
+			fallback ??= {
+				ref,
+				el
+			};
+		}
+		return fallback;
+	}
 	cancelRelease(cameraName) {
 		const timer = this.releaseTimers.get(cameraName);
 		if (timer) {
@@ -3530,15 +3548,15 @@ function acquireAutoStaggerDelay() {
 	autoStaggerLastTouch = now;
 	return delay;
 }
+function isElementVisible(el) {
+	if (!el || !el.isConnected) return false;
+	return el.checkVisibility?.() ?? el.offsetParent !== null;
+}
 function useCameraStream(options) {
 	const { activityConfig, autoStart: autoStartOption = true, isolated = false } = options;
 	const shouldAutoStart = () => toValue(autoStartOption);
 	const startDelay = options.startDelay ?? acquireAutoStaggerDelay();
-	const autoStartReady = ref(startDelay <= 0);
-	let startDelayTimer;
-	if (startDelay > 0) startDelayTimer = setTimeout(() => {
-		autoStartReady.value = true;
-	}, startDelay);
+	const cleanupFns = [];
 	const { isConnected } = useCameraUi();
 	const cameraGetter = computed(() => toValue(options.camera));
 	const isCameraString = computed(() => typeof cameraGetter.value === "string");
@@ -3551,21 +3569,54 @@ function useCameraStream(options) {
 		if (isCameraString.value) return cameraDeviceFromLookup.value;
 		return cameraGetter.value;
 	});
+	let startDelayTimer;
+	let ownedConnection;
 	const containerElement = shallowRef();
 	const fullscreenElement = shallowRef();
 	const videoElement = shallowRef();
 	const streamVideoElementRef = shallowRef();
 	const currentStream = shallowRef();
+	const cameraDeviceRef = shallowRef();
 	const isUsingCachedStream = ref(false);
 	const initialized = ref(false);
 	const cleanedUp = ref(false);
-	const cameraDeviceRef = shallowRef();
+	const nativeWidth = ref(0);
+	const nativeHeight = ref(0);
+	const isPip = ref(false);
+	const autoStartReady = ref(startDelay <= 0);
+	if (startDelay > 0) startDelayTimer = setTimeout(() => {
+		autoStartReady.value = true;
+	}, startDelay);
 	watch(resolvedCameraDevice, (device) => {
 		cameraDeviceRef.value = device;
 	}, { immediate: true });
 	const isCameraDisabled = computed(() => cameraDeviceRef.value?.disabled.value === true);
-	const cleanupFns = [];
-	let ownedConnection;
+	const status = computed(() => currentStream.value?.status.value ?? "idle");
+	const isPlaying = computed(() => currentStream.value?.isPlaying.value ?? false);
+	const activeMode = computed(() => currentStream.value?.activeMode.value ?? "webrtc");
+	const activeResolution = computed(() => currentStream.value?.activeResolution.value ?? "low-resolution");
+	const hasAudio = computed(() => currentStream.value?.hasAudio.value ?? false);
+	const hasBackchannel = computed(() => currentStream.value?.hasBackchannel.value ?? false);
+	const error = computed(() => currentStream.value?.error.value);
+	const isReconnecting = computed(() => status.value === "reconnecting");
+	const isBusy = computed(() => cameraDeviceLoading.value || !isPlaying.value && status.value !== "error");
+	const hasSound = computed(() => hasAudio.value && status.value === "connected");
+	const hasIntercom = computed(() => Boolean(typeof navigator !== "undefined" && navigator.mediaDevices) && hasBackchannel.value);
+	const muted = computed(() => currentStream.value?.muted.value ?? true);
+	const paused = computed(() => currentStream.value?.paused.value ?? false);
+	const supportsPip = computed(() => typeof document !== "undefined" && document.pictureInPictureEnabled && !!videoElement.value);
+	const renderElement = computed(() => videoElement.value);
+	const fullscreenTarget = computed(() => fullscreenElement.value ?? containerElement.value);
+	const activityModeManager = createActivityMode({
+		initialMode: toValue(options.activityMode) ?? "always-on",
+		config: activityConfig,
+		onStreamStart: () => {
+			if (!isCameraDisabled.value) currentStream.value?.start();
+		},
+		onStreamStop: () => currentStream.value?.stop(),
+		isStreamPlaying: () => isPlaying.value
+	});
+	const { isFullscreen, toggle: toggleFullscreen } = useCuiFullscreen(fullscreenTarget);
 	function createOwnedStream() {
 		ownedConnection = createStreamConnection({
 			camera: cameraDeviceRef,
@@ -3596,117 +3647,24 @@ function useCameraStream(options) {
 		if (video.parentElement && video.parentElement !== container) video.parentElement.removeChild(video);
 		if (video.parentElement !== container) container.appendChild(video);
 	}
-	watch([containerElement, videoElement], ([container, video]) => {
-		if (container && video) insertVideoIntoContainer(video, container);
-	}, { immediate: true });
-	const status = computed(() => currentStream.value?.status.value ?? "idle");
-	const isPlaying = computed(() => currentStream.value?.isPlaying.value ?? false);
-	const activeMode = computed(() => currentStream.value?.activeMode.value ?? "webrtc");
-	const activeResolution = computed(() => currentStream.value?.activeResolution.value ?? "low-resolution");
-	const hasAudio = computed(() => currentStream.value?.hasAudio.value ?? false);
-	const hasBackchannel = computed(() => currentStream.value?.hasBackchannel.value ?? false);
-	const error = computed(() => currentStream.value?.error.value);
-	const isReconnecting = computed(() => status.value === "reconnecting");
-	const isBusy = computed(() => cameraDeviceLoading.value || !isPlaying.value && status.value !== "error");
-	const hasSound = computed(() => hasAudio.value && status.value === "connected");
-	const hasIntercom = computed(() => Boolean(typeof navigator !== "undefined" && navigator.mediaDevices) && hasBackchannel.value);
-	const muted = computed(() => currentStream.value?.muted.value ?? true);
-	const paused = computed(() => currentStream.value?.paused.value ?? false);
-	const nativeWidth = ref(0);
-	const nativeHeight = ref(0);
-	const stopDimensionSync = watch([() => currentStream.value?.nativeWidth.value, () => currentStream.value?.nativeHeight.value], ([w, h]) => {
-		if (w && w > 0) nativeWidth.value = w;
-		if (h && h > 0) nativeHeight.value = h;
-	});
-	cleanupFns.push(stopDimensionSync);
-	if (options.canvasStyle !== void 0 || options.canvasClass !== void 0) {
-		let stopCanvasListener;
-		function applyCanvasStyles(canvas) {
-			const style = toValue(options.canvasStyle);
-			const cls = toValue(options.canvasClass);
-			if (style) if (typeof style === "string") canvas.style.cssText += ";" + style;
-			else if (Array.isArray(style)) {
-				for (const s of style) if (typeof s === "string") canvas.style.cssText += ";" + s;
-				else if (s) Object.assign(canvas.style, s);
-			} else Object.assign(canvas.style, style);
-			if (cls) if (typeof cls === "string") canvas.className = cls;
-			else if (Array.isArray(cls)) canvas.className = cls.filter(Boolean).join(" ");
-			else for (const [name, active] of Object.entries(cls)) canvas.classList.toggle(name, !!active);
-		}
-		const stopContainerWatch = watch(containerElement, (container) => {
-			stopCanvasListener?.();
-			stopCanvasListener = void 0;
-			if (!container) return;
-			Array.from(container.querySelectorAll("canvas")).forEach((node) => {
-				applyCanvasStyles(node);
-			});
-			const observer = new MutationObserver((records) => {
-				for (const r of records) Array.from(r.addedNodes).forEach((added) => {
-					if (added instanceof HTMLCanvasElement) applyCanvasStyles(added);
-					else if (added instanceof HTMLElement) Array.from(added.querySelectorAll("canvas")).forEach((c) => applyCanvasStyles(c));
-				});
-			});
-			observer.observe(container, {
-				childList: true,
-				subtree: true
-			});
-			stopCanvasListener = () => observer.disconnect();
-		}, { immediate: true });
-		cleanupFns.push(() => {
-			stopContainerWatch();
-			stopCanvasListener?.();
-		});
-	}
-	if (options.videoStyle !== void 0 || options.videoClass !== void 0) {
-		const stopVideoStyleWatch = watch([
-			videoElement,
-			() => toValue(options.videoStyle),
-			() => toValue(options.videoClass)
-		], ([video, style, cls]) => {
-			if (!video) return;
-			if (style) if (typeof style === "string") video.style.cssText += ";" + style;
-			else if (Array.isArray(style)) {
-				for (const s of style) if (typeof s === "string") video.style.cssText += ";" + s;
-				else if (s) Object.assign(video.style, s);
-			} else Object.assign(video.style, style);
-			if (cls) if (typeof cls === "string") video.className = cls;
-			else if (Array.isArray(cls)) video.className = cls.filter(Boolean).join(" ");
-			else for (const [name, active] of Object.entries(cls)) video.classList.toggle(name, active);
-		}, { immediate: true });
-		cleanupFns.push(stopVideoStyleWatch);
+	function reclaimSharedVideo() {
+		if (isolated) return;
+		const container = containerElement.value;
+		const video = videoElement.value;
+		if (!container || !video || video.parentElement === container) return;
+		if (!isElementVisible(container) || isElementVisible(video.parentElement)) return;
+		insertVideoIntoContainer(video, container);
+		video.play().catch(() => {});
+		const camName = cameraName.value;
+		const entry = camName ? streamManager.get(camName) : void 0;
+		if (entry) entry.containerElementRef = containerElement;
 	}
-	const isPip = ref(false);
-	const supportsPip = computed(() => typeof document !== "undefined" && document.pictureInPictureEnabled && !!videoElement.value);
 	function onEnterPip() {
 		isPip.value = true;
 	}
 	function onLeavePip() {
 		isPip.value = false;
 	}
-	const stopPipWatch = watch(videoElement, (video, oldVideo) => {
-		if (oldVideo) {
-			oldVideo.removeEventListener("enterpictureinpicture", onEnterPip);
-			oldVideo.removeEventListener("leavepictureinpicture", onLeavePip);
-		}
-		if (video) {
-			video.addEventListener("enterpictureinpicture", onEnterPip);
-			video.addEventListener("leavepictureinpicture", onLeavePip);
-		}
-	}, { immediate: true });
-	cleanupFns.push(stopPipWatch);
-	const { isFullscreen, toggle: toggleFullscreen } = useCuiFullscreen(computed(() => fullscreenElement.value ?? containerElement.value));
-	const activityModeManager = createActivityMode({
-		initialMode: toValue(options.activityMode) ?? "always-on",
-		config: activityConfig,
-		onStreamStart: () => {
-			if (!isCameraDisabled.value) currentStream.value?.start();
-		},
-		onStreamStop: () => currentStream.value?.stop(),
-		isStreamPlaying: () => isPlaying.value
-	});
-	watch(() => toValue(options.activityMode), (newMode) => {
-		if (newMode && newMode !== activityModeManager.mode.value) activityModeManager.setMode(newMode);
-	});
 	function initializeIsolated() {
 		if (initialized.value) return;
 		const container = containerElement.value;
@@ -3879,7 +3837,6 @@ function useCameraStream(options) {
 		if (document.pictureInPictureElement) document.exitPictureInPicture();
 		else if (document.pictureInPictureEnabled && videoElement.value) videoElement.value.requestPictureInPicture();
 	}
-	const renderElement = computed(() => videoElement.value);
 	function captureScreenshot() {
 		const video = videoElement.value;
 		if (!video || video.videoWidth === 0) return null;
@@ -3889,20 +3846,6 @@ function useCameraStream(options) {
 		tmp.getContext("2d")?.drawImage(video, 0, 0);
 		return tmp.toDataURL("image/png");
 	}
-	watch([
-		containerElement,
-		resolvedCameraDevice,
-		isConnected,
-		autoStartReady
-	], () => {
-		if (!initialized.value) initialize();
-		else if (autoStartReady.value && shouldAutoStart() && !isPlaying.value && status.value === "idle" && !isCameraDisabled.value) currentStream.value?.start();
-	}, { immediate: true });
-	watch(isCameraDisabled, (disabled, wasDisabled) => {
-		if (!initialized.value) return;
-		if (!wasDisabled && disabled) currentStream.value?.stop();
-		else if (wasDisabled && !disabled && shouldAutoStart()) currentStream.value?.restart();
-	});
 	function cleanup() {
 		if (cleanedUp.value) return;
 		cleanedUp.value = true;
@@ -3923,6 +3866,114 @@ function useCameraStream(options) {
 		}
 		activityModeManager.dispose();
 	}
+	function applyCanvasStyles(canvas) {
+		const style = toValue(options.canvasStyle);
+		const cls = toValue(options.canvasClass);
+		if (style) if (typeof style === "string") canvas.style.cssText += ";" + style;
+		else if (Array.isArray(style)) {
+			for (const s of style) if (typeof s === "string") canvas.style.cssText += ";" + s;
+			else if (s) Object.assign(canvas.style, s);
+		} else Object.assign(canvas.style, style);
+		if (cls) if (typeof cls === "string") canvas.className = cls;
+		else if (Array.isArray(cls)) canvas.className = cls.filter(Boolean).join(" ");
+		else for (const [name, active] of Object.entries(cls)) canvas.classList.toggle(name, !!active);
+	}
+	if (!isolated && typeof IntersectionObserver !== "undefined") {
+		let visibilityObserver;
+		const stopVisibilityWatch = watch(containerElement, (container) => {
+			visibilityObserver?.disconnect();
+			visibilityObserver = void 0;
+			if (!container) return;
+			visibilityObserver = new IntersectionObserver((entries) => {
+				if (entries.some((e) => e.isIntersecting)) reclaimSharedVideo();
+			});
+			visibilityObserver.observe(container);
+		}, { immediate: true });
+		cleanupFns.push(() => {
+			stopVisibilityWatch();
+			visibilityObserver?.disconnect();
+		});
+	}
+	if (options.canvasStyle !== void 0 || options.canvasClass !== void 0) {
+		let stopCanvasListener;
+		const stopContainerWatch = watch(containerElement, (container) => {
+			stopCanvasListener?.();
+			stopCanvasListener = void 0;
+			if (!container) return;
+			Array.from(container.querySelectorAll("canvas")).forEach((node) => {
+				applyCanvasStyles(node);
+			});
+			const observer = new MutationObserver((records) => {
+				for (const r of records) Array.from(r.addedNodes).forEach((added) => {
+					if (added instanceof HTMLCanvasElement) applyCanvasStyles(added);
+					else if (added instanceof HTMLElement) Array.from(added.querySelectorAll("canvas")).forEach((c) => applyCanvasStyles(c));
+				});
+			});
+			observer.observe(container, {
+				childList: true,
+				subtree: true
+			});
+			stopCanvasListener = () => observer.disconnect();
+		}, { immediate: true });
+		cleanupFns.push(() => {
+			stopContainerWatch();
+			stopCanvasListener?.();
+		});
+	}
+	if (options.videoStyle !== void 0 || options.videoClass !== void 0) {
+		const stopVideoStyleWatch = watch([
+			videoElement,
+			() => toValue(options.videoStyle),
+			() => toValue(options.videoClass)
+		], ([video, style, cls]) => {
+			if (!video) return;
+			if (style) if (typeof style === "string") video.style.cssText += ";" + style;
+			else if (Array.isArray(style)) {
+				for (const s of style) if (typeof s === "string") video.style.cssText += ";" + s;
+				else if (s) Object.assign(video.style, s);
+			} else Object.assign(video.style, style);
+			if (cls) if (typeof cls === "string") video.className = cls;
+			else if (Array.isArray(cls)) video.className = cls.filter(Boolean).join(" ");
+			else for (const [name, active] of Object.entries(cls)) video.classList.toggle(name, active);
+		}, { immediate: true });
+		cleanupFns.push(stopVideoStyleWatch);
+	}
+	const stopDimensionSync = watch([() => currentStream.value?.nativeWidth.value, () => currentStream.value?.nativeHeight.value], ([w, h]) => {
+		if (w && w > 0) nativeWidth.value = w;
+		if (h && h > 0) nativeHeight.value = h;
+	});
+	cleanupFns.push(stopDimensionSync);
+	const stopPipWatch = watch(videoElement, (video, oldVideo) => {
+		if (oldVideo) {
+			oldVideo.removeEventListener("enterpictureinpicture", onEnterPip);
+			oldVideo.removeEventListener("leavepictureinpicture", onLeavePip);
+		}
+		if (video) {
+			video.addEventListener("enterpictureinpicture", onEnterPip);
+			video.addEventListener("leavepictureinpicture", onLeavePip);
+		}
+	}, { immediate: true });
+	cleanupFns.push(stopPipWatch);
+	watch([containerElement, videoElement], ([container, video]) => {
+		if (container && video) insertVideoIntoContainer(video, container);
+	}, { immediate: true });
+	watch(() => toValue(options.activityMode), (newMode) => {
+		if (newMode && newMode !== activityModeManager.mode.value) activityModeManager.setMode(newMode);
+	});
+	watch([
+		containerElement,
+		resolvedCameraDevice,
+		isConnected,
+		autoStartReady
+	], () => {
+		if (!initialized.value) initialize();
+		else if (autoStartReady.value && shouldAutoStart() && !isPlaying.value && status.value === "idle" && !isCameraDisabled.value) currentStream.value?.start();
+	}, { immediate: true });
+	watch(isCameraDisabled, (disabled, wasDisabled) => {
+		if (!initialized.value) return;
+		if (!wasDisabled && disabled) currentStream.value?.stop();
+		else if (wasDisabled && !disabled && shouldAutoStart()) currentStream.value?.restart();
+	});
 	onBeforeUnmount(cleanup);
 	tryOnScopeDispose(cleanup);
 	return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camera.ui/browser",
-  "version": "0.0.119",
+  "version": "0.0.120",
   "description": "camera.ui browser client",
   "author": "seydx (https://github.com/cameraui/clients)",
   "type": "module",
@@ -30,14 +30,14 @@
   },
   "peerDependencies": {
     "@camera.ui/rpc": ">=1.0.4",
-    "@camera.ui/sdk": ">=0.0.8",
+    "@camera.ui/sdk": ">=0.0.9",
     "@camera.ui/transport": ">=0.0.1",
     "@vueuse/core": ">=14.3.0",
     "vue": ">=3.5.39"
   },
   "devDependencies": {
     "@camera.ui/rpc": "^1.0.4",
-    "@camera.ui/sdk": "~0.0.8",
+    "@camera.ui/sdk": "~0.0.9",
     "@camera.ui/transport": "file:../../packages/transport",
     "@eneris/push-receiver": "^4.3.1",
     "@microsoft/api-extractor": "^7.58.9",
@@ -54,12 +54,12 @@
     "eslint": "9.39.2",
     "eslint-plugin-vue": "^10.9.2",
     "globals": "^17.7.0",
-    "prettier": "^3.8.5",
+    "prettier": "^3.9.1",
     "rimraf": "^6.1.3",
     "typescript": "5.9.3",
     "typescript-eslint": "^8.62.0",
     "unplugin-dts": "^1.0.3",
-    "updates": "^17.18.0",
+    "updates": "^17.18.1",
     "vite": "^8.1.0",
     "vitest": "^4.1.9",
     "vue": "^3.5.39",