highsoft-ui 1.0.145 → 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

@@ -300,7 +300,7 @@ $body-1000: var(--typography-size-1000);
   --button-colors-plain-stroke-inner-default: rgba(0, 0, 0, 0.12);
   --button-colors-plain-stroke-outer-default: transparent;
   --button-colors-plain-stroke-outer-hover: var(--primitives-neutral-200);
-  --button-colors-plain-stroke-outer-disabled: var(--primitives-neutral-200);
+  --button-colors-plain-stroke-outer-disabled: transparent;
   --button-colors-plain-stroke-outer-pressed: var(--primitives-neutral-200);
 
   --button-colors-transparent-background-default: rgba(255, 255, 255, 0);
@@ -496,21 +496,22 @@ $body-1000: var(--typography-size-1000);
   --button-transparent-border-hover: #00000060;
 
   --button-colors-neutral-background-default: var(--primitives-neutral-50);
-  --button-colors-neutral-background-disabled: var(--primitives-neutral-500);
+  --button-colors-neutral-background-disabled: var(--primitives-neutral-750);
   --button-colors-neutral-background-focus: var(--primitives-neutral-0);
   --button-colors-neutral-background-hover: var(--primitives-neutral-0);
   --button-colors-neutral-background-pressed: var(--primitives-neutral-0);
   --button-colors-neutral-stroke-inner: #ffffff0a;
   --button-colors-neutral-stroke-outer-default: var(--primitives-neutral-1000);
+  --button-colors-neutral-stroke-outer-disabled: var(--primitives-neutral-1000);
   --button-colors-neutral-stroke-outer-hover: var(--primitives-neutral-1000);
   --button-colors-neutral-text-default: var(--primitives-neutral-1000);
-  --button-colors-neutral-text-disabled: var(--primitives-neutral-1000);
+  --button-colors-neutral-text-disabled: var(--primitives-neutral-400);
   --button-colors-neutral-text-focus: var(--primitives-neutral-1000);
   --button-colors-neutral-text-hover: var(--primitives-neutral-1000);
   --button-colors-neutral-text-pressed: var(--primitives-neutral-1000);
 
   --button-colors-soft-background-default: var(--primitives-neutral-800);
-  --button-colors-soft-background-disabled: var(--primitives-neutral-300);
+  --button-colors-soft-background-disabled: var(--primitives-neutral-750);
   --button-colors-soft-background-focus: var(--primitives-neutral-700);
   --button-colors-soft-background-hover: var(--primitives-neutral-700);
   --button-colors-soft-background-pressed: var(--primitives-neutral-700);
@@ -518,7 +519,7 @@ $body-1000: var(--typography-size-1000);
   --button-colors-soft-stroke-inner-inner-dark: 2px;
   --button-colors-soft-stroke-inner-inner-white: 0px;
   --button-colors-soft-stroke-outer-default: var(--primitives-neutral-950);
-  --button-colors-soft-stroke-outer-disabled: var(--primitives-neutral-750);
+  --button-colors-soft-stroke-outer-disabled: var(--primitives-neutral-1000);
   --button-colors-soft-stroke-outer-hover: var(--primitives-neutral-950);
   --button-colors-soft-stroke-outer-pressed: var(--primitives-neutral-950);
   --button-colors-soft-text-default: var(--primitives-neutral-0);
@@ -536,11 +537,11 @@ $body-1000: var(--typography-size-1000);
   --button-colors-plain-text-hover: var(--primitives-neutral-0);
   --button-colors-plain-text-pressed: var(--primitives-neutral-0);
   --button-colors-plain-text-focus: var(--primitives-neutral-0);
-  --button-colors-plain-text-disabled: var(--primitives-neutral-500);
+  --button-colors-plain-text-disabled: var(--primitives-neutral-400);
   --button-colors-plain-stroke-inner-default: rgba(0, 0, 0, 0.87);
   --button-colors-plain-stroke-outer-default: transparent;
   --button-colors-plain-stroke-outer-hover: var(--primitives-neutral-700);
-  --button-colors-plain-stroke-outer-disabled: var(--primitives-neutral-800);
+  --button-colors-plain-stroke-outer-disabled: transparent;
   --button-colors-plain-stroke-outer-pressed: var(--primitives-neutral-800);
 
   --button-colors-transparent-background-default: rgba(255, 255, 255, 0.02);
@@ -554,7 +555,7 @@ $body-1000: var(--typography-size-1000);
   --button-colors-transparent-text-hover: var(--primitives-neutral-0);
   --button-colors-transparent-text-pressed: var(--primitives-neutral-0);
   --button-colors-transparent-text-focus: var(--primitives-neutral-0);
-  --button-colors-transparent-text-disabled: var(--primitives-neutral-500);
+  --button-colors-transparent-text-disabled: var(--primitives-neutral-400);
   --button-colors-transparent-stroke-inner-default: rgba(255, 255, 255, 0.08);
   --button-colors-transparent-stroke-inner-hover: rgba(255, 255, 255, 0.08);
   --button-colors-transparent-stroke-outer-default: rgba(0, 0, 0, 0.5);
@@ -570,39 +571,39 @@ $body-1000: var(--typography-size-1000);
   --button-colors-brand-background-hover: var(--primitives-brand-500);
   --button-colors-brand-background-pressed: var(--primitives-brand-700);
   --button-colors-brand-background-focus: var(--primitives-brand-600);
