@design-edito/tools 0.4.5 → 0.4.11

package/components/Subtitles/index.js

@@ -1,245 +1,108 @@
-// src/components/Subtitles/index.tsx
-import {
-  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
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { toError } from '../../agnostic/misc/cast/index.js';
+import { unknownToString } from '../../agnostic/errors/unknown-to-string/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { subtitles as publicClassName } from '../public-classnames.js';
+import { computeSubGroupsWithBoundaries, getCurrentGroup, parseSubs } from './utils.js';
+import cssModule from './styles.module.css';
+/**
+ * Subtitle synchronization component. Fetches or receives an SRT source, parses it,
+ * and renders subtitle groups whose individual spans are styled according to the
+ * current media timecode.
+ *
+ * ### Group elements
+ * Each subtitle group is a `<div>` with the following:
+ * - `--curr` modifier when the group contains the subtitle at the current timecode.
+ * - `data-start-sub-pos` — ID of the first subtitle in the group.
+ * - `data-end-sub-pos` — ID of the last subtitle in the group.
+ *
+ * ### Subtitle span elements
+ * Each individual subtitle is a `<span>` with the following:
+ * - `--prev` modifier when the subtitle's start time is at or before the last elapsed subtitle.
+ * - `--curr` modifier when `timecodeMs` falls within the subtitle's `[start, end]` interval.
+ * - `data-sub-pos` — the subtitle's numeric ID from the SRT source.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @returns A root `<div>` containing the rendered subtitle groups, or an empty `<div>`
+ * when `timecodeMs` is undefined or no subtitles have been parsed yet.
+ */
+export const Subtitles = ({ src, srtFileContent, subsGroups, timecodeMs, isEnded, className, onLoaded, onParsed, onLoadFailed }) => {
+    // State
+    const [isLoading, setIsLoading] = useState(false);
+    const [loadError, setLoadError] = useState(null);
+    const [parsedSubs, setParsedSubs] = useState([]);
+    const pParsedSubs = useRef(parsedSubs);
+    // State change handlers
+    useEffect(() => {
+        if (pParsedSubs.current === parsedSubs)
+            return;
+        onParsed?.(parsedSubs);
+    }, [parsedSubs]);
+    // Effects
+    const fetchAndParseSubs = useCallback(async (src, srtFileContent) => {
+        if (src === undefined)
+            return;
+        if (srtFileContent !== undefined)
+            return setParsedSubs(parseSubs(srtFileContent));
+        setIsLoading(true);
+        setLoadError(null);
+        try {
+            const response = await fetch(src);
+            const srtContent = await response.text();
+            onLoaded?.(srtContent);
+            const parsedSubs = parseSubs(srtContent);
+            setParsedSubs(parsedSubs);
+        }
+        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]);
+    // Rendering
+    const c = clss(publicClassName, { 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 _jsx("div", { className: rootClss, children: timecodeMs !== undefined
+            && 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 !== undefined
+                            && lastPrevSub?.start !== undefined
+                            && sub.start <= lastPrevSub.start,
+                        curr: sub.start !== undefined
+                            && timecodeMs >= sub.start
+                            && sub.end !== undefined
+                            && timecodeMs <= sub.end
+                    });
+                    return _jsx("span", { className: subClass, "data-sub-pos": sub.id, children: subText }, sub.id);
+                });
+                return _jsx("div", { className: groupClass, "data-start-sub-pos": group.startId, "data-end-sub-pos": group.endId, children: subsNodes }, group.startId);
+            }) });
 };

package/components/Subtitles/types.js

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

package/components/Subtitles/utils.js

@@ -0,0 +1,102 @@
+/**
+ * Convertit un timecode au format SRT (hh:mm:ss,ms) en millisecondes.
+ * @param timecode - Timecode sous forme de chaîne (ex: '00:01:23,456')
+ * @returns Le temps en millisecondes
+ */
+export const 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 * 1000;
+    result += parseInt(minutes) * 60 * 1000;
+    result += parseInt(seconds) * 1000;
+    result += parseInt(milliseconds);
+    return result;
+};
+/**
+ * Parse un texte brut de sous-titres SRT en une liste d'objets ParsedSub.
+ * @param rawSubs - Sous-titres bruts au format SRT
+ * @returns Tableau d'objets ParsedSub
+ */
+export const 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);
+        // id
+        if (matchId !== null) {
+            if (lastParsedSub === undefined
+                || lastParsedSub.content !== undefined) {
+                const parsedSub = { id: parseInt(line) };
+                parsedSubs.push(parsedSub);
+                return;
+            }
+        }
+        // timecode
+        if (matchTimecode !== null) {
+            if (lastParsedSub?.id !== undefined) {
+                const [rawStart = '', rawEnd = ''] = line.split('-->');
+                const startTime = rawStart.trim();
+                const endTime = rawEnd.trim();
+                lastParsedSub.start = getTimecodeToMs(startTime);
+                lastParsedSub.end = getTimecodeToMs(endTime);
+                return;
+            }
+        }
+        // content
+        if (lastParsedSub?.id !== undefined
+            && lastParsedSub?.start !== undefined
+            && lastParsedSub?.end !== undefined) {
+            if (lastParsedSub?.content !== undefined) {
+                lastParsedSub.content += '\n' + line;
+                return;
+            }
+            lastParsedSub.content = line;
+        }
+    });
+    return parsedSubs;
+};
+/**
+ * Calcule les groupes de sous-titres avec leurs bornes (startId, endId).
+ * @param subsGroups - Tableau d'IDs de fin de groupe
+ * @param highestSubId - ID le plus élevé des sous-titres
+ * @returns Tableau de SubGroupBoundaries
+ */
+export const computeSubGroupsWithBoundaries = (subsGroups, highestSubId) => {
+    const fallback = [{ startId: 1, endId: highestSubId }];
+    if (subsGroups === undefined || subsGroups.length === 0)
+        return fallback;
+    const emptySubGroupBoundaries = [];
+    return subsGroups?.reduce((acc, curr, currIndex) => {
+        const lastInAcc = acc[acc.length - 1];
+        const startId = lastInAcc === undefined ? 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;
+};
+/**
+ * Retourne le groupe de sous-titres courant selon l'ID du dernier sous-titre précédent et l'état.
+ * @param subsGroupsWithBoundaries - Tableau des groupes avec bornes
+ * @param lastPrevSubId - ID du dernier sous-titre précédent
+ * @param isEnded - Indique si la lecture est terminée
+ * @returns Le groupe courant ou undefined
+ */
+export const 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];
+};