@design-edito/tools 0.4.4 → 0.4.5

package/components/Video/index.js

@@ -1,36 +1,390 @@
+// src/components/Video/index.tsx
 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";
+  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 {
-  clss
-} from "../../chunks/chunk-TRFZSKNB.js";
+  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 {
-  mergeClassNames
-} from "../../chunks/chunk-OFCSIK6J.js";
-import "../../chunks/chunk-WSFCRVEQ.js";
+  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/Video/index.tsx
+// src/components/Subtitles/index.tsx
 import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
+  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;
@@ -154,8 +508,8 @@ var getTimelineClickProgress = (event, timeline, video2) => {
 };
 
 // src/components/Video/index.tsx
-import cssModule from "./styles.module.css";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import cssModule4 from "./styles.module.css";
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var Video = ({
   sources,
   tracks,
@@ -164,8 +518,8 @@ var Video = ({
   loudBtnContent,
   muteBtnContent,
   fullScreenBtnContent,
-  subtitles,
-  disclaimer,
+  subtitles: subtitles2,
+  disclaimer: disclaimer2,
   autoPlayWhenVisible,
   autoPauseWhenHidden,
   autoLoudWhenVisible,
@@ -176,30 +530,30 @@ var Video = ({
   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
+  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 (disclaimer?.isOn === true) {
+  if (disclaimer2?.isOn === true) {
     shouldDisclaimerBeOn = true;
   }
-  if (disclaimer?.isOn === false) {
+  if (disclaimer2?.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) => {
+  const videoRef = useRef4(null);
+  const $root = useRef4(null);
+  const handleMetadataLoadEvent = useCallback3((e) => {
     if (videoRef.current === null) return;
     const video2 = videoRef.current;
     muteAttributeWorkaround(
@@ -213,72 +567,72 @@ var Video = ({
     setIsLoud(!video2.muted);
     intrinsicVideoAttributes.onLoadedMetadata?.(e);
   }, [intrinsicVideoAttributes.onLoadedMetadata, intrinsicVideoAttributes.muted]);
-  const handleVolumeChangeEvent = useCallback((e) => {
+  const handleVolumeChangeEvent = useCallback3((e) => {
     const volume2 = e.currentTarget.volume;
     setVolume(volume2);
     intrinsicVideoAttributes.onVolumeChange?.(e);
   }, [intrinsicVideoAttributes.onVolumeChange]);
-  const handlePlayEvent = useCallback((e) => {
+  const handlePlayEvent = useCallback3((e) => {
     setIsPlaying(true);
     setHasBeenAutoPlayed(true);
     intrinsicVideoAttributes.onPlay?.(e);
   }, [intrinsicVideoAttributes.onPlay]);
-  const handlePauseEvent = useCallback((e) => {
+  const handlePauseEvent = useCallback3((e) => {
     setIsPlaying(false);
     intrinsicVideoAttributes.onPause?.(e);
   }, [intrinsicVideoAttributes.onPause]);
-  const handleRateChangeEvent = useCallback((e) => {
+  const handleRateChangeEvent = useCallback3((e) => {
     const currentRate = e.currentTarget.playbackRate;
     setPlaybackRate(currentRate);
     intrinsicVideoAttributes.onRateChange?.(e);
   }, [intrinsicVideoAttributes.onRateChange]);
-  const handleTimeUpdateEvent = useCallback((e) => {
+  const handleTimeUpdateEvent = useCallback3((e) => {
     const currentTime2 = e.currentTarget.currentTime;
     setCurrentTime(currentTime2);
     intrinsicVideoAttributes?.onTimeUpdate?.(e);
   }, [totalTime, intrinsicVideoAttributes.onTimeUpdate]);
-  const handleVolumeRangeChange = useCallback((e) => {
+  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 = useCallback((e) => {
+  const handleLoudButtonClick = useCallback3((e) => {
     actionHandlers?.loudButtonClick?.(e, isLoud, videoRef.current);
     forceLoud(videoRef.current, setIsLoud);
   }, [actionHandlers?.loudButtonClick, isLoud]);
-  const handleMuteButtonClick = useCallback((e) => {
+  const handleMuteButtonClick = useCallback3((e) => {
     actionHandlers?.muteButtonClick?.(e, isLoud, videoRef.current);
     forceMute(videoRef.current, setIsLoud);
   }, [actionHandlers?.muteButtonClick, isLoud]);
-  const handlePlayButtonClick = useCallback((e) => {
+  const handlePlayButtonClick = useCallback3((e) => {
     actionHandlers?.playButtonClick?.(e, isPlaying, videoRef.current);
     void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
   }, [actionHandlers?.playButtonClick, isPlaying, shouldDisclaimerBeOn]);
-  const handlePauseButtonClick = useCallback((e) => {
+  const handlePauseButtonClick = useCallback3((e) => {
     actionHandlers?.pauseButtonClick?.(e, isPlaying, videoRef.current);
     forcePause(videoRef.current, setIsPlaying);
   }, [actionHandlers?.pauseButtonClick, isPlaying]);
-  const handleFullScreenButtonClick = useCallback((e) => {
+  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 = useCallback((e) => {
+  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 = useCallback((e) => {
+  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 = useCallback(() => {
+  const handleDisclaimerDismiss = useCallback3(() => {
     setIsDisclaimerOn(false);
     if (intrinsicVideoAttributes.autoPlay === true && !hasBeenAutoPlayed) void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
-  }, [disclaimer, intrinsicVideoAttributes.autoPlay, shouldDisclaimerBeOn]);
-  useEffect(() => {
+  }, [disclaimer2, intrinsicVideoAttributes.autoPlay, shouldDisclaimerBeOn]);
+  useEffect4(() => {
     if (isDisclaimerOn !== shouldDisclaimerBeOn) setIsDisclaimerOn(shouldDisclaimerBeOn);
     if (shouldDisclaimerBeOn) {
       forceMute(videoRef.current, setIsLoud);
@@ -294,22 +648,22 @@ var Video = ({
     intrinsicVideoAttributes,
     hasBeenAutoPlayed
   ]);
-  useEffect(() => {
+  useEffect4(() => {
     stateHandlers?.isPlaying?.(isPlaying);
   }, [isPlaying, stateHandlers?.isPlaying]);
-  useEffect(() => {
+  useEffect4(() => {
     stateHandlers?.isFullScreen?.(isFullScreen);
   }, [isFullScreen, stateHandlers?.isFullScreen]);
-  useEffect(() => {
+  useEffect4(() => {
     stateHandlers?.isLoud?.(isLoud);
   }, [isLoud, stateHandlers?.isLoud]);
-  useEffect(() => {
+  useEffect4(() => {
     stateHandlers?.volume?.(volume);
   }, [volume, stateHandlers?.volume]);
-  useEffect(() => {
+  useEffect4(() => {
     stateHandlers?.playbackRate?.(playbackRate);
   }, [playbackRate, stateHandlers?.playbackRate]);
-  useEffect(() => {
+  useEffect4(() => {
     stateHandlers?.currentTime?.(currentTime);
   }, [currentTime, stateHandlers?.currentTime]);
   const parsedSources = useMemo(() => {
@@ -332,7 +686,7 @@ var Video = ({
     }
     return [];
   }, [tracks]);
-  const c = clss(video, { cssModule });
+  const c = clss(video, { cssModule: cssModule4 });
   const rootClss = mergeClassNames(c(null, {
     "play-on": isPlaying,
     "play-off": !isPlaying,
@@ -373,8 +727,8 @@ var Video = ({
   const currentTimeClss = c("current-time");
   const totalTimeClss = c("total-time");
   const timelineClss = c("timeline");
-  const sensitiveContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
+  const sensitiveContent = /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2(
       "video",
       {
         ref: videoRef,
@@ -390,13 +744,13 @@ var Video = ({
         muted: shouldDisclaimerBeOn ? true : intrinsicVideoAttributes.muted,
         children: [
           parsedSources.map(
-            (source, index) => typeof source === "string" ? /* @__PURE__ */ jsx(
+            (source, index) => typeof source === "string" ? /* @__PURE__ */ jsx4(
               "source",
               {
                 src: source
               },
               index
-            ) : /* @__PURE__ */ jsx(
+            ) : /* @__PURE__ */ jsx4(
               "source",
               {
                 src: source.src,
@@ -406,13 +760,13 @@ var Video = ({
             )
           ),
           parsedTracks.map(
-            (track, index) => typeof track === "string" ? /* @__PURE__ */ jsx(
+            (track, index) => typeof track === "string" ? /* @__PURE__ */ jsx4(
               "track",
               {
                 src: track
               },
               index
-            ) : /* @__PURE__ */ jsx(
+            ) : /* @__PURE__ */ jsx4(
               "track",
               {
                 src: track.src,
@@ -428,12 +782,12 @@ var Video = ({
         ]
       }
     ),
-    /* @__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(
+    /* @__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",
@@ -445,9 +799,9 @@ var Video = ({
           step: 1
         }
       ),
-      /* @__PURE__ */ jsx("span", { className: volumePcntClss, children: volumePercent }),
-      /* @__PURE__ */ jsx("button", { className: fullScreenBtnClss, onClick: handleFullScreenButtonClick, children: fullScreenBtnContent }),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx4("span", { className: volumePcntClss, children: volumePercent }),
+      /* @__PURE__ */ jsx4("button", { className: fullScreenBtnClss, onClick: handleFullScreenButtonClick, children: fullScreenBtnContent }),
+      /* @__PURE__ */ jsx4(
         "input",
         {
           type: "range",
@@ -459,25 +813,25 @@ var Video = ({
           step: 0.25
         }
       ),
-      /* @__PURE__ */ jsx("span", { className: playbackRateClss, children: playbackRate })
+      /* @__PURE__ */ jsx4("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 })
+    /* @__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 })
     ] }),
-    subtitles !== void 0 && /* @__PURE__ */ jsx(
+    subtitles2 !== void 0 && /* @__PURE__ */ jsx4(
       Subtitles,
       {
-        ...subtitles,
+        ...subtitles2,
         timecodeMs: currentTimeMs
       }
     )
   ] });
-  const disclaimedContent = disclaimer !== void 0 ? /* @__PURE__ */ jsx(
+  const disclaimedContent = disclaimer2 !== void 0 ? /* @__PURE__ */ jsx4(
     Disclaimer,
     {
-      ...disclaimer,
+      ...disclaimer2,
       isOn: shouldDisclaimerBeOn,
       actionHandlers: {
         dismissClick: handleDisclaimerDismiss
@@ -485,14 +839,14 @@ var Video = ({
       children: sensitiveContent
     }
   ) : sensitiveContent;
-  const observedContent = autoLoudWhenVisible === true || autoMuteWhenHidden === true || autoPlayWhenVisible === true || autoPauseWhenHidden === true ? /* @__PURE__ */ jsx(IntersectionObserverComponent, { onIntersected: ({ ioEntry }) => {
+  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__ */ jsx(
+  return /* @__PURE__ */ jsx4(
     "figure",
     {
       className: rootClss,