@octane-xplat/ui 0.5.0 → 0.6.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/View.web.tsrx.js

@@ -0,0 +1,250 @@
+import { applyEscapeProps } from "./escape-props.web.js";
+import { layoutChildProps } from "./layout-child.web.js";
+import { usePan } from "./pan.web.tsrx.js";
+import { __s, bagOf, clone, hookSlots, snapshotSpread, template, useRef, withSlot } from "octane";
+import { bindSignalChild, bindSignalHostPropSources, enableSignalBindings } from "octane/internal/client";
+//#region src/View.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _rm$1 = [
+	"s",
+	"o",
+	"n"
+];
+var View = /* @__PURE__ */ __s(function View(props, __s, __extra) {
+	const el = useRef(null, _hs$ + 0);
+	withSlot(_h$1, usePan, el, props.onPan);
+	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;
+		const _root = clone(_t$0);
+		_m0 = props.id;
+		_m1 = (e) => {
+			el.current = e;
+			if (e) {
+				applyEscapeProps(e, props);
+				props.bind?.(e);
+			}
+		};
+		_m2 = ["vx-view", props.className];
+		_m3 = snapshotSpread(layoutChildProps(props, props.style));
+		_m4 = props.accessibilityRole;
+		_m5 = props.accessibilityLabel;
+		_m6 = props.accessible === false ? true : void 0;
+		_m7 = props.accessibilityHint;
+		_m8 = props.accessibilityValue;
+		_m9 = props.accessibilityState?.disabled;
+		_m10 = props.accessibilityState?.selected;
+		_m11 = props.accessibilityState?.checked;
+		_m12 = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+		_m13 = _root;
+		_m14 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"id",
+				_m0
+			],
+			[
+				false,
+				"ref",
+				_m1
+			],
+			[
+				false,
+				"className",
+				_m2
+			],
+			[true, _m3],
+			[
+				false,
+				"role",
+				_m4
+			],
+			[
+				false,
+				"aria-label",
+				_m5
+			],
+			[
+				false,
+				"aria-hidden",
+				_m6
+			],
+			[
+				false,
+				"aria-description",
+				_m7
+			],
+			[
+				false,
+				"aria-valuetext",
+				_m8
+			],
+			[
+				false,
+				"aria-disabled",
+				_m9
+			],
+			[
+				false,
+				"aria-selected",
+				_m10
+			],
+			[
+				false,
+				"aria-checked",
+				_m11
+			],
+			[
+				false,
+				"aria-live",
+				_m12
+			]
+		], "b:5d1942f5", true);
+		_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: null,
+			q: void 0
+		});
+		__s.refFields = _rm$1;
+	} else {
+		{
+			const _v = props.id;
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = (e) => {
+				el.current = e;
+				if (e) {
+					applyEscapeProps(e, props);
+					props.bind?.(e);
+				}
+			};
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = ["vx-view", props.className];
+			if (_b.c !== _v) _b.c = _v;
+		}
+		_b.d = snapshotSpread(layoutChildProps(props, props.style));
+		{
+			const _v = props.accessibilityRole;
+			if (_b.e !== _v) _b.e = _v;
+		}
+		{
+			const _v = props.accessibilityLabel;
+			if (_b.f !== _v) _b.f = _v;
+		}
+		{
+			const _v = props.accessible === false ? true : void 0;
+			if (_b.g !== _v) _b.g = _v;
+		}
+		{
+			const _v = props.accessibilityHint;
+			if (_b.h !== _v) _b.h = _v;
+		}
+		{
+			const _v = props.accessibilityValue;
+			if (_b.i !== _v) _b.i = _v;
+		}
+		{
+			const _v = props.accessibilityState?.disabled;
+			if (_b.j !== _v) _b.j = _v;
+		}
+		{
+			const _v = props.accessibilityState?.selected;
+			if (_b.k !== _v) _b.k = _v;
+		}
+		{
+			const _v = props.accessibilityState?.checked;
+			if (_b.l !== _v) _b.l = _v;
+		}
+		{
+			const _v = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+			if (_b.m !== _v) _b.m = _v;
+		}
+		_b.o = bindSignalHostPropSources(__s, _b.o, _b.n, [
+			[
+				false,
+				"id",
+				_b.a
+			],
+			[
+				false,
+				"ref",
+				_b.b
+			],
+			[
+				false,
+				"className",
+				_b.c
+			],
+			[true, _b.d],
+			[
+				false,
+				"role",
+				_b.e
+			],
+			[
+				false,
+				"aria-label",
+				_b.f
+			],
+			[
+				false,
+				"aria-hidden",
+				_b.g
+			],
+			[
+				false,
+				"aria-description",
+				_b.h
+			],
+			[
+				false,
+				"aria-valuetext",
+				_b.i
+			],
+			[
+				false,
+				"aria-disabled",
+				_b.j
+			],
+			[
+				false,
+				"aria-selected",
+				_b.k
+			],
+			[
+				false,
+				"aria-checked",
+				_b.l
+			],
+			[
+				false,
+				"aria-live",
+				_b.m
+			]
+		], "b:5d1942f5", true);
+	}
+	_b.r = bindSignalChild(__s, _b.r, 1, _b.n, props.children, "b:c8fab23f", null, void 0, void 0, void 0, true);
+});
+//#endregion
+export { View };