@design-edito/tools 0.4.5 → 0.4.11

package/components/Video/index.js

@@ -1,862 +1,297 @@
-// src/components/Video/index.tsx
-import {
-  useCallback as useCallback3,
-  useEffect as useEffect4,
-  useMemo,
-  useRef as useRef4,
-  useState as useState4
-} from "react";
-
-// src/agnostic/css/clss/index.ts
-function clss(blockNames, options) {
-  const blockNamesArr = Array.isArray(blockNames) ? blockNames : [blockNames];
-  return (eltNames = null, modNames = []) => {
-    const eltNamesArr = Array.isArray(eltNames) ? eltNames : [eltNames];
-    const modNamesArr = (Array.isArray(modNames) ? modNames : [modNames]).map((modName) => {
-      if (typeof modName === "string") return modName;
-      const trueModNames = Object.entries(modName).filter((entry) => entry[1] === true).map(([key]) => key);
-      return trueModNames;
-    }).flat();
-    const outputClassesArr = [];
-    blockNamesArr.forEach((compName) => {
-      eltNamesArr.forEach((eltName) => {
-        const targetPublicClss = eltName === null ? compName : `${compName}__${eltName}`;
-        const targetPrivateClss = eltName === null ? options?.cssModule[options.cssModuleRoot ?? "root"] : options?.cssModule[eltName];
-        outputClassesArr.push(targetPublicClss);
-        if (targetPrivateClss !== void 0) outputClassesArr.push(targetPrivateClss);
-        modNamesArr.forEach((modName) => {
-          const targetModifiedPublicClss = `${targetPublicClss}--${modName}`;
-          const targetModifiedPrivateClss = eltName === null ? options?.cssModule[`${options.cssModuleRoot ?? "root"}--${modName}`] : options?.cssModule[`${eltName}--${modName}`];
-          outputClassesArr.push(targetModifiedPublicClss);
-          if (targetModifiedPrivateClss !== void 0) outputClassesArr.push(targetModifiedPrivateClss);
-        });
-      });
-    });
-    return outputClassesArr.join(" ");
-  };
-}
-
-// src/components/Disclaimer/index.tsx
-import {
-  useState,
-  useEffect,
-  useRef
-} from "react";
-
-// src/components/utils/index.tsx
-function mergeClassNames(...names) {
-  return names.map((name) => {
-    if (typeof name !== "string" && !Array.isArray(name)) return false;
-    if (Array.isArray(name)) return mergeClassNames(...name);
-    if (name.trim() === "") return false;
-    return name.trim();
-  }).filter((name) => typeof name === "string").join(" ");
-}
-
-// src/components/public-classnames.ts
-var disclaimer = "dsed-disclaimer";
-var intersectionObserver = "dsed-intersection-observer";
-var subtitles = "dsed-subtitles";
-var video = "dsed-video";
-
-// src/components/Disclaimer/index.tsx
-import cssModule from "./styles.module.css";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Disclaimer = ({
-  content,
-  togglerContent,
-  isOn: isOnProp,
-  defaultIsOn: defaultIsOnProp,
-  stateHandlers,
-  actionHandlers,
-  children,
-  className
-}) => {
-  const [internalIsOn, setInternalIsOn] = useState(isOnProp ?? defaultIsOnProp ?? true);
-  const isOn = isOnProp ?? internalIsOn;
-  const pIsOn = useRef(isOn);
-  useEffect(() => {
-    if (pIsOn.current === isOn) return;
-    stateHandlers?.toggled?.(isOn);
-    pIsOn.current = isOn;
-  }, [isOn]);
-  const handleDismissClick = () => {
-    actionHandlers?.dismissClick?.(isOn);
-    if (isOnProp !== void 0) return;
-    setInternalIsOn(false);
-  };
-  const c = clss(disclaimer, { cssModule });
-  const rootClss = mergeClassNames(
-    c(null, {
-      on: isOn,
-      off: !isOn
-    }),
-    className
-  );
-  const panelClss = c("panel");
-  const contentClss = c("content");
-  const btnClss = c("toggler");
-  const sensitiveClss = c("sensitive");
-  return /* @__PURE__ */ jsxs("div", { className: rootClss, children: [
-    /* @__PURE__ */ jsxs("div", { className: panelClss, children: [
-      content !== void 0 && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: contentClss,
-          children: content
-        }
-      ),
-      togglerContent !== void 0 && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: btnClss,
-          onClick: handleDismissClick,
-          children: togglerContent
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: sensitiveClss, children })
-  ] });
-};
-
-// src/components/IntersectionObserver/index.tsx
-import {
-  useState as useState2,
-  useRef as useRef2,
-  useEffect as useEffect2,
-  useCallback
-} from "react";
-import cssModule2 from "./styles.module.css";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var IntersectionObserverComponent = ({
-  onIntersected,
-  root,
-  rootMargin,
-  threshold,
-  className,
-  children
-}) => {
-  const [ioEntry, setIoEntry] = useState2(null);
-  const rootRef = useRef2(null);
-  const observerRef = useRef2(null);
-  const observation = useCallback((entries, observer) => {
-    const thisEntry = entries[0];
-    if (thisEntry === void 0) return setIoEntry(null);
-    onIntersected?.({ ioEntry: thisEntry, observer });
-    setIoEntry(thisEntry);
-  }, [onIntersected]);
-  const forceObservation = useCallback(() => {
-    const rootEl = rootRef.current;
-    const observer = observerRef.current;
-    if (rootEl === null || observer === null) return;
-    observer.unobserve(rootEl);
-    observer.observe(rootEl);
-  }, []);
-  useEffect2(() => {
-    const rootEl = rootRef.current;
-    if (rootEl === null) return console.warn("rootRef.current should not be null");
-    const observer = new IntersectionObserver(observation, { root, rootMargin, threshold });
-    observerRef.current = observer;
-    observer.observe(rootEl);
-    return () => observer.disconnect();
-  }, [root, rootMargin, threshold, observation]);
-  useEffect2(() => {
-    const timeout1 = window.setTimeout(forceObservation, 100);
-    const timeout2 = window.setTimeout(forceObservation, 500);
-    return () => {
-      window.clearTimeout(timeout1);
-      window.clearTimeout(timeout2);
-    };
-  }, [forceObservation]);
-  const c = clss(intersectionObserver, { cssModule: cssModule2 });
-  const isIntersecting = ioEntry?.isIntersecting ?? false;
-  const rootClss = mergeClassNames(
-    c(null, { "is-intersecting": isIntersecting }),
-    className
-  );
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      className: rootClss,
-      ref: rootRef,
-      children
-    }
-  );
-};
-
-// src/components/Subtitles/index.tsx
-import {
-  useCallback as useCallback2,
-  useEffect as useEffect3,
-  useRef as useRef3,
-  useState as useState3
-} from "react";
-
-// src/agnostic/misc/is-nullish/index.ts
-var nullishValues = [null, void 0];
-
-// src/agnostic/booleans/is-falsy/index.ts
-var falsyValues = [...nullishValues, false, "", 0, -0, NaN];
-if (typeof BigInt === "function") falsyValues.push(BigInt(0));
-
-// src/agnostic/misc/cast/index.ts
-function toString(value) {
-  if (typeof value === "string") return value;
-  return String(value);
-}
-function toError(value) {
-  if (value instanceof Error) return value;
-  if (typeof value === "string") return new Error(value);
-  return new Error(toString(value));
-}
-
-// src/agnostic/errors/unknown-to-string/index.ts
-function unknownToString(unk, encoding) {
-  if (unk instanceof Error) return unk.message;
-  if (unk instanceof Buffer) return unk.toString(encoding ?? "utf-8");
-  if (typeof unk === "string") return unk;
-  if (typeof unk === "object" && unk !== null) return JSON.stringify(unk);
-  return `${unk}`;
-}
-
-// src/components/Subtitles/utils.ts
-var getTimecodeToMs = (timecode) => {
-  const [hours = "0", minutes = "0", secondsAndMs = "0,0"] = timecode.split(":");
-  const [seconds = "0", milliseconds = "0"] = secondsAndMs.split(",");
-  let result = parseInt(hours) * 60 * 60 * 1e3;
-  result += parseInt(minutes) * 60 * 1e3;
-  result += parseInt(seconds) * 1e3;
-  result += parseInt(milliseconds);
-  return result;
-};
-var parseSubs = (rawSubs) => {
-  const numberRegex = /^\d+$/;
-  const timecodeRegex = /^[0-9]+:[0-9]+:[0-9]+,[0-9]+\s*-->\s*[0-9]+:[0-9]+:[0-9]+,[0-9]+$/;
-  const parsedSubs = [];
-  rawSubs.split("\n").forEach((line) => {
-    if (line.trim() === "") return;
-    const lastParsedSub = parsedSubs[parsedSubs.length - 1];
-    const matchId = line.match(numberRegex);
-    const matchTimecode = line.match(timecodeRegex);
-    if (matchId !== null) {
-      if (lastParsedSub === void 0 || lastParsedSub.content !== void 0) {
-        const parsedSub = { id: parseInt(line) };
-        parsedSubs.push(parsedSub);
-        return;
-      }
-    }
-    if (matchTimecode !== null) {
-      if (lastParsedSub?.id !== void 0) {
-        const [rawStart = "", rawEnd = ""] = line.split("-->");
-        const startTime = rawStart.trim();
-        const endTime = rawEnd.trim();
-        lastParsedSub.start = getTimecodeToMs(startTime);
-        lastParsedSub.end = getTimecodeToMs(endTime);
-        return;
-      }
-    }
-    if (lastParsedSub?.id !== void 0 && lastParsedSub?.start !== void 0 && lastParsedSub?.end !== void 0) {
-      if (lastParsedSub?.content !== void 0) {
-        lastParsedSub.content += "\n" + line;
-        return;
-      }
-      lastParsedSub.content = line;
-    }
-  });
-  return parsedSubs;
-};
-var computeSubGroupsWithBoundaries = (subsGroups, highestSubId) => {
-  const fallback = [{ startId: 1, endId: highestSubId }];
-  if (subsGroups === void 0 || subsGroups.length === 0) return fallback;
-  const emptySubGroupBoundaries = [];
-  return subsGroups?.reduce(
-    (acc, curr, currIndex) => {
-      const lastInAcc = acc[acc.length - 1];
-      const startId = lastInAcc === void 0 ? 1 : lastInAcc.endId + 1;
-      const endId = curr;
-      if (currIndex === (subsGroups?.length ?? 0) - 1 && endId !== highestSubId) {
-        return [
-          ...acc,
-          { startId, endId },
-          { startId: endId + 1, endId: highestSubId }
-        ];
-      }
-      return [...acc, { startId, endId }];
-    },
-    emptySubGroupBoundaries
-  ) ?? fallback;
-};
-var getCurrentGroup = (subsGroupsWithBoundaries, lastPrevSubId, isEnded) => {
-  const previousGroups = subsGroupsWithBoundaries.filter((group) => group.startId <= (lastPrevSubId ?? 0));
-  if (previousGroups.length === 0) return isEnded === true ? subsGroupsWithBoundaries[subsGroupsWithBoundaries.length - 1] : subsGroupsWithBoundaries[0];
-  return previousGroups[previousGroups.length - 1];
-};
-
-// src/components/Subtitles/index.tsx
-import cssModule3 from "./styles.module.css";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Subtitles = ({
-  src,
-  srtFileContent,
-  subsGroups,
-  timecodeMs,
-  isEnded,
-  className,
-  onLoaded,
-  onParsed,
-  onLoadFailed
-}) => {
-  const [isLoading, setIsLoading] = useState3(false);
-  const [loadError, setLoadError] = useState3(null);
-  const [parsedSubs, setParsedSubs] = useState3([]);
-  const pParsedSubs = useRef3(parsedSubs);
-  useEffect3(() => {
-    if (pParsedSubs.current === parsedSubs) return;
-    onParsed?.(parsedSubs);
-  }, [parsedSubs]);
-  const fetchAndParseSubs = useCallback2(async (src2, srtFileContent2) => {
-    if (src2 === void 0) return;
-    if (srtFileContent2 !== void 0) return setParsedSubs(parseSubs(srtFileContent2));
-    setIsLoading(true);
-    setLoadError(null);
-    try {
-      const response = await fetch(src2);
-      const srtContent = await response.text();
-      onLoaded?.(srtContent);
-      const parsedSubs2 = parseSubs(srtContent);
-      setParsedSubs(parsedSubs2);
-    } catch (error) {
-      setLoadError(error instanceof Error ? error : new Error(unknownToString(error)));
-      console.error(error);
-      onLoadFailed?.(toError(error));
-    } finally {
-      setIsLoading(false);
-    }
-  }, [onLoadFailed, onLoaded]);
-  useEffect3(() => {
-    fetchAndParseSubs(src, srtFileContent).catch((error) => {
-      console.error(error);
-    });
-  }, [fetchAndParseSubs, src, srtFileContent]);
-  const c = clss(subtitles, { cssModule: cssModule3 });
-  const rootClss = mergeClassNames(
-    c(null, {
-      loading: isLoading,
-      error: loadError !== null
-    }),
-    className
-  );
-  const prevSubs = parsedSubs.filter(({ start }) => start != null && start < (timecodeMs ?? 0));
-  const lastPrevSub = prevSubs[prevSubs.length - 1];
-  const highestSubId = Math.max(...parsedSubs.map((sub) => sub.id));
-  const subsGroupsWithBoundaries = computeSubGroupsWithBoundaries(subsGroups, highestSubId);
-  const currentGroup = getCurrentGroup(subsGroupsWithBoundaries, lastPrevSub?.id, isEnded);
-  return /* @__PURE__ */ jsx3("div", { className: rootClss, children: timecodeMs !== void 0 && parsedSubs.length > 0 && subsGroupsWithBoundaries.map((group) => {
-    const groupSubs = parsedSubs.filter((sub) => sub.id >= group.startId && sub.id <= group.endId);
-    const totalSubs = groupSubs.length;
-    const groupClass = c("group", { curr: currentGroup?.startId === group.startId });
-    const subsNodes = groupSubs.map((sub, subIndex) => {
-      let subText = sub.content?.trim() ?? "";
-      if (subIndex !== totalSubs - 1) subText += " ";
-      const subClass = c("sub", {
-        prev: sub.start !== void 0 && lastPrevSub?.start !== void 0 && sub.start <= lastPrevSub.start,
-        curr: sub.start !== void 0 && timecodeMs >= sub.start && sub.end !== void 0 && timecodeMs <= sub.end
-      });
-      return /* @__PURE__ */ jsx3(
-        "span",
-        {
-          className: subClass,
-          "data-sub-pos": sub.id,
-          children: subText
-        },
-        sub.id
-      );
-    });
-    return /* @__PURE__ */ jsx3(
-      "div",
-      {
-        className: groupClass,
-        "data-start-sub-pos": group.startId,
-        "data-end-sub-pos": group.endId,
-        children: subsNodes
-      },
-      group.startId
-    );
-  }) });
-};
-
-// 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 cssModule4 from "./styles.module.css";
-import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var Video = ({
-  sources,
-  tracks,
-  playBtnContent,
-  pauseBtnContent,
-  loudBtnContent,
-  muteBtnContent,
-  fullScreenBtnContent,
-  subtitles: subtitles2,
-  disclaimer: disclaimer2,
-  autoPlayWhenVisible,
-  autoPauseWhenHidden,
-  autoLoudWhenVisible,
-  autoMuteWhenHidden,
-  actionHandlers,
-  stateHandlers,
-  children,
-  className,
-  ...intrinsicVideoAttributes
-}) => {
-  const [isPlaying, setIsPlaying] = useState4(false);
-  const [isFullScreen, setIsFullScreen] = useState4(false);
-  const [isLoud, setIsLoud] = useState4(false);
-  const [currentTime, setCurrentTime] = useState4(0);
-  const [totalTime, setTotalTime] = useState4(0);
-  const [volume, setVolume] = useState4(0);
-  const [playbackRate, setPlaybackRate] = useState4(0);
-  const [hasBeenAutoPlayed, setHasBeenAutoPlayed] = useState4(false);
-  const [isDisclaimerOn, setIsDisclaimerOn] = useState4(
-    disclaimer2?.isOn === true || disclaimer2?.defaultIsOn === true || disclaimer2 !== void 0 && disclaimer2.defaultIsOn === void 0
-  );
-  let shouldDisclaimerBeOn = isDisclaimerOn;
-  if (disclaimer2?.isOn === true) {
-    shouldDisclaimerBeOn = true;
-  }
-  if (disclaimer2?.isOn === false) {
-    shouldDisclaimerBeOn = false;
-  }
-  const currentTimeMs = secondsToMs(currentTime);
-  const totalTimeMs = useMemo(() => secondsToMs(totalTime), [totalTime]);
-  const volumePercent = useMemo(() => volume * 100, [volume]);
-  const videoRef = useRef4(null);
-  const $root = useRef4(null);
-  const handleMetadataLoadEvent = useCallback3((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 = useCallback3((e) => {
-    const volume2 = e.currentTarget.volume;
-    setVolume(volume2);
-    intrinsicVideoAttributes.onVolumeChange?.(e);
-  }, [intrinsicVideoAttributes.onVolumeChange]);
-  const handlePlayEvent = useCallback3((e) => {
-    setIsPlaying(true);
-    setHasBeenAutoPlayed(true);
-    intrinsicVideoAttributes.onPlay?.(e);
-  }, [intrinsicVideoAttributes.onPlay]);
-  const handlePauseEvent = useCallback3((e) => {
-    setIsPlaying(false);
-    intrinsicVideoAttributes.onPause?.(e);
-  }, [intrinsicVideoAttributes.onPause]);
-  const handleRateChangeEvent = useCallback3((e) => {
-    const currentRate = e.currentTarget.playbackRate;
-    setPlaybackRate(currentRate);
-    intrinsicVideoAttributes.onRateChange?.(e);
-  }, [intrinsicVideoAttributes.onRateChange]);
-  const handleTimeUpdateEvent = useCallback3((e) => {
-    const currentTime2 = e.currentTarget.currentTime;
-    setCurrentTime(currentTime2);
-    intrinsicVideoAttributes?.onTimeUpdate?.(e);
-  }, [totalTime, intrinsicVideoAttributes.onTimeUpdate]);
-  const handleVolumeRangeChange = useCallback3((e) => {
-    const targetVolume = Number(e.currentTarget.value);
-    actionHandlers?.volumeRangeChange?.(e, targetVolume, volume, videoRef.current);
-    forceVolume(videoRef.current, targetVolume, setVolume);
-  }, [actionHandlers?.volumeRangeChange, volume]);
-  const handleLoudButtonClick = useCallback3((e) => {
-    actionHandlers?.loudButtonClick?.(e, isLoud, videoRef.current);
-    forceLoud(videoRef.current, setIsLoud);
-  }, [actionHandlers?.loudButtonClick, isLoud]);
-  const handleMuteButtonClick = useCallback3((e) => {
-    actionHandlers?.muteButtonClick?.(e, isLoud, videoRef.current);
-    forceMute(videoRef.current, setIsLoud);
-  }, [actionHandlers?.muteButtonClick, isLoud]);
-  const handlePlayButtonClick = useCallback3((e) => {
-    actionHandlers?.playButtonClick?.(e, isPlaying, videoRef.current);
-    void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
-  }, [actionHandlers?.playButtonClick, isPlaying, shouldDisclaimerBeOn]);
-  const handlePauseButtonClick = useCallback3((e) => {
-    actionHandlers?.pauseButtonClick?.(e, isPlaying, videoRef.current);
-    forcePause(videoRef.current, setIsPlaying);
-  }, [actionHandlers?.pauseButtonClick, isPlaying]);
-  const handleFullScreenButtonClick = useCallback3((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 = useCallback3((e) => {
-    const rate = Number(e.currentTarget.value);
-    actionHandlers?.rateRangeChange?.(e, rate, playbackRate, videoRef.current);
-    forcePlaybackRate(videoRef.current, rate, setPlaybackRate);
-  }, [actionHandlers?.rateRangeChange, playbackRate]);
-  const handleTimelineClick = useCallback3((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 = useCallback3(() => {
-    setIsDisclaimerOn(false);
-    if (intrinsicVideoAttributes.autoPlay === true && !hasBeenAutoPlayed) void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
-  }, [disclaimer2, intrinsicVideoAttributes.autoPlay, shouldDisclaimerBeOn]);
-  useEffect4(() => {
-    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
-  ]);
-  useEffect4(() => {
-    stateHandlers?.isPlaying?.(isPlaying);
-  }, [isPlaying, stateHandlers?.isPlaying]);
-  useEffect4(() => {
-    stateHandlers?.isFullScreen?.(isFullScreen);
-  }, [isFullScreen, stateHandlers?.isFullScreen]);
-  useEffect4(() => {
-    stateHandlers?.isLoud?.(isLoud);
-  }, [isLoud, stateHandlers?.isLoud]);
-  useEffect4(() => {
-    stateHandlers?.volume?.(volume);
-  }, [volume, stateHandlers?.volume]);
-  useEffect4(() => {
-    stateHandlers?.playbackRate?.(playbackRate);
-  }, [playbackRate, stateHandlers?.playbackRate]);
-  useEffect4(() => {
-    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: cssModule4 });
-  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__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsxs2(
-      "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__ */ jsx4(
-              "source",
-              {
-                src: source
-              },
-              index
-            ) : /* @__PURE__ */ jsx4(
-              "source",
-              {
-                src: source.src,
-                type: source.type
-              },
-              index
-            )
-          ),
-          parsedTracks.map(
-            (track, index) => typeof track === "string" ? /* @__PURE__ */ jsx4(
-              "track",
-              {
-                src: track
-              },
-              index
-            ) : /* @__PURE__ */ jsx4(
-              "track",
-              {
-                src: track.src,
-                kind: track.kind,
-                srcLang: track.srclang,
-                label: track.label,
-                default: track.default
-              },
-              index
-            )
-          ),
-          children
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs2("div", { className: videoControlsClss, children: [
-      /* @__PURE__ */ jsx4("button", { className: playBtnClss, onClick: handlePlayButtonClick, children: playBtnContent }),
-      /* @__PURE__ */ jsx4("button", { className: pauseBtnClss, onClick: handlePauseButtonClick, children: pauseBtnContent }),
-      /* @__PURE__ */ jsx4("button", { className: loudBtnClss, onClick: handleLoudButtonClick, children: loudBtnContent }),
-      /* @__PURE__ */ jsx4("button", { className: muteBtnClss, onClick: handleMuteButtonClick, children: muteBtnContent }),
-      /* @__PURE__ */ jsx4(
-        "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__ */ jsx4("span", { className: volumePcntClss, children: volumePercent }),
-      /* @__PURE__ */ jsx4("button", { className: fullScreenBtnClss, onClick: handleFullScreenButtonClick, children: fullScreenBtnContent }),
-      /* @__PURE__ */ jsx4(
-        "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__ */ jsx4("span", { className: playbackRateClss, children: playbackRate })
-    ] }),
-    /* @__PURE__ */ jsxs2("div", { className: timeControlsClss, children: [
-      /* @__PURE__ */ jsx4("span", { className: currentTimeClss, children: formatTime(currentTimeMs, "mm:ss:ms") }),
-      /* @__PURE__ */ jsx4("span", { className: totalTimeClss, children: formatTime(totalTimeMs, "mm:ss:ms") }),
-      /* @__PURE__ */ jsx4("div", { className: timelineClss, onClick: handleTimelineClick })
-    ] }),
-    subtitles2 !== void 0 && /* @__PURE__ */ jsx4(
-      Subtitles,
-      {
-        ...subtitles2,
-        timecodeMs: currentTimeMs
-      }
-    )
-  ] });
-  const disclaimedContent = disclaimer2 !== void 0 ? /* @__PURE__ */ jsx4(
-    Disclaimer,
-    {
-      ...disclaimer2,
-      isOn: shouldDisclaimerBeOn,
-      actionHandlers: {
-        dismissClick: handleDisclaimerDismiss
-      },
-      children: sensitiveContent
-    }
-  ) : sensitiveContent;
-  const observedContent = autoLoudWhenVisible === true || autoMuteWhenHidden === true || autoPlayWhenVisible === true || autoPauseWhenHidden === true ? /* @__PURE__ */ jsx4(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__ */ jsx4(
-    "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 });
 };