@octane-xplat/camera 0.7.0

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

@@ -0,0 +1,314 @@
+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 { 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 __event = (__eventArg, readyFired, props) => {
+	if (readyFired.current) return;
+	readyFired.current = true;
+	props.onReady?.();
+};
+var _rm$1 = [
+	"r",
+	"b",
+	"a"
+];
+function __then$0(__props, __s, __extra) {
+	const facing = __extra[0];
+	const props = __extra[1];
+	const readyFired = __extra[2];
+	const video = __extra[3];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m4;
+		const _root = clone(_t$0, void 0, "||");
+		queueRefAttach(__s, _m1 = (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);
+		_b = bag5(__s, _root, _m0, _m1, void 0, __s, _m4);
+		__s.refFields = _rm$1;
+	} else {
+		{
+			const _r = (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);
+		}
+		evt2u(_b.e, __event, readyFired, props);
+	}
+	_b.c = setAttributeIfChanged(true, _b.c, _b.a, "muted");
+	{
+		const _v = facing === "front" ? "scaleX(-1)" : void 0;
+		if (_b.d !== _v) {
+			setStyleProperty(_b.a, "transform", _v, "display: block; width: 100%; height: 100%; object-fit: cover;", _b.d);
+			_b.d = _v;
+		}
+	}
+}
+var _rm$3 = [
+	"s",
+	"n",
+	"m"
+];
+var CameraView = /* @__PURE__ */ __s(function CameraView(props, __s, __extra) {
+	const video = useRef(null, _hs$ + 0);
+	const facing = props.facing ?? "back";
+	const active = props.active !== false;
+	const readyFired = useRef(false, _hs$ + 1);
+	useEffect(() => {
+		const element = video.current;
+		if (!element || !active) return;
+		const mediaDevices = navigator.mediaDevices;
+		if (!mediaDevices?.getUserMedia) {
+			props.onError?.({ message: "camera unsupported" });
+			return;
+		}
+		let stream = null;
+		let disposed = false;
+		readyFired.current = false;
+		mediaDevices.getUserMedia({
+			video: { facingMode: facing === "front" ? "user" : "environment" },
+			audio: false
+		}).then((nextStream) => {
+			if (disposed) {
+				for (const track of nextStream.getTracks()) track.stop();
+				return;
+			}
+			stream = nextStream;
+			element.srcObject = nextStream;
+			element.play()?.catch(() => {});
+		}).catch((error) => {
+			props.onError?.({ message: error?.name === "NotAllowedError" ? "camera permission denied" : String(error?.name ?? error ?? "camera error") });
+		});
+		return () => {
+			disposed = true;
+			element.srcObject = null;
+			if (stream) for (const track of stream.getTracks()) track.stop();
+		};
+	}, [active, facing], _hs$ + 2);
+	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-cameraview",
+			props.className
+		];
+		_m2 = snapshotSpread(layoutChildProps(props, {
+			position: "relative",
+			overflow: "hidden",
+			backgroundColor: "#000",
+			...props.style
+		}));
+		_m3 = props.accessibilityRole;
+		_m4 = props.accessibilityLabel;
+		_m5 = props.accessible === false ? true : void 0;
+		_m6 = props.accessibilityHint;
+		_m7 = props.accessibilityValue;
+		_m8 = props.accessibilityState?.disabled;
+		_m9 = props.accessibilityState?.selected;
+		_m10 = props.accessibilityState?.checked;
+		_m11 = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+		_m12 = _root;
+		_m13 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"id",
+				_m0
+			],
+			[
+				false,
+				"className",
+				_m1
+			],
+			[true, _m2],
+			[
+				false,
+				"role",
+				_m3
+			],
+			[
+				false,
+				"aria-label",
+				_m4
+			],
+			[
+				false,
+				"aria-hidden",
+				_m5
+			],
+			[
+				false,
+				"aria-description",
+				_m6
+			],
+			[
+				false,
+				"aria-valuetext",
+				_m7
+			],
+			[
+				false,
+				"aria-disabled",
+				_m8
+			],
+			[
+				false,
+				"aria-selected",
+				_m9
+			],
+			[
+				false,
+				"aria-checked",
+				_m10
+			],
+			[
+				false,
+				"aria-live",
+				_m11
+			]
+		], "b:83c7570e", 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);
+		__s.refFields = _rm$3;
+	} else {
+		{
+			const _v = props.id;
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = [
+				"vx-stack",
+				"vx-cameraview",
+				props.className
+			];
+			if (_b.b !== _v) _b.b = _v;
+		}
+		_b.c = snapshotSpread(layoutChildProps(props, {
+			position: "relative",
+			overflow: "hidden",
+			backgroundColor: "#000",
+			...props.style
+		}));
+		{
+			const _v = props.accessibilityRole;
+			if (_b.d !== _v) _b.d = _v;
+		}
+		{
+			const _v = props.accessibilityLabel;
+			if (_b.e !== _v) _b.e = _v;
+		}
+		{
+			const _v = props.accessible === false ? true : void 0;
+			if (_b.f !== _v) _b.f = _v;
+		}
+		{
+			const _v = props.accessibilityHint;
+			if (_b.g !== _v) _b.g = _v;
+		}
+		{
+			const _v = props.accessibilityValue;
+			if (_b.h !== _v) _b.h = _v;
+		}
+		{
+			const _v = props.accessibilityState?.disabled;
+			if (_b.i !== _v) _b.i = _v;
+		}
+		{
+			const _v = props.accessibilityState?.selected;
+			if (_b.j !== _v) _b.j = _v;
+		}
+		{
+			const _v = props.accessibilityState?.checked;
+			if (_b.k !== _v) _b.k = _v;
+		}
+		{
+			const _v = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+			if (_b.l !== _v) _b.l = _v;
+		}
+		_b.n = bindSignalHostPropSources(__s, _b.n, _b.m, [
+			[
+				false,
+				"id",
+				_b.a
+			],
+			[
+				false,
+				"className",
+				_b.b
+			],
+			[true, _b.c],
+			[
+				false,
+				"role",
+				_b.d
+			],
+			[
+				false,
+				"aria-label",
+				_b.e
+			],
+			[
+				false,
+				"aria-hidden",
+				_b.f
+			],
+			[
+				false,
+				"aria-description",
+				_b.g
+			],
+			[
+				false,
+				"aria-valuetext",
+				_b.h
+			],
+			[
+				false,
+				"aria-disabled",
+				_b.i
+			],
+			[
+				false,
+				"aria-selected",
+				_b.j
+			],
+			[
+				false,
+				"aria-checked",
+				_b.k
+			],
+			[
+				false,
+				"aria-live",
+				_b.l
+			]
+		], "b:83c7570e", true);
+	}
+	{
+		const __ifCondition = active;
+		ifBlock(__s, 1, _b.m, __ifCondition, __then$0, null, _b.o, __ifCondition ? [
+			facing,
+			props,
+			readyFired,
+			video
+		] : void 0);
+	}
+});
+//#endregion
+export { CameraView };

