@octane-xplat/video 0.11.1 → 0.13.0

package/dist/native/cx.mobile.js

@@ -1,9 +1,10 @@
 //#region src/cx.mobile.ts
-/** NS `className` splits on ' ' only, and the universal driver applies the
-*  prop via `String(value)` — an array would arrive comma-joined and match
-*  no class at all. Native leaves normalize through cx() before handing
-*  className to an intrinsic. (The DOM renderer already flattens arrays,
-*  so web leaves don't need this.) */
+/** Native renderers now normalize the declarative `className` prop, but
+*  imperative `view.className` writes still need a pre-joined string — NS
+*  splits on ' ' only. Native leaves keep normalizing through cx() before
+*  handing className to an intrinsic so both paths accept the same values.
+*  (The DOM renderer already flattens arrays, so web leaves don't need
+*  this.) */
 function cx(...parts) {
 	return parts.flat(Infinity).filter(Boolean).join(" ");
 }

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

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "6844478b-3ee8-4750-ac9f-17474f57159d",
+  "buildId": "6a3d7f91-e8c5-4c1e-8908-858265fab9d7",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

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

@@ -1,8 +1,8 @@
 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, useImperativeHandle, useRef, useState } from "octane";
-import { bindSignalAttribute, bindSignalHostPropSources, compilerMemoRegion, enableSignalBindings, hookMemoCreate, hookMemoPublishInvariant, replaceRef, setPlainAttribute, setURLAttribute } from "octane/internal/client";
+import { __s, bagOf, child, clone, componentSlotVoid, delegateEvents, evt1, evt1e, evt1u, evt2e, evt2u, hookSlots, ifBlock, markDangerouslySetInnerHTMLChildren, queueRefAttach, queueRefDetach, setEventHandler, setStyleProperty, sibling, snapshotSpread, template, useEffect, useImperativeHandle, useRef, useState } from "octane";
+import { bindSignalHostPropSources, compilerMemoRegion, enableSignalBindings, hookMemoCreate, hookMemoPublishInvariant, replaceRef, setAttributeIfChanged, setBooleanAttributeIfChanged, setPlainAttributeIfChanged, setURLAttributeIfChanged } from "octane/internal/client";
 //#region src/Video.web.tsrx
 enableSignalBindings(1, true);
 delegateEvents([
@@ -62,7 +62,7 @@ function __then$0(__props, __s, __extra) {
 				setPosition(ms);
 			}
 		}
-	}, __block.endMarker, void 0, 2, void 0, void 0, "c:c3e56410");
+	}, "c:c3e56410", __block.endMarker, 2);
 }
 var _rm$3 = [
 	"s",
@@ -125,7 +125,7 @@ var Video = /* @__PURE__ */ __s(function Video(props, __s, __extra) {
 	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
 	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, _m15, _m21, _m22, _m23, _m24;
+		let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m13, _m15, _m21, _m22, _m23, _m24;
 		const _root = clone(_t$0);
 		_m0 = props.id;
 		_m1 = [
@@ -143,7 +143,6 @@ var Video = /* @__PURE__ */ __s(function Video(props, __s, __extra) {
 		_m9 = props.accessibilityState?.selected;
 		_m10 = props.accessibilityState?.checked;
 		_m11 = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
-		_m12 = _root;
 		_m13 = bindSignalHostPropSources(__s, void 0, _root, [
 			[
 				false,
@@ -208,15 +207,15 @@ var Video = /* @__PURE__ */ __s(function Video(props, __s, __extra) {
 			if (!v) return;
 			v.muted = muted;
 			applyEscapeProps(v, props);
-		}, _m14 = _el0);
+		}, _el0);
 		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.p, _b.o));
-		evt1(_el0, "$$play", setPlaying, true);
-		evt1(_el0, "$$pause", setPlaying, false);
-		evt1(_el0, "$$playing", setStarted, true);
-		_m21 = evt2e(_el0, "$$loadedmetadata", __event, setDuration, props);
-		setEventHandler(_el0, "$$timeupdate", (e) => setPosition(e.currentTarget.currentTime * 1e3));
-		_m22 = evt2e(_el0, "$$ended", __event$, props, setPlaying);
-		_m23 = evt1e(_el0, "$$error", __event$2, props);
+		evt1(_el0, "$oplay", setPlaying, true);
+		evt1(_el0, "$opause", setPlaying, false);
+		evt1(_el0, "$oplaying", setStarted, true);
+		_m21 = evt2e(_el0, "$oloadedmetadata", __event, setDuration, props);
+		setEventHandler(_el0, "$otimeupdate", (e) => setPosition(e.currentTarget.currentTime * 1e3));
+		_m22 = evt2e(_el0, "$oended", __event$, props, setPlaying);
+		_m23 = evt1e(_el0, "$oerror", __event$2, props);
 		markDangerouslySetInnerHTMLChildren(_root);
 		_m24 = sibling(_el0, 1);
 		_b = bagOf(__s, _root, {
@@ -232,9 +231,9 @@ var Video = /* @__PURE__ */ __s(function Video(props, __s, __extra) {
 			j: _m9,
 			k: _m10,
 			l: _m11,
-			m: _m12,
+			m: _root,
 			n: _m13,
-			o: _m14,
+			o: _el0,
 			p: _m15,
 			q: void 0,
 			r: void 0,
@@ -368,10 +367,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: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);
+	_b.q = setURLAttributeIfChanged(props.src, _b.q, _b.o, "src");
+	_b.r = setPlainAttributeIfChanged(props.poster, _b.r, _b.o, "poster");
+	_b.s = setAttributeIfChanged(muted, _b.s, _b.o, "muted");
+	_b.t = setBooleanAttributeIfChanged(props.loop, _b.t, _b.o, "loop");
 	{
 		const _v = props.fit ?? "contain";
 		if (_b.u !== _v) {
@@ -392,7 +391,7 @@ var Video = /* @__PURE__ */ __s(function Video(props, __s, __extra) {
 			setPosition,
 			started,
 			togglePlay
-		] : void 0);
+		] : void 0, 1);
 	}
 });
 //#endregion

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

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "1c0c4177-31cf-4498-bb47-b98f8c976f39",
+  "buildId": "79cbfb5f-b30d-42a6-ad71-c6f6fa9dc3b6",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

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

@@ -1,5 +1,5 @@
 import { bag4, child, clone, componentSlot, drainFrag, hookSlots, ifBlock, markChildrenBlock, markWarm, registerWarmPlan, template, useEffect, useState, warmChild } from "octane";
-import { textHoleUpdate } from "octane/internal/client";
+import { ownSlotAnchor, textHoleUpdate } from "octane/internal/client";
 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);
@@ -12,7 +12,7 @@ function __then$0(__props, __s, __extra) {
 		"src": props.poster,
 		"ios": { stretch: "aspectFill" },
 		"android": { stretch: "aspectFill" }
-	}, __block.endMarker, void 0, 2, void 0, void 0, "c:afd81fd1");
+	}, "c:afd81fd1", __block.endMarker, 2);
 }
 var __childrenBody = {};
 var __childrenBody$ = {};
