@octane-xplat/video 0.0.0 → 0.7.0

package/dist/native/Video.tsrx.js

@@ -0,0 +1,248 @@
+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 { Video, VideoFill } from "@nstudio/nativescript-exoplayer";
+//#region src/Video.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(11);
+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 _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
+var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
+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 __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "gridlayout",
+	"propsSlot": 0,
+	"children": [{
+		"kind": "host",
+		"type": "xplatvideo",
+		"props": { "controls": false },
+		"bindings": [
+			["ref", 1],
+			["autoplay", 2],
+			["loop", 3],
+			["muted", 4],
+			["fill", 5],
+			["observeCurrentTime", 6],
+			["onFinished", 7],
+			["onPlaybackReady", 8],
+			["onPlaybackStart", 9],
+			["onCurrentTimeUpdated", 10]
+		]
+	}, {
+		"kind": "slot",
+		"slot": 11
+	}]
+});
+registerElement("xplatvideo", Video);
+var FILLS = {
+	contain: VideoFill.aspect,
+	cover: VideoFill.aspectFill,
+	fill: VideoFill.fill
+};
+var Video$1 = defineUniversalComponent("nativescript", function Video(props) {
+	const host = useRef(null, _h$0);
+	const [playing, setPlaying] = useState(props.playing ?? props.autoPlay ?? false, _h$1);
+	const [started, setStarted] = useState(false, _h$2);
+	const [position, setPosition] = useState(0, _h$3);
+	const [duration, setDuration] = useState(0, _h$4);
+	const [internalMuted, setInternalMuted] = useState(false, _h$5);
+	const muted = props.muted ?? internalMuted;
+	const appliedSrc = useRef(void 0, _h$6);
+	const bindHost = useCallback((v) => {
+		host.current = v;
+	}, [], _h$7);
+	const drive = (v, next) => {
+		if (!v) return;
+		if (next) v.play();
+		else v.pause();
+	};
+	useEffect(() => {
+		const v = host.current;
+		if (!v) return;
+		applyEscapeProps(v, props);
+		props.bind?.(handle(v));
+	}, [], _h$8);
+	useEffect(() => {
+		const v = host.current;
+		if (!v || props.src === appliedSrc.current) return;
+		appliedSrc.current = props.src;
+		v.src = props.src;
+	}, [props.src], _h$9);
+	useEffect(() => {
+		if (props.playing === void 0) return;
+		setPlaying(props.playing);
+		drive(host.current, props.playing);
+	}, [props.playing], _h$10);
+	const togglePlay = () => {
+		const next = !playing;
+		setPlaying(next);
+		drive(host.current, next);
+		props.onPlayingChange?.(next);
+	};
+	const handle = (v) => ({
+		play: () => v.play(),
+		pause: () => v.pause(),
+		seekTo: (ms) => v.seekToTime(ms / 1e3),
+		currentTime: () => v.getCurrentTime(),
+		duration: () => v.getDuration(),
+		native: v
+	});
+	return universalValue(__octaneUniversalPlan1, [
+		universalProps([
+			[
+				"set",
+				"id",
+				props.id
+			],
+			[
+				"set",
+				"rows",
+				"*"
+			],
+			[
+				"set",
+				"columns",
+				"*"
+			],
+			[
+				"set",
+				"className",
+				cx("vx-stack", "vx-video", props.className)
+			],
+			[
+				"set",
+				"style",
+				props.style
+			],
+			["spread", layoutChildProps(props)],
+			[
+				"set",
+				"accessible",
+				props.accessible
+			],
+			[
+				"set",
+				"accessibilityLabel",
+				props.accessibilityLabel
+			],
+			[
+				"set",
+				"accessibilityRole",
+				nativeAccessibilityRole(props.accessibilityRole)
+			],
+			[
+				"set",
+				"accessibilityHint",
+				props.accessibilityHint
+			],
+			[
+				"set",
+				"accessibilityValue",
+				props.accessibilityValue
+			],
+			[
+				"set",
+				"accessibilityState",
+				nativeAccessibilityState(props.accessibilityState)
+			],
+			[
+				"set",
+				"accessibilityLiveRegion",
+				props.accessibilityLiveRegion
+			]
+		]),
+		bindHost,
+		props.playing ?? props.autoPlay ?? false,
+		props.loop,
+		muted,
+		FILLS[props.fit ?? "contain"],
+		props.controls !== false,
+		() => {
+			if (!props.loop) {
+				setPlaying(false);
+				props.onEnded?.();
+			}
+		},
+		() => {
+			const ms = host.current?.getDuration?.() ?? 0;
+			setDuration(ms);
+			props.onReady?.({ duration: ms });
+		},
+		() => setStarted(true),
+		(e) => setPosition(e.position ?? 0),
+		universalIf(props.controls !== false, () => {
+			return universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", VideoChrome, universalProps([
+				[
+					"set",
+					"poster",
+					props.poster
+				],
+				[
+					"set",
+					"started",
+					started
+				],
+				[
+					"set",
+					"playing",
+					playing
+				],
+				[
+					"set",
+					"position",
+					position
+				],
+				[
+					"set",
+					"duration",
+					duration
+				],
+				[
+					"set",
+					"muted",
+					muted
+				],
+				[
+					"set",
+					"onTogglePlay",
+					togglePlay
+				],
+				[
+					"set",
+					"onToggleMute",
+					() => {
+						const next = !muted;
+						setInternalMuted(next);
+						if (host.current) host.current.muted = next;
+						props.onMutedChange?.(next);
+					}
+				],
+				[
+					"set",
+					"onSeek",
+					(ms) => {
+						if (host.current) {
+							host.current.seekToTime(ms / 1e3);
+							setPosition(ms);
+						}
+					}
+				]
+			]))]);
+		})
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Video$1 as Video };

