@design-edito/tools 0.3.9 → 0.3.11

package/components/Theatre/index.d.ts

@@ -0,0 +1,64 @@
+import { type FunctionComponent, type PropsWithChildren, type ReactNode } from 'react';
+import type { WithClassName } from '../utils/types.js';
+/**
+ * Props for the {@link Theatre} component.
+ *
+ * @property closeBtnContent - Custom content rendered inside the close/exit button.
+ * @property openBtnContent - Custom content rendered inside the open/enter button.
+ * @property isOn - Controlled theatre mode state. When provided, overrides the
+ * internal state. Use together with {@link Props.onToggleClick} for fully
+ * controlled usage.
+ * @property defaultIsOn - Default state for the theatre mode.
+ * @property exitOnEscape — When uncontrolled and on, toggles internal state to off when 'esc' key is pressed
+ * @property exitOnBgClick — When uncontrolled and on, toggles internal state to off when the background is clicked
+ * @property stateHandlers - Callbacks called after the internal state changed
+ * @property stateHandlers.toggled - Callback invoked after the state changed
+ * @property actionHandlers - Callbacks called after a user action on children elements
+ * @property actionHandlers.toggleTrigger - Callback invoked when either the open or close
+ * button is clicked, the 'esc' key pressed or the background clicked. Receives the theatre state value (`isOn`) at the time of the click,
+ * i.e. the previous state before the toggle.
+ * @property className - Optional additional class name(s) applied to the root element.
+ * @property children - Content rendered both in the default slot and, when theatre
+ * mode is active, duplicated inside the stage element.
+ */
+export type Props = PropsWithChildren<WithClassName<{
+    closeBtnContent?: ReactNode;
+    openBtnContent?: ReactNode;
+    isOn?: boolean;
+    defaultIsOn?: boolean;
+    exitOnEscape?: boolean;
+    exitOnBgClick?: boolean;
+    stateHandlers?: {
+        toggled?: (isOn: boolean) => void;
+    };
+    actionHandlers?: {
+        toggleTrigger?: (prevIsOn: boolean) => void;
+    };
+}>>;
+/**
+ * Theatre mode component. Wraps content in a toggleable fullscreen-like "stage"
+ * overlay. Supports both controlled and uncontrolled usage.
+ *
+ * When `isOn` is not provided the component manages its own open/closed state
+ * internally. When `isOn` is provided it acts as the source of truth and the
+ * internal state is ignored.
+ *
+ * ### Root element modifiers
+ * The root `<div>` receives the public class name defined by `theatre` and the
+ * following BEM-style modifier classes:
+ * - `--on` — when theatre mode is active.
+ * - `--off` — when theatre mode is inactive.
+ *
+ * ### Child elements
+ * - `__stage` — container rendered inside the root that holds the duplicated
+ * `children` when theatre mode is active. Only mounted when `isOn` is `true`.
+ * - `__open-btn` — clickable element that activates theatre mode.
+ * - `__close-btn` — clickable element that deactivates theatre mode.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @returns A root `<div>` containing the children in their original position,
+ * a stage overlay with the duplicated children (when active), and the open/close
+ * toggle buttons.
+ */
+export declare const Theatre: FunctionComponent<Props>;

package/components/Theatre/index.js

