highsoft-ui 1.0.146 → 1.0.147

package/dist/lib/components/VideoCover/index.d.ts

@@ -19,7 +19,12 @@ export interface VideoCoverProps {
     fit?: 'cover' | 'contain' | 'fill';
     /** Autoplay on mount. Default `true`. */
     autoPlay?: boolean;
-    /** Loop when the video ends. Default `true`. */
+    /**
+     * Loop when the video ends. Default `false` — covers play through once and
+     * settle on their final frame (with the control offering replay), keeping
+     * automatic motion under WCAG 2.2.2's five-second threshold. Opt in to
+     * looping only for genuinely ambient video.
+     */
     loop?: boolean;
     /** Start muted — required for autoplay. Default `true`. */
     muted?: boolean;
@@ -53,6 +58,33 @@ export interface VideoCoverProps {
     aspectRatio?: string;
     /** Corner radius in px. Default `0`. */
     radius?: number;
+    /**
+     * Show a small always-visible playback toggle in the corner (WCAG 2.2.2
+     * "Pause, Stop, Hide"). Three states: pause while the video plays, replay
+     * once it has ended (`loop={false}`), and play when it isn't running —
+     * e.g. for reduced-motion users, who can still opt in to playback.
+     * Default `true`. Disable it only for videos that don't loop and finish
+     * within ~5 seconds (where WCAG doesn't require a control), or when the
+     * cover itself is wrapped in an interactive trigger — a nested button is
+     * invalid HTML (see the Footer's video tile).
+     */
+    playControl?: boolean;
+    /**
+     * Only play while the cover is actually in the viewport: autoplay waits
+     * until ~20% of it is visible, scrolling away pauses, scrolling back
+     * resumes. A pause from the toggle is sticky — re-entering the viewport
+     * never overrides it — and an ended `loop={false}` video stays on its end
+     * frame instead of replaying on re-entry. Default `true`. Set `false` to
+     * start playback as soon as the video loads, visible or not.
+     */
+    playWhenVisible?: boolean;
+    /**
+     * Short informational text rendered below the cover — a small annotation
+     * icon plus tertiary caption. The component wraps itself in a `<figure>` with
+     * the caption as its `<figcaption>`; `className`/`style`/`ref` stay on the
+     * cover box itself.
+     */
+    caption?: ReactNode;
     /**
      * Overlay content rendered on top of the video (icons, captions, a play
      * badge, …). Interactive by default; pointer events pass through the video.
@@ -67,9 +99,11 @@ export interface VideoCoverProps {
     style?: CSSProperties;
 }
 /**
- * A chrome-less background/cover video — autoplays muted, loops, and stretches
- * to fill its box like `object-fit: cover` on an image. No controls, no
- * playback engine, no provider SDKs; just a self-hosted `<video>` with built-in
- * lazy loading and an optional overlay for arbitrary `children`.
+ * A chrome-less background/cover video — autoplays muted once it scrolls into
+ * view, plays through a single time, and stretches to fill its box like
+ * `object-fit: cover` on an image. No playback engine and no provider SDKs;
+ * just a self-hosted `<video>` with built-in lazy loading, an always-visible
+ * pause/play/replay toggle (see `playControl`), and an optional overlay for
+ * arbitrary `children`.
  */
 export declare const VideoCover: import('react').ForwardRefExoticComponent<VideoCoverProps & import('react').RefAttributes<HTMLVideoElement>>;

package/dist/lib/components/VideoPlayer/index.d.ts

@@ -1,10 +1,26 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 /** A single `<source>` entry for the underlying `<video>`. */
 export interface VideoPlayerSource {
     src: string;
     /** MIME type, e.g. `video/mp4`. */
     type?: string;
 }
+/** A WebVTT text track for the underlying `<video>` (self-hosted only). */
+export interface VideoPlayerTrack {
+    /** URL of the `.vtt` file. */
+    src: string;
+    /** Language of the track, e.g. `en`. */
+    srclang: string;
+    /** Human-readable label shown for the track, e.g. `English`. */
+    label: string;
+    /**
+     * Track kind. `captions` (default) and `subtitles` are cycled by the CC
+     * button; `descriptions` tracks are exposed to assistive tech only.
+     */
+    kind?: 'captions' | 'subtitles' | 'descriptions';
+    /** Show this track when the player mounts. */
+    default?: boolean;
+}
 export interface VideoPlayerProps {
     /**
      * Video URL. A YouTube or Vimeo link is auto-detected and driven through the
@@ -35,6 +51,22 @@ export interface VideoPlayerProps {
      * color; accepts any CSS color or `<image>` value (e.g. a `linear-gradient`).
      */
     accentGradient?: string;
+    /**
+     * WebVTT text tracks (captions/subtitles/descriptions) for self-hosted
+     * video. Adds a CC toggle to the control bar that cycles the available
+     * caption/subtitle tracks (also on the `c` key). Ignored for YouTube/Vimeo
+     * sources — provider embeds carry their own caption rendering.
+     */
+    tracks?: VideoPlayerTrack[];
+    /**
+     * Written transcript, docked as a panel directly below the player and
+     * toggled from a control-bar button (also on the `t` key) — the
+     * WCAG-friendly companion to captions for users who prefer reading,
+     * search, or assistive tech. Any React content.
+     */
+    transcript?: ReactNode;
+    /** Accessible name for the transcript panel. Default `Transcript`. */
+    transcriptTitle?: string;
     /** Accessible label for the player region. */
     'aria-label'?: string;
     className?: string;

package/dist/lib/main.d.ts

@@ -59,7 +59,7 @@ export { SidebarLayout, SidebarMain, Sidebar, SidebarHeader, SidebarBody, Sideba
 export type { SidebarLayoutProps, SidebarProps, SidebarSectionProps, NavItemProps, NavGroupProps, NavDisclosureProps, SidebarLayoutContextValue } from './components/Sidebar';
 export { PrefPanel } from './components/PrefPanel';
 export { VideoPlayer } from './components/VideoPlayer';
-export type { VideoPlayerProps, VideoPlayerSource } from './components/VideoPlayer';
+export type { VideoPlayerProps, VideoPlayerSource, VideoPlayerTrack } from './components/VideoPlayer';
 export { VideoPlayerModal } from './components/VideoPlayer/VideoPlayerModal';
 export type { VideoPlayerModalProps } from './components/VideoPlayer/VideoPlayerModal';
 export { VideoCover } from './components/VideoCover';

package/dist/main.js

@@ -1,37 +1,37 @@
 import { c as e, d as t, r as n, s as r, u as i } from "./utils-K9S_6_Eq.js";
 import { t as a } from "./Box-BZgeSeCV.js";
-import { t as o } from "./Button-DIGyNR41.js";
-import { t as s } from "./CopyCode-_MHQorJS.js";
+import { t as o } from "./Button-BGsqFCRW.js";
+import { t as s } from "./CopyCode-_yeXCeeq.js";
 import { t as c } from "./FrameworkIcon-Ds6WrxO0.js";
-import { t as l } from "./CodeBlock-DtTAC5ru.js";
+import { t as l } from "./CodeBlock-BeseY88j.js";
 import { t as u } from "./Icon-VeXJMj8Q.js";
 import { t as d } from "./Link-CYR92_U0.js";
 import { t as f } from "./ProductIcon-DFLAYWbu.js";
-import { t as p } from "./ButtonGroup-BSQzx-sZ.js";
+import { t as p } from "./ButtonGroup-DKfaXOeS.js";
 import { t as m } from "./InputSolo-DUdKtZjX.js";
-import { t as h } from "./SearchDropdown-ECOTZ1Uf.js";
-import { i as g, n as _, r as v, t as y } from "./InputGrouped-BE3zLov9.js";
+import { t as h } from "./SearchDropdown-L_rQz1vn.js";
+import { i as g, n as _, r as v, t as y } from "./InputGrouped-CHGCMmsK.js";
 import { t as b } from "./Container-BDssaLig.js";
 import { t as x } from "./DiscordInvite-CLYxexdH.js";
 import { t as S } from "./Heading-DNDHqYWO.js";
 import { t as C } from "./Typography-AvvBRu-u.js";
 import { t as w } from "./Logo-Bz0G2G-k.js";
-import { t as T } from "./NewsletterSignup-CJAI81M3.js";
-import { n as E, r as D, t as O } from "./Dropdown-CVyrHJiC.js";
-import { t as k } from "./PrefPanel-BZUX1nfw.js";
-import { n as A, t as j } from "./Label-C_KZM-FN.js";
-import { t as M } from "./VideoCover-BN8wnHpf.js";
-import { t as N } from "./VideoPlayer-CKjq7IRq.js";
-import { t as P } from "./VideoPlayerModal-DbP3OjSF.js";
-import { t as F } from "./Footer-DW2asf8g.js";
+import { t as T } from "./NewsletterSignup-DrcPfdrg.js";
+import { n as E, r as D, t as O } from "./Dropdown-B_Ib6i1c.js";
+import { t as k } from "./PrefPanel-BGw72I_D.js";
+import { n as A, t as j } from "./Label-CgiWi1v6.js";
+import { t as M } from "./VideoCover-DqMDvzvA.js";
+import { t as N } from "./VideoPlayer-Cq_garSg.js";
+import { t as P } from "./VideoPlayerModal-D1v1O2kW.js";
+import { t as F } from "./Footer-_P2pj3K7.js";
 import { n as I } from "./GPTInput-C0YG1990.js";
-import { t as L } from "./Notification-C2kN_ceR.js";
-import { n as R, t as z } from "./Header-DQ1xi25C.js";
+import { t as L } from "./Notification-B3skQvZE.js";
+import { n as R, t as z } from "./Header-CVKH_INR.js";
 import { t as B } from "./Tabs-BuDaPqdN.js";
 import { n as V, t as H } from "./RadioBox-o1Ssyj0s.js";
-import { n as U, t as W } from "./Checkbox-wlH6EGWW.js";
+import { n as U, t as W } from "./Checkbox-CniRhVkQ.js";
 import { Modal as G } from "./components/Modal/index.js";
-import { t as K } from "./RoadmapDetails-CfayA5CZ.js";
+import { t as K } from "./RoadmapDetails-XS0OylnP.js";
 import { ModalContactFooter as q } from "./components/Modal/ModalContactFooter.js";
 import { useOptionalSidebarLayout as J, useSidebarLayout as Y } from "./components/Sidebar/context.js";
 import { SidebarLayout as X, SidebarMain as Z } from "./components/Sidebar/SidebarLayout.js";

package/dist/{prism-light-C4xXs3Qn.js → prism-light-COlcVrfu.js}

@@ -1,5 +1,5 @@
 import { r as e } from "./chunk-jwUa06l-.js";
-import { r as t, t as n } from "./create-element-WbENDceu.js";
+import { r as t, t as n } from "./create-element-CDnUGrhg.js";
 import r from "react";
 //#region node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
 function i(e, t) {

package/dist/scss/variables.scss

@@ -772,6 +772,8 @@ $body-1000: var(--typography-size-1000);
   --HS-text-attention-default-alt: var(--primitives-attention-1000);
   --HS-text-danger-default: var(--primitives-danger-500);
   --HS-common-background: var(--primitives-neutral-50);
+  --HS-video-player-chrome: var(--primitives-neutral-0);
+  --HS-video-player-scrim: var(--primitives-neutral-1000);
   --HS-surface-danger-background: var(--primitives-danger-50);
   --HS-surface-danger-background-boxed: var(--primitives-danger-100);
   --HS-surface-danger-border: var(--primitives-danger-200);
@@ -893,6 +895,8 @@ $body-1000: var(--typography-size-1000);
   --HS-text-attention-default-alt: var(--primitives-neutral-0);
   --HS-text-danger-default: var(--primitives-danger-500);
   --HS-common-background: var(--primitives-neutral-950);
+  --HS-video-player-chrome: var(--primitives-neutral-0);
+  --HS-video-player-scrim: var(--primitives-neutral-1000);
   --HS-surface-danger-background: var(--primitives-danger-1200);
   --HS-surface-danger-background-boxed: var(--primitives-danger-1100);
   --HS-surface-danger-border: var(--primitives-danger-700);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "highsoft-ui",
-  "version": "1.0.146",
+  "version": "1.0.147",
   "description": "Highsoft UI",
   "type": "module",
   "repository": {

package/dist/VideoCover-BN8wnHpf.js

@@ -1,92 +0,0 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
-import { forwardRef as t, useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-var c = {
-	content: "a1m2bq_content",
-	cover: "a1m2bq_cover",
-	hoverZoom: "a1m2bq_hoverZoom",
-	poster: "a1m2bq_poster",
-	reduced: "a1m2bq_reduced",
-	video: "a1m2bq_video"
-}, l = t(({ src: t, sources: l, poster: u, fit: d = "cover", autoPlay: f = !0, loop: p = !0, muted: m = !0, playsInline: h = !0, preload: g = "auto", lazy: _ = !0, hoverZoom: v = !1, reducedMotion: y, aspectRatio: b, radius: x = 0, children: S, "aria-label": C, className: w, style: T }, E) => {
-	let D = i(null), O = i(null), [k, A] = a(!_), [j, M] = a(!1), N = !C, P = n((e) => {
-		O.current = e, typeof E == "function" ? E(e) : E && (E.current = e);
-	}, [E]), [F, I] = a(() => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
-	r(() => {
-		if (typeof window > "u" || !window.matchMedia) return;
-		let e = window.matchMedia("(prefers-reduced-motion: reduce)"), t = () => I(e.matches);
-		return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
-	}, []);
-	let L = y === void 0 ? F ? "no-animation" : !1 : y === !0 ? "no-animation" : y, R = L !== !1, z = f && !R, B = n(() => {
-		let e = O.current;
-		e && (e.pause(), L === "skip-to-end" && Number.isFinite(e.duration) ? e.currentTime = Math.max(0, e.duration - .05) : L === "no-animation" && (e.currentTime = 0));
-	}, [L]);
-	return r(() => {
-		let e = O.current;
-		!e || !k || (R ? B() : f && e.play().catch(() => {}));
-	}, [
-		R,
-		k,
-		f,
-		B
-	]), r(() => {
-		if (k) return;
-		let e = D.current;
-		if (!e || typeof IntersectionObserver > "u") {
-			A(!0);
-			return;
-		}
-		let t = new IntersectionObserver(([e]) => {
-			e?.isIntersecting && (A(!0), t.disconnect());
-		}, { rootMargin: "200px" });
-		return t.observe(e), () => t.disconnect();
-	}, [k]), /* @__PURE__ */ s("div", {
-		ref: D,
-		className: e("hsui-video-cover", c.cover, {
-			[c.hoverZoom]: v,
-			[c.reduced]: R
-		}, w),
-		style: {
-			"--vc-radius": `${x}px`,
-			aspectRatio: b,
-			...T
-		},
-		role: N ? "presentation" : "img",
-		"aria-label": C,
-		children: [
-			u && /* @__PURE__ */ o("img", {
-				className: c.poster,
-				style: { objectFit: d },
-				src: u,
-				alt: "",
-				"aria-hidden": "true"
-			}),
-			/* @__PURE__ */ o("video", {
-				ref: P,
-				className: c.video,
-				style: { objectFit: d },
-				src: k && !l ? t : void 0,
-				autoPlay: z,
-				loop: p,
-				muted: m,
-				playsInline: h,
-				preload: k ? g : "none",
-				"data-ready": j || void 0,
-				onCanPlay: () => M(!0),
-				onLoadedMetadata: R ? B : void 0,
-				"aria-hidden": N || void 0,
-				children: k && l?.map((e) => /* @__PURE__ */ o("source", {
-					src: e.src,
-					type: e.type
-				}, e.src))
-			}),
-			S != null && /* @__PURE__ */ o("div", {
-				className: c.content,
-				children: S
-			})
-		]
-	});
-});
-l.displayName = "VideoCover";
-//#endregion
-export { l as t };

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 };