@camera.ui/browser 0.0.119 → 0.0.121

package/dist/index.js

@@ -1,3 +1,4 @@
+import { Logger } from "@camera.ui/logger";
 import { computed, inject, markRaw, onBeforeUnmount, reactive, readonly, ref, shallowRef, toValue, watch } from "vue";
 import { tryOnScopeDispose, useTimeoutFn, whenever } from "@vueuse/core";
 import { SensorType } from "@camera.ui/sdk";
@@ -1823,6 +1824,7 @@ function refreshClientSubscriptions() {
 //#endregion
 //#region src/plugin.ts
 var CAMERA_UI_INJECTION_KEY = Symbol("camera-ui");
+var log$2 = new Logger("plugin");
 function isContext(input) {
 	return "rpc" in input && "isConnected" in input;
 }
@@ -1857,7 +1859,7 @@ function makeContextFromTransport(input) {
 		for (const cb of set) try {
 			cb();
 		} catch (err) {
-			console.warn("[camera.ui] context listener threw:", err);
+			log$2.warn("context listener threw:", err);
 		}
 	}
 	natsTransport.subscribeClient((next) => {
@@ -2034,14 +2036,7 @@ function createActivityMode(options) {
 //#endregion
 //#region src/composables/useTabVisibility.ts
 var DEFAULT_TAB_PAUSE_MS = 3e4;
-function log$1(...args) {
-	const d = /* @__PURE__ */ new Date();
-	const hh = String(d.getHours()).padStart(2, "0");
-	const mm = String(d.getMinutes()).padStart(2, "0");
-	const ss = String(d.getSeconds()).padStart(2, "0");
-	const ms = String(d.getMilliseconds()).padStart(3, "0");
-	console.log(`[TabVisibility ${hh}:${mm}:${ss}.${ms}]`, ...args);
-}
+var log$1 = new Logger("TabVisibility");
 var _isVisible = ref(typeof document === "undefined" ? true : document.visibilityState === "visible");
 var _hiddenAt = null;
 var _hiddenListeners = /* @__PURE__ */ new Set();
@@ -2049,19 +2044,19 @@ var _pausedListeners = /* @__PURE__ */ new Set();
 var _visibleListeners = /* @__PURE__ */ new Set();
 var _initialized = false;
 function _firePausedEntry(entry) {
-	log$1(`paused listener fired (delay ${entry.delayMs}ms reached)`);
+	log$1.debug(`paused listener fired (delay ${entry.delayMs}ms reached)`);
 	try {
 		entry.cb();
 	} catch (err) {
-		console.error("[TabVisibility] onTabPaused listener threw:", err);
+		log$1.error("onTabPaused listener threw:", err);
 	}
 }
 function _schedulePausedEntry(entry) {
-	log$1(`paused listener scheduled in ${entry.delayMs}ms`);
+	log$1.debug(`paused listener scheduled in ${entry.delayMs}ms`);
 	entry.timer = setTimeout(() => {
 		entry.timer = null;
 		if (_isVisible.value) {
-			log$1("paused listener skipped — tab visible before delay");
+			log$1.debug("paused listener skipped — tab visible before delay");
 			return;
 		}
 		_firePausedEntry(entry);
@@ -2081,11 +2076,11 @@ function _init() {
 		if (!visible && _isVisible.value) {
 			_isVisible.value = false;
 			_hiddenAt = Date.now();
-			log$1(`tab → hidden (hidden=${_hiddenListeners.size} paused=${_pausedListeners.size})`);
+			log$1.debug(`tab → hidden (hidden=${_hiddenListeners.size} paused=${_pausedListeners.size})`);
 			for (const entry of _hiddenListeners) try {
 				entry.cb();
 			} catch (err) {
-				console.error("[TabVisibility] onTabHidden listener threw:", err);
+				log$1.error("onTabHidden listener threw:", err);
 			}
 			for (const entry of _pausedListeners) _schedulePausedEntry(entry);
 		} else if (visible && !_isVisible.value) {
@@ -2093,11 +2088,11 @@ function _init() {
 			const hiddenMs = _hiddenAt != null ? Date.now() - _hiddenAt : 0;
 			_hiddenAt = null;
 			_isVisible.value = true;
-			log$1(`tab → visible (hiddenMs=${hiddenMs}, visible-listeners=${_visibleListeners.size})`);
+			log$1.debug(`tab → visible (hiddenMs=${hiddenMs}, visible-listeners=${_visibleListeners.size})`);
 			for (const { cb } of _visibleListeners) try {
 				cb({ hiddenMs });
 			} catch (err) {
-				console.error("[TabVisibility] onTabVisible listener threw:", err);
+				log$1.error("onTabVisible listener threw:", err);
 			}
 		}
 	});
@@ -2576,14 +2571,7 @@ async function processWebRTCMessage(handler, msg) {
 }
 //#endregion
 //#region src/streaming/streamConnection.ts
-function log(...args) {
-	const d = /* @__PURE__ */ new Date();
-	const hh = String(d.getHours()).padStart(2, "0");
-	const mm = String(d.getMinutes()).padStart(2, "0");
-	const ss = String(d.getSeconds()).padStart(2, "0");
-	const ms = String(d.getMilliseconds()).padStart(3, "0");
-	console.log(`[StreamConnection ${hh}:${mm}:${ss}.${ms}]`, ...args);
-}
+var log = new Logger("StreamConnection");
 var StreamConnection = class {
 	status;
 	activeMode;
@@ -2691,19 +2679,19 @@ var StreamConnection = class {
 		this.stopReconnectTimeout = stopReconnectTimeout;
 		this.setupWatchers();
 		this.offTabPaused = onTabPaused(() => {
-			log(`onTabPaused fired — status=${this.status.value}, isReady=${this.isReady.value}, target=${!!this.target.value}`);
+			log.debug(`onTabPaused fired — status=${this.status.value}, isReady=${this.isReady.value}, target=${!!this.target.value}`);
 			if (this.status.value === "idle" || this.status.value === "closed") {
-				log(`onTabPaused — already in ${this.status.value}, skipping stop()`);
+				log.debug(`onTabPaused — already in ${this.status.value}, skipping stop()`);
 				return;
 			}
 			this.wasPausedByVisibility = true;
 			this.stop();
-			log("onTabPaused — stop() done, wasPausedByVisibility=true");
+			log.debug("onTabPaused — stop() done, wasPausedByVisibility=true");
 		});
 		this.offTabVisible = onTabVisible(() => {
-			log(`onTabVisible fired — wasPausedByVisibility=${this.wasPausedByVisibility}, status=${this.status.value}, isReady=${this.isReady.value}, target=${!!this.target.value}`);
+			log.debug(`onTabVisible fired — wasPausedByVisibility=${this.wasPausedByVisibility}, status=${this.status.value}, isReady=${this.isReady.value}, target=${!!this.target.value}`);
 			if (!this.wasPausedByVisibility) {
-				log("onTabVisible — not paused by visibility, no-op");
+				log.debug("onTabVisible — not paused by visibility, no-op");
 				return;
 			}
 			this.wasPausedByVisibility = false;
@@ -2714,13 +2702,13 @@ var StreamConnection = class {
 		}, { immediate: true });
 	}
 	async start() {
-		log(`start() called — status=${this.status.value}, isReady=${this.isReady.value}`);
+		log.debug(`start() called — status=${this.status.value}, isReady=${this.isReady.value}`);
 		if (this.status.value !== "idle" && this.status.value !== "closed") {
-			log(`start() — skipped, status is ${this.status.value}`);
+			log.debug(`start() — skipped, status is ${this.status.value}`);
 			return;
 		}
 		if (!this.isReady.value) {
-			log("start() — skipped, isReady=false");
+			log.debug("start() — skipped, isReady=false");
 			return;
 		}
 		this.cleanup();
@@ -2731,32 +2719,32 @@ var StreamConnection = class {
 		this.isPlaying.value = false;
 		try {
 			if (!this.initializeSource()) {
-				log("start() — no streaming source available");
+				log.debug("start() — no streaming source available");
 				this.error.value = /* @__PURE__ */ new Error("No streaming source available");
 				this.status.value = "error";
 				return;
 			}
 			await this.probeStream();
 			if (gen !== this.connectionGeneration) {
-				log("start() — generation stale after probe, aborting");
+				log.debug("start() — generation stale after probe, aborting");
 				return;
 			}
 			this.initializeSource();
-			log("start() — connecting WebSocket");
+			log.debug("start() — connecting WebSocket");
 			this.connectWebSocket();
 		} catch (err) {
 			if (gen !== this.connectionGeneration) return;
-			log("start() — error:", err);
+			log.debug("start() — error:", err);
 			this.error.value = err instanceof Error ? err : new Error(String(err));
 			this.status.value = "error";
 		}
 	}
 	stop() {
 		if (this.status.value === "closed") {
-			log("stop() — already closed, no-op");
+			log.debug("stop() — already closed, no-op");
 			return;
 		}
-		log(`stop() — was ${this.status.value}, transitioning to closed`);
+		log.debug(`stop() — was ${this.status.value}, transitioning to closed`);
 		++this.connectionGeneration;
 		this.status.value = "closed";
 		this.cleanup();
@@ -2855,14 +2843,14 @@ var StreamConnection = class {
 	}
 	startWhenReady() {
 		if (this.isReady.value) {
-			log("startWhenReady — already ready, calling start() now");
+			log.debug("startWhenReady — already ready, calling start() now");
 			this.start();
 			return;
 		}
-		log(`startWhenReady — not ready (camera=${!!this.camera.value}, video=${!!this.videoElement.value}, target=${!!this.target.value}), watching isReady`);
+		log.debug(`startWhenReady — not ready (camera=${!!this.camera.value}, video=${!!this.videoElement.value}, target=${!!this.target.value}), watching isReady`);
 		const stop = watch(this.isReady, (ready) => {
 			if (!ready) return;
-			log("startWhenReady — isReady → true, calling start()");
+			log.debug("startWhenReady — isReady → true, calling start()");
 			stop();
 			this.start();
 		});
@@ -3350,15 +3338,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 +3379,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 +3536,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 +3557,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 +3635,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 +3825,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 +3834,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 +3854,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.121",
   "description": "camera.ui browser client",
   "author": "seydx (https://github.com/cameraui/clients)",
   "type": "module",
@@ -21,49 +21,50 @@
     "dev": "vite build --watch",
     "format": "prettier --write 'src/' --ignore-unknown --no-error-on-unmatched-pattern",
     "install-updates": "npm i --save",
-    "lint": "eslint .",
-    "lint:fix": "eslint --fix .",
-    "prepublishOnly": "npm i --package-lock-only && npm run lint:fix && npm run format && npm run build",
+    "lint": "eslint --fix .",
+    "prepublishOnly": "npm i --package-lock-only && npm run lint && npm run format && npm run build",
     "test": "vitest run --passWithNoTests",
     "test:watch": "vitest",
     "update": "updates --update ./"
   },
   "peerDependencies": {
+    "@camera.ui/logger": ">=0.0.2",
     "@camera.ui/rpc": ">=1.0.4",
-    "@camera.ui/sdk": ">=0.0.8",
+    "@camera.ui/sdk": ">=0.0.11",
     "@camera.ui/transport": ">=0.0.1",
     "@vueuse/core": ">=14.3.0",
     "vue": ">=3.5.39"
   },
   "devDependencies": {
+    "@camera.ui/logger": "file:../../packages/logger",
     "@camera.ui/rpc": "^1.0.4",
-    "@camera.ui/sdk": "~0.0.8",
+    "@camera.ui/sdk": "~0.0.11",
     "@camera.ui/transport": "file:../../packages/transport",
     "@eneris/push-receiver": "^4.3.1",
     "@microsoft/api-extractor": "^7.58.9",
     "@stylistic/eslint-plugin": "^5.10.0",
     "@types/webrtc": "^0.0.47",
-    "@typescript-eslint/parser": "^8.62.0",
+    "@typescript-eslint/parser": "^8.62.1",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.9.0",
-    "@vue/language-core": "^3.3.5",
+    "@vue/language-core": "^3.3.6",
     "@vue/tsconfig": "^0.9.1",
     "@vueuse/core": "^14.3.0",
     "@webgpu/types": "^0.1.71",
     "eslint": "9.39.2",
     "eslint-plugin-vue": "^10.9.2",
     "globals": "^17.7.0",
-    "prettier": "^3.8.5",
+    "prettier": "^3.9.4",
     "rimraf": "^6.1.3",
     "typescript": "5.9.3",
-    "typescript-eslint": "^8.62.0",
+    "typescript-eslint": "^8.62.1",
     "unplugin-dts": "^1.0.3",
-    "updates": "^17.18.0",
-    "vite": "^8.1.0",
+    "updates": "^17.18.1",
+    "vite": "^8.1.2",
     "vitest": "^4.1.9",
     "vue": "^3.5.39",
-    "vue-tsc": "^3.3.5"
+    "vue-tsc": "^3.3.6"
   },
   "overrides": {
     "@vue/language-core": "$@vue/language-core"