@@ -0,0 +1,97 @@
+// src/components/Theatre/index.tsx
+import {
+  useEffect,
+  useState,
+  useRef
+} from "react";
+import { clss } from "../../agnostic/css/clss/index.js";
+import { mergeClassNames } from "../utils/index.js";
+import { theatre as publicClassName } from "../public-classnames.js";
+import cssModule from "./styles.module.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Theatre = ({
+  closeBtnContent,
+  openBtnContent,
+  isOn,
+  defaultIsOn,
+  exitOnEscape,
+  exitOnBgClick,
+  stateHandlers,
+  actionHandlers,
+  children,
+  className
+}) => {
+  const [internalIsOn, setInternalIsOn] = useState(defaultIsOn ?? false);
+  const stageRef = useRef(null);
+  const isTheatreOn = isOn ?? internalIsOn;
+  const prevIsTheatreOnRef = useRef(isTheatreOn);
+  const handleCloseBtnClick = () => {
+    actionHandlers?.toggleTrigger?.(isTheatreOn);
+    if (isOn === void 0) setInternalIsOn(false);
+  };
+  const handleOpenBtnClick = () => {
+    actionHandlers?.toggleTrigger?.(isTheatreOn);
+    if (isOn === void 0) setInternalIsOn(true);
+  };
+  const handleStageBgClick = (e) => {
+    if (exitOnBgClick !== true) return;
+    if (e.target !== stageRef.current) return;
+    actionHandlers?.toggleTrigger?.(isTheatreOn);
+    if (isOn === void 0) setInternalIsOn(false);
+  };
+  useEffect(() => {
+    if (prevIsTheatreOnRef.current !== isTheatreOn) {
+      stateHandlers?.toggled?.(isTheatreOn);
+      prevIsTheatreOnRef.current = isTheatreOn;
+    }
+  }, [isTheatreOn, stateHandlers]);
+  useEffect(() => {
+    if (exitOnEscape === true || !isTheatreOn || isOn !== void 0) return;
+    const listener = (e) => {
+      if (e.key !== "Escape") return;
+      actionHandlers?.toggleTrigger?.(isTheatreOn);
+      setInternalIsOn(false);
+    };
+    window.addEventListener("keydown", listener);
+    return () => window.removeEventListener("keydown", listener);
+  }, [exitOnEscape, isTheatreOn, isOn]);
+  const c = clss(publicClassName, { cssModule });
+  const rootClss = mergeClassNames(c(null, {
+    "on": isTheatreOn,
+    "off": !isTheatreOn
+  }), className);
+  const stageClass = c("stage");
+  const openBtnClass = c("open-btn");
+  const closeBtnClass = c("close-btn");
+  return /* @__PURE__ */ jsxs("div", { className: rootClss, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: stageClass,
+        onClick: handleStageBgClick,
+        ref: stageRef,
+        children: isTheatreOn && children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: closeBtnClass,
+        onClick: handleCloseBtnClick,
+        children: closeBtnContent
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: openBtnClass,
+        onClick: handleOpenBtnClick,
+        children: openBtnContent
+      }
+    )
+  ] });
+};
+export {
+  Theatre
+};

package/components/Video/index.d.ts

