highsoft-ui 1.0.145 → 1.0.147

package/dist/VideoPlayer-CKjq7IRq.js

@@ -1,324 +0,0 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
-import { C as t, E as n, a as r, i, r as a } from "./esm-B0YmMAXt.js";
-import { t as o } from "./Icon-VeXJMj8Q.js";
-import { detectProvider as s, providerPosterUrl as c, useMediaEngine as l } from "./components/VideoPlayer/useMediaEngine.js";
-import { forwardRef as u, useCallback as d, useEffect as f, useId as p, useImperativeHandle as m, useRef as h, useState as g } from "react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-var y = {
-	button: "_1OFWhq_button",
-	centerPlay: "_1OFWhq_centerPlay",
-	controlBar: "_1OFWhq_controlBar",
-	dragging: "_1OFWhq_dragging",
-	embed: "_1OFWhq_embed",
-	idle: "_1OFWhq_idle",
-	player: "_1OFWhq_player",
-	progress: "_1OFWhq_progress",
-	scrim: "_1OFWhq_scrim",
-	slider: "_1OFWhq_slider",
-	sliderBuffered: "_1OFWhq_sliderBuffered",
-	sliderFill: "_1OFWhq_sliderFill",
-	sliderThumb: "_1OFWhq_sliderThumb",
-	sliderTrack: "_1OFWhq_sliderTrack",
-	startCover: "_1OFWhq_startCover",
-	tapLayer: "_1OFWhq_tapLayer",
-	time: "_1OFWhq_time",
-	timeDuration: "_1OFWhq_timeDuration",
-	video: "_1OFWhq_video",
-	volumePopover: "_1OFWhq_volumePopover",
-	volumeSlider: "_1OFWhq_volumeSlider",
-	volumeWrap: "_1OFWhq_volumeWrap"
-}, b = "var(--HS-text-brand-default-alt)", x = 2600;
-function S(e) {
-	if (!Number.isFinite(e) || e < 0) return "0:00";
-	let t = Math.floor(e), n = Math.floor(t / 3600), r = Math.floor(t % 3600 / 60), i = t % 60, a = n > 0 ? String(r).padStart(2, "0") : String(r), o = String(i).padStart(2, "0");
-	return n > 0 ? `${n}:${a}:${o}` : `${a}:${o}`;
-}
-var C = (e) => Math.max(0, Math.min(1, e));
-function w({ value: t, buffered: n, ariaLabel: r, ariaValueText: i, className: a, step: o = .05, onChange: s, onScrubStart: c, onScrubEnd: l }) {
-	let u = h(null), [f, p] = g(!1), m = (e) => `${C(e) * 100}%`, b = d((e) => {
-		let t = u.current;
-		if (!t) return 0;
-		let n = t.getBoundingClientRect();
-		return C((e - n.left) / n.width);
-	}, []), x = (e) => {
-		e.preventDefault(), u.current?.setPointerCapture(e.pointerId), p(!0), c?.(), s(b(e.clientX));
-	}, S = (e) => {
-		f && s(b(e.clientX));
-	}, w = (e) => {
-		f && (p(!1), l?.(), u.current?.releasePointerCapture?.(e.pointerId));
-	}, T = (e) => {
-		let n = null;
-		switch (e.key) {
-			case "ArrowRight":
-			case "ArrowUp":
-				n = t + o;
-				break;
-			case "ArrowLeft":
-			case "ArrowDown":
-				n = t - o;
-				break;
-			case "Home":
-				n = 0;
-				break;
-			case "End":
-				n = 1;
-				break;
-			default: return;
-		}
-		e.preventDefault(), e.stopPropagation(), s(C(n));
-	};
-	return /* @__PURE__ */ v("div", {
-		ref: u,
-		role: "slider",
-		tabIndex: 0,
-		"aria-label": r,
-		"aria-valuemin": 0,
-		"aria-valuemax": 100,
-		"aria-valuenow": Math.round(C(t) * 100),
-		"aria-valuetext": i,
-		className: e(y.slider, a, { [y.dragging]: f }),
-		onPointerDown: x,
-		onPointerMove: S,
-		onPointerUp: w,
-		onPointerCancel: w,
-		onKeyDown: T,
-		children: [/* @__PURE__ */ v("div", {
-			className: y.sliderTrack,
-			children: [n != null && /* @__PURE__ */ _("div", {
-				className: y.sliderBuffered,
-				style: { width: m(n) }
-			}), /* @__PURE__ */ _("div", {
-				className: y.sliderFill,
-				style: { width: m(t) }
-			})]
-		}), /* @__PURE__ */ _("span", {
-			className: y.sliderThumb,
-			style: { left: m(t) }
-		})]
-	});
-}
-var T = () => /* @__PURE__ */ _("svg", {
-	viewBox: "0 0 24 24",
-	"aria-hidden": "true",
-	focusable: "false",
-	children: /* @__PURE__ */ _("path", { d: "M8 5.14v13.72c0 .86.94 1.39 1.68.95l11.02-6.86a1.12 1.12 0 0 0 0-1.9L9.68 4.19A1.12 1.12 0 0 0 8 5.14Z" })
-}), ee = () => /* @__PURE__ */ v("svg", {
-	viewBox: "0 0 24 24",
-	"aria-hidden": "true",
-	focusable: "false",
-	children: [/* @__PURE__ */ _("rect", {
-		x: "6",
-		y: "5",
-		width: "4",
-		height: "14",
-		rx: "1.6"
-	}), /* @__PURE__ */ _("rect", {
-		x: "14",
-		y: "5",
-		width: "4",
-		height: "14",
-		rx: "1.6"
-	})]
-}), E = u(({ src: u, sources: E, poster: D, muted: O = !1, autoPlay: k = !1, loop: A = !1, playsInline: j = !0, preload: te = "metadata", aspectRatio: ne = "16 / 9", radius: re = 16, accentGradient: ie = b, "aria-label": M = "Video player", className: N, style: P }, F) => {
-	let I = s(u, !!E?.length), L = I !== "file", R = l({
-		provider: I,
-		src: u,
-		muted: O,
-		autoPlay: k,
-		loop: A
-	}), { state: z } = R, B = h(null), V = h(null), H = h(void 0), U = p(), W = d((e) => {
-		V.current = e, R.videoRef(e);
-	}, [R]);
-	m(F, () => V.current, []);
-	let [G, K] = g(!1), [q, J] = g(!1), [ae, Y] = g(!1), [oe, se] = g(!1), [ce, X] = g(void 0);
-	f(() => {
-		z.playing && se(!0);
-	}, [z.playing]), f(() => {
-		if (X(void 0), I !== "vimeo" || D || !u) return;
-		let e = !1;
-		return fetch(`https://vimeo.com/api/oembed.json?url=${encodeURIComponent(u)}&width=1280`).then((e) => e.ok ? e.json() : null).then((t) => {
-			!e && t?.thumbnail_url && X(t.thumbnail_url);
-		}).catch(() => {}), () => {
-			e = !0;
-		};
-	}, [
-		I,
-		D,
-		u
-	]), f(() => {
-		let e = () => K(document.fullscreenElement === B.current);
-		return document.addEventListener("fullscreenchange", e), () => document.removeEventListener("fullscreenchange", e);
-	}, []);
-	let Z = d(() => {
-		J(!1), window.clearTimeout(H.current), H.current = window.setTimeout(() => J(!0), x);
-	}, []);
-	f(() => () => window.clearTimeout(H.current), []);
-	let Q = d(() => {
-		let e = B.current;
-		e && (document.fullscreenElement === e ? document.exitFullscreen().catch(() => {}) : e.requestFullscreen?.().catch(() => {}));
-	}, []), le = (e) => {
-		if (e.target.getAttribute("role") !== "slider") switch (e.key) {
-			case " ":
-			case "k":
-				e.preventDefault(), R.toggle();
-				break;
-			case "f":
-				e.preventDefault(), Q();
-				break;
-			case "m":
-				e.preventDefault(), R.toggleMute();
-				break;
-			case "ArrowRight":
-				e.preventDefault(), R.seekBy(5);
-				break;
-			case "ArrowLeft":
-				e.preventDefault(), R.seekBy(-5);
-				break;
-			default:
-		}
-	}, $ = D ?? c(I, u) ?? ce, ue = z.duration ? C(z.currentTime / z.duration) : 0, de = z.muted || z.volume === 0 ? a : z.volume < .5 ? i : r, fe = {
-		"--vp-radius": `${re}px`,
-		"--vp-gradient": ie,
-		aspectRatio: G ? void 0 : ne
-	}, pe = I === "file" ? /* @__PURE__ */ _("video", {
-		ref: W,
-		className: y.video,
-		src: E ? void 0 : u,
-		poster: D,
-		muted: O,
-		autoPlay: k,
-		loop: A,
-		playsInline: j,
-		preload: te,
-		onClick: R.toggle,
-		children: E?.map((e) => /* @__PURE__ */ _("source", {
-			src: e.src,
-			type: e.type
-		}, e.src))
-	}) : /* @__PURE__ */ _("div", {
-		ref: R.mountRef,
-		className: y.embed
-	});
-	return /* @__PURE__ */ v("div", {
-		ref: B,
-		role: "region",
-		"aria-label": M,
-		"aria-labelledby": U,
-		tabIndex: 0,
-		className: e("hsui-video-player", y.player, {
-			[y.playing]: z.playing,
-			[y.ended]: z.ended,
-			[y.idle]: q && z.playing && !ae
-		}, N),
-		style: {
-			...fe,
-			...P
-		},
-		onPointerMove: Z,
-		onPointerLeave: () => z.playing && J(!0),
-		onKeyDown: le,
-		onDoubleClick: Q,
-		children: [
-			/* @__PURE__ */ _("span", {
-				id: U,
-				className: "sr-only",
-				children: M
-			}),
-			pe,
-			L && !oe && /* @__PURE__ */ _("div", {
-				className: y.startCover,
-				"aria-hidden": "true",
-				style: $ ? { backgroundImage: `url("${$}")` } : void 0
-			}),
-			L && /* @__PURE__ */ _("button", {
-				type: "button",
-				className: y.tapLayer,
-				onClick: R.toggle,
-				"aria-label": z.playing ? "Pause" : "Play",
-				tabIndex: -1
-			}),
-			/* @__PURE__ */ _("div", {
-				className: y.scrim,
-				"aria-hidden": "true"
-			}),
-			!z.playing && /* @__PURE__ */ _("button", {
-				type: "button",
-				className: y.centerPlay,
-				onClick: R.toggle,
-				"aria-label": z.ended ? "Replay" : "Play",
-				tabIndex: -1,
-				children: /* @__PURE__ */ _(T, {})
-			}),
-			/* @__PURE__ */ v("div", {
-				className: y.controlBar,
-				children: [
-					/* @__PURE__ */ _("button", {
-						type: "button",
-						className: y.button,
-						onClick: R.toggle,
-						"aria-label": z.playing ? "Pause" : "Play",
-						children: z.playing ? /* @__PURE__ */ _(ee, {}) : /* @__PURE__ */ _(T, {})
-					}),
-					/* @__PURE__ */ v("div", {
-						className: y.volumeWrap,
-						children: [/* @__PURE__ */ _("button", {
-							type: "button",
-							className: y.button,
-							onClick: R.toggleMute,
-							"aria-label": z.muted ? "Unmute" : "Mute",
-							"aria-pressed": z.muted,
-							children: /* @__PURE__ */ _(o, {
-								name: de,
-								size: 20
-							})
-						}), /* @__PURE__ */ _("div", {
-							className: y.volumePopover,
-							children: /* @__PURE__ */ _(w, {
-								className: y.volumeSlider,
-								value: z.volume,
-								ariaLabel: "Volume",
-								ariaValueText: `${Math.round(z.volume * 100)}%`,
-								onChange: R.setVolume
-							})
-						})]
-					}),
-					/* @__PURE__ */ _("span", {
-						className: y.time,
-						children: S(z.currentTime)
-					}),
-					/* @__PURE__ */ _(w, {
-						className: y.progress,
-						value: ue,
-						buffered: z.buffered,
-						ariaLabel: "Seek",
-						ariaValueText: `${S(z.currentTime)} of ${S(z.duration)}`,
-						onChange: R.seekFraction,
-						onScrubStart: () => {
-							Y(!0), R.beginSeek();
-						},
-						onScrubEnd: () => {
-							Y(!1), R.endSeek();
-						}
-					}),
-					/* @__PURE__ */ _("span", {
-						className: e(y.time, y.timeDuration),
-						children: S(z.duration)
-					}),
-					/* @__PURE__ */ _("button", {
-						type: "button",
-						className: y.button,
-						onClick: Q,
-						"aria-label": G ? "Exit fullscreen" : "Enter fullscreen",
-						children: /* @__PURE__ */ _(o, {
-							name: G ? t : n,
-							size: 20
-						})
-					})
-				]
-			})
-		]
-	});
-});
-E.displayName = "VideoPlayer";
-//#endregion
-export { E as t };