@octane-xplat/video 0.0.0 → 0.7.0

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

@@ -0,0 +1,400 @@
+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 { bindSignalAttribute, bindSignalHostPropSources, compilerMemoRegion, enableSignalBindings, hookMemoCreate, hookMemoPublishInvariant, replaceRef, setPlainAttribute, setURLAttribute } from "octane/internal/client";
+//#region src/Video.web.tsrx
+enableSignalBindings(1, true);
+delegateEvents([
+	"ended",
+	"error",
+	"loadedmetadata",
+	"pause",
+	"play",
+	"playing",
+	"timeupdate"
+]);
+var _t$0 = /* @__PURE__ */ template("<div><video class=\"vx-video-surface\" playsinline=\"\" preload=\"metadata\"></video><!></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(8);
+var __event = (e, setDuration, props) => {
+	const ms = e.currentTarget.duration * 1e3;
+	setDuration(Number.isFinite(ms) ? ms : 0);
+	props.onReady?.({ duration: Number.isFinite(ms) ? ms : 0 });
+};
+var __event$ = (__eventArg, props, setPlaying) => {
+	if (props.loop) return;
+	setPlaying(false);
+	props.onEnded?.();
+};
+var __event$2 = (e, props) => {
+	const code = e.currentTarget?.error?.code ?? 0;
+	props.onError?.({ message: MEDIA_ERR[code] ?? "unknown" });
+};
+function __then$0(__props, __s, __extra) {
+	const __block = __s.block;
+	const duration = __extra[0];
+	const el = __extra[1];
+	const muted = __extra[2];
+	const playing = __extra[3];
+	const position = __extra[4];
+	const props = __extra[5];
+	const setInternalMuted = __extra[6];
+	const setPosition = __extra[7];
+	const started = __extra[8];
+	const togglePlay = __extra[9];
+	componentSlotVoid(__s, 0, __block.parentNode, VideoChrome, {
+		"poster": props.poster,
+		"started": started,
+		"playing": playing,
+		"position": position,
+		"duration": duration,
+		"muted": muted,
+		"onTogglePlay": togglePlay,
+		"onToggleMute": () => {
+			const next = !muted;
+			setInternalMuted(next);
+			if (el.current) el.current.muted = next;
+			props.onMutedChange?.(next);
+		},
+		"onSeek": (ms) => {
+			if (el.current) {
+				el.current.currentTime = ms / 1e3;
+				setPosition(ms);
+			}
+		}
+	}, __block.endMarker, void 0, 2, void 0, void 0, "c:6f1a737f");
+}
+var _rm$3 = [
+	"s",
+	"n",
+	"m",
+	"r",
+	"p",
+	"o"
+];
+var MEDIA_ERR = {
+	1: "aborted",
+	2: "network",
+	3: "decode",
+	4: "source-not-supported"
+};
+var Video = /* @__PURE__ */ __s(function Video(props, __s, __extra) {
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(2);
+	const el = useRef(null, _hs$ + 0);
+	const [playing, setPlaying] = useState(props.playing ?? props.autoPlay ?? false, _hs$ + 1);
+	const [started, setStarted] = useState(false, _hs$ + 2);
+	const [position, setPosition] = useState(0, _hs$ + 3);
+	const [duration, setDuration] = useState(0, _hs$ + 4);
+	const [internalMuted, setInternalMuted] = useState(false, _hs$ + 5);
+	const muted = props.muted ?? internalMuted;
+	const drive = __hk[0] ?? hookMemoPublishInvariant(__hk, 0, (v, next) => {
+		if (!v) return;
+		if (next) v.play()?.catch(() => setPlaying(false));
+		else v.pause();
+	});
+	useEffect(() => {
+		if (props.playing === void 0) return;
+		setPlaying(props.playing);
+		drive(el.current, props.playing);
+	}, [props.playing], _hs$ + 6);
+	useEffect(() => {
+		const v = el.current;
+		if (!v) return;
+		v.muted = muted;
+		if (props.autoPlay || props.playing) v.play()?.catch(() => setPlaying(false));
+	}, [muted], _hs$ + 7);
+	const togglePlay = () => {
+		const next = !playing;
+		setPlaying(next);
+		drive(el.current, next);
+		props.onPlayingChange?.(next);
+	};
+	const handle = __hk[1] ?? hookMemoPublishInvariant(__hk, 1, (v) => ({
+		play: () => v.play(),
+		pause: () => v.pause(),
+		seekTo: (ms) => {
+			v.currentTime = ms / 1e3;
+		},
+		currentTime: () => v.currentTime * 1e3,
+		duration: () => Number.isFinite(v.duration) ? v.duration * 1e3 : 0,
+		native: v
+	}));
+	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;
+		const _root = clone(_t$0);
+		_m0 = props.id;
+		_m1 = [
+			"vx-stack",
+			"vx-video",
+			props.className
+		];
+		_m2 = snapshotSpread(layoutChildProps(props, 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:8e28227a", 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);
+		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);
+		markDangerouslySetInnerHTMLChildren(_root);
+		_m24 = sibling(_el0, 1);
+		_b = bagOf(__s, _root, {
+			a: _m0,
+			b: _m1,
+			c: _m2,
+			d: _m3,
+			e: _m4,
+			f: _m5,
+			g: _m6,
+			h: _m7,
+			i: _m8,
+			j: _m9,
+			k: _m10,
+			l: _m11,
+			m: _m12,
+			n: _m13,
+			o: _m14,
+			p: _m15,
+			q: void 0,
+			r: void 0,
+			s: void 0,
+			t: void 0,
+			u: __s,
+			v: _m21,
+			w: _m22,
+			x: _m23,
+			y: _m24
+		});
+		__s.refFields = _rm$3;
+	} else {
+		{
+			const _v = props.id;
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = [
+				"vx-stack",
+				"vx-video",
+				props.className
+			];
+			if (_b.b !== _v) _b.b = _v;
+		}
+		_b.c = snapshotSpread(layoutChildProps(props, 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:8e28227a", 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);
+		}
+		evt2u(_b.v, __event, setDuration, props);
+		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);
+	{
+		const _v = props.fit ?? "contain";
+		if (_b.u !== _v) {
+			setStyleProperty(_b.o, "objectFit", _v, "", _b.u);
+			_b.u = _v;
+		}
+	}
+	{
+		const __ifCondition = props.controls !== false;
+		ifBlock(__s, 1, _b.m, __ifCondition, __then$0, null, _b.y, __ifCondition ? [
+			duration,
+			el,
+			muted,
+			playing,
+			position,
+			props,
+			setInternalMuted,
+			setPosition,
+			started,
+			togglePlay
+		] : void 0);
+	}
+});
+//#endregion
+export { Video };

package/dist/web/escape-props.web.js

@@ -0,0 +1,17 @@
+//#region src/escape-props.web.ts
+/** Apply DOM escape props after the primitive's own props. Dash-named keys
+*  are attributes; other keys use the DOM property where available. */
+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 };

package/dist/web/index.js

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

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

@@ -0,0 +1,47 @@
+//#region src/layout-child.web.ts
+/** The shared contract is "numbers are dips" (RN semantics), but octane's DOM
+*  renderer keeps React's unitless list — lineHeight is unitless there, so
+*  `style={{lineHeight: 40}}` would render a 40× multiplier instead of 40px.
+*  lineHeight is the one unitless-in-React prop that is a length in the
+*  shared vocabulary; force the px suffix. */
+function normStyle(style) {
+	if (style && typeof style.lineHeight === "number") return {
+		...style,
+		lineHeight: style.lineHeight + "px"
+	};
+	return style;
+}
+var FLEX_JUSTIFY = {
+	start: "flex-start",
+	end: "flex-end"
+};
+var FLEX_ALIGN = {
+	start: "flex-start",
+	end: "flex-end"
+};
+/** Convert parent-layout metadata to CSS on the web leaf. Native's `dock`
+*  attribute has no CSS equivalent and is ignored on web. Grid indices are
+*  zero-based in the shared API, matching NativeScript. */
+function layoutChildProps(props, baseStyle = props.style) {
+	const style = { ...normStyle(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;
+	if (props.justifyContent !== void 0) style.justifyContent = FLEX_JUSTIFY[props.justifyContent] ?? props.justifyContent;
+	if (props.alignItems !== void 0) style.alignItems = FLEX_ALIGN[props.alignItems] ?? props.alignItems;
+	if (props.flexWrap !== void 0) style.flexWrap = props.flexWrap === true ? "wrap" : props.flexWrap === false ? "nowrap" : props.flexWrap;
+	if (props.gap !== void 0) style.gap = props.gap;
+	if (props.rowGap !== void 0) style.rowGap = props.rowGap;
+	if (props.columnGap !== void 0) style.columnGap = props.columnGap;
+	if (typeof style.lineHeight === "number") style.lineHeight = style.lineHeight + "px";
+	return { style };
+}
+//#endregion
+export { layoutChildProps, normStyle };

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

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "a430f0ef-5a3d-4167-ad5a-0b39a65493a4",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

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

@@ -0,0 +1,201 @@
+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";
+//#region src/video-chrome.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+var _hs$ = /* @__PURE__ */ hookSlots(12);
+function __then$0(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	componentSlot(__s, 0, __block.parentNode, Image, {
+		"className": "vx-video-poster",
+		"src": props.poster,
+		"ios": { stretch: "aspectFill" },
+		"android": { stretch: "aspectFill" }
+	}, __block.endMarker, void 0, 2, void 0, void 0, "c:afd81fd1");
+}
+var __childrenBody = {};
+var __childrenBody$ = {};
+function __then$5(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	function __children$7(__props, __s, __extra) {
+		const __block = __s.block;
+		function __children$9(__props, __s, __extra) {
+			const __block = __s.block;
+			componentSlot(__s, 0, __block.parentNode, Icon, {
+				"name": "xplat-play",
+				"size": 28,
+				"color": "#fff"
+			}, __block.endMarker, void 0, 2, void 0, void 0, "c:8182c208");
+		}
+		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");
+	}
+	componentSlot(__s, 0, __block.parentNode, Pressable, {
+		"className": "vx-video-center",
+		"justifyContent": "center",
+		"alignItems": "center",
+		"accessibilityRole": "button",
+		"accessibilityLabel": "Play",
+		"onPress": props.onTogglePlay,
+		"children": markChildrenBlock(__children$7, __childrenBody$)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:4f97cdfe");
+}
+var __childrenBody$2 = {};
+var __childrenBody$3 = {};
+var __childrenBody$4 = {};
+var __childrenBody$5 = {};
+var __childrenBody$6 = {};
+var __childrenBody$7 = {};
+function __then$4(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	function __children$13(__props, __s, __extra) {
+		const __block = __s.block;
+		function __children$15(__props, __s, __extra) {
+			const __block = __s.block;
+			function __children$17(__props, __s, __extra) {
+				const __block = __s.block;
+				componentSlot(__s, 0, __block.parentNode, Icon, {
+					"name": props.playing ? "xplat-pause" : "xplat-play",
+					"size": 20,
+					"color": "#fff"
+				}, __block.endMarker, void 0, 2, void 0, void 0, "c:a4e0e905");
+			}
+			function __children$20(__props, __s, __extra) {
+				const __block = __s.block;
+				let _b = __s.slots[0];
+				if (_b === void 0) {
+					let _m0, _m1;
+					const _root = clone(_t$0);
+					_m0 = __block.parentNode;
+					_m1 = child(_root);
+					drainFrag(_root, __block.parentNode, __block.endMarker);
+					_b = bag4(__s, null, _m0, _m1, null, void 0);
+				}
+				{
+					const _v = stamp(props.position);
+					_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+					_b.d = _v;
+				}
+			}
+			function __children$24(__props, __s, __extra) {
+				const __block = __s.block;
+				let _b = __s.slots[0];
+				if (_b === void 0) {
+					let _m0, _m1;
+					const _root = clone(_t$0);
+					_m0 = __block.parentNode;
+					_m1 = child(_root);
+					drainFrag(_root, __block.parentNode, __block.endMarker);
+					_b = bag4(__s, null, _m0, _m1, null, void 0);
+				}
+				{
+					const _v = stamp(props.duration);
+					_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+					_b.d = _v;
+				}
+			}
+			function __children$27(__props, __s, __extra) {
+				const __block = __s.block;
+				componentSlot(__s, 0, __block.parentNode, Icon, {
+					"name": props.muted ? "xplat-volume-off" : "xplat-volume",
+					"size": 20,
+					"color": "#fff"
+				}, __block.endMarker, void 0, 2, void 0, void 0, "c:78a524c0");
+			}
+			componentSlot(__s, 0, __block.parentNode, Pressable, {
+				"className": "vx-video-btn",
+				"accessibilityRole": "button",
+				"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");
+			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");
+			componentSlot(__s, 2, __block.parentNode, Slider, {
+				"className": "vx-video-slider",
+				"style": { flexGrow: 1 },
+				"value": props.position,
+				"minValue": 0,
+				"maxValue": props.duration > 0 ? props.duration : 1,
+				"onValueChange": props.onSeek
+			}, __block.endMarker, void 0, 2, void 0, void 0, "c:2b300510");
+			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");
+			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");
+		}
+		componentSlot(__s, 0, __block.parentNode, Row, {
+			"className": "vx-video-bar",
+			"alignItems": "center",
+			"gap": 8,
+			"children": markChildrenBlock(__children$15, __childrenBody$6)
+		}, __block.endMarker, void 0, void 0, void 0, void 0, "c:455e7102");
+	}
+	ifBlock(__s, 0, __block.parentNode, !props.playing, __then$5, null, __block.endMarker, __extra);
+	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");
+}
+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 = /* @__PURE__ */ markWarm(function VideoChrome(props, __s, __extra) {
+	const __block = __s.block;
+	const [visible, setVisible] = useState(true, _hs$ + 0);
+	useEffect(() => {
+		if (!props.playing || !visible) return;
+		const t = setTimeout(() => setVisible(false), 2500);
+		return () => clearTimeout(t);
+	}, [props.playing, visible], _hs$ + 1);
+	const __warmPlan = VideoChrome.__warm;
+	if (typeof __warmPlan === "function") registerWarmPlan(__warmPlan, props);
+	else registerWarmPlan(() => {
+		if (props.poster && !props.started) warmChild(Image, {
+			className: "vx-video-poster",
+			src: props.poster,
+			ios: { stretch: "aspectFill" },
+			android: { stretch: "aspectFill" }
+		});
+	}, void 0);
+	{
+		const __ifCondition = props.poster && !props.started;
+		ifBlock(__s, 0, __block.parentNode, __ifCondition, __then$0, null, __block.endMarker, __ifCondition ? [props] : void 0);
+	}
+	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");
+	{
+		const __ifCondition$ = visible;
+		ifBlock(__s, 2, __block.parentNode, __ifCondition$, __then$4, null, __block.endMarker, __ifCondition$ ? [props] : void 0);
+	}
+}, (__wp) => {
+	const props = __wp;
+	if (props.poster && !props.started) warmChild(Image, {
+		className: "vx-video-poster",
+		src: props.poster,
+		ios: { stretch: "aspectFill" },
+		android: { stretch: "aspectFill" }
+	});
+});
+//#endregion
+export { VideoChrome };