@design-edito/tools 0.4.11 → 0.4.12

package/components/Video/index.js

@@ -1,297 +1,172 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 { Disclaimer } from '../Disclaimer/index.js';
 import { IntersectionObserverComponent } from '../IntersectionObserver/index.js';
-import { Subtitles } from '../Subtitles/index.js';
 import { mergeClassNames } from '../utils/index.js';
-import { video as publicClassName } from '../public-classnames.js';
-import { formatTime, secondsToMs, muteAttributeWorkaround, forcePlay, forcePause, forceLoud, forceMute, forceFullScreen, forceExitFullScreen, forceVolume, forceCurrentTime, getTimelineClickProgress, forcePlaybackRate } from './utils.js';
+import { videoWrapper as publicClassName } from '../public-classnames.js';
+import { muteAttributeWorkaround } 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
  * playback controls, volume, playback rate, a timeline, optional subtitles,
  * an optional disclaimer gate, and viewport-driven auto-play/mute behaviours.
  *
- * ### Root element modifiers
- * The root `<figure>` receives the public class name defined by `video` and
- * the following BEM-style modifier classes:
- * - `--play-on` / `--play-off` — reflects current playback state.
- * - `--fullscreen-on` / `--fullscreen-off` — reflects fullscreen state.
- * - `--loud` / `--muted` — reflects mute state.
- *
- * ### Data attributes on the root element
- * - `data-play-on` — present (empty string) when playing.
- * - `data-play-off` — present (empty string) when paused.
- * - `data-fullscreen-on` — present (empty string) when in fullScreen.
- * - `data-fullscreen-off` — present (empty string) when not in fullScreen.
- * - `data-loud` — present (empty string) when unmuted.
- * - `data-muted` — present (empty string) when muted.
- * - `data-volume` — current volume as a `0–1` float.
- * - `data-volume-percent` — current volume as a `0–100` float.
- * - `data-playback-rate` — current playback rate (e.g. `1`, `1.5`).
- * - `data-current-time-ms` — current time in milliseconds, fixed to 2 decimals.
- * - `data-current-time-ratio` — current / total ratio, fixed to 8 decimals.
- * - `data-total-time-ms` — total duration in milliseconds.
- *
- * ### CSS custom properties on the root element
- * - `--video-current-time-ratio` — current / total ratio, fixed to 8 decimals.
- * Useful for driving progress-bar animations purely in CSS.
- *
  * @param props - Component properties.
  * @see {@link Props}
  * @returns A `<figure>` element containing the video, its controls, optional
  * subtitles, and an optional disclaimer overlay.
  */