@@ -0,0 +1,119 @@
+import { type FunctionComponent, type PropsWithChildren, type VideoHTMLAttributes } from 'react';
+import { type Props as DisclaimerProps } from '../Disclaimer/index.js';
+import { type Props as SubsProps } from '../Subtitles/index.js';
+import type { WithClassName } from '../utils/types.js';
+/**
+ * Describes a single video source.
+ *
+ * @property src - URL of the video file.
+ * @property type - MIME type of the source (e.g. `'video/mp4'`).
+ */
+type SourceData = {
+    src?: string;
+    type?: string;
+};
+/**
+ * Describes a single text track (subtitles, captions, chapters, etc.).
+ *
+ * @property src - URL of the track file.
+ * @property kind - Track type, maps directly to the `<track>` `kind` attribute.
+ * @property srclang - Language of the track content (e.g. `'fr'`, `'en'`).
+ * @property label - Human-readable label shown in the browser's track selector.
+ * @property default - When `true`, marks this track as the default selection.
+ */
+type TrackData = {
+    src?: string;
+    kind?: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
+    srclang?: string;
+    label?: string;
+    default?: boolean;
+};
+/**
+ * Props for the {@link Video} component.
+ *
+ * Extends all native `VideoHTMLAttributes<HTMLVideoElement>`, so any standard
+ * video attribute (`autoPlay`, `muted`, `loop`, `poster`, etc.) can be passed
+ * and will be forwarded to the underlying `<video>` element.
+ *
+ * @property sources - One or more video sources. Accepts:
+ * - a single URL string,
+ * - an array of URL strings,
+ * - an array of {@link SourceData} objects for fine-grained `type` control.
+ * @property tracks - One or more text tracks. Accepts:
+ * - a single URL string,
+ * - an array of URL strings,
+ * - an array of {@link TrackData} objects.
+ * @property playBtnContent - Custom content for the play button.
+ * @property pauseBtnContent - Custom content for the pause button.
+ * @property loudBtnContent - Custom content for the unmute button.
+ * @property muteBtnContent - Custom content for the mute button.
+ * @property fullScreenBtnContent - Custom content for the fullScreen button.
+ * @property subtitles - Props forwarded to the internal {@link Subtitles} component.
+ * `timecodeMs` is injected automatically from the current playback position.
+ * @property disclaimer - Props forwarded to the internal {@link Disclaimer} component.
+ * While the disclaimer is active, `autoPlay` and `muted` are suppressed on the
+ * underlying `<video>` element.
+ * @property autoPlayWhenVisible - When `true`, triggers playback the first time the
+ * component intersects the viewport, provided no disclaimer is active.
+ * @property autoPauseWhenHidden - When `true`, pauses playback whenever the component
+ * leaves the viewport.
+ * @property autoLoudWhenVisible - When `true`, unmutes the video the first time the
+ * component intersects the viewport, provided no disclaimer is active.
+ * @property autoMuteWhenHidden - When `true`, mutes the video whenever the component
+ * leaves the viewport.
+ * @property className - Optional additional class name(s) applied to the root element.
+ * @property children - React children rendered inside the `<video>` element itself
+ * (e.g. fallback content).
+ */
+export type Props = PropsWithChildren<WithClassName<{
+    sources?: string | string[] | SourceData[];
+    tracks?: string | string[] | TrackData[];
+    playBtnContent?: React.ReactNode;
+    pauseBtnContent?: React.ReactNode;
+    loudBtnContent?: React.ReactNode;
+    muteBtnContent?: React.ReactNode;
+    fullScreenBtnContent?: React.ReactNode;
+    subtitles?: SubsProps;
+    disclaimer?: DisclaimerProps;
+    autoPlayWhenVisible?: boolean;
+    autoPauseWhenHidden?: boolean;
+    autoLoudWhenVisible?: boolean;
+    autoMuteWhenHidden?: boolean;
+}> & VideoHTMLAttributes<HTMLVideoElement>>;
+/**
+ * Full-featured video player component. Wraps a native `<video>` element with
+ * playback controls, volume, playback rate, a timeline, optional subtitles,
+ * an optional disclaimer gate, and viewport-driven auto-play/mute behaviours.
+ *
+ * ### Root element modifiers
+ * The root `<figure>` receives the public class name defined by `video` and
+ * the following BEM-style modifier classes:
+ * - `--play-on` / `--play-off` — reflects current playback state.
+ * - `--fullscreen-on` / `--fullscreen-off` — reflects fullscreen state.
+ * - `--loud` / `--muted` — reflects mute state.
+ *
+ * ### Data attributes on the root element
+ * - `data-play-on` — present (empty string) when playing.
+ * - `data-play-off` — present (empty string) when paused.
+ * - `data-fullscreen-on` — present (empty string) when in fullScreen.
+ * - `data-fullscreen-off` — present (empty string) when not in fullScreen.
+ * - `data-loud` — present (empty string) when unmuted.
+ * - `data-muted` — present (empty string) when muted.
+ * - `data-volume` — current volume as a `0–1` float.
+ * - `data-volume-percent` — current volume as a `0–100` float.
+ * - `data-playback-rate` — current playback rate (e.g. `1`, `1.5`).
+ * - `data-current-time-ms` — current time in milliseconds, fixed to 2 decimals.
+ * - `data-current-time-ratio` — current / total ratio, fixed to 8 decimals.
+ * - `data-total-time-ms` — total duration in milliseconds.
+ *
+ * ### CSS custom properties on the root element
+ * - `--video-current-time-ratio` — current / total ratio, fixed to 8 decimals.
+ * Useful for driving progress-bar animations purely in CSS.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @returns A `<figure>` element containing the video, its controls, optional
+ * subtitles, and an optional disclaimer overlay.
+ */
+export declare const Video: FunctionComponent<Props>;
+export {};

package/components/Video/index.js