package/dist/web/index.js

@@ -0,0 +1,2 @@
+import { CameraView } from "./CameraView.web.tsrx.js";
+export { CameraView };

package/dist/web/layout-child.web.js

@@ -0,0 +1,29 @@
+//#region src/layout-child.web.ts
+function layoutChildProps(props, baseStyle = props.style) {
+	const style = { ...baseStyle };
+	if (props.row !== void 0) style.gridRow = `${props.row + 1} / span ${props.rowSpan ?? 1}`;
+	else if (props.rowSpan !== void 0) style.gridRow = `span ${props.rowSpan}`;
+	if (props.col !== void 0) style.gridColumn = `${props.col + 1} / span ${props.colSpan ?? 1}`;
+	else if (props.colSpan !== void 0) style.gridColumn = `span ${props.colSpan}`;
+	if (props.left !== void 0) style.left = props.left;
+	if (props.top !== void 0) style.top = props.top;
+	if (props.flexGrow !== void 0) style.flexGrow = props.flexGrow;
+	if (props.flexShrink !== void 0) style.flexShrink = props.flexShrink;
+	if (props.alignSelf !== void 0) style.alignSelf = props.alignSelf;
+	if (props.order !== void 0) style.order = props.order;
+	return { style };
+}
+function applyEscapeProps(element, props) {
+	if (!element || !props.web) return;
+	for (const [key, value] of Object.entries(props.web)) if (key.includes("-")) {
+		if (value == null || value === false) element.removeAttribute(key);
+		else element.setAttribute(key, value === true ? "" : String(value));
+	} else if (key in element) try {
+		element[key] = value;
+	} catch {
+		element.setAttribute(key, String(value));
+	}
+	else if (value != null) element.setAttribute(key, String(value));
+}
+//#endregion
+export { applyEscapeProps, layoutChildProps };

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

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "002634c0-7c1b-4fae-9ed8-5c3aabdc04da",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@octane-xplat/camera",
+  "version": "0.7.0",
+  "description": "Live camera preview leaf for Octane xplat",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octane-xplat/octane-xplat.git",
+    "directory": "packages/camera"
+  },
+  "files": [
+    "dist",
+    "types",
+    "src",
+    "platforms"
+  ],
+  "type": "module",
+  "nativescript": {
+    "platforms": {
+      "ios": "7.0.0",
+      "android": "7.0.0"
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "web": "./dist/web/index.js",
+      "native": "./dist/native/index.js",
+      "default": "./dist/native/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@nativescript-community/octane": "0.2.1",
+    "@nativescript/core": "9.1.2",
+    "@octanejs/vite-plugin": "0.1.61",
+    "octane": "0.6.3",
+    "typescript": "5.9.3",
+    "vite": "8.3.0"
+  },
+  "peerDependencies": {
+    "@nativescript-community/octane": ">=0.2.1 <1",
+    "@nativescript/core": ">=9.1.0 <10",
+    "octane": ">=0.6.3 <1"
+  },
+  "peerDependenciesMeta": {
+    "@nativescript-community/octane": {
+      "optional": true
+    },
+    "@nativescript/core": {
+      "optional": true
+    },
+    "octane": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "vite build && vite build --mode native && tsc -p tsconfig.types.json && node ../../scripts/check-native-dist.mjs"
+  }
+}

