@design-edito/tools 0.5.15 → 0.5.17

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

@@ -1,4 +1,4 @@
-import { type FunctionComponent, type PropsWithChildren, type VideoHTMLAttributes } from 'react';
+import { type FunctionComponent, type PropsWithChildren, type Ref, type VideoHTMLAttributes } from 'react';
 import type { WithClassName } from '../utils/types.js';
 import { type Props as SubsProps } from '../Subtitles/index.js';
 /**
@@ -66,6 +66,8 @@ type TrackData = {
  * the component reacts, with the target and current rates.
  * @property onFullscreenButtonClicked - Called when the fullscreen button is
  * clicked, before the component reacts, with the fullscreen state as it was.
+ * @property onSubtitlesButtonClicked - Called when the subtitles button is clicked,
+ * before the component reacts, with the subtitles state as it was.
  * @property onTimelineClicked - Called when the timeline is clicked, before the
  * component reacts, with the target and current times (in seconds). The component
  * seeks to the target right after, unless the time is controlled.
@@ -77,6 +79,8 @@ type TrackData = {
  * @property onIsEndedChanged - Called after playback reached the end, and again
  * once it left it — a seek back or a new play. Never on mount.
  * @property onIsLoudChanged - Called once the mute state has changed (`true` = unmuted).
+ * @property onIsSubtitlesOnChanged - Called once the subtitles have been shown or
+ * hidden. Never on mount.
  * @property onVolumeChanged - Called once the volume has changed (`0` to `1`).
  * @property onPlaybackRateChanged - Called once the playback rate has changed.
  * @property onCurrentTimeMsChanged - Called once the current time has changed, in
@@ -96,12 +100,20 @@ type TrackData = {
  * gets, each taking its whole part and handing the rest down. So `'{{mm}}:{{ss}}'` on
  * an hour-long video reads `62:05` rather than dropping the hour — nothing is ever
  * lost for not having been asked for.
+ * @property subtitlesBtnContent - Glyph for the subtitles button, like the five other
+ * button contents. The button renders only when `subtitles` is set: with no cues there
+ * is nothing to toggle, and unlike `Disclaimer`'s missing toggler this withholds no
+ * behaviour — a stylesheet has nothing it could do with it either.
+ * @property subtitlesOn - Whether the subtitles show. Controlled: the component never
+ * changes it, it reports a click through `onSubtitlesButtonClicked` and leaves the
+ * decision to the parent. `Video` holds it for you.
  * @property className - Additional CSS class for the root element.
  * @property children - React content inserted into the <video> tag (fallback, etc).
  *
  * Also inherits all standard HTML props for a <video> element.
  */
 export type Props = PropsWithChildren<WithClassName<{
+    rootRef?: Ref<HTMLElement>;
     sources?: string | string[] | SourceData[];
     tracks?: string | string[] | TrackData[];
     subtitles?: SubsProps;
@@ -110,7 +122,9 @@ export type Props = PropsWithChildren<WithClassName<{
     loudBtnContent?: React.ReactNode;
     muteBtnContent?: React.ReactNode;
     fullscreenBtnContent?: React.ReactNode;
+    subtitlesBtnContent?: React.ReactNode;
     play?: boolean;
+    subtitlesOn?: boolean;
     fullscreen?: boolean;
     volume?: number;
     mute?: boolean;
@@ -124,10 +138,12 @@ export type Props = PropsWithChildren<WithClassName<{
     onVolumeRangeChanged?: (e: React.ChangeEvent<HTMLInputElement>, targetVolume: number, currentVolume: number, video: HTMLVideoElement | null) => void;
     onRateRangeChanged?: (e: React.ChangeEvent<HTMLInputElement>, targetRate: number, currentRate: number, video: HTMLVideoElement | null) => void;
     onFullscreenButtonClicked?: (e: React.MouseEvent<HTMLButtonElement>, isFullscreen: boolean, video: HTMLVideoElement | null) => void;
+    onSubtitlesButtonClicked?: (e: React.MouseEvent<HTMLButtonElement>, isSubtitlesOn: boolean, video: HTMLVideoElement | null) => void;
     onTimelineClicked?: (e: React.MouseEvent<HTMLDivElement>, targetTime: number, currentTime: number, video: HTMLVideoElement | null) => void;
     onIsPlayingChanged?: (isPlaying: boolean) => void;
     onIsFullscreenChanged?: (isFullscreen: boolean) => void;
     onIsLoudChanged?: (isLoud: boolean) => void;
+    onIsSubtitlesOnChanged?: (isSubtitlesOn: boolean) => void;
     onIsEndedChanged?: (isEnded: boolean) => void;
     onVolumeChanged?: (volume: number) => void;
     onPlaybackRateChanged?: (playbackRate: number) => void;

package/components/Video/index.controlled.js

@@ -50,11 +50,14 @@ import { forceExitFullscreen, forceFullscreen, forceLoud, forceMute, forcePause,
  * @returns A `<figure>` element containing the video, its controls, optional
  * subtitles.
  */
-export const ControlledVideo = ({ sources, tracks, subtitles, playBtnContent, pauseBtnContent, loudBtnContent, muteBtnContent, fullscreenBtnContent, play, fullscreen, mute, muted, volume = 1, playbackRate = 1, currentTimeMs: givenCurrentTimeMs, 
+export const ControlledVideo = ({ sources, tracks, subtitles, playBtnContent, pauseBtnContent, loudBtnContent, muteBtnContent, fullscreenBtnContent, subtitlesBtnContent, play, fullscreen, 
+// Les sous-titres sont montrés tant que personne n'a dit le contraire : un article qui
+// en fournit veut qu'on les lise.
+subtitlesOn = true, mute, muted, volume = 1, playbackRate = 1, currentTimeMs: givenCurrentTimeMs, 
 // Milliseconds by default, which is what this component has always rendered — a
 // default that changes under a consumer is a change nobody asked for. An article
 // usually wants `'{{mm}}:{{ss}}'` and says so.
-timeFormat = '{{mm}}:{{ss}}:{{ms}}', onPlayButtonClicked, onPauseButtonClicked, onLoudButtonClicked, onMuteButtonClicked, onVolumeRangeChanged, onRateRangeChanged, onFullscreenButtonClicked, onTimelineClicked, onIsPlayingChanged, onIsFullscreenChanged, onIsLoudChanged, onIsEndedChanged, onVolumeChanged, onPlaybackRateChanged, onCurrentTimeMsChanged, onFullscreenChange, children, className, ...intrinsicVideoAttributes }) => {
+timeFormat = '{{mm}}:{{ss}}:{{ms}}', onPlayButtonClicked, onPauseButtonClicked, onLoudButtonClicked, onMuteButtonClicked, onVolumeRangeChanged, onRateRangeChanged, onFullscreenButtonClicked, onSubtitlesButtonClicked, onTimelineClicked, onIsPlayingChanged, onIsFullscreenChanged, onIsLoudChanged, onIsSubtitlesOnChanged, onIsEndedChanged, onVolumeChanged, onPlaybackRateChanged, onCurrentTimeMsChanged, onFullscreenChange, children, className, rootRef, ...intrinsicVideoAttributes }) => {
     const videoRef = useRef(null);
     const [totalTime, setTotalTime] = useState(0);
     const totalTimeMs = useMemo(() => secondsToMs(totalTime), [totalTime]);
@@ -131,6 +134,9 @@ timeFormat = '{{mm}}:{{ss}}:{{ms}}', onPlayButtonClicked, onPauseButtonClicked,
     const handleFullscreenButtonClick = useCallback((e) => {
         onFullscreenButtonClicked?.(e, isFullscreen, videoRef.current);
     }, [onFullscreenButtonClicked, isFullscreen]);
+    const handleSubtitlesButtonClick = useCallback((e) => {
+        onSubtitlesButtonClicked?.(e, subtitlesOn, videoRef.current);
+    }, [onSubtitlesButtonClicked, subtitlesOn]);
     const handleVolumeRangeChange = useCallback((e) => {
         const targetVolume = Number(e.currentTarget.value) / 100;
         onVolumeRangeChanged?.(e, targetVolume, volume, videoRef.current);
@@ -159,7 +165,12 @@ timeFormat = '{{mm}}:{{ss}}:{{ms}}', onPlayButtonClicked, onPauseButtonClicked,
         'fullscreen-on': isFullscreen,
         'fullscreen-off': !isFullscreen,
         'loud': isLoud,
-        'muted': !isLoud
+        'muted': !isLoud,
+        // Rien des deux quand aucun sous-titre n'est fourni : l'absence n'est pas un état
+        // caché, c'est l'absence d'un état. Une feuille qui veut viser ce cas le reconnaît à
+        // ce qu'aucun des deux modifieurs n'est là.
+        'subtitles-on': subtitles !== undefined && subtitlesOn,
+        'subtitles-off': subtitles !== undefined && !subtitlesOn
     }), className);
     // Guarded: the duration is unknown until the metadata lands, and an unguarded
     // division would expose the string 'NaN' on every render until then.
@@ -172,6 +183,8 @@ timeFormat = '{{mm}}:{{ss}}:{{ms}}', onPlayButtonClicked, onPauseButtonClicked,
         'data-fullscreen-off': !isFullscreen ? '' : undefined,
         'data-loud': isLoud ? '' : undefined,
         'data-muted': !isLoud ? '' : undefined,
+        'data-subtitles-on': subtitles !== undefined && subtitlesOn ? '' : undefined,
+        'data-subtitles-off': subtitles !== undefined && !subtitlesOn ? '' : undefined,
         'data-volume': volume.toFixed(8),
         'data-volume-percent': volumePercent,
         'data-playback-rate': playbackRate,
@@ -228,6 +241,7 @@ timeFormat = '{{mm}}:{{ss}}:{{ms}}', onPlayButtonClicked, onPauseButtonClicked,
     const muteBtnClss = c('mute-btn');
     const volumePcntClss = c('volume-percent');
     const fullscreenBtnClss = c('fullscreen-btn');
+    const subtitlesBtnClss = c('subtitles-btn');
     const volumeRangeClss = c('volume-range');
     const playbackRateRangeClss = c('playback-rate-range');
     const playbackRateClss = c('playback-rate');
@@ -300,12 +314,13 @@ timeFormat = '{{mm}}:{{ss}}:{{ms}}', onPlayButtonClicked, onPauseButtonClicked,
     useChangeDispatch(isElementPlaying, onIsPlayingChanged);
     useChangeDispatch(isFullscreen, onIsFullscreenChanged);
     useChangeDispatch(isLoud, onIsLoudChanged);
+    useChangeDispatch(subtitlesOn, onIsSubtitlesOnChanged);
     useChangeDispatch(isEnded, onIsEndedChanged);
     useChangeDispatch(volume, onVolumeChanged);
     useChangeDispatch(playbackRate, onPlaybackRateChanged);
-    return _jsxs("figure", { className: rootClss, style: rootStyles, ...rootAttributes, children: [_jsxs("video", { ref: videoRef, className: videoClss, ...intrinsicVideoAttributes, autoPlay: isTimeControlled ? false : intrinsicVideoAttributes.autoPlay, onLoadedMetadata: handleMetadataLoadEvent, onTimeUpdate: handleOnTimeUpdateEvent, onEnded: handleEndedEvent, onPlay: handlePlayEvent, onPause: handlePauseEvent, children: [parsedSources.map((source, index) => typeof source === 'string'
+    return _jsxs("figure", { ref: rootRef, className: rootClss, style: rootStyles, ...rootAttributes, children: [_jsxs("video", { ref: videoRef, className: videoClss, ...intrinsicVideoAttributes, autoPlay: isTimeControlled ? false : intrinsicVideoAttributes.autoPlay, onLoadedMetadata: handleMetadataLoadEvent, onTimeUpdate: handleOnTimeUpdateEvent, onEnded: handleEndedEvent, onPlay: handlePlayEvent, onPause: handlePauseEvent, children: [parsedSources.map((source, index) => typeof source === 'string'
                         ? _jsx("source", { src: source }, index)
                         : _jsx("source", { src: source.src, type: source.type }, index)), parsedTracks.map((track, index) => typeof track === 'string'
                         ? _jsx("track", { src: track }, index)
-                        : _jsx("track", { src: track.src, kind: track.kind, srcLang: track.srclang, label: track.label, default: track.default }, index)), children] }), _jsxs("div", { className: videoControlsClss, children: [_jsx("button", { className: playBtnClss, onClick: handlePlayButtonClick, children: playBtnContent }), _jsx("button", { className: pauseBtnClss, onClick: handlePauseButtonClick, children: pauseBtnContent }), _jsx("button", { className: loudBtnClss, onClick: handleLoudButtonClick, children: loudBtnContent }), _jsx("button", { className: muteBtnClss, onClick: handleMuteButtonClick, children: muteBtnContent }), _jsx("input", { type: 'range', className: volumeRangeClss, value: volumePercent, onChange: handleVolumeRangeChange, min: 0, max: 100, step: 1 }), _jsx("span", { className: volumePcntClss, children: Math.round(volumePercent) }), _jsx("button", { className: fullscreenBtnClss, onClick: handleFullscreenButtonClick, children: fullscreenBtnContent }), _jsx("input", { type: 'range', className: playbackRateRangeClss, value: playbackRate, onChange: handleRateRangeChange, min: 0.25, max: 4, step: 0.25 }), _jsx("span", { className: playbackRateClss, children: playbackRate })] }), _jsxs("div", { className: timeControlsClss, children: [_jsx("span", { className: currentTimeClss, children: formatDuration(currentTimeMs, timeFormat) }), _jsx("span", { className: totalTimeClss, children: formatDuration(totalTimeMs, timeFormat) }), _jsx("div", { className: timelineClss, onClick: handleTimelineClick })] }), subtitles !== undefined && _jsx(Subtitles, { ...subtitles, timecodeMs: currentTimeMs, isEnded: isEnded })] });
+                        : _jsx("track", { src: track.src, kind: track.kind, srcLang: track.srclang, label: track.label, default: track.default }, index)), children] }), _jsxs("div", { className: videoControlsClss, children: [_jsx("button", { className: playBtnClss, onClick: handlePlayButtonClick, children: playBtnContent }), _jsx("button", { className: pauseBtnClss, onClick: handlePauseButtonClick, children: pauseBtnContent }), _jsx("button", { className: loudBtnClss, onClick: handleLoudButtonClick, children: loudBtnContent }), _jsx("button", { className: muteBtnClss, onClick: handleMuteButtonClick, children: muteBtnContent }), _jsx("input", { type: 'range', className: volumeRangeClss, value: volumePercent, onChange: handleVolumeRangeChange, min: 0, max: 100, step: 1 }), _jsx("span", { className: volumePcntClss, children: Math.round(volumePercent) }), _jsx("button", { className: fullscreenBtnClss, onClick: handleFullscreenButtonClick, children: fullscreenBtnContent }), subtitles !== undefined && _jsx("button", { className: subtitlesBtnClss, onClick: handleSubtitlesButtonClick, children: subtitlesBtnContent }), _jsx("input", { type: 'range', className: playbackRateRangeClss, value: playbackRate, onChange: handleRateRangeChange, min: 0.25, max: 4, step: 0.25 }), _jsx("span", { className: playbackRateClss, children: playbackRate })] }), _jsxs("div", { className: timeControlsClss, children: [_jsx("span", { className: currentTimeClss, children: formatDuration(currentTimeMs, timeFormat) }), _jsx("span", { className: totalTimeClss, children: formatDuration(totalTimeMs, timeFormat) }), _jsx("div", { className: timelineClss, onClick: handleTimelineClick })] }), subtitles !== undefined && _jsx(Subtitles, { ...subtitles, timecodeMs: currentTimeMs, isEnded: isEnded })] });
 };

package/components/Video/index.d.ts

@@ -30,12 +30,16 @@ import { type Props as ControlledProps } from './index.controlled.js';
  * stopped video, since a playing element would advance a value it does not own:
  * `autoPlay`, `autoPlayWhenVisible` and the play button have no effect for as
  * long as this prop is provided.
- * @property wrapperClassName - Optional additional class name(s) applied to the root wrapper element.
+ * @property defaultSubtitlesOn - Whether the subtitles start shown. `true` by default —
+ * an article that supplies cues means them to be read. The reader's button takes it from
+ * there, so this is a starting point and not a setting: `default…` and never `initial…`,
+ * as everywhere else here.
  * @property className - Optional additional class name(s) applied to the root element.
  * @property children - React children rendered inside the `<video>` element itself
  * (e.g. fallback content).
  */
-export type Props = WithViewportObservation<Omit<ControlledProps, 'play' | 'fullscreen' | 'volume' | 'mute' | 'playbackRate'>> & {
+export type Props = WithViewportObservation<Omit<ControlledProps, 'play' | 'fullscreen' | 'volume' | 'mute' | 'playbackRate' | 'subtitlesOn' | 'rootRef'>> & {
+    defaultSubtitlesOn?: boolean;
     autoPlayWhenVisible?: boolean;
     autoPlayOnceVisible?: boolean;
     autoPauseWhenHidden?: boolean;
@@ -44,7 +48,6 @@ export type Props = WithViewportObservation<Omit<ControlledProps, 'play' | 'full
     autoLoudOnceVisible?: boolean;
     autoMuteWhenHidden?: boolean;
     autoMuteOnceHidden?: boolean;
-    wrapperClassName?: string;
 };
 /**
  * Full-featured video player component. Wraps a native `<video>` element with
@@ -73,6 +76,13 @@ export type Props = WithViewportObservation<Omit<ControlledProps, 'play' | 'full
  * automatic play the component still owed. Setting both flavours of the same
  * behaviour is the same as setting the `…When…` one alone.
  *
+ * **`loop` reaches the element untouched**, like every other native media attribute
+ * this component does not drive itself. It was once destructured out of the props and
+ * never forwarded, which silently dropped it — so if a native attribute ever stops
+ * arriving, look at the destructuring here before looking at the caller. One
+ * consequence worth knowing: a looping element never fires `ended`, so the `--ended`
+ * modifier and the `isEnded` it feeds to `Subtitles` simply never come.
+ *
  * Browsers refuse an unmuted `play()` outside a user gesture, so pairing an
  * `autoLoud…` with an `autoPlay…` will usually have the playback rejected. The
  * refusal is caught rather than ignored — the element is read back once the attempt

package/components/Video/index.js

@@ -1,11 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { clss } from '../../agnostic/css/clss/index.js';
-import { IntersectionObserverComponent } from '../IntersectionObserver/index.js';
-import { mergeClassNames } from '../utils/index.js';
-import { videoWrapper as publicClassName } from '../public-classnames.js';
+import { useIntersectionObserver } from '../IntersectionObserver/index.js';
 import { muteAttributeWorkaround, shouldRunAutoBehaviour } from './utils.js';
-import cssModule from './styles.module.css';
 import { ControlledVideo } from './index.controlled.js';
 /**
  * Full-featured video player component. Wraps a native `<video>` element with
@@ -34,6 +30,13 @@ import { ControlledVideo } from './index.controlled.js';
  * automatic play the component still owed. Setting both flavours of the same
  * behaviour is the same as setting the `…When…` one alone.
  *
+ * **`loop` reaches the element untouched**, like every other native media attribute
+ * this component does not drive itself. It was once destructured out of the props and
+ * never forwarded, which silently dropped it — so if a native attribute ever stops
+ * arriving, look at the destructuring here before looking at the caller. One
+ * consequence worth knowing: a looping element never fires `ended`, so the `--ended`
+ * modifier and the `isEnded` it feeds to `Subtitles` simply never come.
+ *
  * Browsers refuse an unmuted `play()` outside a user gesture, so pairing an
  * `autoLoud…` with an `autoPlay…` will usually have the playback rejected. The
  * refusal is caught rather than ignored — the element is read back once the attempt
@@ -41,13 +44,14 @@ import { ControlledVideo } from './index.controlled.js';
  * The media still won't play, though: autoplay muted, and leave unmuting to the
  * reader.
  */
-export const Video = ({ loop, autoPlayWhenVisible, autoPlayOnceVisible, autoPauseWhenHidden, autoPauseOnceHidden, autoMuteWhenHidden, autoMuteOnceHidden, autoLoudWhenVisible, autoLoudOnceVisible, threshold, root, rootMargin, onVisibilityChanged, wrapperClassName, onPlayButtonClicked, onPauseButtonClicked, onLoudButtonClicked, onMuteButtonClicked, onVolumeRangeChanged, onRateRangeChanged, onFullscreenButtonClicked, ...controlledProps }) => {
+export const Video = ({ defaultSubtitlesOn = true, autoPlayWhenVisible, autoPlayOnceVisible, autoPauseWhenHidden, autoPauseOnceHidden, autoMuteWhenHidden, autoMuteOnceHidden, autoLoudWhenVisible, autoLoudOnceVisible, threshold, root, rootMargin, onVisibilityChanged, onPlayButtonClicked, onPauseButtonClicked, onLoudButtonClicked, onMuteButtonClicked, onVolumeRangeChanged, onRateRangeChanged, onFullscreenButtonClicked, onSubtitlesButtonClicked, ...controlledProps }) => {
     // State & refs
     const [play, setPlay] = useState(false);
     const [volume, setVolume] = useState(1);
     const [mute, setMute] = useState(false);
     const [playbackRate, setPlaybackRate] = useState(1);
     const [fullscreen, setFullscreen] = useState(false);
+    const [subtitlesOn, setSubtitlesOn] = useState(defaultSubtitlesOn);
     // One flag per `…Once…` behaviour, and each is armed by that behaviour's own
     // automatic trigger. A single shared flag conflated four questions, and being set
     // on any `play` event — a user click included — meant the first press cancelled
@@ -61,6 +65,7 @@ export const Video = ({ loop, autoPlayWhenVisible, autoPlayOnceVisible, autoPaus
     // invariant is applied where the state is forwarded rather than guarded at each
     // of those call sites.
     const isTimeControlled = controlledProps.currentTimeMs !== undefined;
+    const rootRef = useRef(null);
     const needsObserve = useMemo(() => onVisibilityChanged !== undefined
         || autoLoudWhenVisible === true
         || autoLoudOnceVisible === true
@@ -143,6 +148,14 @@ export const Video = ({ loop, autoPlayWhenVisible, autoPlayOnceVisible, autoPaus
         onFullscreenButtonClicked?.(e, isFullscreen, video);
         setFullscreen(!isFullscreen);
     }, [onFullscreenButtonClicked]);
+    // Un seul bouton pour les deux sens, contrairement à lecture/pause et son/muet qui en
+    // ont un chacun : ceux-là existent en paire dans le DOM et la feuille en montre un,
+    // parce qu'ils portent deux glyphes opposés. Les sous-titres n'en portent qu'un, dont
+    // seul l'habillage change — inutile d'en rendre deux pour n'en montrer jamais qu'un.
+    const handleSubtitlesButtonClick = useCallback((e, isSubtitlesOn, video) => {
+        onSubtitlesButtonClicked?.(e, isSubtitlesOn, video);
+        setSubtitlesOn(!isSubtitlesOn);
+    }, [onSubtitlesButtonClicked]);
     // Intersection Observer
     const onIntersected = useCallback(({ ioEntry }) => {
         if (ioEntry === undefined)
@@ -185,11 +198,17 @@ export const Video = ({ loop, autoPlayWhenVisible, autoPlayOnceVisible, autoPaus
         if (controlledProps.autoPlay === true)
             setPlay(true);
     }, []);
+    // The observer watches the `<figure>` itself. `needsObserve` says whether anything
+    // asked for it — a hook cannot be skipped, so the condition is passed in rather than
+    // wrapped around the call, and no `IntersectionObserver` is created without a reason
+    // to create one.
+    useIntersectionObserver(rootRef, { threshold, root, rootMargin }, onIntersected, needsObserve);
     // Render
-    const c = clss(publicClassName, { cssModule });
-    const rootClss = mergeClassNames(c(), wrapperClassName);
-    const videoContent = _jsx(ControlledVideo, { ...controlledProps, play: play && !isTimeControlled, volume: volume, mute: mute, playbackRate: playbackRate, fullscreen: fullscreen, onPlay: handleOnPlayEvent, onPause: handleOnPauseEvent, onIsPlayingChanged: handleIsPlayingChanged, onVolumeChange: handleOnVolumeChangeEvent, onRateChange: handleOnRateChangeEvent, onLoadedMetadata: handleOnLoadedMetadataEvent, onFullscreenChange: handleFullscreenChange, onPlayButtonClicked: handlePlayButtonClick, onPauseButtonClicked: handlePauseButtonClick, onLoudButtonClicked: handleLoudButtonClick, onMuteButtonClicked: handleMuteButtonClick, onVolumeRangeChanged: handleVolumeRangeChange, onRateRangeChanged: handleRateRangeChange, onFullscreenButtonClicked: handleFullscreenButtonClick });
-    return _jsx("div", { className: rootClss, children: needsObserve
-            ? _jsx(IntersectionObserverComponent, { threshold: threshold, root: root, rootMargin: rootMargin, onIntersected: onIntersected, children: videoContent })
-            : videoContent });
+    //
+    // **The `<figure>` is the root, and there is nothing above it.** The observer runs on
+    // that element rather than on a box built to hold it: a wrapper would take the outer
+    // position — the one a consumer lays out — and leave `className` naming an inner
+    // element, which is the wrong way round. So no wrapper, and no second class-name prop
+    // to reach past it.
+    return _jsx(ControlledVideo, { ...controlledProps, rootRef: rootRef, play: play && !isTimeControlled, volume: volume, mute: mute, playbackRate: playbackRate, fullscreen: fullscreen, subtitlesOn: subtitlesOn, onPlay: handleOnPlayEvent, onPause: handleOnPauseEvent, onIsPlayingChanged: handleIsPlayingChanged, onVolumeChange: handleOnVolumeChangeEvent, onRateChange: handleOnRateChangeEvent, onLoadedMetadata: handleOnLoadedMetadataEvent, onFullscreenChange: handleFullscreenChange, onPlayButtonClicked: handlePlayButtonClick, onPauseButtonClicked: handlePauseButtonClick, onLoudButtonClicked: handleLoudButtonClick, onMuteButtonClicked: handleMuteButtonClick, onVolumeRangeChanged: handleVolumeRangeChange, onRateRangeChanged: handleRateRangeChange, onFullscreenButtonClicked: handleFullscreenButtonClick, onSubtitlesButtonClicked: handleSubtitlesButtonClick });
 };

package/components/index.d.ts

@@ -3,13 +3,13 @@ export * as button from './Button/index.js'
 export * as clippable from './Clippable/index.js'
 export * as disclaimer from './Disclaimer/index.js'
 export * as drawer from './Drawer/index.js'
-export * as eventListener from './EventListener/index.js'
 export * as gallery from './Gallery/index.js'
+export * as eventListener from './EventListener/index.js'
 export * as iframe from './Iframe/index.js'
 export * as image from './Image/index.js'
 export * as input from './Input/index.js'
-export * as jsonEditor from './JsonEditor/index.js'
 export * as intersectionObserver from './IntersectionObserver/index.js'
+export * as jsonEditor from './JsonEditor/index.js'
 export * as lightbox from './Lightbox/index.js'
 export * as listLoader from './ListLoader/index.js'
 export * as overlayer from './Overlayer/index.js'
@@ -17,8 +17,8 @@ export * as paginator from './Paginator/index.js'
 export * as resizeObserver from './ResizeObserver/index.js'
 export * as scrllgngn from './Scrllgngn/index.js'
 export * as scrollListener from './ScrollListener/index.js'
-export * as sequencer from './Sequencer/index.js'
 export * as select from './Select/index.js'
+export * as sequencer from './Sequencer/index.js'
 export * as shadowRoot from './ShadowRoot/index.js'
 export * as subtitles from './Subtitles/index.js'
 export * as textarea from './Textarea/index.js'

package/components/index.js

@@ -3,13 +3,13 @@ export * as button from './Button/index.js'
 export * as clippable from './Clippable/index.js'
 export * as disclaimer from './Disclaimer/index.js'
 export * as drawer from './Drawer/index.js'
-export * as eventListener from './EventListener/index.js'
 export * as gallery from './Gallery/index.js'
+export * as eventListener from './EventListener/index.js'
 export * as iframe from './Iframe/index.js'
 export * as image from './Image/index.js'
 export * as input from './Input/index.js'
-export * as jsonEditor from './JsonEditor/index.js'
 export * as intersectionObserver from './IntersectionObserver/index.js'
+export * as jsonEditor from './JsonEditor/index.js'
 export * as lightbox from './Lightbox/index.js'
 export * as listLoader from './ListLoader/index.js'
 export * as overlayer from './Overlayer/index.js'
@@ -17,8 +17,8 @@ export * as paginator from './Paginator/index.js'
 export * as resizeObserver from './ResizeObserver/index.js'
 export * as scrllgngn from './Scrllgngn/index.js'
 export * as scrollListener from './ScrollListener/index.js'
-export * as sequencer from './Sequencer/index.js'
 export * as select from './Select/index.js'
+export * as sequencer from './Sequencer/index.js'
 export * as shadowRoot from './ShadowRoot/index.js'
 export * as subtitles from './Subtitles/index.js'
 export * as textarea from './Textarea/index.js'

package/components/public-classnames.d.ts

@@ -24,4 +24,3 @@ export declare const subtitles = "lm-subtitles";
 export declare const textarea = "lm-textarea";
 export declare const uiModule = "lm-ui-module";
 export declare const video = "lm-video";
-export declare const videoWrapper = "lm-video-wrapper";

package/components/public-classnames.js

@@ -24,4 +24,3 @@ export const subtitles = 'lm-subtitles';
 export const textarea = 'lm-textarea';
 export const uiModule = 'lm-ui-module';
 export const video = 'lm-video';
-export const videoWrapper = 'lm-video-wrapper';

package/node/@aws-s3/storage/directory/index.d.ts

@@ -1,4 +1,4 @@
 export * as copyDir from './copy-dir/index.js'
 export * as list from './list/index.js'
-export * as removeDir from './remove-dir/index.js'
 export * as moveDir from './move-dir/index.js'
+export * as removeDir from './remove-dir/index.js'

package/node/@aws-s3/storage/directory/index.js

@@ -1,4 +1,4 @@
 export * as copyDir from './copy-dir/index.js'
 export * as list from './list/index.js'
-export * as removeDir from './remove-dir/index.js'
 export * as moveDir from './move-dir/index.js'
+export * as removeDir from './remove-dir/index.js'

package/node/@aws-s3/storage/file/index.d.ts

@@ -1,5 +1,5 @@
-export * as download from './download/index.js'
 export * as copy from './copy/index.js'
+export * as download from './download/index.js'
 export * as exists from './exists/index.js'
 export * as move from './move/index.js'
 export * as remove from './remove/index.js'

package/node/@aws-s3/storage/file/index.js

@@ -1,5 +1,5 @@
-export * as download from './download/index.js'
 export * as copy from './copy/index.js'
+export * as download from './download/index.js'
 export * as exists from './exists/index.js'
 export * as move from './move/index.js'
 export * as remove from './remove/index.js'

package/node/@aws-s3/storage/index.d.ts

@@ -1,2 +1,2 @@
-export * as file from './file/index.js'
 export * as directory from './directory/index.js'
+export * as file from './file/index.js'

package/node/@aws-s3/storage/index.js

@@ -1,2 +1,2 @@
-export * as file from './file/index.js'
 export * as directory from './directory/index.js'
+export * as file from './file/index.js'

package/node/@google-cloud/storage/file/index.d.ts

@@ -1,11 +1,11 @@
 export * as copy from './copy/index.js'
 export * as download from './download/index.js'
-export * as generateSignedUrl from './generate-signed-url/index.js'
 export * as exists from './exists/index.js'
-export * as getPermissions from './get-permissions/index.js'
+export * as generateSignedUrl from './generate-signed-url/index.js'
 export * as getMetadata from './get-metadata/index.js'
-export * as remove from './remove/index.js'
+export * as getPermissions from './get-permissions/index.js'
 export * as move from './move/index.js'
+export * as remove from './remove/index.js'
 export * as revokeSignedUrls from './revoke-signed-urls/index.js'
 export * as stat from './stat/index.js'
 export * as updateMetadata from './update-metadata/index.js'

package/node/@google-cloud/storage/file/index.js

@@ -1,11 +1,11 @@
 export * as copy from './copy/index.js'
 export * as download from './download/index.js'
-export * as generateSignedUrl from './generate-signed-url/index.js'
 export * as exists from './exists/index.js'
-export * as getPermissions from './get-permissions/index.js'
+export * as generateSignedUrl from './generate-signed-url/index.js'
 export * as getMetadata from './get-metadata/index.js'
-export * as remove from './remove/index.js'
+export * as getPermissions from './get-permissions/index.js'
 export * as move from './move/index.js'
+export * as remove from './remove/index.js'
 export * as revokeSignedUrls from './revoke-signed-urls/index.js'
 export * as stat from './stat/index.js'
 export * as updateMetadata from './update-metadata/index.js'

package/node/cloud-storage/operations/index.d.ts

@@ -2,10 +2,10 @@ export * as copyDir from './copy-dir/index.js'
 export * as copyFile from './copy-file/index.js'
 export * as downloadFile from './download-file/index.js'
 export * as existsFile from './exists-file/index.js'
-export * as moveDir from './move-dir/index.js'
 export * as listDir from './list-dir/index.js'
+export * as moveDir from './move-dir/index.js'
 export * as moveFile from './move-file/index.js'
 export * as removeDir from './remove-dir/index.js'
+export * as removeFile from './remove-file/index.js'
 export * as statFile from './stat-file/index.js'
 export * as uploadFile from './upload-file/index.js'
-export * as removeFile from './remove-file/index.js'

package/node/cloud-storage/operations/index.js

@@ -2,10 +2,10 @@ export * as copyDir from './copy-dir/index.js'
 export * as copyFile from './copy-file/index.js'
 export * as downloadFile from './download-file/index.js'
 export * as existsFile from './exists-file/index.js'
-export * as moveDir from './move-dir/index.js'
 export * as listDir from './list-dir/index.js'
+export * as moveDir from './move-dir/index.js'
 export * as moveFile from './move-file/index.js'
 export * as removeDir from './remove-dir/index.js'
+export * as removeFile from './remove-file/index.js'
 export * as statFile from './stat-file/index.js'
 export * as uploadFile from './upload-file/index.js'
-export * as removeFile from './remove-file/index.js'

package/node/files/index.d.ts

@@ -1,4 +1,4 @@
 export * as getSize from './get-size/index.js'
 export * as isInDirectory from './is-in-directory/index.js'
-export * as subpaths from './subpaths/index.js'
 export * as readWrite from './read-write/index.js'
+export * as subpaths from './subpaths/index.js'

package/node/files/index.js

@@ -1,4 +1,4 @@
 export * as getSize from './get-size/index.js'
 export * as isInDirectory from './is-in-directory/index.js'
-export * as subpaths from './subpaths/index.js'
 export * as readWrite from './read-write/index.js'
+export * as subpaths from './subpaths/index.js'

package/node/ftps/directory/index.d.ts

@@ -1,4 +1,4 @@
 export * as copyDir from './copy-dir/index.js'
 export * as list from './list/index.js'
-export * as removeDir from './remove-dir/index.js'
 export * as moveDir from './move-dir/index.js'
+export * as removeDir from './remove-dir/index.js'

package/node/ftps/directory/index.js

@@ -1,4 +1,4 @@
 export * as copyDir from './copy-dir/index.js'
 export * as list from './list/index.js'
-export * as removeDir from './remove-dir/index.js'
 export * as moveDir from './move-dir/index.js'
+export * as removeDir from './remove-dir/index.js'

package/node/ftps/file/index.d.ts

@@ -1,7 +1,7 @@
-export * as download from './download/index.js'
 export * as copy from './copy/index.js'
+export * as download from './download/index.js'
 export * as exists from './exists/index.js'
+export * as move from './move/index.js'
 export * as remove from './remove/index.js'
 export * as stat from './stat/index.js'
-export * as move from './move/index.js'
 export * as upload from './upload/index.js'

package/node/ftps/file/index.js

@@ -1,7 +1,7 @@
-export * as download from './download/index.js'
 export * as copy from './copy/index.js'
+export * as download from './download/index.js'
 export * as exists from './exists/index.js'
+export * as move from './move/index.js'
 export * as remove from './remove/index.js'
 export * as stat from './stat/index.js'
-export * as move from './move/index.js'
 export * as upload from './upload/index.js'

package/node/images/transform/operations/index.d.ts

@@ -1,15 +1,15 @@
 export * as blur from './blur/index.js'
+export * as brighten from './brighten/index.js'
 export * as extend from './extend/index.js'
 export * as extract from './extract/index.js'
-export * as brighten from './brighten/index.js'
 export * as flatten from './flatten/index.js'
 export * as flip from './flip/index.js'
 export * as flop from './flop/index.js'
+export * as hue from './hue/index.js'
 export * as level from './level/index.js'
 export * as lighten from './lighten/index.js'
-export * as hue from './hue/index.js'
-export * as overlay from './overlay/index.js'
 export * as normalize from './normalize/index.js'
+export * as overlay from './overlay/index.js'
 export * as resize from './resize/index.js'
-export * as saturate from './saturate/index.js'
 export * as rotate from './rotate/index.js'
+export * as saturate from './saturate/index.js'

package/node/images/transform/operations/index.js

@@ -1,15 +1,15 @@
 export * as blur from './blur/index.js'
+export * as brighten from './brighten/index.js'
 export * as extend from './extend/index.js'
 export * as extract from './extract/index.js'
-export * as brighten from './brighten/index.js'
 export * as flatten from './flatten/index.js'
 export * as flip from './flip/index.js'
 export * as flop from './flop/index.js'
+export * as hue from './hue/index.js'
 export * as level from './level/index.js'
 export * as lighten from './lighten/index.js'
-export * as hue from './hue/index.js'
-export * as overlay from './overlay/index.js'
 export * as normalize from './normalize/index.js'
+export * as overlay from './overlay/index.js'
 export * as resize from './resize/index.js'
-export * as saturate from './saturate/index.js'
 export * as rotate from './rotate/index.js'
+export * as saturate from './saturate/index.js'

package/node/index.d.ts

@@ -1,8 +1,8 @@
 export * as awsS3 from './@aws-s3/index.js'
 export * as designEdito from './@design-edito/index.js'
 export * as express from './@express/index.js'
-export * as cloudStorage from './cloud-storage/index.js'
 export * as googleCloud from './@google-cloud/index.js'
+export * as cloudStorage from './cloud-storage/index.js'
 export * as encryption from './encryption/index.js'
 export * as files from './files/index.js'
 export * as ftps from './ftps/index.js'

package/node/index.js

@@ -1,8 +1,8 @@
 export * as awsS3 from './@aws-s3/index.js'
 export * as designEdito from './@design-edito/index.js'
 export * as express from './@express/index.js'
-export * as cloudStorage from './cloud-storage/index.js'
 export * as googleCloud from './@google-cloud/index.js'
+export * as cloudStorage from './cloud-storage/index.js'
 export * as encryption from './encryption/index.js'
 export * as files from './files/index.js'
 export * as ftps from './ftps/index.js'

package/node/sftp/directory/index.d.ts

@@ -1,4 +1,4 @@
+export * as copyDir from './copy-dir/index.js'
 export * as list from './list/index.js'
 export * as moveDir from './move-dir/index.js'
 export * as removeDir from './remove-dir/index.js'
-export * as copyDir from './copy-dir/index.js'

package/node/sftp/directory/index.js

@@ -1,4 +1,4 @@
+export * as copyDir from './copy-dir/index.js'
 export * as list from './list/index.js'
 export * as moveDir from './move-dir/index.js'
 export * as removeDir from './remove-dir/index.js'
-export * as copyDir from './copy-dir/index.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design-edito/tools",
-  "version": "0.5.15",
+  "version": "0.5.17",
   "description": "",
   "author": "Maxime Fabas",
   "license": "ISC",