@@ -0,0 +1,358 @@
+// src/components/Video/index.tsx
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { clss } from "../../agnostic/css/clss/index.js";
+import {
+  Disclaimer
+} from "../Disclaimer/index.js";
+import { IntersectionObserverComponent } from "../IntersectionObserver/index.js";
+import {
+  Subtitles
+} from "../Subtitles/index.js";
+import { mergeClassNames } from "../utils/index.js";
+import { video as publicClassName } from "../public-classnames.js";
+import {
+  formatTime,
+  secondsToMs,
+  muteAttributeWorkaround,
+  forcePlay,
+  forcePause,
+  forceLoud,
+  forceMute,
+  forceFullScreen,
+  forceExitFullScreen
+} from "./utils.js";
+import cssModule from "./styles.module.css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Video = ({
+  sources,
+  tracks,
+  playBtnContent,
+  pauseBtnContent,
+  loudBtnContent,
+  muteBtnContent,
+  fullScreenBtnContent,
+  subtitles,
+  disclaimer,
+  autoPlayWhenVisible,
+  autoPauseWhenHidden,
+  autoLoudWhenVisible,
+  autoMuteWhenHidden,
+  children,
+  className,
+  ...intrinsicVideoAttributes
+}) => {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [isLoud, setIsLoud] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [totalTime, setTotalTime] = useState(0);
+  const [volume, setVolume] = useState(0);
+  const [playbackRate, setPlaybackRate] = useState(0);
+  const [hasBeenAutoPlayed, setHasBeenAutoPlayed] = useState(false);
+  const [isDisclaimerOn, setIsDisclaimerOn] = useState(
+    disclaimer?.isOn === true || disclaimer?.defaultIsOn === true || disclaimer !== void 0 && disclaimer.defaultIsOn === void 0
+  );
+  let shouldDisclaimerBeOn = isDisclaimerOn;
+  if (disclaimer?.isOn === true) {
+    shouldDisclaimerBeOn = true;
+  }
+  if (disclaimer?.isOn === false) {
+    shouldDisclaimerBeOn = false;
+  }
+  const currentTimeMs = secondsToMs(currentTime);
+  const totalTimeMs = useMemo(() => secondsToMs(totalTime), [totalTime]);
+  const volumePercent = useMemo(() => volume * 100, [volume]);
+  const videoRef = useRef(null);
+  const $root = useRef(null);
+  const handleMetadataLoadEvent = useCallback((e) => {
+    if (videoRef.current === null) return;
+    const video = videoRef.current;
+    muteAttributeWorkaround(
+      video,
+      intrinsicVideoAttributes.muted ?? false,
+      setIsLoud
+    );
+    setTotalTime(video.duration);
+    setPlaybackRate(video.playbackRate);
+    setVolume(video.volume);
+    setIsLoud(!video.muted);
+    intrinsicVideoAttributes.onLoadedMetadata?.(e);
+  }, []);
+  const handleVolumeChangeEvent = useCallback((e) => {
+    const { volume: volume2 } = e.currentTarget;
+    setVolume(volume2);
+    intrinsicVideoAttributes.onVolumeChange?.(e);
+  }, []);
+  const handlePlayEvent = useCallback((e) => {
+    setIsPlaying(true);
+    setHasBeenAutoPlayed(true);
+    intrinsicVideoAttributes.onPlay?.(e);
+  }, []);
+  const handlePauseEvent = useCallback((e) => {
+    setIsPlaying(false);
+    intrinsicVideoAttributes.onPause?.(e);
+  }, []);
+  const handleRateChangeEvent = useCallback((e) => {
+    const rate = e.currentTarget.playbackRate;
+    setPlaybackRate(rate);
+    intrinsicVideoAttributes.onRateChange?.(e);
+  }, []);
+  const handleTimeUpdateEvent = useCallback((e) => {
+    const currentTime2 = e.currentTarget.currentTime;
+    setCurrentTime(currentTime2);
+    intrinsicVideoAttributes?.onTimeUpdate?.(e);
+  }, [totalTime]);
+  const handleVolumeRangeChange = useCallback((e) => {
+    const volumePercent2 = Number(e.currentTarget.value);
+    const volume2 = volumePercent2 / 100;
+    if (videoRef.current === null) return;
+    videoRef.current.volume = volume2;
+  }, []);
+  const handleLoudButtonClick = useCallback(() => {
+    forceLoud(videoRef.current, setIsLoud);
+  }, [forceLoud]);
+  const handleMuteButtonClick = useCallback(() => {
+    forceMute(videoRef.current, setIsLoud);
+  }, []);
+  const handlePlayButtonClick = useCallback(() => {
+    void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
+  }, [forcePlay, shouldDisclaimerBeOn]);
+  const handlePauseButtonClick = useCallback(() => {
+    forcePause(videoRef.current, setIsPlaying);
+  }, []);
+  const handleFullScreenButtonClick = useCallback(() => {
+    if (isFullScreen) void forceExitFullScreen(videoRef.current, setIsFullScreen);
+    else void forceFullScreen(videoRef.current, shouldDisclaimerBeOn, setIsFullScreen);
+  }, [isFullScreen, shouldDisclaimerBeOn]);
+  const handleRateRangeChange = useCallback((e) => {
+    const rate = Number(e.currentTarget.value);
+    if (videoRef.current === null) return;
+    videoRef.current.playbackRate = rate;
+  }, []);
+  const handleTimelineClick = useCallback((e) => {
+    if (videoRef.current === null) return;
+    const timelineRect = e.currentTarget.getBoundingClientRect();
+    const position = e.clientX - timelineRect.left;
+    const progress = Math.min(1, Math.max(0, position / timelineRect.width));
+    videoRef.current.currentTime = progress * totalTime;
+  }, []);
+  const handleDisclaimerDismiss = useCallback(() => {
+    setIsDisclaimerOn(false);
+    if (intrinsicVideoAttributes.autoPlay === true && !hasBeenAutoPlayed) void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
+  }, [disclaimer, intrinsicVideoAttributes.autoPlay, shouldDisclaimerBeOn]);
+  useEffect(() => {
+    if (isDisclaimerOn !== shouldDisclaimerBeOn) setIsDisclaimerOn(shouldDisclaimerBeOn);
+    if (shouldDisclaimerBeOn) {
+      forceMute(videoRef.current, setIsLoud);
+      forcePause(videoRef.current, setIsPlaying);
+      void forceExitFullScreen(videoRef.current, setIsFullScreen);
+    } else if (intrinsicVideoAttributes.autoPlay === true) {
+      if (videoRef.current === null) return;
+      if (hasBeenAutoPlayed) return;
+      if (videoRef.current.paused) void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
+    }
+  }, [
+    shouldDisclaimerBeOn,
+    intrinsicVideoAttributes,
+    hasBeenAutoPlayed
+  ]);
+  const parsedSources = useMemo(() => {
+    if (sources === void 0) return [];
+    if (typeof sources === "string") return [{ src: sources }];
+    if (Array.isArray(sources)) {
+      if (sources.length === 0) return [];
+      if (typeof sources[0] === "string") return sources.map((src) => ({ src }));
+      return sources;
+    }
+    return [];
+  }, [sources]);
+  const parsedTracks = useMemo(() => {
+    if (tracks === void 0) return [];
+    if (typeof tracks === "string") return [{ src: tracks }];
+    if (Array.isArray(tracks)) {
+      if (tracks.length === 0) return [];
+      if (typeof tracks[0] === "string") return tracks.map((src) => ({ src }));
+      return tracks;
+    }
+    return [];
+  }, [tracks]);
+  const c = clss(publicClassName, { cssModule });
+  const rootClss = mergeClassNames(c(null, {
+    "play-on": isPlaying,
+    "play-off": !isPlaying,
+    "fullscreen-on": isFullScreen,
+    "fullscreen-off": !isFullScreen,
+    "loud": isLoud,
+    "muted": !isLoud
+  }), className);
+  const rootAttributes = {
+    "data-play-on": isPlaying ? "" : void 0,
+    "data-play-off": !isPlaying ? "" : void 0,
+    "data-fullscreen-on": isFullScreen ? "" : void 0,
+    "data-fullscreen-off": !isFullScreen ? "" : void 0,
+    "data-loud": isLoud ? "" : void 0,
+    "data-muted": !isLoud ? "" : void 0,
+    "data-volume": volume,
+    "data-volume-percent": volumePercent,
+    "data-playback-rate": playbackRate,
+    "data-current-time-ms": currentTimeMs.toFixed(2),
+    "data-current-time-ratio": (currentTime / totalTime).toFixed(8),
+    "data-total-time-ms": totalTimeMs
+  };
+  const rootStyles = {
+    [`--${publicClassName}-current-time-ratio`]: (currentTime / totalTime).toFixed(8)
+  };
+  const videoClss = c("video");
+  const videoControlsClss = c("video-controls");
+  const playBtnClss = c("play-btn");
+  const pauseBtnClss = c("pause-btn");
+  const loudBtnClss = c("loud-btn");
+  const muteBtnClss = c("mute-btn");
+  const volumePcntClss = c("volume-percent");
+  const fullScreenBtnClss = c("fullscreen-btn");
+  const volumeRangeClss = c("volume-range");
+  const playbackRateRangeClss = c("playback-rate-range");
+  const playbackRateClss = c("playback-rate");
+  const timeControlsClss = c("time-controls");
+  const currentTimeClss = c("current-time");
+  const totalTimeClss = c("total-time");
+  const timelineClss = c("timeline");
+  const sensitiveContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "video",
+      {
+        ref: videoRef,
+        className: videoClss,
+        onVolumeChange: handleVolumeChangeEvent,
+        onLoadedMetadata: handleMetadataLoadEvent,
+        onPlay: handlePlayEvent,
+        onPause: handlePauseEvent,
+        onTimeUpdate: handleTimeUpdateEvent,
+        onRateChange: handleRateChangeEvent,
+        ...intrinsicVideoAttributes,
+        autoPlay: shouldDisclaimerBeOn ? false : intrinsicVideoAttributes.autoPlay,
+        muted: shouldDisclaimerBeOn ? true : intrinsicVideoAttributes.muted,
+        children: [
+          parsedSources.map(
+            (source, index) => typeof source === "string" ? /* @__PURE__ */ jsx(
+              "source",
+              {
+                src: source
+              },
+              index
+            ) : /* @__PURE__ */ jsx(
+              "source",
+              {
+                src: source.src,
+                type: source.type
+              },
+              index
+            )
+          ),
+          parsedTracks.map(
+            (track, index) => typeof track === "string" ? /* @__PURE__ */ jsx(
+              "track",
+              {
+                src: track
+              },
+              index
+            ) : /* @__PURE__ */ jsx(
+              "track",
+              {
+                src: track.src,
+                kind: track.kind,
+                srcLang: track.srclang,
+                label: track.label,
+                default: track.default
+              },
+              index
+            )
+          ),
+          children
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: videoControlsClss, children: [
+      /* @__PURE__ */ jsx("button", { className: playBtnClss, onClick: handlePlayButtonClick, children: playBtnContent }),
+      /* @__PURE__ */ jsx("button", { className: pauseBtnClss, onClick: handlePauseButtonClick, children: pauseBtnContent }),
+      /* @__PURE__ */ jsx("button", { className: loudBtnClss, onClick: handleLoudButtonClick, children: loudBtnContent }),
+      /* @__PURE__ */ jsx("button", { className: muteBtnClss, onClick: handleMuteButtonClick, children: muteBtnContent }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          className: volumeRangeClss,
+          value: volumePercent,
+          onChange: handleVolumeRangeChange,
+          min: 0,
+          max: 100,
+          step: 1
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: volumePcntClss, children: volumePercent }),
+      /* @__PURE__ */ jsx("button", { className: fullScreenBtnClss, onClick: handleFullScreenButtonClick, children: fullScreenBtnContent }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          className: playbackRateRangeClss,
+          value: playbackRate,
+          onChange: handleRateRangeChange,
+          min: 0.25,
+          max: 4,
+          step: 0.25
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: playbackRateClss, children: playbackRate })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: timeControlsClss, children: [
+      /* @__PURE__ */ jsx("span", { className: currentTimeClss, children: formatTime(currentTimeMs, "mm:ss:ms") }),
+      /* @__PURE__ */ jsx("span", { className: totalTimeClss, children: formatTime(totalTimeMs, "mm:ss:ms") }),
+      /* @__PURE__ */ jsx("div", { className: timelineClss, onClick: handleTimelineClick })
+    ] }),
+    subtitles !== void 0 && /* @__PURE__ */ jsx(
+      Subtitles,
+      {
+        ...subtitles,
+        timecodeMs: currentTimeMs
+      }
+    )
+  ] });
+  const disclaimedContent = disclaimer !== void 0 ? /* @__PURE__ */ jsx(
+    Disclaimer,
+    {
+      ...disclaimer,
+      isOn: shouldDisclaimerBeOn,
+      actionHandlers: {
+        dismissClick: handleDisclaimerDismiss
+      },
+      children: sensitiveContent
+    }
+  ) : sensitiveContent;
+  const observedContent = autoLoudWhenVisible === true || autoMuteWhenHidden === true || autoPlayWhenVisible === true || autoPauseWhenHidden === true ? /* @__PURE__ */ jsx(IntersectionObserverComponent, { onIntersected: ({ ioEntry }) => {
+    const { isIntersecting = false } = ioEntry ?? {};
+    if (autoMuteWhenHidden === true && !isIntersecting) forceMute(videoRef.current, setIsLoud);
+    if (autoPauseWhenHidden === true && !isIntersecting) forcePause(videoRef.current, setIsPlaying);
+    if (autoPlayWhenVisible === true && !hasBeenAutoPlayed && !shouldDisclaimerBeOn && isIntersecting) void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
+    if (autoLoudWhenVisible === true && !hasBeenAutoPlayed && !shouldDisclaimerBeOn && isIntersecting) forceLoud(videoRef.current, setIsLoud);
+  }, children: disclaimedContent }) : disclaimedContent;
+  return /* @__PURE__ */ jsx(
+    "figure",
+    {
+      className: rootClss,
+      ...rootAttributes,
+      ref: $root,
+      style: rootStyles,
+      children: observedContent
+    }
+  );
+};
+export {
+  Video
+};

