@octane-xplat/video 0.7.3 → 0.10.0

package/README.md

@@ -0,0 +1,55 @@
+# `@octane-xplat/video`
+
+```sh
+pnpm add @octane-xplat/video
+```
+
+Embedded video player for Octane xplat apps: `<video>` on web and
+`@nstudio/nativescript-exoplayer` on native (ExoPlayer on Android,
+`AVPlayerViewController` on iOS), with a macOS entry. The OS engine owns
+the pixels while all chrome is self-drawn, so `controls` looks identical
+on every target.
+
+```tsx
+import { Video } from '@octane-xplat/video'
+
+export function Preview() {
+	return (
+		<Video
+			src="https://example.com/clip.mp4"
+			controls
+			fit="contain"
+			onReady={(event) => console.log(event.duration)}
+			onEnded={() => console.log('Done')}
+		/>
+	)
+}
+```
+
+All times are milliseconds on every platform. `onError` is web-only — the
+plugin players surface no error event on native. `handle.native` is the
+platform surface for anything the shared props don't cover, and the
+`ios`/`android`/`web` escape props apply after the shared props.
+
+```tsx
+// Player.web.tsx — this failure callback and escape bag are browser-specific.
+import { Video } from '@octane-xplat/video'
+
+export function Player() {
+	return (
+		<Video
+			src="https://example.com/clip.mp4"
+			web={{ preload: 'metadata' }}
+			onError={(event) => console.log(event.message)}
+			ref={(handle) => {
+				console.log(handle.duration(), handle.native)
+				handle.seekTo(1000)
+			}}
+		/>
+	)
+}
+```
+
+Per-target limits are recorded in
+[known limits](../../docs/verify/known-limits.md). Exercised by
+[`VideoDemo`](../demos/src/VideoDemo.tsrx).

package/dist/native/Video.tsrx.js

@@ -2,10 +2,10 @@ import { cx } from "./cx.mobile.js";
 import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.js";
 import { layoutChildProps } from "./layout-child.js";
 import { VideoChrome } from "./video-chrome.tsrx.js";
-import { defineUniversalComponent, hookSlots, registerElement, universalComponent, universalIf, universalPlan, universalProps, universalValue, useCallback, useEffect, useRef, useState } from "@nativescript-community/octane";
+import { defineUniversalComponent, hookSlots, registerElement, universalComponent, universalIf, universalPlan, universalProps, universalValue, useCallback, useEffect, useImperativeHandle, useRef, useState } from "@nativescript-community/octane";
 import { Video, VideoFill } from "@nstudio/nativescript-exoplayer";
 //#region src/Video.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(11);
+var _hs$ = /* @__PURE__ */ hookSlots(12);
 var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
 var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
@@ -17,6 +17,7 @@ var _h$7 = /* @__PURE__ */ Symbol(_hs$ + 7);
 var _h$8 = /* @__PURE__ */ Symbol(_hs$ + 8);
 var _h$9 = /* @__PURE__ */ Symbol(_hs$ + 9);
 var _h$10 = /* @__PURE__ */ Symbol(_hs$ + 10);
+var _h$11 = /* @__PURE__ */ Symbol(_hs$ + 11);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "slot",
 	"slot": 0