@@ -27,12 +27,12 @@ function __then$5(__props, __s, __extra) {
 				"name": "xplat-play",
 				"size": 28,
 				"color": "#fff"
-			}, __block.endMarker, void 0, 2, void 0, void 0, "c:8182c208");
+			}, "c:8182c208", __block.endMarker, 2);
 		}
 		componentSlot(__s, 0, __block.parentNode, View, {
 			"className": "vx-video-centerbtn",
 			"children": markChildrenBlock(__children$9, __childrenBody)
-		}, __block.endMarker, void 0, void 0, void 0, void 0, "c:cb7b2c3f");
+		}, "c:cb7b2c3f", __block.endMarker);
 	}
 	componentSlot(__s, 0, __block.parentNode, Pressable, {
 		"className": "vx-video-center",
@@ -42,7 +42,7 @@ function __then$5(__props, __s, __extra) {
 		"accessibilityLabel": "Play",
 		"onPress": props.onTogglePlay,
 		"children": markChildrenBlock(__children$7, __childrenBody$)
-	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:4f97cdfe");
+	}, "c:4f97cdfe", __block.endMarker);
 }
 var __childrenBody$2 = {};
 var __childrenBody$3 = {};
@@ -63,7 +63,7 @@ function __then$4(__props, __s, __extra) {
 					"name": props.playing ? "xplat-pause" : "xplat-play",
 					"size": 20,
 					"color": "#fff"
-				}, __block.endMarker, void 0, 2, void 0, void 0, "c:a4e0e905");
+				}, "c:a4e0e905", __block.endMarker, 2);
 			}
 			function __children$20(__props, __s, __extra) {
 				const __block = __s.block;
@@ -74,7 +74,7 @@ function __then$4(__props, __s, __extra) {
 					_m0 = __block.parentNode;
 					_m1 = child(_root);
 					drainFrag(_root, __block.parentNode, __block.endMarker);
-					_b = bag4(__s, null, _m0, _m1, null, void 0);
+					_b = bag4(__s, null, _m0, _m1, null, __s);
 				}
 				{
 					const _v = stamp(props.position);
@@ -91,7 +91,7 @@ function __then$4(__props, __s, __extra) {
 					_m0 = __block.parentNode;
 					_m1 = child(_root);
 					drainFrag(_root, __block.parentNode, __block.endMarker);
-					_b = bag4(__s, null, _m0, _m1, null, void 0);
+					_b = bag4(__s, null, _m0, _m1, null, __s);
 				}
 				{
 					const _v = stamp(props.duration);
@@ -105,7 +105,7 @@ function __then$4(__props, __s, __extra) {
 					"name": props.muted ? "xplat-volume-off" : "xplat-volume",
 					"size": 20,
 					"color": "#fff"
-				}, __block.endMarker, void 0, 2, void 0, void 0, "c:78a524c0");
+				}, "c:78a524c0", __block.endMarker, 2);
 			}
 			componentSlot(__s, 0, __block.parentNode, Pressable, {
 				"className": "vx-video-btn",
@@ -113,11 +113,11 @@ function __then$4(__props, __s, __extra) {
 				"accessibilityLabel": props.playing ? "Pause" : "Play",
 				"onPress": props.onTogglePlay,
 				"children": markChildrenBlock(__children$17, __childrenBody$2)
-			}, __block.endMarker, void 0, void 0, void 0, void 0, "c:cf122bea");
+			}, "c:cf122bea", __block.endMarker);
 			componentSlot(__s, 1, __block.parentNode, Text, {
 				"className": "vx-video-time",
 				"children": markChildrenBlock(__children$20, __childrenBody$3)
-			}, __block.endMarker, void 0, void 0, void 0, void 0, "c:63f67e7a");
+			}, "c:63f67e7a", __block.endMarker);
 			componentSlot(__s, 2, __block.parentNode, Slider, {
 				"className": "vx-video-slider",
 				"style": { flexGrow: 1 },
@@ -125,32 +125,32 @@ function __then$4(__props, __s, __extra) {
 				"minValue": 0,
 				"maxValue": props.duration > 0 ? props.duration : 1,
 				"onValueChange": props.onSeek
-			}, __block.endMarker, void 0, 2, void 0, void 0, "c:2b300510");
+			}, "c:2b300510", __block.endMarker, 2);
 			componentSlot(__s, 3, __block.parentNode, Text, {
 				"className": "vx-video-time",
 				"children": markChildrenBlock(__children$24, __childrenBody$4)
-			}, __block.endMarker, void 0, void 0, void 0, void 0, "c:37a813f4");
+			}, "c:37a813f4", __block.endMarker);
 			componentSlot(__s, 4, __block.parentNode, Pressable, {
 				"className": "vx-video-btn",
 				"accessibilityRole": "button",
 				"accessibilityLabel": props.muted ? "Unmute" : "Mute",
 				"onPress": props.onToggleMute,
 				"children": markChildrenBlock(__children$27, __childrenBody$5)
-			}, __block.endMarker, void 0, void 0, void 0, void 0, "c:9bf9319c");
+			}, "c:9bf9319c", __block.endMarker);
 		}
 		componentSlot(__s, 0, __block.parentNode, HStack, {
 			"className": "vx-video-bar",
 			"vAlign": "center",
 			"gap": 2,
 			"children": markChildrenBlock(__children$15, __childrenBody$6)
-		}, __block.endMarker, void 0, void 0, void 0, void 0, "c:455e7102");
+		}, "c:455e7102", __block.endMarker);
 	}
