@design-edito/tools 0.4.4 → 0.4.6

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];
+};

package/components/Theatre/index.js

@@ -1,10 +1,90 @@
-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";
-export {
-  Theatre
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useRef } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { theatre as publicClassName } from '../public-classnames.js';
+import cssModule from './styles.module.css';
+/**
+ * Theatre mode component. Wraps content in a toggleable fullscreen-like "stage"
+ * overlay. Supports both controlled and uncontrolled usage.
+ *
+ * When `isOn` is not provided the component manages its own open/closed state
+ * internally. When `isOn` is provided it acts as the source of truth and the
+ * internal state is ignored.
+ *
+ * ### Root element modifiers
+ * The root `<div>` receives the public class name defined by `theatre` and the
+ * following BEM-style modifier classes:
+ * - `--on` — when theatre mode is active.
+ * - `--off` — when theatre mode is inactive.
+ *
+ * ### Child elements
+ * - `__stage` — container rendered inside the root that holds the duplicated
+ * `children` when theatre mode is active. Only mounted when `isOn` is `true`.
+ * - `__open-btn` — clickable element that activates theatre mode.
+ * - `__close-btn` — clickable element that deactivates theatre mode.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @returns A root `<div>` containing the children in their original position,
+ * a stage overlay with the duplicated children (when active), and the open/close
+ * toggle buttons.
+ */
+export const Theatre = ({ closeBtnContent, openBtnContent, isOn, defaultIsOn, exitOnEscape, exitOnBgClick, stateHandlers, actionHandlers, children, className }) => {
+    // State & refs
+    const [internalIsOn, setInternalIsOn] = useState(defaultIsOn ?? false);
+    const stageRef = useRef(null);
+    const isTheatreOn = isOn ?? internalIsOn;
+    const prevIsTheatreOnRef = useRef(isTheatreOn);
+    // Handlers
+    const handleCloseBtnClick = () => {
+        actionHandlers?.toggleClick?.(isTheatreOn);
+        if (isOn === undefined)
+            setInternalIsOn(false);
+    };
+    const handleOpenBtnClick = () => {
+        actionHandlers?.toggleClick?.(isTheatreOn);
+        if (isOn === undefined)
+            setInternalIsOn(true);
+    };
+    const handleStageBgClick = e => {
+        if (exitOnBgClick !== true)
+            return;
+        if (e.target !== stageRef.current)
+            return;
+        actionHandlers?.toggleClick?.(isTheatreOn);
+        if (isOn === undefined)
+            setInternalIsOn(false);
+    };
+    // Effects
+    useEffect(() => {
+        if (prevIsTheatreOnRef.current !== isTheatreOn) {
+            stateHandlers?.toggled?.(isTheatreOn);
+            prevIsTheatreOnRef.current = isTheatreOn;
+        }
+    }, [isTheatreOn, stateHandlers]);
+    useEffect(() => {
+        if (exitOnEscape === true
+            || !isTheatreOn
+            || isOn !== undefined)
+            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]);
+    // Render
+    const c = clss(publicClassName, { 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 _jsxs("div", { className: rootClss, children: [children, _jsx("div", { className: stageClass, onClick: handleStageBgClick, ref: stageRef, children: isTheatreOn && children }), _jsx("div", { className: closeBtnClass, onClick: handleCloseBtnClick, children: closeBtnContent }), _jsx("div", { className: openBtnClass, onClick: handleOpenBtnClick, children: openBtnContent })] });
 };

package/components/UIModule/index.js

@@ -1,149 +1,159 @@
-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";
-import cssModule from "./styles.module.css";
-import { jsx, jsxs } from "react/jsx-runtime";
-var UIModule = ({
-  src,
-  props,
-  stateHandlers,
-  className
-}) => {
-  const [id] = useState(`f${randomHash(10)}`);
-  const [loading, setLoading] = useState(false);
-  const [loadedModule, _setLoadedModule] = useState(null);
-  const [moduleTarget, _setModuleTarget] = useState(null);
-  const rootRef = useRef(null);
-  const loadedModuleRef = useRef(null);
-  const moduleTargetRef = useRef(null);
-  const setLoadedModule = (data) => {
-    loadedModuleRef.current = data;
-    _setLoadedModule(data);
-  };
-  const setModuleTarget = (data) => {
-    moduleTargetRef.current = data;
-    _setModuleTarget(data);
-  };
-  useEffect(() => {
-    stateHandlers?.idChanged?.(id);
-  }, [id, stateHandlers]);
-  useEffect(() => {
-    stateHandlers?.isLoadingChanged?.(loading);
-  }, [loading, stateHandlers]);
-  useEffect(() => {
-    stateHandlers?.loadedModuleChanged?.(loadedModule);
-  }, [loadedModule, stateHandlers]);
-  useEffect(() => {
-    stateHandlers?.moduleTargetChanged?.(moduleTarget);
-  }, [moduleTarget, stateHandlers]);
-  useEffect(() => {
-    if (src === void 0) return;
-    try {
-      setLoading(true);
-      import(src).then((data) => {
-        setLoading(false);
-        const errs = {
-          notMod: new Error("Not a module"),
-          initFunc: new Error("Module exported member `init` must be a function"),
-          destroyFunc: new Error("Module exported member `destroy` must be a function"),
-          cssStrArr: new Error("Module exported member `css` must be an array of strings"),
-          updFunc: new Error("Module exported member `update` must be a function"),
-          initRetElt: new Error("Module exported function `init` must return an Element"),
-          initRetFirstElt: new Error("Module exported function `init` must return an array containing an Element in its first position")
-        };
-        if (!isNonNullObject(data)) return setLoadedModule(errs.notMod);
-        if (!("init" in data)) return setLoadedModule(errs.initFunc);
-        if (typeof data.init !== "function") return setLoadedModule(errs.initFunc);
-        if (!("destroy" in data) || typeof data.destroy !== "function") return setLoadedModule(errs.destroyFunc);
-        if ("css" in data) {
-          if (!Array.isArray(data.css)) return setLoadedModule(errs.cssStrArr);
-          if (data.css.some((i) => typeof i !== "string")) return setLoadedModule(errs.cssStrArr);
-        }
-        if ("update" in data && typeof data.update !== "function") return setLoadedModule(errs.updFunc);
-        const module = data;
-        setLoadedModule(module);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { unknownToString } from '../../agnostic/errors/unknown-to-string/index.js';
+import { isNonNullObject } from '../../agnostic/objects/is-object/index.js';
+import { randomHash } from '../../agnostic/random/uuid/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { uiModule as publicClassName } from '../public-classnames.js';
+import cssModule from './styles.module.css';
+/**
+ * Dynamic UI module host component. Asynchronously imports an ES module by URL,
+ * validates its exported interface, calls its `init` lifecycle to obtain a DOM
+ * `Element`, and appends that element to its own root `<div>`. Handles loading,
+ * error, and teardown states automatically.
+ *
+ * The imported module is expected to conform to the {@link ModuleData} interface.
+ * Any violation (missing exports, wrong types, `init` not returning an `Element`)
+ * transitions the component into the `--error` state and logs to `console.error`.
+ *
+ * ### Root element modifiers
+ * The root `<div>` receives the public class name defined by `uiModule` and
+ * the following BEM-style modifier classes reflecting the current load lifecycle:
+ * - `--loading` — the module fetch is in progress.
+ * - `--no-module` — no module has been loaded yet (`src` is undefined or the
+ * effect has not run).
+ * - `--error` — the import, validation, or `init` call failed.
+ * - `--loaded` — the module passed validation and `init` returned successfully.
+ * - `--initialized` — the `Element` returned by `init` has been appended to the
+ * host `<div>`.
+ *
+ * ### Root element attributes
+ * - `id` — a stable randomly generated ID (prefixed `f`) assigned once on mount.
+ * Used to scope the module's `css` entries to this specific instance.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @see {@link ModuleData}
+ * @returns A host `<div>` into which the module's root `Element` is appended,
+ * along with any `<style>` blocks exported by the module.
+ */
+export const UIModule = ({ src, props, stateHandlers, className }) => {
+    // State & refs
+    const [id] = useState(`f${randomHash(10)}`);
+    const [loading, setLoading] = useState(false);
+    const [loadedModule, _setLoadedModule] = useState(null);
+    const [moduleTarget, _setModuleTarget] = useState(null);
+    const rootRef = useRef(null);
+    const loadedModuleRef = useRef(null);
+    const moduleTargetRef = useRef(null);
+    const setLoadedModule = (data) => {
+        loadedModuleRef.current = data;
+        _setLoadedModule(data);
+    };
+    const setModuleTarget = (data) => {
+        moduleTargetRef.current = data;
+        _setModuleTarget(data);
+    };
+    // State changes dispatch
+    useEffect(() => { stateHandlers?.idChanged?.(id); }, [id, stateHandlers]);
+    useEffect(() => { stateHandlers?.isLoadingChanged?.(loading); }, [loading, stateHandlers]);
+    useEffect(() => { stateHandlers?.loadedModuleChanged?.(loadedModule); }, [loadedModule, stateHandlers]);
+    useEffect(() => { stateHandlers?.moduleTargetChanged?.(moduleTarget); }, [moduleTarget, stateHandlers]);
+    // Fx dep. `src` - load & init module effect
+    useEffect(() => {
+        if (src === undefined)
+            return;
         try {
-          const target = module.init(props ?? {});
-          if (!(target instanceof Element)) return setLoadedModule(errs.initRetElt);
-          setModuleTarget(target);
-        } catch (err) {
-          setModuleTarget(null);
-          const e = err instanceof Error ? err : new Error(unknownToString(err));
-          setLoadedModule(e);
+            setLoading(true);
+            import(src)
+                .then(data => {
+                setLoading(false);
+                const errs = {
+                    notMod: new Error('Not a module'),
+                    initFunc: new Error('Module exported member `init` must be a function'),
+                    destroyFunc: new Error('Module exported member `destroy` must be a function'),
+                    cssStrArr: new Error('Module exported member `css` must be an array of strings'),
+                    updFunc: new Error('Module exported member `update` must be a function'),
+                    initRetElt: new Error('Module exported function `init` must return an Element'),
+                    initRetFirstElt: new Error('Module exported function `init` must return an array containing an Element in its first position')
+                };
+                if (!isNonNullObject(data))
+                    return setLoadedModule(errs.notMod);
+                if (!('init' in data))
+                    return setLoadedModule(errs.initFunc);
+                if (typeof data.init !== 'function')
+                    return setLoadedModule(errs.initFunc);
+                if (!('destroy' in data) || typeof data.destroy !== 'function')
+                    return setLoadedModule(errs.destroyFunc);
+                if ('css' in data) {
+                    if (!Array.isArray(data.css))
+                        return setLoadedModule(errs.cssStrArr);
+                    if (data.css.some(i => typeof i !== 'string'))
+                        return setLoadedModule(errs.cssStrArr);
+                }
+                if ('update' in data && typeof data.update !== 'function')
+                    return setLoadedModule(errs.updFunc);
+                const module = data;
+                setLoadedModule(module);
+                try {
+                    const target = module.init(props ?? {});
+                    if (!(target instanceof Element))
+                        return setLoadedModule(errs.initRetElt);
+                    setModuleTarget(target);
+                }
+                catch (err) {
+                    setModuleTarget(null);
+                    const e = err instanceof Error
+                        ? err
+                        : new Error(unknownToString(err));
+                    setLoadedModule(e);
+                }
+            }).catch(err => {
+                setLoading(false);
+                setLoadedModule(err instanceof Error ? err : new Error(unknownToString(err)));
+                setModuleTarget(null);
+            });
         }
-      }).catch((err) => {
-        setLoading(false);
-        setLoadedModule(err instanceof Error ? err : new Error(unknownToString(err)));
-        setModuleTarget(null);
-      });
-    } catch (err) {
-      if (err instanceof Error) return setLoadedModule(err);
-      const errStr = unknownToString(err);
-      return setLoadedModule(new Error(errStr));
-    }
-    return () => {
-      if (moduleTargetRef.current === null) return;
-      if (loadedModuleRef.current instanceof Error) return;
-      if (loadedModuleRef.current === null) return;
-      loadedModuleRef.current.destroy(moduleTargetRef.current);
-    };
-  }, [src]);
-  useEffect(() => {
-    if (loadedModule instanceof Error) console.error(loadedModule);
-  }, [loadedModule]);
-  useEffect(() => {
-    if (moduleTarget === null) return;
-    if (rootRef.current === null) return;
-    rootRef.current.appendChild(moduleTarget);
-  }, [moduleTarget]);
-  const c = clss(uiModule, { cssModule });
-  const rootClss = mergeClassNames(
-    c(null, {
-      loading,
-      "no-module": loadedModule === null,
-      "error": loadedModule instanceof Error,
-      "loaded": !loading && loadedModule !== null && !(loadedModule instanceof Error),
-      "initialized": moduleTarget !== null
-    }),
-    className
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: rootClss,
-      ref: rootRef,
-      id,
-      children: [
-        loadedModule === null && "",
-        loadedModule !== null && !(loadedModule instanceof Error) && loadedModule.css?.map((css) => /* @__PURE__ */ jsx("style", { children: `.${uiModule}#${id} { ${css} }` }))
-      ]
-    }
-  );
-};
-export {
-  UIModule
+        catch (err) {
+            if (err instanceof Error)
+                return setLoadedModule(err);
+            const errStr = unknownToString(err);
+            return setLoadedModule(new Error(errStr));
+        }
+        return () => {
+            if (moduleTargetRef.current === null)
+                return;
+            if (loadedModuleRef.current instanceof Error)
+                return;
+            if (loadedModuleRef.current === null)
+                return;
+            loadedModuleRef.current.destroy(moduleTargetRef.current);
+        };
+    }, [src]);
+    // Fx dep. `loadedModule` - log load errors
+    useEffect(() => {
+        if (loadedModule instanceof Error)
+            console.error(loadedModule);
+    }, [loadedModule]);
+    // Fx dep. `moduleTarget` - append the rendered module
+    useEffect(() => {
+        if (moduleTarget === null)
+            return;
+        if (rootRef.current === null)
+            return;
+        rootRef.current.appendChild(moduleTarget);
+    }, [moduleTarget]);
+    // Rendering
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(null, {
+        loading,
+        'no-module': loadedModule === null,
+        'error': loadedModule instanceof Error,
+        'loaded': !loading && loadedModule !== null && !(loadedModule instanceof Error),
+        'initialized': moduleTarget !== null
+    }), className);
+    return _jsxs("div", { className: rootClss, ref: rootRef, id: id, children: [loadedModule === null && '', loadedModule !== null
+                && !(loadedModule instanceof Error)
+                && loadedModule.css?.map(css => _jsx("style", { children: `.${publicClassName}#${id} { ${css} }` }))] });
 };

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.
  *