package/components/Video/utils.d.ts

@@ -0,0 +1,10 @@
+import type { Dispatch, SetStateAction } from 'react';
+export declare const muteAttributeWorkaround: (video: HTMLVideoElement | null, shouldMute: boolean, setIsSoundOn: Dispatch<SetStateAction<boolean>>) => void;
+export declare const forceMute: (video: HTMLVideoElement | null, setIsSoundOn: Dispatch<SetStateAction<boolean>>) => void;
+export declare const forceLoud: (video: HTMLVideoElement | null, setIsSoundOn: Dispatch<SetStateAction<boolean>>) => void;
+export declare const forcePlay: (video: HTMLVideoElement | null, shouldDisclaimerBeOn: boolean, setIsPlaying: Dispatch<SetStateAction<boolean>>) => Promise<void>;
+export declare const forcePause: (video: HTMLVideoElement | null, setIsPlaying: Dispatch<SetStateAction<boolean>>) => void;
+export declare const forceFullScreen: (video: HTMLVideoElement | null, shouldDisclaimerBeOn: boolean, setIsFullscreen: Dispatch<SetStateAction<boolean>>) => Promise<void>;
+export declare const forceExitFullScreen: (video: HTMLVideoElement | null, setIsFullscreen: Dispatch<SetStateAction<boolean>>) => Promise<void>;
+export declare function secondsToMs(seconds: number): number;
+export declare function formatTime(ms: number, format: string, fps?: number): string;

package/components/_WIP_AudioQuote/index.d.ts

@@ -0,0 +1 @@
+export {};

package/components/_WIP_Icon/index.d.ts

@@ -0,0 +1 @@
+export {};

package/components/index.d.ts

@@ -1,3 +1,17 @@
+export * as disclaimer from './Disclaimer/index.js'
+export * as drawer from './Drawer/index.js'
 export * as eventListener from './EventListener/index.js'
-export * as input from './Input/index.js'
+export * as gallery from './Gallery/index.js'
+export * as image from './Image/index.js'
 export * as intersectionObserver from './IntersectionObserver/index.js'
+export * as paginator from './Paginator/index.js'
+export * as resizeObserver from './ResizeObserver/index.js'
+export * as scrllgngn from './Scrllgngn/index.js'
+export * as sequencer from './Sequencer/index.js'
+export * as shadowRoot from './ShadowRoot/index.js'
+export * as subtitles from './Subtitles/index.js'
+export * as theatre from './Theatre/index.js'
+export * as video from './Video/index.js'
+export * as wipAudioQuote from './_WIP_AudioQuote/index.js'
+export * as wipIcon from './_WIP_Icon/index.js'
+export * as utils from './utils/index.js'