@@ -61,9 +62,10 @@ var Video$1 = defineUniversalComponent("nativescript", function Video(props) {
 	const [internalMuted, setInternalMuted] = useState(false, _h$5);
 	const muted = props.muted ?? internalMuted;
 	const appliedSrc = useRef(void 0, _h$6);
+	useImperativeHandle(props.ref, () => handle(host.current), [], _h$7);
 	const bindHost = useCallback((v) => {
 		host.current = v;
-	}, [], _h$7);
+	}, [], _h$8);
 	const drive = (v, next) => {
 		if (!v) return;
 		if (next) v.play();
@@ -73,19 +75,18 @@ var Video$1 = defineUniversalComponent("nativescript", function Video(props) {
 		const v = host.current;
 		if (!v) return;
 		applyEscapeProps(v, props);
-		props.bind?.(handle(v));
-	}, [], _h$8);
+	}, [], _h$9);
 	useEffect(() => {
 		const v = host.current;
 		if (!v || props.src === appliedSrc.current) return;
 		appliedSrc.current = props.src;
 		v.src = props.src;
-	}, [props.src], _h$9);
+	}, [props.src], _h$10);
 	useEffect(() => {
 		if (props.playing === void 0) return;
 		setPlaying(props.playing);
 		drive(host.current, props.playing);
-	}, [props.playing], _h$10);
+	}, [props.playing], _h$11);
 	const togglePlay = () => {
 		const next = !playing;
 		setPlaying(next);
@@ -120,7 +121,7 @@ var Video$1 = defineUniversalComponent("nativescript", function Video(props) {
 			[
 				"set",
 				"className",
-				cx("vx-stack", "vx-video", props.className)
+				cx("vx-layers", "vx-video", props.className)
 			],
 			[
 				"set",

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

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "4c91e95c-af7f-4f52-a09c-67e0b06a65a7",
+  "buildId": "fe4e9ac4-85f6-4e22-aafd-cf331d9ee1d3",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/native/video-chrome.tsrx.js

@@ -1,5 +1,5 @@
 import { defineUniversalComponent, hookSlots, universalChildren, universalComponent, universalIf, universalPlan, universalProps, universalValue, useEffect, useState } from "@nativescript-community/octane";
-import { Icon, Image, Pressable, Row, Slider, Text, View } from "@octane-xplat/ui";
+import { HStack, Icon, Image, Pressable, Slider, Text, View } from "@octane-xplat/ui";
 //#region src/video-chrome.tsrx
 var _hs$ = /* @__PURE__ */ hookSlots(2);
 var _h$0 = /* @__PURE__ */ Symbol(_hs$);
@@ -209,7 +209,7 @@ var VideoChrome = defineUniversalComponent("nativescript", function VideoChrome(
 				"justifyContent",
 				"end"
 			]], universalChildren("nativescript", () => {
-				return universalValue(__octaneUniversalPlan7, [universalComponent("nativescript", Row, universalProps([
+				return universalValue(__octaneUniversalPlan7, [universalComponent("nativescript", HStack, universalProps([
 					[
 						"set",
 						"className",
@@ -217,13 +217,13 @@ var VideoChrome = defineUniversalComponent("nativescript", function VideoChrome(
 					],
 					[
 						"set",
-						"alignItems",
+						"vAlign",
 						"center"
 					],
 					[
 						"set",
 						"gap",
-						8
+						2
 					]
 				], universalChildren("nativescript", () => {
 					return universalValue(__octaneUniversalPlan6, [

package/dist/web/Video.web.tsrx.js

@@ -1,7 +1,7 @@
 import { applyEscapeProps } from "./escape-props.web.js";
 import { layoutChildProps } from "./layout-child.web.js";
 import { VideoChrome } from "./video-chrome.web.tsrx.js";
-import { __s, bagOf, child, clone, componentSlotVoid, delegateEvents, evt1, evt1e, evt1u, evt2e, evt2u, hookSlots, ifBlock, markDangerouslySetInnerHTMLChildren, queueRefAttach, queueRefDetach, setAttribute, setBooleanAttribute, setEventHandler, setStyleProperty, sibling, snapshotSpread, template, useEffect, useRef, useState } from "octane";
+import { __s, bagOf, child, clone, componentSlotVoid, delegateEvents, evt1, evt1e, evt1u, evt2e, evt2u, hookSlots, ifBlock, markDangerouslySetInnerHTMLChildren, queueRefAttach, queueRefDetach, setAttribute, setBooleanAttribute, setEventHandler, setStyleProperty, sibling, snapshotSpread, template, useEffect, useImperativeHandle, useRef, useState } from "octane";
 import { bindSignalAttribute, bindSignalHostPropSources, compilerMemoRegion, enableSignalBindings, hookMemoCreate, hookMemoPublishInvariant, replaceRef, setPlainAttribute, setURLAttribute } from "octane/internal/client";
 //#region src/Video.web.tsrx
 enableSignalBindings(1, true);
@@ -15,7 +15,7 @@ delegateEvents([
 	"timeupdate"
 ]);
 var _t$0 = /* @__PURE__ */ template("<div><video class=\"vx-video-surface\" playsinline=\"\" preload=\"metadata\"></video><!></div>");
-var _hs$ = /* @__PURE__ */ hookSlots(8);
+var _hs$ = /* @__PURE__ */ hookSlots(9);
 var __event = (e, setDuration, props) => {
 	const ms = e.currentTarget.duration * 1e3;
 	setDuration(Number.isFinite(ms) ? ms : 0);
@@ -62,7 +62,7 @@ function __then$0(__props, __s, __extra) {
 				setPosition(ms);
 			}
 		}
-	}, __block.endMarker, void 0, 2, void 0, void 0, "c:6f1a737f");
+	}, __block.endMarker, void 0, 2, void 0, void 0, "c:c3e56410");
 }
 var _rm$3 = [
 	"s",
@@ -121,6 +121,7 @@ var Video = /* @__PURE__ */ __s(function Video(props, __s, __extra) {
 		duration: () => Number.isFinite(v.duration) ? v.duration * 1e3 : 0,
 		native: v
 	}));
+	useImperativeHandle(props.ref, () => handle(el.current), [], _hs$ + 8);
 	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
 	let _b = __s.slots[0];
 	if (_b === void 0) {
@@ -128,7 +129,7 @@ var Video = /* @__PURE__ */ __s(function Video(props, __s, __extra) {
 		const _root = clone(_t$0);
 		_m0 = props.id;
 		_m1 = [
-			"vx-stack",
+			"vx-layers",
 			"vx-video",
 			props.className
 		];
@@ -200,14 +201,13 @@ var Video = /* @__PURE__ */ __s(function Video(props, __s, __extra) {
 				"aria-live",
 				_m11
 			]
-		], "b:8e28227a", true);
+		], "b:f375fbc0", true);
 		const _el0 = child(_root);
 		queueRefAttach(__s, _m15 = (v) => {
 			el.current = v;
 			if (!v) return;
 			v.muted = muted;
 			applyEscapeProps(v, props);
-			props.bind?.(handle(v));
 		}, _m14 = _el0);
 		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.p, _b.o));
 		evt1(_el0, "$$play", setPlaying, true);
@@ -254,7 +254,7 @@ var Video = /* @__PURE__ */ __s(function Video(props, __s, __extra) {
 		}
 		{
 			const _v = [
-				"vx-stack",
+				"vx-layers",
 				"vx-video",
 				props.className
 			];
@@ -354,14 +354,13 @@ var Video = /* @__PURE__ */ __s(function Video(props, __s, __extra) {
 				"aria-live",
 				_b.l
 			]
-		], "b:8e28227a", true);
+		], "b:f375fbc0", true);
 		{
 			const _r = (v) => {
 				el.current = v;
 				if (!v) return;
 				v.muted = muted;
 				applyEscapeProps(v, props);
-				props.bind?.(handle(v));
 			};
 			if (_r !== _b.p) _b.p = replaceRef(__s, _b.p, _r, _b.o);
 		}
@@ -369,10 +368,10 @@ var Video = /* @__PURE__ */ __s(function Video(props, __s, __extra) {
 		evt2u(_b.w, __event$, props, setPlaying);
 		evt1u(_b.x, __event$2, props);
 	}
-	_b.q = bindSignalAttribute(__s, _b.q, _b.o, "src", props.src, "b:8cc4fe21", setURLAttribute);
-	_b.r = bindSignalAttribute(__s, _b.r, _b.o, "poster", props.poster, "b:96cc8ad6", setPlainAttribute);
-	_b.s = bindSignalAttribute(__s, _b.s, _b.o, "muted", muted, "b:48ef6972", setAttribute);
-	_b.t = bindSignalAttribute(__s, _b.t, _b.o, "loop", props.loop, "b:0e1cb1f0", setBooleanAttribute);
+	_b.q = bindSignalAttribute(__s, _b.q, _b.o, "src", props.src, "b:7dbcd207", setURLAttribute);
+	_b.r = bindSignalAttribute(__s, _b.r, _b.o, "poster", props.poster, "b:1b786c6f", setPlainAttribute);
+	_b.s = bindSignalAttribute(__s, _b.s, _b.o, "muted", muted, "b:39d924bf", setAttribute);
+	_b.t = bindSignalAttribute(__s, _b.t, _b.o, "loop", props.loop, "b:1aecad9d", setBooleanAttribute);
 	{
 		const _v = props.fit ?? "contain";
 		if (_b.u !== _v) {

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

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "01ead6d0-1eb1-48b2-b52b-999a755cfbeb",
+  "buildId": "ec220524-f9b3-43c3-864e-0ddce8dc4220",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/web/video-chrome.web.tsrx.js

@@ -1,6 +1,6 @@
 import { bag4, child, clone, componentSlot, drainFrag, hookSlots, ifBlock, markChildrenBlock, markWarm, registerWarmPlan, template, useEffect, useState, warmChild } from "octane";
 import { textHoleUpdate } from "octane/internal/client";
-import { Icon, Image, Pressable, Row, Slider, Text, View } from "@octane-xplat/ui";
+import { HStack, Icon, Image, Pressable, Slider, Text, View } from "@octane-xplat/ui";
 //#region src/video-chrome.web.tsrx
 var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
 var _hs$ = /* @__PURE__ */ hookSlots(12);
@@ -138,10 +138,10 @@ function __then$4(__props, __s, __extra) {
 				"children": markChildrenBlock(__children$27, __childrenBody$5)
 			}, __block.endMarker, void 0, void 0, void 0, void 0, "c:9bf9319c");
 		}
-		componentSlot(__s, 0, __block.parentNode, Row, {
+		componentSlot(__s, 0, __block.parentNode, HStack, {
 			"className": "vx-video-bar",
-			"alignItems": "center",
-			"gap": 8,
+			"vAlign": "center",
+			"gap": 2,
 			"children": markChildrenBlock(__children$15, __childrenBody$6)
 		}, __block.endMarker, void 0, void 0, void 0, void 0, "c:455e7102");
 	}

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@octane-xplat/video",
-  "version": "0.7.3",
+  "version": "0.10.0",
   "description": "Embedded video player for Octane xplat — web <video> + @nstudio/nativescript-exoplayer (ExoPlayer / AVPlayerViewController) with self-drawn chrome",
   "keywords": [
-    "octane",
-    "xplat",
+    "android",
+    "avplayer",
     "cross-platform",
-    "video",
-    "video-player",
     "exoplayer",
-    "avplayer",
+    "ios",
     "media",
     "nativescript",
-    "ios",
-    "android",
-    "web"
+    "octane",
+    "video",
+    "video-player",
+    "web",
+    "xplat"
   ],
-  "license": "MIT",
   "homepage": "https://github.com/octane-xplat/octane-xplat/tree/main/packages/video",
+  "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/octane-xplat/octane-xplat.git",
+    "url": "https://github.com/octane-xplat/octane-xplat",
     "directory": "packages/video"
   },
   "files": [
@@ -48,11 +48,12 @@
     "@nstudio/nativescript-exoplayer": "6.2.0"
   },
   "devDependencies": {
-    "@nativescript-community/octane": "0.2.1",
+    "@nativescript-community/octane": "0.2.4",
     "@nativescript/core": "9.1.2",
-    "@octane-xplat/ui": "0.7.3",
+    "@octane-xplat/ui": "0.10.0",
     "@octanejs/vite-plugin": "0.1.61",
     "octane": "0.6.3",
+    "tsrx-typegen": "0.2.2",
     "typescript": "5.9.3",
     "vite": "8.3.0"
   },
@@ -71,6 +72,9 @@
     }
   },
   "scripts": {
-    "build": "vite build && vite build --mode native && tsc -p tsconfig.types.json && node ../../scripts/check-native-dist.mjs"
+    "build": "vite build && vite build --mode native && pnpm typegen && node ../../scripts/check-native-dist.mjs",
+    "typegen": "tsc -p tsconfig.types.json",
+    "test:packed": "node tests/packed-consumer.mjs",
+    "pack:check": "tsrx-typegen --pack-check"
   }
 }

package/src/Video.macos.tsrx

@@ -1,4 +1,4 @@
-/** @jsxImportSource @xplat/macos/renderer */
+/** @jsxImportSource @octane-xplat/macos-renderer */
 import type { VideoProps } from './props'
 
 /** Explicit placeholder until the AppKit host has a video surface. */

package/src/Video.tsrx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @nativescript-community/octane */
-import { useCallback, useEffect, useRef, useState } from 'octane';
+import { useImperativeHandle, useCallback, useEffect, useRef, useState } from 'octane';
 import { registerElement } from '@nativescript-community/octane';
 import type { Attributes } from '@nativescript-community/octane/intrinsics';
 import { Video as NSVideo, VideoFill } from '@nstudio/nativescript-exoplayer';
@@ -47,6 +47,8 @@ export function Video(props: VideoProps) @{
 
 	// Stable identity — an inline closure re-fires ref(null)/ref(v) per
 	// render, which would bounce host.current around the effects below.
+	useImperativeHandle(props.ref, () => handle(host.current!), []);
+
 	const bindHost = useCallback((v: any) => {
 		host.current = v;
 	}, []);
@@ -64,7 +66,6 @@ export function Video(props: VideoProps) @{
 		const v = host.current;
 		if (!v) return;
 		applyEscapeProps(v, props);
-		props.bind?.(handle(v));
 	}, []);
 
 	useEffect(() => {
@@ -101,7 +102,7 @@ export function Video(props: VideoProps) @{
 		id={props.id}
 		rows="*"
 		columns="*"
-		className={cx('vx-stack', 'vx-video', props.className)}
+		className={cx('vx-layers', 'vx-video', props.className)}
 		style={props.style}
 		{...layoutChildProps(props)}
 		accessible={props.accessible}

package/src/Video.web.tsrx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'octane';
+import { useImperativeHandle, useEffect, useRef, useState } from 'octane';
 import type { VideoHandle, VideoProps } from './props';
 import { applyEscapeProps } from './escape-props';
 import { layoutChildProps } from './layout-child.web';
@@ -71,9 +71,11 @@ export function Video(props: VideoProps) @{
 		native: v,
 	});
 
+	useImperativeHandle(props.ref, () => handle(el.current), []);
+
 	<div
 		id={props.id}
-		className={['vx-stack', 'vx-video', props.className]}
+		className={['vx-layers', 'vx-video', props.className]}
 		{...layoutChildProps(props, props.style)}
 		role={props.accessibilityRole}
 		aria-label={props.accessibilityLabel}
@@ -91,7 +93,6 @@ export function Video(props: VideoProps) @{
 				if (!v) return;
 				v.muted = muted;
 				applyEscapeProps(v, props);
-				props.bind?.(handle(v));
 			}}
 			className="vx-video-surface"
 			src={props.src}

package/src/layout-child.web.ts

@@ -68,7 +68,7 @@ export function layoutChildProps(
 		style.order = props.order
 	}
 
-	// Flex-container props (View/Row/Pressable hosts) — RN vocabulary on the
+	// Flex-container props (View/HStack/Pressable hosts) — RN vocabulary on the
 	// element style. Numbers become px via octane's style normalization.
 	if (props.justifyContent !== undefined) {
 		style.justifyContent = FLEX_JUSTIFY[props.justifyContent] ?? props.justifyContent

package/src/props.ts

@@ -1,3 +1,5 @@
+import type { Octane } from 'octane/jsx-runtime'
+
 export interface LayoutChildProps {
 	row?: number
 	col?: number
@@ -12,7 +14,7 @@ export interface LayoutChildProps {
 	order?: number
 }
 
-/** Flex-container props shared by View/Row/Pressable — RN vocabulary, applied
+/** Flex-container props shared by View/HStack/Pressable — RN vocabulary, applied
  *  to the host flexboxlayout natively and the element's style on web.
  *  `gap` is a dip number (px on web); NS supports it on FlexboxLayout only
  *  (GridLayout has no gap). */
@@ -93,7 +95,7 @@ export interface VideoProps extends LayoutChildProps, AccessibilityProps {
 	/** Frame shown until playback starts. */
 	poster?: string
 	/** Controlled playback — pair with `onPlayingChange`. Leave unset for
-	 *  uncontrolled playback (the transport and `bind` handle still work). */
+	 *  uncontrolled playback (the transport and `ref` handle still work). */
 	playing?: boolean
 	/** Uncontrolled start-playing shorthand. Browsers block unmuted
 	 *  autoplay — pair with `muted` when `autoPlay` matters on web. */
@@ -117,7 +119,7 @@ export interface VideoProps extends LayoutChildProps, AccessibilityProps {
 	onError?: (e: VideoEvent) => void
 	/** Imperative handle — play/pause/seek/time plus `native` for anything
 	 *  the shared props don't cover. */
-	bind?: (h: VideoHandle) => void
+	ref?: Octane.Ref<VideoHandle>
 	/** Platform escape hatches, applied after the shared props. */
 	ios?: Record<string, any>
 	android?: Record<string, any>

package/src/video-chrome.tsrx

@@ -1,12 +1,12 @@
 /** @jsxImportSource @nativescript-community/octane */
 import { useEffect, useState } from 'octane';
-import { Icon, Image, Pressable, Row, Slider, Text, View } from '@octane-xplat/ui';
+import { Icon, Image, Pressable, HStack, Slider, Text, View } from '@octane-xplat/ui';
 
 /** Self-drawn video transport — the chrome half of the surface-hosted
  *  `Video` component. Identical structure to the native twin (only the
  *  pragma differs): every layer composes xplat primitives,
  *  so the transport draws the same pixels on every target — the leaf only
- *  supplies the surface. The layers stack inside the leaf's `vx-stack`
+ *  supplies the surface. The layers stack inside the leaf's `vx-layers`
  *  grid (later = on top), so this fragment's children are each a
  *  full-frame layer. Times are milliseconds (matches both plugin players;
  *  the web leaf converts from `HTMLMediaElement`'s seconds). */
@@ -78,7 +78,7 @@ export function VideoChrome(props: VideoChromeProps) @{
 				// them pointer-events:none so taps reach the surface/tap layer; NS
 				// layout views never capture touches without handlers.
 				<View className="vx-video-barwrap" justifyContent="end">
-					<Row className="vx-video-bar" alignItems="center" gap={8}>
+					<HStack className="vx-video-bar" vAlign="center" gap={2}>
 						<Pressable
 							className="vx-video-btn"
 							accessibilityRole="button"
@@ -109,7 +109,7 @@ export function VideoChrome(props: VideoChromeProps) @{
 								color="#fff"
 							/>
 						</Pressable>
-					</Row>
+					</HStack>
 				</View>
 			</>
 		}

package/src/video-chrome.web.tsrx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'octane';
-import { Icon, Image, Pressable, Row, Slider, Text, View } from '@octane-xplat/ui';
+import { Icon, Image, Pressable, HStack, Slider, Text, View } from '@octane-xplat/ui';
 
 /** Self-drawn video transport — the chrome half of the surface-hosted
  *  `Video` component. Identical structure to the native twin (only the
  *  pragma differs): every layer composes xplat primitives,
  *  so the transport draws the same pixels on every target — the leaf only
- *  supplies the surface. The layers stack inside the leaf's `vx-stack`
+ *  supplies the surface. The layers stack inside the leaf's `vx-layers`
  *  grid (later = on top), so this fragment's children are each a
  *  full-frame layer. Times are milliseconds (matches both plugin players;
  *  the web leaf converts from `HTMLMediaElement`'s seconds). */
@@ -77,7 +77,7 @@ export function VideoChrome(props: VideoChromeProps) @{
 				// them pointer-events:none so taps reach the surface/tap layer; NS
 				// layout views never capture touches without handlers.
 				<View className="vx-video-barwrap" justifyContent="end">
-					<Row className="vx-video-bar" alignItems="center" gap={8}>
+					<HStack className="vx-video-bar" vAlign="center" gap={2}>
 						<Pressable
 							className="vx-video-btn"
 							accessibilityRole="button"
@@ -108,7 +108,7 @@ export function VideoChrome(props: VideoChromeProps) @{
 								color="#fff"
 							/>
 						</Pressable>
-					</Row>
+					</HStack>
 				</View>
 			</>
 		}

package/types/index.d.ts

@@ -1,5 +1,5 @@
 import type { UniversalComponent } from 'octane/universal'
-import type { VideoProps } from './props'
+import type { VideoProps } from './props.js'
 
 export declare const Video: UniversalComponent<VideoProps>
-export type { VideoEvent, VideoFit, VideoHandle, VideoProps } from './props'
+export type { VideoEvent, VideoFit, VideoHandle, VideoProps } from './props.js'

package/types/index.macos.d.ts

@@ -1,4 +1,4 @@
-import type { VideoProps } from './props'
+import type { VideoProps } from './props.js'
 
-export type { VideoEvent, VideoFit, VideoHandle, VideoProps } from './props'
+export type { VideoEvent, VideoFit, VideoHandle, VideoProps } from './props.js'
 export declare function Video(props: VideoProps): unknown

package/types/props.d.ts

@@ -1,3 +1,4 @@
+import type { Octane } from 'octane/jsx-runtime';
 export interface LayoutChildProps {
     row?: number;
     col?: number;
@@ -11,7 +12,7 @@ export interface LayoutChildProps {
     alignSelf?: string;
     order?: number;
 }
-/** Flex-container props shared by View/Row/Pressable — RN vocabulary, applied
+/** Flex-container props shared by View/HStack/Pressable — RN vocabulary, applied
  *  to the host flexboxlayout natively and the element's style on web.
  *  `gap` is a dip number (px on web); NS supports it on FlexboxLayout only
  *  (GridLayout has no gap). */
@@ -71,7 +72,7 @@ export interface VideoProps extends LayoutChildProps, AccessibilityProps {
     /** Frame shown until playback starts. */
     poster?: string;
     /** Controlled playback — pair with `onPlayingChange`. Leave unset for
-     *  uncontrolled playback (the transport and `bind` handle still work). */
+     *  uncontrolled playback (the transport and `ref` handle still work). */
     playing?: boolean;
     /** Uncontrolled start-playing shorthand. Browsers block unmuted
      *  autoplay — pair with `muted` when `autoPlay` matters on web. */
@@ -95,7 +96,7 @@ export interface VideoProps extends LayoutChildProps, AccessibilityProps {
     onError?: (e: VideoEvent) => void;
     /** Imperative handle — play/pause/seek/time plus `native` for anything
      *  the shared props don't cover. */
-    bind?: (h: VideoHandle) => void;
+    ref?: Octane.Ref<VideoHandle>;
     /** Platform escape hatches, applied after the shared props. */
     ios?: Record<string, any>;
     android?: Record<string, any>;