@design-edito/tools 0.4.23 → 0.5.0

package/components/Gallery/index.js

@@ -56,6 +56,7 @@ export const Gallery = ({ paddingLeft, paddingRight, padding, prevButtonContent,
             animationFrame = null;
             const { scrollLeft, clientWidth, scrollWidth } = scrollerElt;
             const center = scrollLeft + clientWidth / 2;
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- scrollerElt.children (HTMLCollection) always contains Element/HTMLElement nodes
             const children = Array.from(scrollerElt.children);
             let closestIndex = 0;
             let closestDistance = Infinity;
@@ -138,7 +139,7 @@ export const Gallery = ({ paddingLeft, paddingRight, padding, prevButtonContent,
                             ? actualPaddingRight
                             : undefined
                     };
-                    return _jsx("div", { className: `${slotClss}`, style: { ...style }, "data-slot": pos, children: child }, pos);
+                    return _jsx("div", { className: slotClss, style: { ...style }, "data-slot": pos, children: child }, pos);
                 }) }), _jsxs("div", { className: actionsClss, children: [_jsx("div", { className: prevBtnClss, onClick: handlePrevClick, children: prevButtonContent ?? 'prev' }), _jsx("div", { className: nextBtnClss, onClick: handleNextClick, children: nextButtonContent ?? 'next' })] }), _jsx("div", { className: paginationClss, children: Children.map(children, (_, pos) => {
                     const pageClss = c('page', { active: pos === activeIndex });
                     return _jsx("div", { className: pageClss, "data-page": pos, onClick: () => handlePaginationClick(pos), children: typeof paginationContent === 'string'

package/components/Gallery/utils.js

@@ -1,6 +1,7 @@
 export const forceActivateSlot = (div, targetPos, smooth = true) => {
     if (div === null)
         return;
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- div.children (HTMLCollection) always contains Element/HTMLElement nodes
     const children = Array.from(div.children);
     if (children[targetPos] === undefined)
         return;
@@ -8,5 +9,8 @@ export const forceActivateSlot = (div, targetPos, smooth = true) => {
     const halfClientWidth = div.clientWidth / 2;
     const halfOffsetWidth = div.offsetWidth / 2;
     const offset = target.offsetLeft - (halfClientWidth - halfOffsetWidth);
-    div.scrollTo({ left: offset, behavior: smooth ? 'smooth' : 'instant' });
+    div.scrollTo({
+        left: offset,
+        behavior: smooth ? 'smooth' : 'instant'
+    });
 };

package/components/Iframe/index.js

@@ -50,9 +50,12 @@ export const Iframe = ({ autoHeight = false, className, srcDoc, style, ...iframe
                 || event.source !== iframe.contentWindow
                 || typeof event.data !== 'object'
                 || event.data === null
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
                 || event.data.type !== innerMessageType
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
                 || typeof event.data.height !== 'number')
                 return;
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-type-assertion -- event.data.height was already checked to be a number above; event.data is typed any by MessageEvent
             setHeight(event.data.height);
         };
         window.addEventListener('message', handleMessage);

package/components/Image/index.js

@@ -40,8 +40,10 @@ export const Image = ({ sources, disclaimer, theatre, className, ...intrinsicImg
         if (Array.isArray(sources)) {
             if (sources.length === 0)
                 return [];
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- first element sampled just above; array is expected to be homogeneous
             if (typeof sources[0] === 'string')
                 return sources.map(srcSet => ({ srcSet }));
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- first element was checked not to be a string just above; array is expected to be homogeneous
             return sources;
         }
         return [];

package/components/Input/index.controlled.js

@@ -36,14 +36,15 @@ export const ControlledInput = ({ label, error, value, className, ...rest }) =>
     const c = clss(publicClassName, { cssModule });
     const rootClss = mergeClassNames(c(null), className);
     return _jsxs(_Fragment, { children: [isNotFalsy(label) && _jsx("label", { className: c('label'), htmlFor: id, children: label }), _jsx("input", { ...rest, id: id, className: rootClss, value: value ?? '', onChange: e => {
+                    const { target } = e;
                     rest.onChange?.(e);
                     if (value === undefined)
                         return;
                     if (typeof value === 'number') {
-                        e.target.value = `${value}`;
+                        target.value = `${value}`;
                     }
                     else if (typeof value === 'string') {
-                        e.target.value = value;
+                        target.value = value;
                     }
                     else {
                         // value is readonly string[]

package/components/IntersectionObserver/index.js

@@ -40,8 +40,11 @@ export const IntersectionObserverComponent = ({ onIntersected, root, rootMargin,
     }, []);
     useEffect(() => {
         const rootEl = rootRef.current;
-        if (rootEl === null)
-            return console.warn('rootRef.current should not be null');
+        if (rootEl === null) {
+            // eslint-disable-next-line no-console
+            console.warn('rootRef.current should not be null');
+            return;
+        }
         const observer = new IntersectionObserver(observation, { root, rootMargin, threshold });
         observerRef.current = observer;
         observer.observe(rootEl);

package/components/JsonEditor/index.js

@@ -102,7 +102,7 @@ export const ValueEditor = ({ defaultValue = {}, onChange, path = [] }) => {
         array: Array.isArray(value),
         record: !Array.isArray(value) && isNonNullObject(value)
     });
-    const pathStringDataAttr = (path ?? []).map(e => e.toString()).join('.');
+    const pathStringDataAttr = path.map(e => e.toString()).join('.');
     return _jsxs("span", { className: valueEditorClss, "data-path": pathStringDataAttr, children: [_jsxs(Select, { className: c('type'), onChange: handleTypeSelectChange, children: [_jsx("option", { value: 'string', selected: typeof value === 'string', children: "string" }), _jsx("option", { value: 'number', selected: typeof value === 'number', children: "number" }), _jsx("option", { value: 'boolean', selected: typeof value === 'boolean', children: "boolean" }), _jsx("option", { value: 'null', selected: value === null, children: "null" }), _jsx("option", { value: 'record', selected: isNonNullObject(value) && !Array.isArray(value), children: "record" }), _jsx("option", { value: 'array', selected: Array.isArray(value), children: "array" })] }), typeof value === 'string' && _jsx(StringEditor, { type: 'textarea', defaultValue: value, onChange: handleStringValueChange }), typeof value === 'number' && _jsx(NumberEditor, { defaultValue: value, onChange: handleNumberValueChange }), typeof value === 'boolean' && _jsx(BooleanEditor, { defaultValue: value, onChange: handleBooleanValueChange }), value === null && _jsx(NullEditor, { defaultValue: value }), isNonNullObject(value) && !Array.isArray(value) && _jsx(RecordEditor, { defaultValue: value, onChange: handleRecordValueChange, path: path }), Array.isArray(value) && _jsx(ArrayEditor, { defaultValue: value, onChange: handleArrayValueChange, path: path })] });
 };
 /* * * * * * * * * * * * * * * * *

package/components/Overlayer/index.d.ts

@@ -1,4 +1,4 @@
-import { type FunctionComponent, type PropsWithChildren, type ReactNode } from 'react';
+import type { FunctionComponent, PropsWithChildren, ReactNode } from 'react';
 import type { WithClassName } from '../utils/types.js';
 /**
  * Describes a single overlay positioned over the base content.

package/components/ScrollListener/utils.d.ts

@@ -1,4 +1,12 @@
 import type { RefObject, Dispatch, SetStateAction } from 'react';
+/**
+ * Scroll-related measurements for the document and viewport.
+ *
+ * @property win - Window inner dimensions.
+ * @property html - Document root element dimensions.
+ * @property scroll - Current scroll position.
+ * @property viewport - Current viewport bounds in document coordinates.
+ */
 export type GlobalScrollData = {
     win: {
         height: number;
@@ -19,18 +27,39 @@ export type GlobalScrollData = {
         maxY: number;
     };
 };
+/**
+ * Position and size of a tracked element relative to the document.
+ *
+ * @property offsetX - Horizontal offset in pixels.
+ * @property offsetY - Vertical offset in pixels.
+ * @property width - Element width in pixels.
+ * @property height - Element height in pixels.
+ */
 export type LocalScrollData = {
     offsetX: number;
     offsetY: number;
     width: number;
     height: number;
 };
+/**
+ * Combined scroll state passed to each registered {@link ScrollListener}.
+ *
+ * @property global - Document-level scroll data.
+ * @property local - Element-level position data.
+ */
 export type ScrollState = {
     global: GlobalScrollData;
     local: LocalScrollData;
 };
 export declare const globalDocumentScrollListener: () => GlobalScrollData;
 export declare const localElementScrollListener: (div: HTMLDivElement) => LocalScrollData;
+/**
+ * An entry registered with the global scroll listener.
+ *
+ * @property id - Unique identifier for this registration.
+ * @property rootRef - Ref to the tracked DOM element.
+ * @property setData - State setter to update the component's scroll state.
+ */
 export type RegisterEntry = {
     id: string;
     rootRef: RefObject<HTMLDivElement | null>;

package/components/Select/index.controlled.js

@@ -36,14 +36,15 @@ export const ControlledSelect = ({ label, error, value, className, children, ...
     const c = clss(publicClassName, { cssModule });
     const rootClss = mergeClassNames(c(null), className);
     return _jsxs(_Fragment, { children: [isNotFalsy(label) && _jsx("label", { className: c('label'), htmlFor: id, children: label }), _jsx("select", { ...rest, className: rootClss, id: id, value: value, onChange: e => {
+                    const { target } = e;
                     rest.onChange?.(e);
                     if (value === undefined)
                         return;
                     if (typeof value === 'number') {
-                        e.target.value = `${value}`;
+                        target.value = `${value}`;
                     }
                     else if (typeof value === 'string') {
-                        e.target.value = value;
+                        target.value = value;
                     }
                     else {
                         // value is readonly string[]

package/components/Sequencer/index.controlled.js

@@ -55,7 +55,7 @@ export const SequencerControlled = ({ step = 0, activateOnStep, _modifiers, _dat
                 ? childPos === step
                 : Array.isArray(thisStepActivateOnStep)
                     ? thisStepActivateOnStep.includes(childPos)
-                    : thisStepActivateOnStep === childPos;
+                    : false;
             const isNext = !isPrevious && !isCurrent;
             const childClss = c('child', {
                 current: isCurrent,

package/components/Subtitles/index.js

@@ -60,6 +60,7 @@ export const Subtitles = ({ src, srtFileContent, subsGroups, timecodeMs, isEnded
             setLoadError(error instanceof Error
                 ? error
                 : new Error(unknownToString(error)));
+            // eslint-disable-next-line no-console
             console.error(error);
             onLoadFailed?.(toError(error));
         }
@@ -69,6 +70,7 @@ export const Subtitles = ({ src, srtFileContent, subsGroups, timecodeMs, isEnded
     }, [onLoadFailed, onLoaded]);
     useEffect(() => {
         fetchAndParseSubs(src, srtFileContent)
+            // eslint-disable-next-line no-console
             .catch((error) => { console.error(error); });
     }, [fetchAndParseSubs, src, srtFileContent]);
     // Rendering
@@ -77,7 +79,7 @@ export const Subtitles = ({ src, srtFileContent, subsGroups, timecodeMs, isEnded
         loading: isLoading,
         error: loadError !== null
     }), className);
-    const prevSubs = parsedSubs.filter(({ start }) => start != null && start < (timecodeMs ?? 0));
+    const prevSubs = parsedSubs.filter(({ start }) => start !== undefined && start < (timecodeMs ?? 0));
     const lastPrevSub = prevSubs[prevSubs.length - 1];
     const highestSubId = Math.max(...parsedSubs.map(sub => sub.id));
     const subsGroupsWithBoundaries = computeSubGroupsWithBoundaries(subsGroups, highestSubId);

package/components/Subtitles/types.d.ts

@@ -1,9 +1,23 @@
+/**
+ * A single parsed subtitle entry from an SRT file.
+ *
+ * @property id - Sequential subtitle number.
+ * @property start - Start time in milliseconds.
+ * @property end - End time in milliseconds.
+ * @property content - Subtitle text content.
+ */
 export type ParsedSub = {
     id: number;
     start?: number;
     end?: number;
     content?: string;
 };
+/**
+ * The inclusive ID boundaries of a subtitle group.
+ *
+ * @property startId - ID of the first subtitle in the group.
+ * @property endId - ID of the last subtitle in the group.
+ */
 export type SubGroupBoundaries = {
     startId: number;
     endId: number;

package/components/Subtitles/utils.d.ts

@@ -1,28 +1,32 @@
 import type { ParsedSub, SubGroupBoundaries } from './types.js';
 /**
- * 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
+ * Converts an SRT timecode (hh:mm:ss,ms) to milliseconds.
+ *
+ * @param timecode - Timecode string (e.g. '00:01:23,456').
+ * @returns The time in milliseconds.
  */
 export declare const getTimecodeToMs: (timecode: string) => number;
 /**
- * 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
+ * Parses a raw SRT subtitle text into a list of {@link ParsedSub} objects.
+ *
+ * @param rawSubs - Raw subtitle content in SRT format.
+ * @returns Array of parsed subtitle entries.
  */
 export declare const parseSubs: (rawSubs: string) => ParsedSub[];
 /**
- * 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
+ * Computes subtitle groups with their boundaries (startId, endId).
+ *
+ * @param subsGroups - Array of group-end subtitle IDs.
+ * @param highestSubId - Highest subtitle ID in the track.
+ * @returns Array of {@link SubGroupBoundaries}.
  */
 export declare const computeSubGroupsWithBoundaries: (subsGroups: number[] | undefined, highestSubId: number) => SubGroupBoundaries[];
 /**
- * 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
+ * Returns the current subtitle group based on the last preceding subtitle ID and playback state.
+ *
+ * @param subsGroupsWithBoundaries - Array of groups with their boundaries.
+ * @param lastPrevSubId - ID of the last subtitle that has already passed.
+ * @param isEnded - Whether playback has ended.
+ * @returns The current group, or `undefined` if none matches.
  */
 export declare const getCurrentGroup: (subsGroupsWithBoundaries: SubGroupBoundaries[], lastPrevSubId: number | undefined, isEnded: boolean | undefined) => SubGroupBoundaries | undefined;

package/components/Subtitles/utils.js

@@ -1,7 +1,8 @@
 /**
- * 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
+ * Converts an SRT timecode (hh:mm:ss,ms) to milliseconds.
+ *
+ * @param timecode - Timecode string (e.g. '00:01:23,456').
+ * @returns The time in milliseconds.
  */
 export const getTimecodeToMs = (timecode) => {
     const [hours = '0', minutes = '0', secondsAndMs = '0,0'] = timecode.split(':');
@@ -13,13 +14,14 @@ export const getTimecodeToMs = (timecode) => {
     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
+ * Parses a raw SRT subtitle text into a list of {@link ParsedSub} objects.
+ *
+ * @param rawSubs - Raw subtitle content in SRT format.
+ * @returns Array of parsed subtitle entries.
  */
 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 numberRegex = /^\d+$/v;
+    const timecodeRegex = /^[0-9]+:[0-9]+:[0-9]+,[0-9]+\s*-->\s*[0-9]+:[0-9]+:[0-9]+,[0-9]+$/v;
     const parsedSubs = [];
     rawSubs.split('\n').forEach(line => {
         if (line.trim() === '')
@@ -49,10 +51,10 @@ export const parseSubs = (rawSubs) => {
         }
         // content
         if (lastParsedSub?.id !== undefined
-            && lastParsedSub?.start !== undefined
-            && lastParsedSub?.end !== undefined) {
-            if (lastParsedSub?.content !== undefined) {
-                lastParsedSub.content += '\n' + line;
+            && lastParsedSub.start !== undefined
+            && lastParsedSub.end !== undefined) {
+            if (lastParsedSub.content !== undefined) {
+                lastParsedSub.content += `\n${line}`;
                 return;
             }
             lastParsedSub.content = line;
@@ -61,21 +63,23 @@ export const parseSubs = (rawSubs) => {
     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
+ * Computes subtitle groups with their boundaries (startId, endId).
+ *
+ * @param subsGroups - Array of group-end subtitle IDs.
+ * @param highestSubId - Highest subtitle ID in the track.
+ * @returns Array of {@link 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) => {
+    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) {
+        if (currIndex === subsGroups.length - 1
+            && endId !== highestSubId) {
             return [
                 ...acc,
                 { startId, endId },
@@ -83,14 +87,15 @@ export const computeSubGroupsWithBoundaries = (subsGroups, highestSubId) => {
             ];
         }
         return [...acc, { startId, endId }];
-    }, emptySubGroupBoundaries) ?? fallback;
+    }, emptySubGroupBoundaries);
 };
 /**
- * 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
+ * Returns the current subtitle group based on the last preceding subtitle ID and playback state.
+ *
+ * @param subsGroupsWithBoundaries - Array of groups with their boundaries.
+ * @param lastPrevSubId - ID of the last subtitle that has already passed.
+ * @param isEnded - Whether playback has ended.
+ * @returns The current group, or `undefined` if none matches.
  */
 export const getCurrentGroup = (subsGroupsWithBoundaries, lastPrevSubId, isEnded) => {
     const previousGroups = subsGroupsWithBoundaries.filter(group => group.startId <= (lastPrevSubId ?? 0));

package/components/Textarea/index.controlled.js

@@ -57,14 +57,15 @@ export const ControlledTextarea = ({ label, error, autoHeight = false, value, cl
     const c = clss(publicClassName, { cssModule });
     const rootClss = mergeClassNames(c(null), className);
     return _jsxs(_Fragment, { children: [isNotFalsy(label) && _jsx("label", { className: c('label'), htmlFor: id, children: label }), _jsx("textarea", { ...rest, ref: textareaRef, className: rootClss, id: id, value: value, onChange: e => {
+                    const { target } = e;
                     rest.onChange?.(e);
                     if (value === undefined)
                         return;
                     if (typeof value === 'number') {
-                        e.target.value = `${value}`;
+                        target.value = `${value}`;
                     }
                     else if (typeof value === 'string') {
-                        e.target.value = value;
+                        target.value = value;
                     }
                     else {
                         // value is readonly string[]

package/components/UIModule/index.js

@@ -94,6 +94,7 @@ export const UIModule = ({ src, props, stateHandlers, className }) => {
                 }
                 if ('update' in data && typeof data.update !== 'function')
                     return setLoadedModule(errs.updFunc);
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- shape fully validated by the checks above
                 const module = data;
                 setLoadedModule(module);
                 try {
@@ -109,7 +110,7 @@ export const UIModule = ({ src, props, stateHandlers, className }) => {
                         : new Error(unknownToString(err));
                     setLoadedModule(e);
                 }
-            }).catch(err => {
+            }).catch((err) => {
                 setLoading(false);
                 setLoadedModule(err instanceof Error ? err : new Error(unknownToString(err)));
                 setModuleTarget(null);
@@ -133,6 +134,7 @@ export const UIModule = ({ src, props, stateHandlers, className }) => {
     }, [src]);
     // Fx dep. `loadedModule` - log load errors
     useEffect(() => {
+        // eslint-disable-next-line no-console
         if (loadedModule instanceof Error)
             console.error(loadedModule);
     }, [loadedModule]);

package/components/Video/index.controlled.d.ts

@@ -1,5 +1,5 @@
 import { type FunctionComponent, type PropsWithChildren, type VideoHTMLAttributes, type ReactEventHandler } from 'react';
-import { type WithClassName } from '../utils/types.js';
+import type { WithClassName } from '../utils/types.js';
 import { type Props as SubsProps } from '../Subtitles/index.js';
 /**
  * Describes a single video source.

package/components/Video/index.controlled.js

@@ -54,16 +54,15 @@ export const ControlledVideo = ({ sources, tracks, subtitles, playBtnContent, pa
         if (videoRef.current === null)
             return;
         const video = videoRef.current;
-        setTotalTime(Number(video.duration));
+        setTotalTime(video.duration);
         intrinsicVideoAttributes.onLoadedMetadata?.(e);
     }, [intrinsicVideoAttributes.onLoadedMetadata]);
     const handleOnTimeUpdateEvent = useCallback((e) => {
         const video = e.currentTarget;
-        const newTimeMs = secondsToMs(Number(video.currentTime));
+        const newTimeMs = secondsToMs(video.currentTime);
         setCurrentTimeMs(newTimeMs);
-        if (intrinsicVideoAttributes?.onTimeUpdate !== undefined) {
+        if (intrinsicVideoAttributes.onTimeUpdate !== undefined)
             intrinsicVideoAttributes.onTimeUpdate(e);
-        }
     }, [intrinsicVideoAttributes.onTimeUpdate]);
     const handleOnPlayEvent = useCallback((e) => {
         /* We must never play a video that has controlled time */
@@ -75,11 +74,11 @@ export const ControlledVideo = ({ sources, tracks, subtitles, playBtnContent, pa
     }, [isTimeControlled, intrinsicVideoAttributes.onPlay]);
     // Custom action handlers
     const handlePlayButtonClick = useCallback((e) => {
-        const isPlaying = videoRef.current !== null ? Boolean(videoRef.current.paused) : false;
+        const isPlaying = videoRef.current !== null ? videoRef.current.paused : false;
         actionHandlers?.playButtonClick?.(e, isPlaying, videoRef.current);
     }, [actionHandlers?.playButtonClick]);
     const handlePauseButtonClick = useCallback((e) => {
-        const isPlaying = videoRef.current !== null ? Boolean(videoRef.current.paused) : false;
+        const isPlaying = videoRef.current !== null ? videoRef.current.paused : false;
         actionHandlers?.pauseButtonClick?.(e, isPlaying, videoRef.current);
     }, [actionHandlers?.pauseButtonClick]);
     const handleLoudButtonClick = useCallback((e) => {
@@ -125,7 +124,7 @@ export const ControlledVideo = ({ sources, tracks, subtitles, playBtnContent, pa
         'muted': !isLoud,
         ..._modifiers
     }), className);
-    const appliedVolume = volume ?? 0;
+    const appliedVolume = volume;
     const rootAttributes = {
         'data-play-on': isPlaying ? '' : undefined,
         'data-play-off': !isPlaying ? '' : undefined,
@@ -151,8 +150,10 @@ export const ControlledVideo = ({ sources, tracks, subtitles, playBtnContent, pa
         if (Array.isArray(sources)) {
             if (sources.length === 0)
                 return [];
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- first element sampled just above; array is expected to be homogeneous
             if (typeof sources[0] === 'string')
                 return sources.map(src => ({ src }));
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- first element was checked not to be a string just above; array is expected to be homogeneous
             return sources;
         }
         return [];
@@ -165,8 +166,10 @@ export const ControlledVideo = ({ sources, tracks, subtitles, playBtnContent, pa
         if (Array.isArray(tracks)) {
             if (tracks.length === 0)
                 return [];
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- first element sampled just above; array is expected to be homogeneous
             if (typeof tracks[0] === 'string')
                 return tracks.map(src => ({ src }));
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- first element was checked not to be a string just above; array is expected to be homogeneous
             return tracks;
         }
         return [];
@@ -208,9 +211,7 @@ export const ControlledVideo = ({ sources, tracks, subtitles, playBtnContent, pa
         }
     }, [play, isTimeControlled]);
     useEffect(() => {
-        if (volume !== undefined) {
-            forceVolume(videoRef.current, volume);
-        }
+        forceVolume(videoRef.current, volume);
     }, [volume]);
     useEffect(() => {
         if (givenCurrentTimeMs !== undefined && videoRef.current !== null) {

package/components/Video/index.js

@@ -55,20 +55,20 @@ export const Video = ({ loop, disclaimer, autoPlayWhenVisible, autoPauseWhenHidd
         }
         setPlay(true);
         hasBeenAutoPlayed.current = true;
-    }, [controlledProps?.onPlay, shouldDisclaimerBeOn]);
+    }, [controlledProps.onPlay, shouldDisclaimerBeOn]);
     const handleOnPauseEvent = useCallback((e) => {
         setPlay(false);
         controlledProps.onPause?.(e);
-    }, [controlledProps?.onPause]);
+    }, [controlledProps.onPause]);
     const handleOnVolumeChangeEvent = useCallback((e) => {
-        setMute(Boolean(e.currentTarget.muted));
-        setVolume(Number(e.currentTarget.volume));
+        setMute(e.currentTarget.muted);
+        setVolume(e.currentTarget.volume);
         controlledProps.onVolumeChange?.(e);
-    }, [controlledProps?.onVolumeChange]);
+    }, [controlledProps.onVolumeChange]);
     const handleOnRateChangeEvent = useCallback((e) => {
-        setPlaybackRate(Number(e.currentTarget.playbackRate));
+        setPlaybackRate(e.currentTarget.playbackRate);
         controlledProps.onRateChange?.(e);
-    }, [controlledProps?.onRateChange]);
+    }, [controlledProps.onRateChange]);
     const handleOnFullscreenChangeEvent = useCallback((e) => {
         if (document.fullscreenElement === null || shouldDisclaimerBeOn) {
             setFullscreen(false);
@@ -77,7 +77,7 @@ export const Video = ({ loop, disclaimer, autoPlayWhenVisible, autoPauseWhenHidd
     const handleOnLoadedMetadataEvent = useCallback((e) => {
         muteAttributeWorkaround(e.currentTarget, controlledProps.muted ?? false);
         controlledProps.onLoadedMetadata?.(e);
-    }, [controlledProps?.onLoadedMetadata, controlledProps?.muted]);
+    }, [controlledProps.onLoadedMetadata, controlledProps.muted]);
     // User actions
     const handlePlayButtonClick = useCallback((e, isPlaying, video) => {
         controlledProps.actionHandlers?.playButtonClick?.(e, isPlaying, video);
@@ -111,20 +111,28 @@ export const Video = ({ loop, disclaimer, autoPlayWhenVisible, autoPauseWhenHidd
     const onIntersected = useCallback(({ ioEntry }) => {
         if (ioEntry === undefined)
             return;
-        const { isIntersecting = false } = ioEntry;
-        if (autoPauseWhenHidden === true && !isIntersecting) {
+        const { isIntersecting } = ioEntry;
+        if (autoPauseWhenHidden === true && !isIntersecting)
             setPlay(false);
-        }
-        if (autoLoudWhenVisible === true && isIntersecting) {
+        if (autoLoudWhenVisible === true && isIntersecting)
             setMute(false);
-        }
-        if (autoPlayWhenVisible === true && !shouldDisclaimerBeOn && !hasBeenAutoPlayed.current && isIntersecting) {
+        if (autoPlayWhenVisible === true
+            && !shouldDisclaimerBeOn
+            && !hasBeenAutoPlayed.current
+            && isIntersecting)
             setPlay(true);
-        }
-        if (autoMuteWhenHidden === true && !shouldDisclaimerBeOn && !hasBeenAutoPlayed.current && !isIntersecting) {
+        if (autoMuteWhenHidden === true
+            && !shouldDisclaimerBeOn
+            && !hasBeenAutoPlayed.current
+            && !isIntersecting)
             setMute(true);
-        }
-    }, [autoPlayWhenVisible, autoPauseWhenHidden, autoMuteWhenHidden, autoLoudWhenVisible, shouldDisclaimerBeOn]);
+    }, [
+        autoPlayWhenVisible,
+        autoPauseWhenHidden,
+        autoMuteWhenHidden,
+        autoLoudWhenVisible,
+        shouldDisclaimerBeOn
+    ]);
     const handleDiclaimerDismiss = useCallback((prevIsOn) => {
         setIsDisclaimerOn(false);
         if (controlledProps.autoPlay === true && !hasBeenAutoPlayed.current) {
@@ -133,9 +141,8 @@ export const Video = ({ loop, disclaimer, autoPlayWhenVisible, autoPauseWhenHidd
         disclaimer?.actionHandlers?.dismissClick?.(prevIsOn);
     }, [controlledProps.autoPlay, disclaimer?.actionHandlers?.dismissClick]);
     useEffect(() => {
-        if (isDisclaimerOn !== shouldDisclaimerBeOn) {
+        if (isDisclaimerOn !== shouldDisclaimerBeOn)
             setIsDisclaimerOn(shouldDisclaimerBeOn);
-        }
     }, [isDisclaimerOn, shouldDisclaimerBeOn]);
     useEffect(() => {
         if (shouldDisclaimerBeOn) {

package/components/Video/utils.d.ts

@@ -5,7 +5,7 @@ export declare const forceLoud: (video: HTMLVideoElement | null) => void;
 export declare const forceVolume: (video: HTMLVideoElement | null, volume: number) => void;
 export declare const forceCurrentTime: (video: HTMLVideoElement | null, time: number, setCurrentTime: Dispatch<SetStateAction<number>>) => void;
 export declare const forcePlay: (video: HTMLVideoElement | null) => Promise<boolean>;
-export declare const forcePause: (video: HTMLVideoElement | null) => Promise<boolean>;
+export declare const forcePause: (video: HTMLVideoElement | null) => boolean;
 export declare const forcePlaybackRate: (video: HTMLVideoElement | null, rate: number) => void;
 export declare const forceFullscreen: (video: HTMLVideoElement | null) => Promise<boolean>;
 export declare const forceExitFullscreen: (video: HTMLVideoElement | null) => Promise<boolean>;