package/platforms/android/AndroidManifest.xml

@@ -0,0 +1,4 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+	<uses-feature android:name="android.hardware.camera.any" android:required="false" />
+	<uses-permission android:name="android.permission.CAMERA" />
+</manifest>

package/platforms/android/include.gradle

@@ -0,0 +1,13 @@
+allprojects {
+	repositories {
+		google()
+		mavenCentral()
+	}
+}
+
+dependencies {
+	def cameraXVersion = '1.5.3'
+	implementation "androidx.camera:camera-camera2:${cameraXVersion}"
+	implementation "androidx.camera:camera-lifecycle:${cameraXVersion}"
+	implementation "androidx.camera:camera-view:${cameraXVersion}"
+}

package/platforms/android/java/com/octanexplat/camera/CameraPreviewView.java

@@ -0,0 +1,71 @@
+package com.octanexplat.camera;
+
+import android.content.Context;
+import android.view.ViewGroup;
+import android.widget.FrameLayout;
+
+import androidx.camera.core.Preview;
+import androidx.camera.view.PreviewView;
+import androidx.lifecycle.Lifecycle;
+import androidx.lifecycle.LifecycleOwner;
+import androidx.lifecycle.LifecycleRegistry;
+
+public final class CameraPreviewView extends FrameLayout implements LifecycleOwner {
+	private final LifecycleRegistry lifecycle;
+	private final PreviewView previewView;
+	private boolean cameraActive = true;
+	private boolean attached;
+
+	public CameraPreviewView(Context context) {
+		super(context);
+		lifecycle = new LifecycleRegistry(this);
+		lifecycle.handleLifecycleEvent(Lifecycle.Event.ON_CREATE);
+		previewView = new PreviewView(context);
+		previewView.setScaleType(PreviewView.ScaleType.FILL_CENTER);
+		addView(
+			previewView,
+			new FrameLayout.LayoutParams(
+				ViewGroup.LayoutParams.MATCH_PARENT,
+				ViewGroup.LayoutParams.MATCH_PARENT
+			)
+		);
+	}
+
+	@Override
+	public Lifecycle getLifecycle() {
+		return lifecycle;
+	}
+
+	public void setCameraActive(boolean active) {
+		cameraActive = active;
+		updateLifecycle();
+	}
+
+	public Preview.SurfaceProvider getSurfaceProvider() {
+		return previewView.getSurfaceProvider();
+	}
+
+	@Override
+	protected void onAttachedToWindow() {
+		super.onAttachedToWindow();
+		attached = true;
+		updateLifecycle();
+	}
+
+	@Override
+	protected void onDetachedFromWindow() {
+		attached = false;
+		updateLifecycle();
+		super.onDetachedFromWindow();
+	}
+
+	private void updateLifecycle() {
+		boolean shouldStart = cameraActive && attached;
+		boolean isStarted = lifecycle.getCurrentState().isAtLeast(Lifecycle.State.STARTED);
+		if (shouldStart && !isStarted) {
+			lifecycle.handleLifecycleEvent(Lifecycle.Event.ON_START);
+		} else if (!shouldStart && isStarted) {
+			lifecycle.handleLifecycleEvent(Lifecycle.Event.ON_STOP);
+		}
+	}
+}

