@octane-xplat/camera 0.9.0 → 0.11.0

package/README.md

@@ -1,31 +1,49 @@
 # `@octane-xplat/camera`
 
-Live camera preview for Octane xplat apps: `getUserMedia` video on web,
-`AVCaptureSession` on iOS, CameraX on Android.
-
 ```sh
 pnpm add @octane-xplat/camera
 ```
 
+Live camera preview for Octane xplat apps: `getUserMedia` video on web,
+`AVCaptureSession` on iOS, CameraX on Android.
+
 ```tsx
 import { CameraView } from '@octane-xplat/camera'
 
-;<CameraView
-	facing="back" // 'front' | 'back', default 'back'
-	active={streaming} // default true — false releases the session
-	onReady={() => console.log('preview running')}
-	onError={(e) => console.log(e.message)}
-	bind={(h) => (handle = h)} // h.native is the preview surface
-/>
+export function Preview() {
+	return (
+		<CameraView
+			facing="back"
+			active
+			onReady={() => console.log('Preview running')}
+			onError={(error) => console.log(error.message)}
+		/>
+	)
+}
 ```
 
 This is the preview surface only — for one-shot still capture and library
 picking use [`@octane-xplat/media`](../media/README.md). Permissions are
 requested when the session starts; `onError` is how a denial shows up.
-`bind` hands you the platform surface (`HTMLVideoElement` on web) for
+`ref` hands you the platform surface (`HTMLVideoElement` on web) for
 controls the shared props don't cover, and the `ios`/`android`/`web`
 escape props apply after the shared props.
 
-Guide: [Building screens](../../docs/primitives.md) (leaf components);
-component index: [`docs/components.md`](../../docs/components.md).
+```tsx
+// Preview.web.tsx — browser properties belong in this platform file.
+import { CameraView } from '@octane-xplat/camera'
+
+export function Preview() {
+	return (
+		<CameraView
+			web={{ playsInline: true }}
+			ref={(handle) => console.log(handle.native)}
+			onError={(error) => console.log(error.message)}
+		/>
+	)
+}
+```
+
+Guide: [Building screens](../../docs/app/primitives.md) (leaf components);
+component index: [`docs/app/components.md`](../../docs/app/components.md).
 Exercised by [`CameraDemo`](../demos/src/CameraDemo.tsrx).

package/dist/native/CameraView.android.js

@@ -1,14 +1,15 @@
 import { cameraHardwarePresent, ensureCameraPermission } from "./camera-permission.mobile.js";
 import { applyEscapeProps, layoutChildProps, nativeAccessibilityRole, nativeAccessibilityState } from "./layout-child.js";
 import { cx } from "./cx.mobile.js";
-import { defineUniversalComponent, hookSlots, registerElement, universalPlan, universalProps, universalValue, useCallback, useEffect, useRef } from "@nativescript-community/octane";
+import { defineUniversalComponent, hookSlots, registerElement, universalPlan, universalProps, universalValue, useCallback, useEffect, useImperativeHandle, useRef } from "@nativescript-community/octane";
 import { Application, View } from "@nativescript/core";
 //#region src/CameraView.android.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(4);
+var _hs$ = /* @__PURE__ */ hookSlots(5);
 var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
 var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
 var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "gridlayout",