-export const Video = ({ sources, tracks, playBtnContent, pauseBtnContent, loudBtnContent, muteBtnContent, fullScreenBtnContent, subtitles, disclaimer, autoPlayWhenVisible, autoPauseWhenHidden, autoLoudWhenVisible, autoMuteWhenHidden, actionHandlers, stateHandlers, children, className, ...intrinsicVideoAttributes }) => {
+export const Video = ({ loop, disclaimer, autoPlayWhenVisible, autoPauseWhenHidden, autoMuteWhenHidden, autoLoudWhenVisible, wrapperClassName, ...controlledProps }) => {
     // State & refs
-    const [isPlaying, setIsPlaying] = useState(false);
-    const [isFullScreen, setIsFullScreen] = useState(false);
-    const [isLoud, setIsLoud] = useState(false);
-    const [currentTime, setCurrentTime] = useState(0);
-    const [totalTime, setTotalTime] = useState(0);
-    const [volume, setVolume] = useState(0);
-    const [playbackRate, setPlaybackRate] = useState(0);
-    const [hasBeenAutoPlayed, setHasBeenAutoPlayed] = useState(false);
+    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 [isDisclaimerOn, setIsDisclaimerOn] = useState(disclaimer?.isOn === true
         || disclaimer?.defaultIsOn === true
         || (disclaimer !== undefined && disclaimer.defaultIsOn === undefined));
-    let shouldDisclaimerBeOn = isDisclaimerOn;
-    if (disclaimer?.isOn === true) {
-        shouldDisclaimerBeOn = true;
-    }
-    if (disclaimer?.isOn === false) {
-        shouldDisclaimerBeOn = false;
-    }
-    const currentTimeMs = secondsToMs(currentTime);
-    const totalTimeMs = useMemo(() => secondsToMs(totalTime), [totalTime]);
-    const volumePercent = useMemo(() => volume * 100, [volume]);
-    const videoRef = useRef(null);
-    const $root = useRef(null);
-    // Intrinsic event handlers
-    const handleMetadataLoadEvent = useCallback((e) => {
-        if (videoRef.current === null)
+    const hasBeenAutoPlayed = useRef(false);
+    const needsDisclaimer = useMemo(() => disclaimer !== undefined, [disclaimer]);
+    const shouldDisclaimerBeOn = useMemo(() => {
+        if (disclaimer?.isOn === false)
+            return false;
+        if (disclaimer?.isOn === true)
+            return true;
+        return isDisclaimerOn;
+    }, [disclaimer, isDisclaimerOn]);
+    const needsObserve = useMemo(() => autoLoudWhenVisible === true
+        || autoMuteWhenHidden === true
+        || autoPlayWhenVisible === true
+        || autoPauseWhenHidden === true, [
+        autoLoudWhenVisible,
+        autoMuteWhenHidden,
+        autoPlayWhenVisible,
+        autoPauseWhenHidden
+    ]);
+    // Intrisic event handlers
+    const handleOnPlayEvent = useCallback((e) => {
+        controlledProps.onPlay?.(e);
+        if (shouldDisclaimerBeOn) {
+            setPlay(false);
             return;
-        const video = videoRef.current;
-        muteAttributeWorkaround(video, intrinsicVideoAttributes.muted ?? false, setIsLoud);
-        setTotalTime(video.duration);
-        setPlaybackRate(video.playbackRate);
-        setVolume(video.volume);
-        setIsLoud(!video.muted);
-        intrinsicVideoAttributes.onLoadedMetadata?.(e);
-    }, [intrinsicVideoAttributes.onLoadedMetadata, intrinsicVideoAttributes.muted]);
-    const handleVolumeChangeEvent = useCallback((e) => {
-        const volume = e.currentTarget.volume;
-        setVolume(volume);
-        intrinsicVideoAttributes.onVolumeChange?.(e);
-    }, [intrinsicVideoAttributes.onVolumeChange]);
-    const handlePlayEvent = useCallback((e) => {
-        setIsPlaying(true);
-        setHasBeenAutoPlayed(true);
-        intrinsicVideoAttributes.onPlay?.(e);
-    }, [intrinsicVideoAttributes.onPlay]);
-    const handlePauseEvent = useCallback((e) => {
-        setIsPlaying(false);
-        intrinsicVideoAttributes.onPause?.(e);
-    }, [intrinsicVideoAttributes.onPause]);
-    const handleRateChangeEvent = useCallback((e) => {
-        const currentRate = e.currentTarget.playbackRate;
-        setPlaybackRate(currentRate);
-        intrinsicVideoAttributes.onRateChange?.(e);
-    }, [intrinsicVideoAttributes.onRateChange]);
-    const handleTimeUpdateEvent = useCallback((e) => {
-        const currentTime = e.currentTarget.currentTime;
-        setCurrentTime(currentTime);
-        intrinsicVideoAttributes?.onTimeUpdate?.(e);
-    }, [totalTime, intrinsicVideoAttributes.onTimeUpdate]);
-    // User action handlers
-    const handleVolumeRangeChange = useCallback((e) => {
-        const targetVolume = Number(e.currentTarget.value);
-        actionHandlers?.volumeRangeChange?.(e, targetVolume, volume, videoRef.current);
-        forceVolume(videoRef.current, targetVolume, setVolume);
-    }, [actionHandlers?.volumeRangeChange, volume]);
-    const handleLoudButtonClick = useCallback((e) => {
-        actionHandlers?.loudButtonClick?.(e, isLoud, videoRef.current);
-        forceLoud(videoRef.current, setIsLoud);
-    }, [actionHandlers?.loudButtonClick, isLoud]);
-    const handleMuteButtonClick = useCallback((e) => {
-        actionHandlers?.muteButtonClick?.(e, isLoud, videoRef.current);
-        forceMute(videoRef.current, setIsLoud);
-    }, [actionHandlers?.muteButtonClick, isLoud]);
-    const handlePlayButtonClick = useCallback((e) => {
-        actionHandlers?.playButtonClick?.(e, isPlaying, videoRef.current);
-        void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
-    }, [actionHandlers?.playButtonClick, isPlaying, shouldDisclaimerBeOn]);
-    const handlePauseButtonClick = useCallback((e) => {
-        actionHandlers?.pauseButtonClick?.(e, isPlaying, videoRef.current);
-        forcePause(videoRef.current, setIsPlaying);
-    }, [actionHandlers?.pauseButtonClick, isPlaying]);
-    const handleFullScreenButtonClick = useCallback((e) => {
-        actionHandlers?.fullscreenButtonClick?.(e, isFullScreen, videoRef.current);
-        if (isFullScreen)
-            void forceExitFullScreen(videoRef.current, setIsFullScreen);
-        else
-            void forceFullScreen(videoRef.current, shouldDisclaimerBeOn, setIsFullScreen);
-    }, [isFullScreen, shouldDisclaimerBeOn]);
-    const handleRateRangeChange = useCallback((e) => {
-        const rate = Number(e.currentTarget.value);
-        actionHandlers?.rateRangeChange?.(e, rate, playbackRate, videoRef.current);
-        forcePlaybackRate(videoRef.current, rate, setPlaybackRate);
-    }, [actionHandlers?.rateRangeChange, playbackRate]);
-    const handleTimelineClick = useCallback((e) => {
-        const progress = getTimelineClickProgress(e, e.currentTarget, videoRef.current);
-        const time = progress * totalTime;
-        actionHandlers?.timelineClick?.(e, time, currentTime, videoRef.current);
-        forceCurrentTime(videoRef.current, time, setCurrentTime);
-    }, [actionHandlers?.timelineClick, totalTime, currentTime]);
-    // Disclaimer handlers
-    const handleDisclaimerDismiss = useCallback(() => {
+        }
+        setPlay(true);
+        hasBeenAutoPlayed.current = true;
+    }, [controlledProps?.onPlay, shouldDisclaimerBeOn]);
+    const handleOnPauseEvent = useCallback((e) => {
+        setPlay(false);
+        controlledProps.onPause?.(e);
+    }, [controlledProps?.onPause]);
+    const handleOnVolumeChangeEvent = useCallback((e) => {
+        setMute(Boolean(e.currentTarget.muted));
+        setVolume(Number(e.currentTarget.volume));
+        controlledProps.onVolumeChange?.(e);
+    }, [controlledProps?.onVolumeChange]);
+    const handleOnRateChangeEvent = useCallback((e) => {
+        setPlaybackRate(Number(e.currentTarget.playbackRate));
+        controlledProps.onRateChange?.(e);
+    }, [controlledProps?.onRateChange]);
+    const handleOnFullscreenChangeEvent = useCallback((e) => {
+        if (document.fullscreenElement === null || shouldDisclaimerBeOn) {
+            setFullscreen(false);
+        }
+    }, [shouldDisclaimerBeOn]);
+    const handleOnLoadedMetadataEvent = useCallback((e) => {
+        muteAttributeWorkaround(e.currentTarget, controlledProps.muted ?? false);
+        controlledProps.onLoadedMetadata?.(e);
+    }, [controlledProps?.onLoadedMetadata, controlledProps?.muted]);
+    // User actions
+    const handlePlayButtonClick = useCallback((e, isPlaying, video) => {
+        controlledProps.actionHandlers?.playButtonClick?.(e, isPlaying, video);
+        setPlay(!shouldDisclaimerBeOn);
+    }, [controlledProps.actionHandlers, shouldDisclaimerBeOn]);
+    const handlePauseButtonClick = useCallback((e, isPlaying, video) => {
+        controlledProps.actionHandlers?.pauseButtonClick?.(e, isPlaying, video);
+        setPlay(false);
+    }, [controlledProps.actionHandlers]);
+    const handleLoudButtonClick = useCallback((e, isLoud, video) => {
+        controlledProps.actionHandlers?.loudButtonClick?.(e, isLoud, video);
+        setMute(false);
+    }, [controlledProps.actionHandlers]);
+    const handleMuteButtonClick = useCallback((e, isLoud, video) => {
+        controlledProps.actionHandlers?.muteButtonClick?.(e, isLoud, video);
+        setMute(true);
+    }, [controlledProps.actionHandlers]);
+    const handleRateRangeChange = useCallback((e, targetRate, currentRate, video) => {
+        controlledProps.actionHandlers?.rateRangeChange?.(e, targetRate, currentRate, video);
+        setPlaybackRate(targetRate);
+    }, [controlledProps.actionHandlers]);
+    const handleVolumeRangeChange = useCallback((e, targetVolume, currentVolume, video) => {
+        controlledProps.actionHandlers?.volumeRangeChange?.(e, targetVolume, currentVolume, video);
+        setVolume(targetVolume);
+    }, [controlledProps.actionHandlers]);
+    const handleFullscreenButtonClick = useCallback((e, isFullscreen, video) => {
+        controlledProps.actionHandlers?.fullscreenButtonClick?.(e, isFullscreen, video);
+        setFullscreen((prev) => shouldDisclaimerBeOn ? false : !isFullscreen);
+    }, [controlledProps.actionHandlers, shouldDisclaimerBeOn]);
+    // Intersection Observer + Disclaimer
+    const onIntersected = useCallback(({ ioEntry }) => {
+        if (ioEntry === undefined)
+            return;
+        const { isIntersecting = false } = ioEntry;
+        if (autoPauseWhenHidden === true && !isIntersecting) {
+            setPlay(false);
+        }
+        if (autoLoudWhenVisible === true && isIntersecting) {
+            setMute(false);
+        }
+        if (autoPlayWhenVisible === true && !shouldDisclaimerBeOn && !hasBeenAutoPlayed.current && isIntersecting) {
+            setPlay(true);
+        }
+        if (autoMuteWhenHidden === true && !shouldDisclaimerBeOn && !hasBeenAutoPlayed.current && !isIntersecting) {
+            setMute(true);
+        }
+    }, [autoPlayWhenVisible, autoPauseWhenHidden, autoMuteWhenHidden, autoLoudWhenVisible, shouldDisclaimerBeOn]);
+    const handleDiclaimerDismiss = useCallback((prevIsOn) => {
         setIsDisclaimerOn(false);
-        if (intrinsicVideoAttributes.autoPlay === true
-            && !hasBeenAutoPlayed)
-            void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
-    }, [disclaimer, intrinsicVideoAttributes.autoPlay, shouldDisclaimerBeOn]);
+        if (controlledProps.autoPlay === true && !hasBeenAutoPlayed.current) {
+            setPlay(true);
+        }
+        disclaimer?.actionHandlers?.dismissClick?.(prevIsOn);
+    }, [controlledProps.autoPlay, disclaimer?.actionHandlers?.dismissClick]);
     useEffect(() => {
-        if (isDisclaimerOn !== shouldDisclaimerBeOn)
+        if (isDisclaimerOn !== shouldDisclaimerBeOn) {
             setIsDisclaimerOn(shouldDisclaimerBeOn);
-        if (shouldDisclaimerBeOn) {
-            forceMute(videoRef.current, setIsLoud);
-            forcePause(videoRef.current, setIsPlaying);
-            void forceExitFullScreen(videoRef.current, setIsFullScreen);
-        }
-        else if (intrinsicVideoAttributes.autoPlay === true) {
-            if (videoRef.current === null)
-                return;
-            if (hasBeenAutoPlayed)
-                return;
-            if (videoRef.current.paused)
-                void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
         }
-    }, [
-        shouldDisclaimerBeOn,
-        intrinsicVideoAttributes,
-        hasBeenAutoPlayed
-    ]);
-    useEffect(() => {
-        stateHandlers?.isPlaying?.(isPlaying);
-    }, [isPlaying, stateHandlers?.isPlaying]);
-    useEffect(() => {
-        stateHandlers?.isFullScreen?.(isFullScreen);
-    }, [isFullScreen, stateHandlers?.isFullScreen]);
+    }, [isDisclaimerOn, shouldDisclaimerBeOn]);
     useEffect(() => {
-        stateHandlers?.isLoud?.(isLoud);
-    }, [isLoud, stateHandlers?.isLoud]);
-    useEffect(() => {
-        stateHandlers?.volume?.(volume);
-    }, [volume, stateHandlers?.volume]);
-    useEffect(() => {
-        stateHandlers?.playbackRate?.(playbackRate);
-    }, [playbackRate, stateHandlers?.playbackRate]);
-    useEffect(() => {
-        stateHandlers?.currentTime?.(currentTime);
-    }, [currentTime, stateHandlers?.currentTime]);
-    // Parsing sources & tracks props
-    const parsedSources = useMemo(() => {
-        if (sources === undefined)
-            return [];
-        if (typeof sources === 'string')
-            return [{ src: sources }];
-        if (Array.isArray(sources)) {
-            if (sources.length === 0)
-                return [];
-            if (typeof sources[0] === 'string')
-                return sources.map(src => ({ src }));
-            return sources;
+        if (shouldDisclaimerBeOn) {
+            setMute(true);
+            setPlay(false);
+            setFullscreen(false);
         }
-        return [];
-    }, [sources]);
-    const parsedTracks = useMemo(() => {
-        if (tracks === undefined)
-            return [];
-        if (typeof tracks === 'string')
-            return [{ src: tracks }];
-        if (Array.isArray(tracks)) {
-            if (tracks.length === 0)
-                return [];
-            if (typeof tracks[0] === 'string')
-                return tracks.map(src => ({ src }));
-            return tracks;
+        else if (controlledProps.autoPlay === true && !hasBeenAutoPlayed.current) {
+            setPlay(true);
         }
-        return [];
-    }, [tracks]);
-    // Rendering
+    }, [shouldDisclaimerBeOn]);
+    // Render
     const c = clss(publicClassName, { cssModule });
-    const rootClss = mergeClassNames(c(null, {
-        'play-on': isPlaying,
-        'play-off': !isPlaying,
-        'fullscreen-on': isFullScreen,
-        'fullscreen-off': !isFullScreen,
-        'loud': isLoud,
-        'muted': !isLoud
-    }), className);
-    const rootAttributes = {
-        'data-play-on': isPlaying ? '' : undefined,
-        'data-play-off': !isPlaying ? '' : undefined,
-        'data-fullscreen-on': isFullScreen ? '' : undefined,
-        'data-fullscreen-off': !isFullScreen ? '' : undefined,
-        'data-loud': isLoud ? '' : undefined,
-        'data-muted': !isLoud ? '' : undefined,
-        'data-volume': volume,
-        'data-volume-percent': volumePercent,
-        'data-playback-rate': playbackRate,
-        'data-current-time-ms': currentTimeMs.toFixed(2),
-        'data-current-time-ratio': (currentTime / totalTime).toFixed(8),
-        'data-total-time-ms': totalTimeMs
-    };
-    const rootStyles = {
-        [`--${publicClassName}-elapsed-time-ratio`]: (currentTime / totalTime).toFixed(8)
-    };
-    const videoClss = c('video');
-    const videoControlsClss = c('video-controls');
-    const playBtnClss = c('play-btn');
-    const pauseBtnClss = c('pause-btn');
-    const loudBtnClss = c('loud-btn');
-    const muteBtnClss = c('mute-btn');
-    const volumePcntClss = c('volume-percent');
-    const fullScreenBtnClss = c('fullscreen-btn');
-    const volumeRangeClss = c('volume-range');
-    const playbackRateRangeClss = c('playback-rate-range');
-    const playbackRateClss = c('playback-rate');
-    const timeControlsClss = c('time-controls');
-    const currentTimeClss = c('current-time');
-    const totalTimeClss = c('total-time');
-    const timelineClss = c('timeline');
-    const sensitiveContent = _jsxs(_Fragment, { children: [_jsxs("video", { ref: videoRef, className: videoClss, onVolumeChange: handleVolumeChangeEvent, onLoadedMetadata: handleMetadataLoadEvent, onPlay: handlePlayEvent, onPause: handlePauseEvent, onTimeUpdate: handleTimeUpdateEvent, onRateChange: handleRateChangeEvent, ...intrinsicVideoAttributes, autoPlay: shouldDisclaimerBeOn ? false : intrinsicVideoAttributes.autoPlay, muted: shouldDisclaimerBeOn ? true : intrinsicVideoAttributes.muted, 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: 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: formatTime(currentTimeMs, 'mm:ss:ms') }), _jsx("span", { className: totalTimeClss, children: formatTime(totalTimeMs, 'mm:ss:ms') }), _jsx("div", { className: timelineClss, onClick: handleTimelineClick })] }), subtitles !== undefined && _jsx(Subtitles, { ...subtitles, timecodeMs: currentTimeMs })] });
-    const disclaimedContent = disclaimer !== undefined
-        ? _jsx(Disclaimer, { ...disclaimer, isOn: shouldDisclaimerBeOn, actionHandlers: {
-                dismissClick: handleDisclaimerDismiss
+    const rootClss = mergeClassNames(c(null, {}), wrapperClassName);
+    const sensitiveContent = _jsx(ControlledVideo, { ...controlledProps, play: play, volume: volume, mute: mute, playbackRate: playbackRate, fullscreen: fullscreen, onPlay: handleOnPlayEvent, onPause: handleOnPauseEvent, onVolumeChange: handleOnVolumeChangeEvent, onRateChange: handleOnRateChangeEvent, onLoadedMetadata: handleOnLoadedMetadataEvent, onFullscreenChange: handleOnFullscreenChangeEvent, actionHandlers: {
+            ...controlledProps.actionHandlers,
+            playButtonClick: handlePlayButtonClick,
+            pauseButtonClick: handlePauseButtonClick,
+            loudButtonClick: handleLoudButtonClick,
+            muteButtonClick: handleMuteButtonClick,
+            volumeRangeChange: handleVolumeRangeChange,
+            rateRangeChange: handleRateRangeChange,
+            fullscreenButtonClick: handleFullscreenButtonClick
+        } });
+    const disclaimedContent = needsDisclaimer
+        ? _jsx(Disclaimer, { ...disclaimer, actionHandlers: {
+                ...disclaimer?.actionHandlers,
+                dismissClick: handleDiclaimerDismiss
             }, children: sensitiveContent })
         : sensitiveContent;
-    const observedContent = autoLoudWhenVisible === true
-        || autoMuteWhenHidden === true
-        || autoPlayWhenVisible === true
-        || autoPauseWhenHidden === true
-        ? _jsx(IntersectionObserverComponent, { onIntersected: ({ ioEntry }) => {
-                const { isIntersecting = false } = ioEntry ?? {};
-                if (autoMuteWhenHidden === true && !isIntersecting)
-                    forceMute(videoRef.current, setIsLoud);
-                if (autoPauseWhenHidden === true && !isIntersecting)
-                    forcePause(videoRef.current, setIsPlaying);
-                if (autoPlayWhenVisible === true
-                    && !hasBeenAutoPlayed
-                    && !shouldDisclaimerBeOn
-                    && isIntersecting)
-                    void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
-                if (autoLoudWhenVisible === true
-                    && !hasBeenAutoPlayed
-                    && !shouldDisclaimerBeOn
-                    && isIntersecting)
-                    forceLoud(videoRef.current, setIsLoud);
-            }, children: disclaimedContent })
-        : disclaimedContent;
-    return _jsx("figure", { className: rootClss, ...rootAttributes, ref: $root, style: rootStyles, children: observedContent });
+    return (_jsx("div", { className: rootClss, children: needsObserve
+            ? _jsx(IntersectionObserverComponent, { onIntersected: onIntersected, children: disclaimedContent })
+            : disclaimedContent }));
 };

package/components/Video/utils.d.ts

@@ -1,14 +1,15 @@
 import type { Dispatch, SetStateAction } from 'react';
-export declare const muteAttributeWorkaround: (video: HTMLVideoElement | null, shouldMute: boolean, setIsSoundOn: Dispatch<SetStateAction<boolean>>) => void;
-export declare const forceMute: (video: HTMLVideoElement | null, setIsSoundOn: Dispatch<SetStateAction<boolean>>) => void;
-export declare const forceLoud: (video: HTMLVideoElement | null, setIsSoundOn: Dispatch<SetStateAction<boolean>>) => void;
-export declare const forceVolume: (video: HTMLVideoElement | null, volumePercent: number, setVolume: Dispatch<SetStateAction<number>>) => void;
+export declare const muteAttributeWorkaround: (video: HTMLVideoElement | null, shouldMute: boolean) => void;
+export declare const forceMute: (video: HTMLVideoElement | null) => void;
+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, shouldDisclaimerBeOn: boolean, setIsPlaying: Dispatch<SetStateAction<boolean>>) => Promise<void>;
-export declare const forcePause: (video: HTMLVideoElement | null, setIsPlaying: Dispatch<SetStateAction<boolean>>) => void;
-export declare const forcePlaybackRate: (video: HTMLVideoElement | null, rate: number, setPlaybackRate: Dispatch<SetStateAction<number>>) => void;
-export declare const forceFullScreen: (video: HTMLVideoElement | null, shouldDisclaimerBeOn: boolean, setIsFullscreen: Dispatch<SetStateAction<boolean>>) => Promise<void>;
-export declare const forceExitFullScreen: (video: HTMLVideoElement | null, setIsFullscreen: Dispatch<SetStateAction<boolean>>) => Promise<void>;
+export declare const forcePlay: (video: HTMLVideoElement | null) => Promise<boolean>;
+export declare const forcePause: (video: HTMLVideoElement | null) => Promise<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>;
 export declare function secondsToMs(seconds: number): number;
+export declare function msToSeconds(ms: number): number;
 export declare function formatTime(ms: number, format: string, fps?: number): string;
-export declare const getTimelineClickProgress: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, timeline: HTMLDivElement | null, video: HTMLVideoElement | null) => number;
+export declare const getTimelineClickProgress: (event: React.MouseEvent<HTMLDivElement>, timeline: HTMLDivElement | null, video: HTMLVideoElement | null) => number;

