@design-edito/tools 0.4.4 → 0.4.5

package/components/Subtitles/index.js

@@ -1,14 +1,245 @@
+// src/components/Subtitles/index.tsx
 import {
-  Subtitles
-} from "../../chunks/chunk-PYJKFOMV.js";
-import "../../chunks/chunk-YWSXCFYY.js";
-import "../../chunks/chunk-PUQUSA6S.js";
-import "../../chunks/chunk-QXAJXTXV.js";
-import "../../chunks/chunk-HC6ZOHCS.js";
-import "../../chunks/chunk-IEZ3O5OF.js";
-import "../../chunks/chunk-TRFZSKNB.js";
-import "../../chunks/chunk-OFCSIK6J.js";
-import "../../chunks/chunk-WSFCRVEQ.js";
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} 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/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/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 subtitles = "dsed-subtitles";
+
+// 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 cssModule from "./styles.module.css";
+import { jsx } from "react/jsx-runtime";
+var Subtitles = ({
+  src,
+  srtFileContent,
+  subsGroups,
+  timecodeMs,
+  isEnded,
+  className,
+  onLoaded,
+  onParsed,
+  onLoadFailed
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadError, setLoadError] = useState(null);
+  const [parsedSubs, setParsedSubs] = useState([]);
+  const pParsedSubs = useRef(parsedSubs);
+  useEffect(() => {
+    if (pParsedSubs.current === parsedSubs) return;
+    onParsed?.(parsedSubs);
+  }, [parsedSubs]);
+  const fetchAndParseSubs = useCallback(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]);
+  useEffect(() => {
+    fetchAndParseSubs(src, srtFileContent).catch((error) => {
+      console.error(error);
+    });
+  }, [fetchAndParseSubs, src, srtFileContent]);
+  const c = clss(subtitles, { cssModule });
+  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__ */ jsx("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__ */ jsx(
+        "span",
+        {
+          className: subClass,
+          "data-sub-pos": sub.id,
+          children: subText
+        },
+        sub.id
+      );
+    });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: groupClass,
+        "data-start-sub-pos": group.startId,
+        "data-end-sub-pos": group.endId,
+        children: subsNodes
+      },
+      group.startId
+    );
+  }) });
+};
 export {
   Subtitles
 };

package/components/Theatre/index.js

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

package/components/UIModule/index.js

@@ -1,30 +1,83 @@
-import {
-  isNonNullObject
-} from "../../chunks/chunk-HQLRJ7XW.js";
-import {
-  randomHash
-} from "../../chunks/chunk-75BICI4L.js";
-import "../../chunks/chunk-OGBUSUE6.js";
-import {
-  unknownToString
-} from "../../chunks/chunk-PUQUSA6S.js";
-import {
-  uiModule
-} 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/UIModule/index.tsx
 import {
   useEffect,
   useRef,
   useState
 } 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/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/agnostic/objects/is-object/index.ts
+function isObject(unk) {
+  return typeof unk === "object";
+}
+function isNonNullObject(unk) {
+  return unk !== null && isObject(unk);
+}
+
+// src/agnostic/random/hex-char/index.ts
+var hexChars = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
+function randomHexChar() {
+  const nbr = Math.floor(Math.random() * 16);
+  const char = hexChars[nbr];
+  return char;
+}
+
+// src/agnostic/random/uuid/index.ts
+function randomHash(length = 4) {
+  return new Array(length).fill(null).map(randomHexChar).join("");
+}
+
+// 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 uiModule = "dsed-ui-module";
+
+// src/components/UIModule/index.tsx
 import cssModule from "./styles.module.css";
 import { jsx, jsxs } from "react/jsx-runtime";
 var UIModule = ({

package/components/Video/index.d.ts

@@ -46,6 +46,16 @@ type StateHandlersProps = {
     currentTime?: (currentTime: number) => void;
     playbackRate?: (rate: number) => void;
 };
+/**
+ * - play?: boolean
+ * - mute?: boolean
+ * - fullScreen?: boolean
+ * - volume?: number
+ * - playbackRate?: number
+ * - currentTimeMs:? number
+ * - PLUS TARD =
+ * - onPlay, onLoud, etc...
+ */
 /**
  * Props for the {@link Video} component.
  *