package/dist/native/cx.mobile.js

@@ -0,0 +1,11 @@
+//#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.) */
+function cx(...parts) {
+	return parts.flat(Infinity).filter(Boolean).join(" ");
+}
+//#endregion
+export { cx };

package/dist/native/escape-props.js

@@ -0,0 +1,39 @@
+import { isAndroid, isIOS } from "@nativescript/core";
+//#region src/escape-props.ts
+/** Apply only the active device's escape bag after the primitive's own props. */
+function applyEscapeProps(view, props) {
+	if (!view) return;
+	const bag = isIOS ? props.ios : isAndroid ? props.android : void 0;
+	if (bag) Object.assign(view, bag);
+}
+var NATIVE_ACCESSIBILITY_ROLES = {
+	button: "button",
+	link: "link",
+	search: "search",
+	image: "image",
+	heading: "header",
+	adjustable: "adjustable",
+	summary: "summary",
+	text: "text",
+	none: "none",
+	progressbar: "progressBar",
+	checkbox: "checkbox",
+	switch: "switch",
+	radio: "radioButton",
+	spinbutton: "spinButton",
+	tab: "button"
+};
+/** Translate the shared/ARIA spelling to NativeScript's narrower role enum. */
+function nativeAccessibilityRole(role) {
+	return role ? NATIVE_ACCESSIBILITY_ROLES[role] : void 0;
+}
+/** NativeScript's AccessibilityState is a single enum value, unlike the
+*  web's independent ARIA booleans. Priority follows the strongest state. */
+function nativeAccessibilityState(state) {
+	if (state?.disabled) return "disabled";
+	if (state?.selected) return "selected";
+	if (state?.checked === true) return "checked";
+	if (state?.checked === false) return "unchecked";
+}
+//#endregion
+export { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState };

package/dist/native/index.js

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

package/dist/native/layout-child.js