-  --button-colors-brand-background-disabled: var(--primitives-neutral-300);
+  --button-colors-brand-background-disabled: var(--primitives-neutral-750);
   --button-colors-brand-text-default: var(--primitives-neutral-0);
   --button-colors-brand-stroke-inner-default: rgba(255, 255, 255, 0.2);
   --button-colors-brand-stroke-outer-default: var(--primitives-brand-900);
   --button-colors-brand-stroke-outer-hover: var(--primitives-brand-1000);
-  --button-colors-brand-stroke-outer-disabled: var(--primitives-neutral-0);
+  --button-colors-brand-stroke-outer-disabled: var(--primitives-neutral-1000);
   --button-colors-brand-stroke-outer-pressed: var(--primitives-neutral-0);
   --button-colors-brand-text-hover: var(--primitives-neutral-0);
   --button-colors-brand-text-pressed: var(--primitives-neutral-0);
   --button-colors-brand-text-focus: var(--primitives-neutral-0);
-  --button-colors-brand-text-disabled: var(--primitives-neutral-0);
+  --button-colors-brand-text-disabled: var(--primitives-neutral-400);
 
   --button-colors-success-background-default: var(--primitives-success-600);
   --button-colors-success-background-hover: var(--primitives-success-500);
   --button-colors-success-background-pressed: var(--primitives-success-700);
   --button-colors-success-background-focus: var(--primitives-success-600);
-  --button-colors-success-background-disabled: var(--primitives-neutral-300);
+  --button-colors-success-background-disabled: var(--primitives-neutral-750);
   --button-colors-success-text-default: var(--primitives-neutral-0);
   --button-colors-success-stroke-inner-default: rgba(255, 255, 255, 0.12);
   --button-colors-success-stroke-outer-default: var(--primitives-success-1000);
   --button-colors-success-stroke-outer-hover: var(--primitives-success-700);
-  --button-colors-success-stroke-outer-disabled: var(--primitives-neutral-200);
+  --button-colors-success-stroke-outer-disabled: var(--primitives-neutral-1000);
   --button-colors-success-stroke-outer-pressed: var(--primitives-neutral-200);
   --button-colors-success-text-hover: var(--primitives-neutral-0);
   --button-colors-success-text-pressed: var(--primitives-neutral-0);
   --button-colors-success-text-focus: var(--primitives-neutral-0);
-  --button-colors-success-text-disabled: var(--primitives-neutral-0);
+  --button-colors-success-text-disabled: var(--primitives-neutral-400);
 
   --button-colors-attention-background-default: var(--primitives-attention-600);
   --button-colors-attention-background-hover: var(--primitives-attention-500);
   --button-colors-attention-background-pressed: var(--primitives-attention-600);
   --button-colors-attention-background-focus: var(--primitives-attention-600);
-  --button-colors-attention-background-disabled: var(--primitives-neutral-300);
+  --button-colors-attention-background-disabled: var(--primitives-neutral-750);
   --button-colors-attention-text-default: var(--primitives-neutral-0);
   --button-colors-attention-stroke-inner-default: rgba(255, 255, 255, 0.12);
   --button-colors-attention-stroke-outer-default: var(
@@ -610,28 +611,28 @@ $body-1000: var(--typography-size-1000);
   );
   --button-colors-attention-stroke-outer-hover: var(--primitives-attention-600);
   --button-colors-attention-stroke-outer-disabled: var(
-    --primitives-neutral-300
+    --primitives-neutral-1000
   );
   --button-colors-attention-stroke-outer-pressed: var(--primitives-neutral-200);
   --button-colors-attention-text-hover: var(--primitives-neutral-0);
   --button-colors-attention-text-pressed: var(--primitives-neutral-0);
   --button-colors-attention-text-focus: var(--primitives-neutral-0);
-  --button-colors-attention-text-disabled: var(--primitives-neutral-0);
+  --button-colors-attention-text-disabled: var(--primitives-neutral-400);
 
   --button-colors-danger-background-default: var(--primitives-danger-600);
   --button-colors-danger-background-hover: var(--primitives-danger-500);
   --button-colors-danger-background-pressed: var(--primitives-danger-700);
   --button-colors-danger-background-focus: var(--primitives-danger-600);
-  --button-colors-danger-background-disabled: var(--primitives-neutral-300);
+  --button-colors-danger-background-disabled: var(--primitives-neutral-750);
   --button-colors-danger-text-default: var(--primitives-neutral-0);
   --button-colors-danger-text-hover: var(--primitives-neutral-0);
   --button-colors-danger-text-pressed: var(--primitives-neutral-0);
   --button-colors-danger-text-focus: var(--primitives-neutral-0);
-  --button-colors-danger-text-disabled: var(--primitives-neutral-0);
+  --button-colors-danger-text-disabled: var(--primitives-neutral-400);
   --button-colors-danger-stroke-inner-default: rgba(255, 255, 255, 0.12);
   --button-colors-danger-stroke-outer-default: var(--primitives-danger-700);
   --button-colors-danger-stroke-outer-hover: var(--primitives-danger-600);
-  --button-colors-danger-stroke-outer-disabled: var(--primitives-neutral-300);
+  --button-colors-danger-stroke-outer-disabled: var(--primitives-neutral-1000);
   --button-colors-danger-stroke-outer-pressed: var(--primitives-neutral-200);
 
   --tags-neutral-background: var(--primitives-neutral-600);
@@ -771,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);
@@ -892,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.145",
+  "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 };