package/components/Video/utils.js

@@ -1,5 +1,5 @@
 /* Video element triggers */
-export const muteAttributeWorkaround = (video, shouldMute, setIsSoundOn) => {
+export const muteAttributeWorkaround = (video, shouldMute) => {
     if (video === null)
         return;
     if (!shouldMute)
@@ -9,26 +9,21 @@ export const muteAttributeWorkaround = (video, shouldMute, setIsSoundOn) => {
         return;
     video.setAttribute('muted', '');
     video.load();
-    setIsSoundOn(false);
 };
-export const forceMute = (video, setIsSoundOn) => {
+export const forceMute = (video) => {
     if (video === null)
         return;
     video.muted = true;
-    setIsSoundOn(false);
 };
-export const forceLoud = (video, setIsSoundOn) => {
+export const forceLoud = (video) => {
     if (video === null)
         return;
     video.muted = false;
-    setIsSoundOn(true);
 };
-export const forceVolume = (video, volumePercent, setVolume) => {
+export const forceVolume = (video, volume) => {
     if (video === null)
         return;
-    const volume = volumePercent / 100;
     video.volume = volume;
-    setVolume(volume);
 };
 export const forceCurrentTime = (video, time, setCurrentTime) => {
     if (video === null)
@@ -36,73 +31,71 @@ export const forceCurrentTime = (video, time, setCurrentTime) => {
     video.currentTime = time;
     setCurrentTime(time);
 };
-export const forcePlay = async (video, shouldDisclaimerBeOn, setIsPlaying) => {
-    if (shouldDisclaimerBeOn) {
-        setIsPlaying(false);
-        return;
-    }
+export const forcePlay = async (video) => {
     if (video === null)
-        return;
+        return false;
+    if (!video.paused)
+        return true;
     try {
         await video.play();
-        setIsPlaying(true);
+        return video.paused;
     }
     catch (e) {
         console.error(e);
     }
+    return false;
 };
-export const forcePause = (video, setIsPlaying) => {
-    if (video === null) {
-        setIsPlaying(false);
-        return;
-    }
+export const forcePause = async (video) => {
+    if (video === null)
+        return false;
+    if (video.paused)
+        return true;
     try {
         video.pause();
-        setIsPlaying(false);
+        return video.paused;
     }
     catch (e) {
         console.error(e);
     }
+    return false;
 };
-export const forcePlaybackRate = (video, rate, setPlaybackRate) => {
+export const forcePlaybackRate = (video, rate) => {
     if (video === null)
         return;
     video.playbackRate = rate;
-    setPlaybackRate(rate);
 };
-export const forceFullScreen = async (video, shouldDisclaimerBeOn, setIsFullscreen) => {
-    if (shouldDisclaimerBeOn)
-        return;
-    if (video === null) {
-        setIsFullscreen(false);
-        return;
-    }
+export const forceFullscreen = async (video) => {
+    if (video === null)
+        return false;
     try {
         await video.requestFullscreen();
-        setIsFullscreen(true);
+        return document.fullscreenElement === video;
     }
     catch (e) {
-        setIsFullscreen(false);
         console.error(e);
     }
+    return false;
 };
-export const forceExitFullScreen = async (video, setIsFullscreen) => {
+export const forceExitFullscreen = async (video) => {
     if (video === null || document.fullscreenElement !== video) {
-        setIsFullscreen(false);
-        return;
+        return false;
     }
     try {
         await document.exitFullscreen();
-        setIsFullscreen(false);
+        return document.fullscreenElement !== video;
     }
     catch (e) {
         console.error(e);
     }
+    return false;
 };
 /* Time & formats */
 export function secondsToMs(seconds) {
     return seconds * 1000;
 }
+export function msToSeconds(ms) {
+    return ms / 1000;
+}
 export function formatTime(ms, format, fps = 25) {
     const totalSeconds = Math.floor(ms / 1000);
     const hours = Math.floor(totalSeconds / 3600);

package/components/public-classnames.d.ts

@@ -16,3 +16,4 @@ export declare const subtitles = "dsed-subtitles";
 export declare const theatre = "dsed-theatre";
 export declare const uiModule = "dsed-ui-module";
 export declare const video = "dsed-video";
+export declare const videoWrapper = "dsed-video-wrapper";

package/components/public-classnames.js

@@ -16,3 +16,4 @@ export const subtitles = 'dsed-subtitles';
 export const theatre = 'dsed-theatre';
 export const uiModule = 'dsed-ui-module';
 export const video = 'dsed-video';
+export const videoWrapper = 'dsed-video-wrapper';

package/index.d.ts

@@ -1,3 +1,3 @@
-export * as components from './components/index.js'
 export * as agnostic from './agnostic/index.js'
+export * as components from './components/index.js'
 export * as node from './node/index.js'

package/index.js

@@ -1,3 +1,3 @@
-export * as components from './components/index.js'
 export * as agnostic from './agnostic/index.js'
+export * as components from './components/index.js'
 export * as node from './node/index.js'