package/platforms/ios/Info.plist

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>NSCameraUsageDescription</key>
+	<string>Camera access is required to show a live preview.</string>
+</dict>
+</plist>

package/src/CameraView.android.tsrx

@@ -0,0 +1,125 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { 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'
+import type { CameraViewProps } from './props'
+import { cameraHardwarePresent, ensureCameraPermission } from './camera-permission.mobile'
+import { applyEscapeProps, layoutChildProps, nativeAccessibilityRole, nativeAccessibilityState } from './layout-child'
+import { cx } from './cx.mobile'
+
+class CameraPreview extends View {
+	createNativeView() {
+		const nativeClass = (globalThis as any).com.octanexplat.camera.CameraPreviewView
+		return new nativeClass(this._context)
+	}
+}
+
+declare module '@nativescript-community/octane/intrinsics' {
+	interface NativeScriptElements {
+		camerapreview: Attributes<typeof CameraPreview>
+	}
+}
+
+registerElement('camerapreview', CameraPreview)
+
+/** Live Android preview backed by CameraX. */
+export function CameraView(props: CameraViewProps) @{
+	const host = useRef<any>(null)
+	const active = props.active !== false
+	const facing = props.facing ?? 'back'
+	const bindHost = useCallback((view: any) => {
+		host.current = view
+	}, [])
+
+	useEffect(() => {
+		const nativeView = host.current?.android
+		if (!nativeView) return
+		let disposed = false
+		let provider: any
+		let preview: any
+		nativeView.setCameraActive(active)
+		if (!active) return () => nativeView.setCameraActive(false)
+
+		const fail = (message: string) => props.onError?.({ message })
+		if (!cameraHardwarePresent()) {
+			fail('camera unsupported')
+			return () => nativeView.setCameraActive(false)
+		}
+
+		ensureCameraPermission().then((granted) => {
+			if (disposed) return
+			if (!granted) {
+				fail('camera permission denied')
+				return
+			}
+
+			try {
+				const context = Application.android.context
+				const cameraX = (globalThis as any).androidx.camera
+				const future = cameraX.lifecycle.ProcessCameraProvider.getInstance(context)
+				const executor = (globalThis as any).androidx.core.content.ContextCompat.getMainExecutor(context)
+				future.addListener(
+					new java.lang.Runnable({
+						run() {
+							if (disposed) return
+							try {
+								provider = future.get()
+								const selectorClass = cameraX.core.CameraSelector
+								const lens = facing === 'front'
+									? selectorClass.LENS_FACING_FRONT
+									: selectorClass.LENS_FACING_BACK
+
+								const selector = new selectorClass.Builder().requireLensFacing(lens).build()
+								preview = new cameraX.core.Preview.Builder().build()
+								preview.setSurfaceProvider(nativeView.getSurfaceProvider())
+								provider.bindToLifecycle(nativeView, selector, preview)
+								props.onReady?.()
+							} catch (error: any) {
+								fail(error?.message ?? 'camera error')
+							}
+						},
+					}),
+					executor,
+				)
+			} catch (error: any) {
+				fail(error?.message ?? 'camera error')
+			}
+		})
+
+		return () => {
+			disposed = true
+			nativeView.setCameraActive(false)
+			if (provider && preview) {
+				try {
+					provider.unbind(preview)
+				} catch {}
+			}
+		}
+	}, [active, facing])
+
+	useEffect(() => {
+		const view = host.current
+		if (!view) return
+		applyEscapeProps(view.android, props)
+		props.bind?.({ native: view.android })
+	}, [props.bind, props.android])
+
+	<gridlayout
+		id={props.id}
+		rows="*"
+		columns="*"
+		className={cx('vx-stack', 'vx-cameraview', props.className)}
+		style={{ backgroundColor: '#000', ...props.style }}
+		{...layoutChildProps(props)}
+		accessible={props.accessible}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityRole={nativeAccessibilityRole(props.accessibilityRole) as any}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityValue={props.accessibilityValue}
+		accessibilityState={nativeAccessibilityState(props.accessibilityState) as any}
+		accessibilityLiveRegion={props.accessibilityLiveRegion as any}
+	>
+		<camerapreview ref={bindHost} row={0} col={0} />
+	</gridlayout>
+}