@@ -34,9 +35,10 @@ var CameraView = defineUniversalComponent("nativescript", function CameraView(pr
 	const host = useRef(null, _h$0);
 	const active = props.active !== false;
 	const facing = props.facing ?? "back";
+	useImperativeHandle(props.ref, () => ({ native: host.current.android }), [], _h$1);
 	const bindHost = useCallback((view) => {
 		host.current = view;
-	}, [], _h$1);
+	}, [], _h$2);
 	useEffect(() => {
 		const nativeView = host.current?.android;
 		if (!nativeView) return;
@@ -87,13 +89,12 @@ var CameraView = defineUniversalComponent("nativescript", function CameraView(pr
 				provider.unbind(preview);
 			} catch {}
 		};
-	}, [active, facing], _h$2);
+	}, [active, facing], _h$3);
 	useEffect(() => {
 		const view = host.current;
 		if (!view) return;
 		applyEscapeProps(view.android, props);
-		props.bind?.({ native: view.android });
-	}, [props.bind, props.android], _h$3);
+	}, [props.ref, props.android], _h$4);
 	return universalValue(__octaneUniversalPlan0, [universalProps([
 		[
 			"set",
@@ -113,7 +114,7 @@ var CameraView = defineUniversalComponent("nativescript", function CameraView(pr
 		[
 			"set",
 			"className",
-			cx("vx-stack", "vx-cameraview", props.className)
+			cx("vx-layers", "vx-cameraview", props.className)
 		],
 		[
 			"set",

package/dist/native/CameraView.ios.js

@@ -2,13 +2,14 @@ import { cameraHardwarePresent, ensureCameraPermission } from "./camera-permissi
 import { startCameraPreview } from "./camera-session.ios.js";
 import { applyEscapeProps, layoutChildProps, nativeAccessibilityRole, nativeAccessibilityState } from "./layout-child.js";
 import { cx } from "./cx.mobile.js";
-import { defineUniversalComponent, hookSlots, universalPlan, universalProps, universalValue, useCallback, useEffect, useRef } from "@nativescript-community/octane";
+import { defineUniversalComponent, hookSlots, universalPlan, universalProps, universalValue, useCallback, useEffect, useImperativeHandle, useRef } from "@nativescript-community/octane";
 //#region src/CameraView.ios.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(4);
+var _hs$ = /* @__PURE__ */ hookSlots(5);
 var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
 var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
 var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "gridlayout",
@@ -18,9 +19,10 @@ var CameraView = defineUniversalComponent("nativescript", function CameraView(pr
 	const host = useRef(null, _h$0);
 	const active = props.active !== false;
 	const facing = props.facing ?? "back";
+	useImperativeHandle(props.ref, () => ({ native: host.current.ios ?? host.current.nativeViewProtected }), [], _h$1);
 	const bindHost = useCallback((view) => {
 		host.current = view;
-	}, [], _h$1);
+	}, [], _h$2);
 	useEffect(() => {
 		const view = host.current;
 		if (!view || !active) return;
@@ -47,13 +49,12 @@ var CameraView = defineUniversalComponent("nativescript", function CameraView(pr
 			disposed = true;
 			stopPreview?.();
 		};
-	}, [active, facing], _h$2);
+	}, [active, facing], _h$3);
 	useEffect(() => {
 		const view = host.current;
 		if (!view) return;
 		applyEscapeProps(view.ios ?? view.nativeViewProtected, props);
-		props.bind?.({ native: view.ios ?? view.nativeViewProtected });
-	}, [props.bind, props.ios], _h$3);
+	}, [props.ref, props.ios], _h$4);
 	return universalValue(__octaneUniversalPlan0, [universalProps([
 		[
 			"set",
@@ -78,7 +79,7 @@ var CameraView = defineUniversalComponent("nativescript", function CameraView(pr
 		[
 			"set",
 			"className",
-			cx("vx-stack", "vx-cameraview", props.className)
+			cx("vx-layers", "vx-cameraview", props.className)
 		],
 		[
 			"set",

package/dist/native/octane-client-build.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "43ccef1b-b61d-45ed-b9be-3e99093c9451",
+  "buildId": "b6474a71-1ef3-4824-a576-2bfdb305a227",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/web/CameraView.web.tsrx.js

@@ -1,12 +1,12 @@
 import { applyEscapeProps, layoutChildProps } from "./layout-child.web.js";
-import { __s, bag15, bag5, child, clone, delegateEvents, evt2e, evt2u, hookSlots, ifBlock, markDangerouslySetInnerHTMLChildren, queueRefAttach, queueRefDetach, setStyleProperty, snapshotSpread, template, useEffect, useRef } from "octane";
+import { __s, bag15, bag5, child, clone, delegateEvents, evt2e, evt2u, hookSlots, ifBlock, markDangerouslySetInnerHTMLChildren, queueRefAttach, queueRefDetach, setStyleProperty, snapshotSpread, template, useEffect, useImperativeHandle, useRef } from "octane";
 import { bindSignalHostPropSources, enableSignalBindings, replaceRef, setAttributeIfChanged } from "octane/internal/client";
 //#region src/CameraView.web.tsrx
 enableSignalBindings(1, true);
 delegateEvents(["playing"]);
 var _t$0 = /* @__PURE__ */ template("<video autoplay=\"\" playsinline=\"\" style=\"display: block; width: 100%; height: 100%; object-fit: cover;\"></video>");
 var _t$1 = /* @__PURE__ */ template("<div><!></div>");
-var _hs$ = /* @__PURE__ */ hookSlots(3);
+var _hs$ = /* @__PURE__ */ hookSlots(5);
 var __event = (__eventArg, readyFired, props) => {
 	if (readyFired.current) return;
 	readyFired.current = true;
@@ -19,18 +19,19 @@ var _rm$1 = [
 ];
 function __then$0(__props, __s, __extra) {
 	const facing = __extra[0];
-	const props = __extra[1];
-	const readyFired = __extra[2];
-	const video = __extra[3];
+	const hostRef = __extra[1];
+	const props = __extra[2];
+	const readyFired = __extra[3];
+	const video = __extra[4];
 	let _b = __s.slots[0];
 	if (_b === void 0) {
 		let _m0, _m1, _m4;
 		const _root = clone(_t$0, void 0, "||");
 		queueRefAttach(__s, _m1 = (element) => {
+			hostRef.current = element;
 			video.current = element;
 			if (!element) return;
 			applyEscapeProps(element, props);
-			props.bind?.({ native: element });
 		}, _m0 = _root);
 		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
 		_m4 = evt2e(_root, "$$playing", __event, readyFired, props);
@@ -39,10 +40,10 @@ function __then$0(__props, __s, __extra) {
 	} else {
 		{
 			const _r = (element) => {
+				hostRef.current = element;
 				video.current = element;
 				if (!element) return;
 				applyEscapeProps(element, props);
-				props.bind?.({ native: element });
 			};
 			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
 		}
@@ -63,10 +64,11 @@ var _rm$3 = [
 	"m"
 ];
 var CameraView = /* @__PURE__ */ __s(function CameraView(props, __s, __extra) {
-	const video = useRef(null, _hs$ + 0);
+	const hostRef = useRef(null, _hs$ + 0);
+	const video = useRef(null, _hs$ + 1);
 	const facing = props.facing ?? "back";
 	const active = props.active !== false;
-	const readyFired = useRef(false, _hs$ + 1);
+	const readyFired = useRef(false, _hs$ + 2);
 	useEffect(() => {
 		const element = video.current;
 		if (!element || !active) return;
@@ -97,14 +99,15 @@ var CameraView = /* @__PURE__ */ __s(function CameraView(props, __s, __extra) {
 			element.srcObject = null;
 			if (stream) for (const track of stream.getTracks()) track.stop();
 		};
-	}, [active, facing], _hs$ + 2);
+	}, [active, facing], _hs$ + 3);
+	useImperativeHandle(props.ref, () => ({ native: hostRef.current }), void 0, _hs$ + 4);
 	let _b = __s.slots[0];
 	if (_b === void 0) {
 		let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m12, _m13, _m14;
 		const _root = clone(_t$1);
 		_m0 = props.id;
 		_m1 = [
-			"vx-stack",
+			"vx-layers",
 			"vx-cameraview",
 			props.className
 		];
@@ -181,7 +184,7 @@ var CameraView = /* @__PURE__ */ __s(function CameraView(props, __s, __extra) {
 				"aria-live",
 				_m11
 			]
-		], "b:83c7570e", true);
+		], "b:25f1aaa9", true);
 		markDangerouslySetInnerHTMLChildren(_root);
 		_m14 = child(_root);
 		_b = bag15(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m12, _m13, _m14);
@@ -193,7 +196,7 @@ var CameraView = /* @__PURE__ */ __s(function CameraView(props, __s, __extra) {
 		}
 		{
 			const _v = [
-				"vx-stack",
+				"vx-layers",
 				"vx-cameraview",
 				props.className
 			];
@@ -298,12 +301,13 @@ var CameraView = /* @__PURE__ */ __s(function CameraView(props, __s, __extra) {
 				"aria-live",
 				_b.l
 			]
-		], "b:83c7570e", true);
+		], "b:25f1aaa9", true);
 	}
 	{
 		const __ifCondition = active;
 		ifBlock(__s, 1, _b.m, __ifCondition, __then$0, null, _b.o, __ifCondition ? [
 			facing,
+			hostRef,
 			props,
 			readyFired,
 			video

package/dist/web/octane-client-build.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "b4334c49-36f2-46b2-ba99-abac851b84f2",
+  "buildId": "ec501f73-d680-44c3-8c75-b5248486eca7",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octane-xplat/camera",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Live camera preview for Octane xplat — web getUserMedia + native capture (AVCapture / CameraX)",
   "keywords": [
     "android",
@@ -45,7 +45,7 @@
     "@nativescript/core": "9.1.2",
     "@octanejs/vite-plugin": "0.1.61",
     "octane": "0.6.3",
-    "tsrx-typegen": "0.2.1",
+    "tsrx-typegen": "0.2.2",
     "typescript": "5.9.3",
     "vite": "8.3.0"
   },

package/src/CameraView.android.tsrx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @nativescript-community/octane */
-import { useCallback, useEffect, useRef } from 'octane'
+import { useImperativeHandle, useCallback, useEffect, useRef } from 'octane'
 import { Application, View } from '@nativescript/core'
 import { registerElement } from '@nativescript-community/octane'
 import type { Attributes } from '@nativescript-community/octane/intrinsics'
@@ -28,6 +28,8 @@ export function CameraView(props: CameraViewProps) @{
 	const host = useRef<any>(null)
 	const active = props.active !== false
 	const facing = props.facing ?? 'back'
+	useImperativeHandle(props.ref, () => ({ native: host.current.android }), []);
+
 	const bindHost = useCallback((view: any) => {
 		host.current = view
 	}, [])
@@ -102,14 +104,13 @@ export function CameraView(props: CameraViewProps) @{
 		const view = host.current
 		if (!view) return
 		applyEscapeProps(view.android, props)
-		props.bind?.({ native: view.android })
-	}, [props.bind, props.android])
+	}, [props.ref, props.android])
 
 	<gridlayout
 		id={props.id}
 		rows="*"
 		columns="*"
-		className={cx('vx-stack', 'vx-cameraview', props.className)}
+		className={cx('vx-layers', 'vx-cameraview', props.className)}
 		style={{ backgroundColor: '#000', ...props.style }}
 		{...layoutChildProps(props)}
 		accessible={props.accessible}

package/src/CameraView.ios.tsrx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @nativescript-community/octane */
-import { useCallback, useEffect, useRef } from 'octane'
+import { useImperativeHandle, useCallback, useEffect, useRef } from 'octane'
 import type { CameraViewProps } from './props'
 import { cameraHardwarePresent, ensureCameraPermission } from './camera-permission.mobile'
 import { startCameraPreview } from './camera-session.ios'
@@ -11,6 +11,8 @@ export function CameraView(props: CameraViewProps) @{
 	const host = useRef<any>(null)
 	const active = props.active !== false
 	const facing = props.facing ?? 'back'
+	useImperativeHandle(props.ref, () => ({ native: host.current.ios ?? host.current.nativeViewProtected }), []);
+
 	const bindHost = useCallback((view: any) => {
 		host.current = view
 	}, [])
@@ -51,15 +53,14 @@ export function CameraView(props: CameraViewProps) @{
 		const view = host.current
 		if (!view) return
 		applyEscapeProps(view.ios ?? view.nativeViewProtected, props)
-		props.bind?.({ native: view.ios ?? view.nativeViewProtected })
-	}, [props.bind, props.ios])
+	}, [props.ref, props.ios])
 
 	<gridlayout
 		ref={bindHost}
 		id={props.id}
 		rows="*"
 		columns="*"
-		className={cx('vx-stack', 'vx-cameraview', props.className)}
+		className={cx('vx-layers', 'vx-cameraview', props.className)}
 		style={{ backgroundColor: '#000', ...props.style }}
 		{...layoutChildProps(props)}
 		accessible={props.accessible}

package/src/CameraView.web.tsrx

@@ -1,9 +1,10 @@
-import { useEffect, useRef } from 'octane'
+import { useImperativeHandle, useEffect, useRef } from 'octane'
 import type { CameraViewProps } from './props'
 import { applyEscapeProps, layoutChildProps } from './layout-child.web'
 
 /** Live web preview backed by getUserMedia. */
 export function CameraView(props: CameraViewProps) @{
+	const hostRef = useRef<any>(null);
 	const video = useRef<HTMLVideoElement | null>(null)
 	const facing = props.facing ?? 'back'
 	const active = props.active !== false
@@ -52,9 +53,11 @@ export function CameraView(props: CameraViewProps) @{
 		}
 	}, [active, facing])
 
+	useImperativeHandle(props.ref, () => ({ native: hostRef.current }), undefined);
+
 	<div
 		id={props.id}
-		className={['vx-stack', 'vx-cameraview', props.className]}
+		className={['vx-layers', 'vx-cameraview', props.className]}
 		{...layoutChildProps(props, {
 			position: 'relative',
 			overflow: 'hidden',
@@ -74,10 +77,10 @@ export function CameraView(props: CameraViewProps) @{
 		@if (active) {
 			<video
 				ref={(element: HTMLVideoElement | null) => {
+				hostRef.current = element;
 					video.current = element
 					if (!element) return
 					applyEscapeProps(element, props)
-					props.bind?.({ native: element })
 				}}
 				muted={true}
 				autoplay={true}

package/src/CameraView.windows.ts

@@ -0,0 +1,5 @@
+import type { UniversalComponent } from 'octane/universal'
+import type { CameraViewProps } from './props'
+
+/** TypeScript fallback — no Windows CameraView implementation exists yet. */
+export declare const CameraView: UniversalComponent<CameraViewProps>

package/src/props.ts

@@ -1,3 +1,5 @@
+import type { Octane } from 'octane/jsx-runtime'
+
 export type CameraAccessibilityRole =
 	| 'button'
 	| 'link'
@@ -54,7 +56,7 @@ export interface CameraViewProps {
 	onReady?: () => void
 	onError?: (error: { message?: string }) => void
 	/** Native preview surface for platform-specific controls. */
-	bind?: (handle: CameraViewHandle) => void
+	ref?: Octane.Ref<CameraViewHandle>
 	/** Platform-specific properties applied to the preview surface. */
 	ios?: Record<string, any>
 	android?: Record<string, any>

package/types/props.d.ts

@@ -1,3 +1,4 @@
+import type { Octane } from 'octane/jsx-runtime';
 export type CameraAccessibilityRole = 'button' | 'link' | 'search' | 'image' | 'heading' | 'adjustable' | 'summary' | 'text' | 'none' | 'progressbar' | 'checkbox' | 'switch' | 'radio' | 'spinbutton' | 'tab';
 export interface CameraViewHandle {
     /** The native preview surface (`HTMLVideoElement` on web). */
@@ -39,7 +40,7 @@ export interface CameraViewProps {
         message?: string;
     }) => void;
     /** Native preview surface for platform-specific controls. */
-    bind?: (handle: CameraViewHandle) => void;
+    ref?: Octane.Ref<CameraViewHandle>;
     /** Platform-specific properties applied to the preview surface. */
     ios?: Record<string, any>;
     android?: Record<string, any>;