-	ifBlock(__s, 0, __block.parentNode, !props.playing, __then$5, null, __block.endMarker, __extra);
+	ifBlock(__s, 0, __block.parentNode, !props.playing, __then$5, null, ownSlotAnchor(__s, 0, __block), __extra, 1);
 	componentSlot(__s, 1, __block.parentNode, View, {
 		"className": "vx-video-barwrap",
 		"justifyContent": "end",
 		"children": markChildrenBlock(__children$13, __childrenBody$7)
-	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:4aa1741f");
+	}, "c:4aa1741f", __block.endMarker);
 }
 function stamp(ms) {
 	const total = Math.max(0, Math.floor(ms / 1e3));
@@ -176,14 +176,14 @@ var VideoChrome = /* @__PURE__ */ markWarm(function VideoChrome(props, __s, __ex
 	}, void 0);
 	{
 		const __ifCondition = props.poster && !props.started;
-		ifBlock(__s, 0, __block.parentNode, __ifCondition, __then$0, null, __block.endMarker, __ifCondition ? [props] : void 0);
+		ifBlock(__s, 0, __block.parentNode, __ifCondition, __then$0, null, ownSlotAnchor(__s, 0, __block), __ifCondition ? [props] : void 0, 1);
 	}
 	componentSlot(__s, 1, __block.parentNode, Pressable, {
 		"className": "vx-video-tap",
 		"accessibilityRole": "button",
 		"accessibilityLabel": visible ? "Hide video controls" : "Show video controls",
 		"onPress": () => setVisible(props.playing ? !visible : true)
-	}, __block.endMarker, void 0, 2, void 0, void 0, "c:45f0b642");
+	}, "c:45f0b642", __block.endMarker, 2);
 	{
 		const __ifCondition$ = visible;
 		ifBlock(__s, 2, __block.parentNode, __ifCondition$, __then$4, null, __block.endMarker, __ifCondition$ ? [props] : void 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octane-xplat/video",
-  "version": "0.11.1",
+  "version": "0.13.0",
   "description": "Embedded video player for Octane xplat — web <video> + @nstudio/nativescript-exoplayer (ExoPlayer / AVPlayerViewController) with self-drawn chrome",
   "keywords": [
     "android",
@@ -49,10 +49,10 @@
   },
   "devDependencies": {
     "@nativescript-community/octane": "0.2.4",
-    "@nativescript/core": "9.1.2",
-    "@octane-xplat/ui": "0.11.1",
+    "@nativescript/core": "9.1.3",
+    "@octane-xplat/ui": "0.13.0",
     "@octanejs/vite-plugin": "0.1.61",
-    "octane": "0.6.3",
+    "octane": "0.11.0",
     "tsrx-typegen": "0.2.2",
     "typescript": "5.9.3",
     "vite": "8.3.0"

package/src/cx.mobile.ts

@@ -1,8 +1,9 @@
-/** NS `className` splits on ' ' only, and the universal driver applies the
- *  prop via `String(value)` — an array would arrive comma-joined and match
- *  no class at all. Native leaves normalize through cx() before handing
- *  className to an intrinsic. (The DOM renderer already flattens arrays,
- *  so web leaves don't need this.) */
+/** Native renderers now normalize the declarative `className` prop, but
+ *  imperative `view.className` writes still need a pre-joined string — NS
+ *  splits on ' ' only. Native leaves keep normalizing through cx() before
+ *  handing className to an intrinsic so both paths accept the same values.
+ *  (The DOM renderer already flattens arrays, so web leaves don't need
+ *  this.) */
 export function cx(...parts: any[]): string {
 	return parts.flat(Infinity).filter(Boolean).join(' ')
 }