@@ -0,0 +1,38 @@
+//#region src/layout-child.ts
+var FLEX_JUSTIFY = {
+	start: "flex-start",
+	end: "flex-end"
+};
+var FLEX_ALIGN = {
+	start: "flex-start",
+	end: "flex-end"
+};
+/** NativeScript reads these attributes from each child view during parent
+*  layout. Values are forwarded with NativeScript's own property names.
+*  The flex-container props (justifyContent/alignItems/flexWrap/gap) land on
+*  the host flexboxlayout itself — its own attributes, not child metadata. */
+function layoutChildProps(props) {
+	const result = {};
+	for (const key of [
+		"row",
+		"col",
+		"rowSpan",
+		"colSpan",
+		"dock",
+		"left",
+		"top",
+		"flexGrow",
+		"flexShrink",
+		"alignSelf",
+		"order"
+	]) if (props[key] !== void 0) result[key] = props[key];
+	if (props.justifyContent !== void 0) result.justifyContent = FLEX_JUSTIFY[props.justifyContent] ?? props.justifyContent;
+	if (props.alignItems !== void 0) result.alignItems = FLEX_ALIGN[props.alignItems] ?? props.alignItems;
+	if (props.flexWrap !== void 0) result.flexWrap = props.flexWrap === true ? "wrap" : props.flexWrap === false ? "nowrap" : props.flexWrap;
+	if (props.gap !== void 0) result.gap = props.gap;
+	if (props.rowGap !== void 0) result.rowGap = props.rowGap;
+	if (props.columnGap !== void 0) result.columnGap = props.columnGap;
+	return result;
+}
+//#endregion
+export { layoutChildProps };

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

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "c46144e7-caa2-46d1-aeca-5dc907c075f3",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

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

