@design-edito/tools 0.4.4 → 0.4.6

package/components/Video/index.js

@@ -1,508 +1,297 @@
-import {
-  Subtitles
-} from "../../chunks/chunk-PYJKFOMV.js";
-import "../../chunks/chunk-YWSXCFYY.js";
-import "../../chunks/chunk-PUQUSA6S.js";
-import {
-  IntersectionObserverComponent
-} from "../../chunks/chunk-F2YJXIT7.js";
-import {
-  Disclaimer
-} from "../../chunks/chunk-XFB4PUXO.js";
-import "../../chunks/chunk-QXAJXTXV.js";
-import "../../chunks/chunk-HC6ZOHCS.js";
-import {
-  video
-} from "../../chunks/chunk-IEZ3O5OF.js";
-import {
-  clss
-} from "../../chunks/chunk-TRFZSKNB.js";
-import {
-  mergeClassNames
-} from "../../chunks/chunk-OFCSIK6J.js";
-import "../../chunks/chunk-WSFCRVEQ.js";
-
-// src/components/Video/index.tsx
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-
-// src/components/Video/utils.ts
-var muteAttributeWorkaround = (video2, shouldMute, setIsSoundOn) => {
-  if (video2 === null) return;
-  if (!shouldMute) return;
-  const currentMuted = video2.getAttribute("muted");
-  if (currentMuted !== null) return;
-  video2.setAttribute("muted", "");
-  video2.load();
-  setIsSoundOn(false);
-};
-var forceMute = (video2, setIsSoundOn) => {
-  if (video2 === null) return;
-  video2.muted = true;
-  setIsSoundOn(false);
-};
-var forceLoud = (video2, setIsSoundOn) => {
-  if (video2 === null) return;
-  video2.muted = false;
-  setIsSoundOn(true);
-};
-var forceVolume = (video2, volumePercent, setVolume) => {
-  if (video2 === null) return;
-  const volume = volumePercent / 100;
-  video2.volume = volume;
-  setVolume(volume);
-};
-var forceCurrentTime = (video2, time, setCurrentTime) => {
-  if (video2 === null) return;
-  video2.currentTime = time;
-  setCurrentTime(time);
-};
-var forcePlay = async (video2, shouldDisclaimerBeOn, setIsPlaying) => {
-  if (shouldDisclaimerBeOn) {
-    setIsPlaying(false);
-    return;
-  }
-  if (video2 === null) return;
-  try {
-    await video2.play();
-    setIsPlaying(true);
-  } catch (e) {
-    console.error(e);
-  }
-};
-var forcePause = (video2, setIsPlaying) => {
-  if (video2 === null) {
-    setIsPlaying(false);
-    return;
-  }
-  try {
-    video2.pause();
-    setIsPlaying(false);
-  } catch (e) {
-    console.error(e);
-  }
-};
-var forcePlaybackRate = (video2, rate, setPlaybackRate) => {
-  if (video2 === null) return;
-  video2.playbackRate = rate;
-  setPlaybackRate(rate);
-};
-var forceFullScreen = async (video2, shouldDisclaimerBeOn, setIsFullscreen) => {
-  if (shouldDisclaimerBeOn) return;
-  if (video2 === null) {
-    setIsFullscreen(false);
-    return;
-  }
-  try {
-    await video2.requestFullscreen();
-    setIsFullscreen(true);
-  } catch (e) {
-    setIsFullscreen(false);
-    console.error(e);
-  }
-};
-var forceExitFullScreen = async (video2, setIsFullscreen) => {
-  if (video2 === null || document.fullscreenElement !== video2) {
-    setIsFullscreen(false);
-    return;
-  }
-  try {
-    await document.exitFullscreen();
-    setIsFullscreen(false);
-  } catch (e) {
-    console.error(e);
-  }
-};
-function secondsToMs(seconds) {
-  return seconds * 1e3;
-}
-function formatTime(ms, format, fps = 25) {
-  const totalSeconds = Math.floor(ms / 1e3);
-  const hours = Math.floor(totalSeconds / 3600);
-  const minutes = Math.floor(totalSeconds % 3600 / 60);
-  const seconds = Math.floor(totalSeconds % 60);
-  const frames = Math.floor(ms % 1e3 / 1e3 * fps);
-  const msRest = Math.floor(ms % 1e3);
-  const tokens = {
-    hh: String(hours).padStart(2, "0"),
-    mm: String(minutes).padStart(2, "0"),
-    ss: String(seconds).padStart(2, "0"),
-    frame: String(frames).padStart(2, "0"),
-    ms: String(msRest).padStart(3, "0"),
-    h: hours,
-    m: minutes,
-    s: seconds,
-    f: frames
-  };
-  const result = Object.keys(tokens).sort((a, b) => b.length - a.length).reduce(
-    (acc, t) => acc.replace(new RegExp(t, "g"), String(tokens[t])),
-    format
-  );
-  return result;
-}
-var getTimelineClickProgress = (event, timeline, video2) => {
-  if (video2 === null || timeline === null) return 0;
-  const timelineRect = event.currentTarget.getBoundingClientRect();
-  const position = event.clientX - timelineRect.left;
-  const progress = Math.min(1, Math.max(0, position / timelineRect.width));
-  return progress;
-};
-
-// src/components/Video/index.tsx
-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,
-  actionHandlers,
-  stateHandlers,
-  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 video2 = videoRef.current;
-    muteAttributeWorkaround(
-      video2,
-      intrinsicVideoAttributes.muted ?? false,
-      setIsLoud
-    );
-    setTotalTime(video2.duration);
-    setPlaybackRate(video2.playbackRate);
-    setVolume(video2.volume);
-    setIsLoud(!video2.muted);
-    intrinsicVideoAttributes.onLoadedMetadata?.(e);
-  }, [intrinsicVideoAttributes.onLoadedMetadata, intrinsicVideoAttributes.muted]);
-  const handleVolumeChangeEvent = useCallback((e) => {
-    const volume2 = e.currentTarget.volume;
-    setVolume(volume2);
-    intrinsicVideoAttributes.onVolumeChange?.(e);
-  }, [intrinsicVideoAttributes.onVolumeChange]);
-  const handlePlayEvent = useCallback((e) => {
-    setIsPlaying(true);
-    setHasBeenAutoPlayed(true);
-    intrinsicVideoAttributes.onPlay?.(e);
-  }, [intrinsicVideoAttributes.onPlay]);
-  const handlePauseEvent = useCallback((e) => {
-    setIsPlaying(false);
-    intrinsicVideoAttributes.onPause?.(e);
-  }, [intrinsicVideoAttributes.onPause]);
-  const handleRateChangeEvent = useCallback((e) => {
-    const currentRate = e.currentTarget.playbackRate;
-    setPlaybackRate(currentRate);
-    intrinsicVideoAttributes.onRateChange?.(e);
-  }, [intrinsicVideoAttributes.onRateChange]);
-  const handleTimeUpdateEvent = useCallback((e) => {
-    const currentTime2 = e.currentTarget.currentTime;
-    setCurrentTime(currentTime2);
-    intrinsicVideoAttributes?.onTimeUpdate?.(e);
-  }, [totalTime, intrinsicVideoAttributes.onTimeUpdate]);
-  const handleVolumeRangeChange = useCallback((e) => {
-    const targetVolume = Number(e.currentTarget.value);
-    actionHandlers?.volumeRangeChange?.(e, targetVolume, volume, videoRef.current);
-    forceVolume(videoRef.current, targetVolume, setVolume);
-  }, [actionHandlers?.volumeRangeChange, volume]);
-  const handleLoudButtonClick = useCallback((e) => {
-    actionHandlers?.loudButtonClick?.(e, isLoud, videoRef.current);
-    forceLoud(videoRef.current, setIsLoud);
-  }, [actionHandlers?.loudButtonClick, isLoud]);
-  const handleMuteButtonClick = useCallback((e) => {
-    actionHandlers?.muteButtonClick?.(e, isLoud, videoRef.current);
-    forceMute(videoRef.current, setIsLoud);
-  }, [actionHandlers?.muteButtonClick, isLoud]);
-  const handlePlayButtonClick = useCallback((e) => {
-    actionHandlers?.playButtonClick?.(e, isPlaying, videoRef.current);
-    void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
-  }, [actionHandlers?.playButtonClick, isPlaying, shouldDisclaimerBeOn]);
-  const handlePauseButtonClick = useCallback((e) => {
-    actionHandlers?.pauseButtonClick?.(e, isPlaying, videoRef.current);
-    forcePause(videoRef.current, setIsPlaying);
-  }, [actionHandlers?.pauseButtonClick, isPlaying]);
-  const handleFullScreenButtonClick = useCallback((e) => {
-    actionHandlers?.fullscreenButtonClick?.(e, isFullScreen, videoRef.current);
-    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);
-    actionHandlers?.rateRangeChange?.(e, rate, playbackRate, videoRef.current);
-    forcePlaybackRate(videoRef.current, rate, setPlaybackRate);
-  }, [actionHandlers?.rateRangeChange, playbackRate]);
-  const handleTimelineClick = useCallback((e) => {
-    const progress = getTimelineClickProgress(e, e.currentTarget, videoRef.current);
-    const time = progress * totalTime;
-    actionHandlers?.timelineClick?.(e, time, currentTime, videoRef.current);
-    forceCurrentTime(videoRef.current, time, setCurrentTime);
-  }, [actionHandlers?.timelineClick, totalTime, currentTime]);
-  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);
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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, forceVolume, forceCurrentTime, getTimelineClickProgress, forcePlaybackRate } from './utils.js';
+import cssModule from './styles.module.css';
+/**
+ * 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 const Video = ({ sources, tracks, playBtnContent, pauseBtnContent, loudBtnContent, muteBtnContent, fullScreenBtnContent, subtitles, disclaimer, autoPlayWhenVisible, autoPauseWhenHidden, autoLoudWhenVisible, autoMuteWhenHidden, actionHandlers, stateHandlers, children, className, ...intrinsicVideoAttributes }) => {
+    // State & refs
+    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 !== undefined && disclaimer.defaultIsOn === undefined));
+    let shouldDisclaimerBeOn = isDisclaimerOn;
+    if (disclaimer?.isOn === true) {
+        shouldDisclaimerBeOn = true;
     }
-  }, [
-    shouldDisclaimerBeOn,
-    intrinsicVideoAttributes,
-    hasBeenAutoPlayed
-  ]);
-  useEffect(() => {
-    stateHandlers?.isPlaying?.(isPlaying);
-  }, [isPlaying, stateHandlers?.isPlaying]);
-  useEffect(() => {
-    stateHandlers?.isFullScreen?.(isFullScreen);
-  }, [isFullScreen, stateHandlers?.isFullScreen]);
-  useEffect(() => {
-    stateHandlers?.isLoud?.(isLoud);
-  }, [isLoud, stateHandlers?.isLoud]);
-  useEffect(() => {
-    stateHandlers?.volume?.(volume);
-  }, [volume, stateHandlers?.volume]);
-  useEffect(() => {
-    stateHandlers?.playbackRate?.(playbackRate);
-  }, [playbackRate, stateHandlers?.playbackRate]);
-  useEffect(() => {
-    stateHandlers?.currentTime?.(currentTime);
-  }, [currentTime, stateHandlers?.currentTime]);
-  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;
+    if (disclaimer?.isOn === false) {
+        shouldDisclaimerBeOn = false;
     }
-    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(video, { 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 = {
-    [`--${video}-elapsed-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
+    const currentTimeMs = secondsToMs(currentTime);
+    const totalTimeMs = useMemo(() => secondsToMs(totalTime), [totalTime]);
+    const volumePercent = useMemo(() => volume * 100, [volume]);
+    const videoRef = useRef(null);
+    const $root = useRef(null);
+    // Intrinsic event handlers
+    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);
+    }, [intrinsicVideoAttributes.onLoadedMetadata, intrinsicVideoAttributes.muted]);
+    const handleVolumeChangeEvent = useCallback((e) => {
+        const volume = e.currentTarget.volume;
+        setVolume(volume);
+        intrinsicVideoAttributes.onVolumeChange?.(e);
+    }, [intrinsicVideoAttributes.onVolumeChange]);
+    const handlePlayEvent = useCallback((e) => {
+        setIsPlaying(true);
+        setHasBeenAutoPlayed(true);
+        intrinsicVideoAttributes.onPlay?.(e);
+    }, [intrinsicVideoAttributes.onPlay]);
+    const handlePauseEvent = useCallback((e) => {
+        setIsPlaying(false);
+        intrinsicVideoAttributes.onPause?.(e);
+    }, [intrinsicVideoAttributes.onPause]);
+    const handleRateChangeEvent = useCallback((e) => {
+        const currentRate = e.currentTarget.playbackRate;
+        setPlaybackRate(currentRate);
+        intrinsicVideoAttributes.onRateChange?.(e);
+    }, [intrinsicVideoAttributes.onRateChange]);
+    const handleTimeUpdateEvent = useCallback((e) => {
+        const currentTime = e.currentTarget.currentTime;
+        setCurrentTime(currentTime);
+        intrinsicVideoAttributes?.onTimeUpdate?.(e);
+    }, [totalTime, intrinsicVideoAttributes.onTimeUpdate]);
+    // User action handlers
+    const handleVolumeRangeChange = useCallback((e) => {
+        const targetVolume = Number(e.currentTarget.value);
+        actionHandlers?.volumeRangeChange?.(e, targetVolume, volume, videoRef.current);
+        forceVolume(videoRef.current, targetVolume, setVolume);
+    }, [actionHandlers?.volumeRangeChange, volume]);
+    const handleLoudButtonClick = useCallback((e) => {
+        actionHandlers?.loudButtonClick?.(e, isLoud, videoRef.current);
+        forceLoud(videoRef.current, setIsLoud);
+    }, [actionHandlers?.loudButtonClick, isLoud]);
+    const handleMuteButtonClick = useCallback((e) => {
+        actionHandlers?.muteButtonClick?.(e, isLoud, videoRef.current);
+        forceMute(videoRef.current, setIsLoud);
+    }, [actionHandlers?.muteButtonClick, isLoud]);
+    const handlePlayButtonClick = useCallback((e) => {
+        actionHandlers?.playButtonClick?.(e, isPlaying, videoRef.current);
+        void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
+    }, [actionHandlers?.playButtonClick, isPlaying, shouldDisclaimerBeOn]);
+    const handlePauseButtonClick = useCallback((e) => {
+        actionHandlers?.pauseButtonClick?.(e, isPlaying, videoRef.current);
+        forcePause(videoRef.current, setIsPlaying);
+    }, [actionHandlers?.pauseButtonClick, isPlaying]);
+    const handleFullScreenButtonClick = useCallback((e) => {
+        actionHandlers?.fullscreenButtonClick?.(e, isFullScreen, videoRef.current);
+        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);
+        actionHandlers?.rateRangeChange?.(e, rate, playbackRate, videoRef.current);
+        forcePlaybackRate(videoRef.current, rate, setPlaybackRate);
+    }, [actionHandlers?.rateRangeChange, playbackRate]);
+    const handleTimelineClick = useCallback((e) => {
+        const progress = getTimelineClickProgress(e, e.currentTarget, videoRef.current);
+        const time = progress * totalTime;
+        actionHandlers?.timelineClick?.(e, time, currentTime, videoRef.current);
+        forceCurrentTime(videoRef.current, time, setCurrentTime);
+    }, [actionHandlers?.timelineClick, totalTime, currentTime]);
+    // Disclaimer handlers
+    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);
         }
-      ),
-      /* @__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
+        else if (intrinsicVideoAttributes.autoPlay === true) {
+            if (videoRef.current === null)
+                return;
+            if (hasBeenAutoPlayed)
+                return;
+            if (videoRef.current.paused)
+                void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
         }
-      ),
-      /* @__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
+    }, [
+        shouldDisclaimerBeOn,
+        intrinsicVideoAttributes,
+        hasBeenAutoPlayed
+    ]);
+    useEffect(() => {
+        stateHandlers?.isPlaying?.(isPlaying);
+    }, [isPlaying, stateHandlers?.isPlaying]);
+    useEffect(() => {
+        stateHandlers?.isFullScreen?.(isFullScreen);
+    }, [isFullScreen, stateHandlers?.isFullScreen]);
+    useEffect(() => {
+        stateHandlers?.isLoud?.(isLoud);
+    }, [isLoud, stateHandlers?.isLoud]);
+    useEffect(() => {
+        stateHandlers?.volume?.(volume);
+    }, [volume, stateHandlers?.volume]);
+    useEffect(() => {
+        stateHandlers?.playbackRate?.(playbackRate);
+    }, [playbackRate, stateHandlers?.playbackRate]);
+    useEffect(() => {
+        stateHandlers?.currentTime?.(currentTime);
+    }, [currentTime, stateHandlers?.currentTime]);
+    // Parsing sources & tracks props
+    const parsedSources = useMemo(() => {
+        if (sources === undefined)
+            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 === undefined)
+            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]);
+    // Rendering
+    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 ? '' : undefined,
+        'data-play-off': !isPlaying ? '' : undefined,
+        'data-fullscreen-on': isFullScreen ? '' : undefined,
+        'data-fullscreen-off': !isFullScreen ? '' : undefined,
+        'data-loud': isLoud ? '' : undefined,
+        'data-muted': !isLoud ? '' : undefined,
+        '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}-elapsed-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 = _jsxs(_Fragment, { children: [_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'
+                        ? _jsx("source", { src: source }, index)
+                        : _jsx("source", { src: source.src, type: source.type }, index)), parsedTracks.map((track, index) => typeof track === 'string'
+                        ? _jsx("track", { src: track }, index)
+                        : _jsx("track", { src: track.src, kind: track.kind, srcLang: track.srclang, label: track.label, default: track.default }, index)), children] }), _jsxs("div", { className: videoControlsClss, children: [_jsx("button", { className: playBtnClss, onClick: handlePlayButtonClick, children: playBtnContent }), _jsx("button", { className: pauseBtnClss, onClick: handlePauseButtonClick, children: pauseBtnContent }), _jsx("button", { className: loudBtnClss, onClick: handleLoudButtonClick, children: loudBtnContent }), _jsx("button", { className: muteBtnClss, onClick: handleMuteButtonClick, children: muteBtnContent }), _jsx("input", { type: "range", className: volumeRangeClss, value: volumePercent, onChange: handleVolumeRangeChange, min: 0, max: 100, step: 1 }), _jsx("span", { className: volumePcntClss, children: volumePercent }), _jsx("button", { className: fullScreenBtnClss, onClick: handleFullScreenButtonClick, children: fullScreenBtnContent }), _jsx("input", { type: "range", className: playbackRateRangeClss, value: playbackRate, onChange: handleRateRangeChange, min: 0.25, max: 4, step: 0.25 }), _jsx("span", { className: playbackRateClss, children: playbackRate })] }), _jsxs("div", { className: timeControlsClss, children: [_jsx("span", { className: currentTimeClss, children: formatTime(currentTimeMs, 'mm:ss:ms') }), _jsx("span", { className: totalTimeClss, children: formatTime(totalTimeMs, 'mm:ss:ms') }), _jsx("div", { className: timelineClss, onClick: handleTimelineClick })] }), subtitles !== undefined && _jsx(Subtitles, { ...subtitles, timecodeMs: currentTimeMs })] });
+    const disclaimedContent = disclaimer !== undefined
+        ? _jsx(Disclaimer, { ...disclaimer, isOn: shouldDisclaimerBeOn, actionHandlers: {
+                dismissClick: handleDisclaimerDismiss
+            }, children: sensitiveContent })
+        : sensitiveContent;
+    const observedContent = autoLoudWhenVisible === true
+        || autoMuteWhenHidden === true
+        || autoPlayWhenVisible === true
+        || autoPauseWhenHidden === true
+        ? _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 _jsx("figure", { className: rootClss, ...rootAttributes, ref: $root, style: rootStyles, children: observedContent });
 };