@octane-xplat/camera 0.15.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octane-xplat/camera",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Live camera preview for Octane xplat — web getUserMedia + native capture (AVCapture / CameraX)",
   "keywords": [
     "android",
@@ -43,16 +43,16 @@
     "access": "public"
   },
   "dependencies": {
-    "@octane-xplat/platform": "0.15.0",
+    "@octane-xplat/platform": "0.16.0",
     "mediabunny": "1.61.3"
   },
   "devDependencies": {
     "@nativescript-community/octane": "0.2.5",
     "@nativescript/core": "9.1.3",
-    "@octane-xplat/macos-renderer": "0.15.0",
+    "@octane-xplat/macos-renderer": "0.16.0",
     "@octanejs/vite-plugin": "0.1.61",
     "octane": "0.11.0",
-    "tsrx-typegen": "0.3.0",
+    "tsrx-typegen": "0.3.1",
     "typescript": "5.9.3",
     "vite": "8.3.0",
     "vitest": "4.1.11"

package/src/CameraView.android.tsrx

@@ -130,21 +130,7 @@ export function CameraView(props: CameraViewProps) @{
 
 	useEffect(() => observePreviewTap(host.current, props.onTap), [props.onTap])
 
-	<gridlayout
-		id={props.id}
-		rows="*"
-		columns="*"
-		className={['vx-layers', '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>
+	<masonview id={props.id} className={['vx-layers', 'vx-cameraview', props.className]} {...layoutChildProps(props, {display: "grid", gridTemplateRows: "1fr", gridTemplateColumns: "1fr", ...({ backgroundColor: '#000', ...props.style })})} 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} style={{gridRow: '1', gridColumn: '1'}} />
+	</masonview>
 }

package/src/CameraView.ios.tsrx

@@ -83,20 +83,5 @@ export function CameraView(props: CameraViewProps) @{
 
 	useEffect(() => observePreviewTap(host.current, props.onTap), [props.onTap])
 
-	<gridlayout
-		ref={bindHost}
-		id={props.id}
-		rows="*"
-		columns="*"
-		className={['vx-layers', '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}
-	/>
+	<masonview ref={bindHost} id={props.id} className={['vx-layers', 'vx-cameraview', props.className]} {...layoutChildProps(props, {display: "grid", gridTemplateRows: "1fr", gridTemplateColumns: "1fr", ...({ backgroundColor: '#000', ...props.style })})} 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}/>
 }

package/src/CameraView.macos.tsrx

@@ -76,20 +76,5 @@ export function CameraView(props: CameraViewProps) @{
 
 	useEffect(() => observePreviewTap(host.current, props.onTap), [props.onTap])
 
-	<gridlayout
-		ref={bindHost}
-		id={props.id}
-		rows="*"
-		columns="*"
-		className={['vx-layers', 'vx-cameraview', props.className]}
-		style={{ backgroundColor: '#000000', ...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}
-	/>
+	<masonview ref={bindHost} id={props.id} className={['vx-layers', 'vx-cameraview', props.className]} {...layoutChildProps(props, {display: "grid", gridTemplateRows: "1fr", gridTemplateColumns: "1fr", ...({ backgroundColor: '#000000', ...props.style })})} 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}/>
 }

package/src/CameraView.windows.tsrx

@@ -106,21 +106,7 @@ export function CameraView(props: CameraViewProps) @{
 
 	useEffect(() => observePreviewTap(host.current, props.onTap), [props.onTap])
 
-	<gridlayout
-		id={props.id}
-		rows="*"
-		columns="*"
-		className={['vx-layers', '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>
+	<masonview id={props.id} className={['vx-layers', 'vx-cameraview', props.className]} {...layoutChildProps(props, {display: "grid", gridTemplateRows: "1fr", gridTemplateColumns: "1fr", ...({ backgroundColor: '#000', ...props.style })})} 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} style={{gridRow: '1', gridColumn: '1'}} />
+	</masonview>
 }

package/src/layout-child.ts

@@ -2,27 +2,48 @@ import type { CameraViewProps } from './props'
 import { isIOS } from '@nativescript/core'
 
 /** NativeScript reads layout fields from a child view during parent layout. */
-export function layoutChildProps(props: CameraViewProps): Record<string, any> {
-	const result: Record<string, any> = {}
-	for (const key of [
-		'row',
-		'col',
-		'rowSpan',
-		'colSpan',
-		'dock',
-		'left',
-		'top',
-		'flexGrow',
-		'flexShrink',
-		'alignSelf',
-		'order',
-	] as const) {
+export function layoutChildProps(
+	props: CameraViewProps,
+	baseStyle = props.style,
+): { style: Record<string, any> } {
+	const style: Record<string, any> = { ...(typeof baseStyle === 'object' ? baseStyle : {}) }
+	if (props.row !== undefined) {
+		style.gridRow = `${props.row + 1} / span ${props.rowSpan ?? 1}`
+	} else if (props.rowSpan !== undefined) {
+		style.gridRow = `span ${props.rowSpan}`
+	}
+	if (props.col !== undefined) {
+		style.gridColumn = `${props.col + 1} / span ${props.colSpan ?? 1}`
+	} else if (props.colSpan !== undefined) {
+		style.gridColumn = `span ${props.colSpan}`
+	}
+	if (props.dock !== undefined) {
+		style.position = style.position ?? 'absolute'
+		if (props.dock === 'left' || props.dock === 'top' || props.dock === 'bottom') {
+			style.left = style.left ?? 0
+		}
+
+		if (props.dock === 'right' || props.dock === 'top' || props.dock === 'bottom') {
+			style.right = style.right ?? 0
+		}
+
+		if (props.dock === 'top' || props.dock === 'left' || props.dock === 'right') {
+			style.top = style.top ?? 0
+		}
+
+		if (props.dock === 'bottom' || props.dock === 'left' || props.dock === 'right') {
+			style.bottom = style.bottom ?? 0
+		}
+	}
+	for (const key of ['left', 'top', 'flexGrow', 'flexShrink', 'alignSelf', 'order'] as const) {
 		if (props[key] !== undefined) {
-			result[key] = props[key]
+			style[key] = props[key]
 		}
 	}
-
-	return result
+	if ((props.left !== undefined || props.top !== undefined) && props.dock === undefined) {
+		style.position = style.position ?? 'absolute'
+	}
+	return { style }
 }
 
 export function applyEscapeProps(view: any, props: { ios?: any; android?: any }): void {

package/src/layout-child.windows.ts

@@ -5,8 +5,11 @@ import type { CameraViewProps } from './props'
  *  branch. Pure helpers are re-declared here to keep divergence at the file
  *  boundary. */
 
-export function layoutChildProps(props: CameraViewProps): Record<string, any> {
-	const result: Record<string, any> = {}
+export function layoutChildProps(
+	props: CameraViewProps,
+	baseStyle = props.style,
+): Record<string, any> {
+	const result: Record<string, any> = { style: baseStyle }
 	for (const key of [
 		'row',
 		'col',