@@ -0,0 +1,359 @@
+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";
+//#region src/video-chrome.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan5 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan6 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [
+		{
+			"kind": "slot",
+			"slot": 0
+		},
+		{
+			"kind": "slot",
+			"slot": 1
+		},
+		{
+			"kind": "slot",
+			"slot": 2
+		},
+		{
+			"kind": "slot",
+			"slot": 3
+		},
+		{
+			"kind": "slot",
+			"slot": 4
+		}
+	]
+});
+var __octaneUniversalPlan7 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan8 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}, {
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan9 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [
+		{
+			"kind": "slot",
+			"slot": 0
+		},
+		{
+			"kind": "slot",
+			"slot": 1
+		},
+		{
+			"kind": "slot",
+			"slot": 2
+		}
+	]
+});
+function stamp(ms) {
+	const total = Math.max(0, Math.floor(ms / 1e3));
+	return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, "0")}`;
+}
+var VideoChrome = defineUniversalComponent("nativescript", function VideoChrome(props) {
+	const [visible, setVisible] = useState(true, _h$0);
+	useEffect(() => {
+		if (!props.playing || !visible) return;
+		const t = setTimeout(() => setVisible(false), 2500);
+		return () => clearTimeout(t);
+	}, [props.playing, visible], _h$1);
+	return universalValue(__octaneUniversalPlan9, [
+		universalIf(props.poster && !props.started, () => {
+			return universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", Image, universalProps([
+				[
+					"set",
+					"className",
+					"vx-video-poster"
+				],
+				[
+					"set",
+					"src",
+					props.poster
+				],
+				[
+					"set",
+					"ios",
+					{ stretch: "aspectFill" }
+				],
+				[
+					"set",
+					"android",
+					{ stretch: "aspectFill" }
+				]
+			]))]);
+		}),
+		universalComponent("nativescript", Pressable, universalProps([
+			[
+				"set",
+				"className",
+				"vx-video-tap"
+			],
+			[
+				"set",
+				"accessibilityRole",
+				"button"
+			],
+			[
+				"set",
+				"accessibilityLabel",
+				visible ? "Hide video controls" : "Show video controls"
+			],
+			[
+				"set",
+				"onPress",
+				() => setVisible(props.playing ? !visible : true)
+			]
+		])),
+		universalIf(visible, () => {
+			return universalValue(__octaneUniversalPlan8, [universalIf(!props.playing, () => {
+				return universalValue(__octaneUniversalPlan3, [universalComponent("nativescript", Pressable, universalProps([
+					[
+						"set",
+						"className",
+						"vx-video-center"
+					],
+					[
+						"set",
+						"justifyContent",
+						"center"
+					],
+					[
+						"set",
+						"alignItems",
+						"center"
+					],
+					[
+						"set",
+						"accessibilityRole",
+						"button"
+					],
+					[
+						"set",
+						"accessibilityLabel",
+						"Play"
+					],
+					[
+						"set",
+						"onPress",
+						props.onTogglePlay
+					]
+				], universalChildren("nativescript", () => {
+					return universalValue(__octaneUniversalPlan2, [universalComponent("nativescript", View, universalProps([[
+						"set",
+						"className",
+						"vx-video-centerbtn"
+					]], universalChildren("nativescript", () => {
+						return universalValue(__octaneUniversalPlan1, [universalComponent("nativescript", Icon, universalProps([
+							[
+								"set",
+								"name",
+								"xplat-play"
+							],
+							[
+								"set",
+								"size",
+								28
+							],
+							[
+								"set",
+								"color",
+								"#fff"
+							]
+						]))]);
+					})))]);
+				})))]);
+			}), universalComponent("nativescript", View, universalProps([[
+				"set",
+				"className",
+				"vx-video-barwrap"
+			], [
+				"set",
+				"justifyContent",
+				"end"
+			]], universalChildren("nativescript", () => {
+				return universalValue(__octaneUniversalPlan7, [universalComponent("nativescript", Row, universalProps([
+					[
+						"set",
+						"className",
+						"vx-video-bar"
+					],
+					[
+						"set",
+						"alignItems",
+						"center"
+					],
+					[
+						"set",
+						"gap",
+						8
+					]
+				], universalChildren("nativescript", () => {
+					return universalValue(__octaneUniversalPlan6, [
+						universalComponent("nativescript", Pressable, universalProps([
+							[
+								"set",
+								"className",
+								"vx-video-btn"
+							],
+							[
+								"set",
+								"accessibilityRole",
+								"button"
+							],
+							[
+								"set",
+								"accessibilityLabel",
+								props.playing ? "Pause" : "Play"
+							],
+							[
+								"set",
+								"onPress",
+								props.onTogglePlay
+							]
+						], universalChildren("nativescript", () => {
+							return universalValue(__octaneUniversalPlan4, [universalComponent("nativescript", Icon, universalProps([
+								[
+									"set",
+									"name",
+									props.playing ? "xplat-pause" : "xplat-play"
+								],
+								[
+									"set",
+									"size",
+									20
+								],
+								[
+									"set",
+									"color",
+									"#fff"
+								]
+							]))]);
+						}))),
+						universalComponent("nativescript", Text, universalProps([[
+							"set",
+							"className",
+							"vx-video-time"
+						]], stamp(props.position))),
+						universalComponent("nativescript", Slider, universalProps([
+							[
+								"set",
+								"className",
+								"vx-video-slider"
+							],
+							[
+								"set",
+								"style",
+								{ flexGrow: 1 }
+							],
+							[
+								"set",
+								"value",
+								props.position
+							],
+							[
+								"set",
+								"minValue",
+								0
+							],
+							[
+								"set",
+								"maxValue",
+								props.duration > 0 ? props.duration : 1
+							],
+							[
+								"set",
+								"onValueChange",
+								props.onSeek
+							]
+						])),
+						universalComponent("nativescript", Text, universalProps([[
+							"set",
+							"className",
+							"vx-video-time"
+						]], stamp(props.duration))),
+						universalComponent("nativescript", Pressable, universalProps([
+							[
+								"set",
+								"className",
+								"vx-video-btn"
+							],
+							[
+								"set",
+								"accessibilityRole",
+								"button"
+							],
+							[
+								"set",
+								"accessibilityLabel",
+								props.muted ? "Unmute" : "Mute"
+							],
+							[
+								"set",
+								"onPress",
+								props.onToggleMute
+							]
+						], universalChildren("nativescript", () => {
+							return universalValue(__octaneUniversalPlan5, [universalComponent("nativescript", Icon, universalProps([
+								[
+									"set",
+									"name",
+									props.muted ? "xplat-volume-off" : "xplat-volume"
+								],
+								[
+									"set",
+									"size",
+									20
+								],
+								[
+									"set",
+									"color",
+									"#fff"
+								]
+							]))]);
+						})))
+					]);
+				})))]);
+			})))]);
+		})
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { VideoChrome };