@apple-pie/slice 0.1.60 → 0.2.0

package/dist/cjs/chunks/Video-C1GATYS9.js

@@ -0,0 +1,396 @@
+'use client';
+"use strict";
+
+var PlayState, tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), theme_corners = require("../theme/corners.js"), misc = require("./misc-PmT7cZzC.js"), resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), usePrefersReducedMotion = require("./usePrefersReducedMotion-GpD17CAE.js"), IconButton = require("./IconButton-KJr15EW6.js"), ProgressIndicator = require("./ProgressIndicator-Ddj5dfEA.js"), Slider = require("./Slider-Y7zMFKiM.js"), ToggleButton = require("./ToggleButton-De8_kkMd.js"), getVideoControls = require("./getVideoControls-LxSY7z8h.js"), css = {
+    wrapper: "Video-module_wrapper__a9iH8",
+    video: "Video-module_video__hxKME",
+    controls: "Video-module_controls__X4yt6",
+    controlsHeader: "Video-module_controlsHeader__dD64-",
+    controlsFooter: "Video-module_controlsFooter__qJNTa",
+    controlsBody: "Video-module_controlsBody__2GbQz",
+    right: "Video-module_right__UMhfW",
+    left: "Video-module_left__XC33m",
+    progress: "Video-module_progress__UTWtq"
+};
+
+!function(PlayState) {
+    PlayState.Playing = "playing", PlayState.Paused = "paused", PlayState.Stopped = "stopped", 
+    PlayState.Ended = "ended";
+}(PlayState || (PlayState = {}));
+
+const BaseVideo = React.forwardRef((rawProps, ref) => {
+    const props = resolveColorProps.resolveColorProps(rawProps), {children: children, src: src, playing: playing, loop: loop = !1, muted: muted = !0, playsInline: playsInline = !0, controls: controls = "simple", volume: volume = 1, poster: poster, captionsSrc: captionsSrc, captionsLanguage: captionsLanguage = "en", captionsLabel: captionsLabel = "Captions", captionsDefault: captionsDefault = !1, videoName: videoName = "Video", videoAttributes: videoAttributes, onError: onError, playRate: playRate = 1, width: width = "100%", height: height = "auto", borderRadius: borderRadius = "var(--corner-s)", borderWidth: borderWidth, borderColor: borderColor, backgroundColor: backgroundColor, objectFit: objectFit = "contain", customControls: controlOverrides, showProgressIndicator: showProgressIndicator = !0, onPlay: onPlay, onPause: onPause, onEnd: onEnd, onProgress: onProgress, onLoadProgress: onLoadProgress, onPlaybackRateChange: onPlaybackRateChange, onCanPlayThrough: onCanPlayThrough, onCanPlay: onCanPlay, onPlayStateChange: onPlayStateChange, onLoadMetaData: onLoadMetaData, onFullScreenChange: onFullScreenChange, onVolumeChange: onVolumeChange, onLoadedFrameData: onLoadedFrameData, onQuit: onQuit} = props, divAttributes = tslib_es6.__rest(props, [ "children", "src", "playing", "loop", "muted", "playsInline", "controls", "volume", "poster", "captionsSrc", "captionsLanguage", "captionsLabel", "captionsDefault", "videoName", "videoAttributes", "onError", "playRate", "width", "height", "borderRadius", "borderWidth", "borderColor", "backgroundColor", "objectFit", "customControls", "showProgressIndicator", "onPlay", "onPause", "onEnd", "onProgress", "onLoadProgress", "onPlaybackRateChange", "onCanPlayThrough", "onCanPlay", "onPlayStateChange", "onLoadMetaData", "onFullScreenChange", "onVolumeChange", "onLoadedFrameData", "onQuit" ]), {id: divId, className: className, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseMove: onMouseMove, onFocus: onFocus, onBlur: onBlur} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style", "onMouseEnter", "onMouseLeave", "onMouseMove", "onFocus", "onBlur" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", customControls = getVideoControls.getVideoControls(controlOverrides), controlMode = void 0 === controlOverrides ? controls : "simple", reducedMotion = usePrefersReducedMotion.usePrefersReducedMotion(), videoRef = React.useRef(null), containerRef = React.useRef(null), progress = React.useRef(null), wasPlaying = React.useRef(null), playState = React.useRef(PlayState.Stopped), [isPlaying, setIsPlaying] = React.useState(!1), [isMuted, setIsMuted] = React.useState(null != muted && muted), [currentVolume, setCurrentVolume] = React.useState(Number.isFinite(volume) ? Math.min(1, Math.max(0, volume)) : 1), [currentProgress, setCurrentProgress] = React.useState(0), [hovered, setHovered] = React.useState(!1), [canPlay, setCanPlay] = React.useState(!1), [focused, setFocused] = React.useState(!1), [duration, setDuration] = React.useState(0), [failed, setFailed] = React.useState(!1), [fullscreen, setFullscreen] = React.useState(!1), [captionsOn, setCaptionsOn] = React.useState(captionsDefault), seekFinished = React.useRef(!1), timer = React.useRef(null), handleLoadProgress = React.useCallback(event => {
+        const target = event.target;
+        if (target.buffered.length > 0) {
+            const bufferedEnd = target.buffered.end(target.buffered.length - 1), duration = target.duration;
+            if (Number.isFinite(duration) && duration > 0) {
+                const percentLoaded = Math.min(1, Math.max(0, bufferedEnd / duration));
+                null == onLoadProgress || onLoadProgress(percentLoaded);
+            }
+        }
+    }, [ onLoadProgress ]), handlePlayProgress = React.useCallback(event => {
+        var _a, _b, _c;
+        const target = event.target, percentPlayed = Number.isFinite(target.duration) && target.duration > 0 && Number.isFinite(target.currentTime) ? Math.min(1, Math.max(0, target.currentTime / target.duration)) : 0;
+        if (setCurrentProgress(percentPlayed), progress.current !== percentPlayed) {
+            null == onProgress || onProgress(percentPlayed), progress.current = percentPlayed;
+            const isAtZero = 0 === (null === (_a = videoRef.current) || void 0 === _a ? void 0 : _a.currentTime), isAtEnd = (null === (_b = videoRef.current) || void 0 === _b ? void 0 : _b.currentTime) === (null === (_c = videoRef.current) || void 0 === _c ? void 0 : _c.duration);
+            isAtZero && target.paused ? (playState.current !== PlayState.Stopped && (null == onPlayStateChange || onPlayStateChange(PlayState.Stopped)), 
+            playState.current = PlayState.Stopped) : isAtEnd ? (playState.current !== PlayState.Ended && (null == onPlayStateChange || onPlayStateChange(PlayState.Ended)), 
+            playState.current = PlayState.Ended) : target.paused && playState.current !== PlayState.Paused ? (null == onPlayStateChange || onPlayStateChange(PlayState.Paused), 
+            playState.current = PlayState.Paused) : target.paused || playState.current === PlayState.Playing || (null == onPlayStateChange || onPlayStateChange(PlayState.Playing), 
+            playState.current = PlayState.Playing);
+        }
+    }, [ onProgress, onPlayStateChange ]), handleCanPlayThrough = React.useCallback(() => {
+        null == onCanPlayThrough || onCanPlayThrough();
+    }, [ onCanPlayThrough ]), handleCanPlay = React.useCallback(() => {
+        setCanPlay(!0), setFailed(!1), null == onCanPlay || onCanPlay();
+    }, [ onCanPlay ]), syncPlayingState = React.useCallback(() => {
+        var _a, _b, _c, _d;
+        if (setIsPlaying(!(null === (_a = videoRef.current) || void 0 === _a ? void 0 : _a.paused)), 
+        null === (_b = videoRef.current) || void 0 === _b ? void 0 : _b.paused) return;
+        (null === (_c = videoRef.current) || void 0 === _c ? void 0 : _c.currentTime) === (null === (_d = videoRef.current) || void 0 === _d ? void 0 : _d.duration) ? (playState.current !== PlayState.Ended && (null == onPlayStateChange || onPlayStateChange(PlayState.Ended)), 
+        playState.current = PlayState.Ended) : playState.current !== PlayState.Playing && (null == onPlayStateChange || onPlayStateChange(PlayState.Playing), 
+        playState.current = PlayState.Playing);
+    }, [ onPlayStateChange ]), handlePlay = React.useCallback(() => {
+        null == onPlay || onPlay(), syncPlayingState();
+    }, [ onPlay, syncPlayingState ]), handlePlaying = React.useCallback(() => {
+        setCanPlay(!0), syncPlayingState();
+    }, [ syncPlayingState ]), handlePause = React.useCallback(() => {
+        var _a, _b, _c;
+        null == onPause || onPause(), setIsPlaying(!1);
+        const isAtZero = 0 === (null === (_a = videoRef.current) || void 0 === _a ? void 0 : _a.currentTime), isAtEnd = (null === (_b = videoRef.current) || void 0 === _b ? void 0 : _b.currentTime) === (null === (_c = videoRef.current) || void 0 === _c ? void 0 : _c.duration);
+        isAtZero && !isAtEnd ? (playState.current !== PlayState.Stopped && (null == onPlayStateChange || onPlayStateChange(PlayState.Stopped)), 
+        playState.current = PlayState.Stopped) : isAtEnd || playState.current !== PlayState.Paused && (null == onPlayStateChange || onPlayStateChange(PlayState.Paused), 
+        playState.current = PlayState.Paused);
+    }, [ onPause, onPlayStateChange ]), handleEnd = React.useCallback(() => {
+        setIsPlaying(!1), playState.current !== PlayState.Ended && (null == onPlayStateChange || onPlayStateChange(PlayState.Ended)), 
+        playState.current = PlayState.Ended, null == onEnd || onEnd();
+    }, [ onEnd, onPlayStateChange ]), handleLoadMetadata = React.useCallback(event => {
+        const target = event.target;
+        setDuration(Number.isFinite(target.duration) ? target.duration : 0), null == onLoadMetaData || onLoadMetaData(target.duration);
+    }, [ onLoadMetaData ]), handlePlaybackRate = React.useCallback(event => {
+        const playbackRate = event.target.playbackRate;
+        null == onPlaybackRateChange || onPlaybackRateChange(playbackRate);
+    }, [ onPlaybackRateChange ]), requestPlayback = React.useCallback(play => tslib_es6.__awaiter(void 0, void 0, void 0, function*() {
+        const video = videoRef.current;
+        if (!video) return;
+        (null != play ? play : video.paused) ? yield video.play() : (wasPlaying.current = null, 
+        seekFinished.current = !1, video.pause());
+    }), []), handlePlayClick = React.useCallback(play => {
+        requestPlayback(play).catch(() => {});
+    }, [ requestPlayback ]), handleMouseOver = React.useCallback(() => {
+        setHovered(!0), timer.current && clearTimeout(timer.current), timer.current = setTimeout(() => {
+            setHovered(!1);
+        }, 2e3);
+    }, []), handleMouseOut = React.useCallback(() => {
+        timer.current && clearTimeout(timer.current), setHovered(!1);
+    }, []), handleFullScreen = React.useCallback((...args_1) => tslib_es6.__awaiter(void 0, [ ...args_1 ], void 0, function*(state = !0) {
+        const container = containerRef.current;
+        container && (state ? yield container.requestFullscreen() : document.fullscreenElement === container && (yield document.exitFullscreen()));
+    }), []), handleMute = React.useCallback(state => {
+        if (!videoRef.current) return;
+        let nextMuted = !videoRef.current.muted;
+        void 0 !== state && (nextMuted = state), videoRef.current.muted = nextMuted, setIsMuted(nextMuted);
+    }, []), handleRateChange = React.useCallback((rate = 1) => {
+        if (!videoRef.current) return;
+        let nextRate = Number.isFinite(rate) ? rate : 1;
+        rate < .5 && (nextRate = .5), rate > 3 && (nextRate = 3), videoRef.current.playbackRate = nextRate;
+    }, []), handleRestart = React.useCallback(() => tslib_es6.__awaiter(void 0, void 0, void 0, function*() {
+        videoRef.current && (videoRef.current.pause(), videoRef.current.currentTime = 0, 
+        yield requestPlayback(!0));
+    }), [ requestPlayback ]), handleVolumeChange = React.useCallback((volume = 1) => {
+        videoRef.current && (videoRef.current.volume = Number.isFinite(volume) ? Math.min(1, Math.max(0, volume)) : 1);
+    }, []), handleSetProgress = React.useCallback(position => {
+        const video = videoRef.current;
+        video && Number.isFinite(video.duration) && !(video.duration <= 0) && Number.isFinite(position) && (null === wasPlaying.current && (wasPlaying.current = !video.paused), 
+        seekFinished.current = !1, video.pause(), video.currentTime = Math.min(1, Math.max(0, position)) * video.duration, 
+        setCurrentProgress(Math.min(1, Math.max(0, position))));
+    }, []), handleSeekEnd = React.useCallback(() => {
+        const video = videoRef.current;
+        if (!seekFinished.current || (null == video ? void 0 : video.seeking)) return;
+        const resume = wasPlaying.current;
+        wasPlaying.current = null, seekFinished.current = !1, resume && video && video.currentTime < video.duration && handlePlayClick(!0);
+    }, [ handlePlayClick ]), handleScrubEnd = () => {
+        seekFinished.current = !0, handleSeekEnd();
+    }, handleFullScreenChange = React.useCallback(() => {
+        const isFullscreen = document.fullscreenElement === containerRef.current;
+        setFullscreen(isFullscreen), null == onFullScreenChange || onFullScreenChange(isFullscreen);
+    }, [ onFullScreenChange ]), handleLoadedFrame = React.useCallback(() => {
+        null == onLoadedFrameData || onLoadedFrameData();
+    }, [ onLoadedFrameData ]);
+    React.useImperativeHandle(ref, () => ({
+        play: () => requestPlayback(!0),
+        stop: () => requestPlayback(!1),
+        restart: handleRestart,
+        setVolume: volume => {
+            handleVolumeChange(volume);
+        },
+        mute: mute => {
+            handleMute(mute);
+        },
+        fullscreen: handleFullScreen,
+        playbackRate: rate => {
+            handleRateChange(rate);
+        },
+        get videoElement() {
+            var _a;
+            return null !== (_a = videoRef.current) && void 0 !== _a ? _a : void 0;
+        }
+    }), [ requestPlayback, handleRestart, handleMute, handleFullScreen, handleRateChange, handleVolumeChange ]);
+    const controlsContext = {
+        playing: isPlaying,
+        muted: isMuted,
+        progress: currentProgress,
+        volume: currentVolume,
+        duration: duration,
+        fullscreen: fullscreen,
+        canSeek: duration > 0,
+        play: () => requestPlayback(!0),
+        pause: () => handlePlayClick(!1),
+        togglePlay: () => requestPlayback(),
+        toggleMute: () => handleMute(),
+        setVolume: handleVolumeChange,
+        setProgress: position => {
+            const video = videoRef.current;
+            if (!video || !Number.isFinite(video.duration) || video.duration <= 0 || !Number.isFinite(position)) return;
+            const value = Math.min(1, Math.max(0, position));
+            video.currentTime = value * video.duration, setCurrentProgress(value);
+        },
+        toggleFullscreen: () => handleFullScreen(!fullscreen)
+    }, showCustomControls = "simple" === controlMode || "custom" === controlMode, controlsVisible = hovered || focused, cssVars = React.useMemo(() => ({
+        "--video-width": misc.setStyle(width, "unset"),
+        "--video-height": misc.setStyle(height, "unset"),
+        "--video-border-radius": misc.setStyle(borderRadius, theme_corners.corners["corner-none"]),
+        "--video-border-size": misc.setStyle(borderWidth, 0),
+        "--video-border-color": misc.setStyle(borderColor, "transparent"),
+        "--video-bg-color": misc.setStyle(backgroundColor, "transparent"),
+        "--video-controls-transition": reducedMotion ? "none" : void 0,
+        "--video-object-fit": null != objectFit ? objectFit : "contain",
+        "--video-controls-pointer-events": controlsVisible ? "auto" : "none",
+        "--video-controls-opacity": controlsVisible ? 1 : 0,
+        "--video-progress-padding-left": customControls.quit ? "var(--spacing-s)" : "var(--spacing-m)"
+    }), [ width, height, borderRadius, borderWidth, borderColor, backgroundColor, objectFit, controlsVisible, reducedMotion, customControls.quit ]), speakerIcon = isMuted || 0 === currentVolume ? "media.volume-slash" : "media.volume-low";
+    React.useEffect(() => handleRateChange(playRate), [ playRate, handleRateChange ]), 
+    React.useEffect(() => {
+        void 0 !== playing && handlePlayClick(playing);
+    }, [ playing, handlePlayClick ]), React.useEffect(() => handleMute(muted), [ muted, handleMute ]), 
+    React.useEffect(() => handleVolumeChange(volume), [ volume, handleVolumeChange ]), 
+    React.useEffect(() => (document.addEventListener("fullscreenchange", handleFullScreenChange), 
+    () => document.removeEventListener("fullscreenchange", handleFullScreenChange)), [ handleFullScreenChange ]), 
+    React.useEffect(() => () => {
+        timer.current && clearTimeout(timer.current);
+    }, []);
+    const resetMedia = () => {
+        setCanPlay(!1), setFailed(!1), setIsPlaying(!1), setCurrentProgress(0), setDuration(0), 
+        progress.current = null, wasPlaying.current = null, seekFinished.current = !1, playState.current !== PlayState.Stopped && (null == onPlayStateChange || onPlayStateChange(PlayState.Stopped)), 
+        playState.current = PlayState.Stopped;
+    }, syncCaptions = React.useCallback(() => {
+        var _a;
+        const track = null === (_a = videoRef.current) || void 0 === _a ? void 0 : _a.textTracks[0];
+        track && (track.mode = captionsOn ? "showing" : "hidden");
+    }, [ captionsOn ]);
+    React.useEffect(() => {
+        syncCaptions();
+    }, [ syncCaptions ]), React.useEffect(() => {
+        var _a;
+        if (!captionsSrc) return;
+        const tracks = null === (_a = videoRef.current) || void 0 === _a ? void 0 : _a.textTracks, update = () => {
+            var _a;
+            return setCaptionsOn("showing" === (null === (_a = null == tracks ? void 0 : tracks[0]) || void 0 === _a ? void 0 : _a.mode));
+        };
+        return null == tracks || tracks.addEventListener("change", update), () => null == tracks ? void 0 : tracks.removeEventListener("change", update);
+    }, [ captionsSrc ]);
+    const buttonProps = {
+        backgroundColor: "transparent",
+        backgroundColorHover: "transparent",
+        backgroundColorSelected: "transparent",
+        iconColor: "var(--core-text-light)",
+        iconColorHover: "var(--core-text-light)",
+        iconColorSelected: "var(--core-text-light)",
+        iconSize: 16,
+        buttonSize: "m",
+        borderRadius: "100%",
+        iconStrokeWidth: 1.5
+    };
+    return jsxRuntime.jsxs("div", Object.assign({
+        id: divId,
+        ref: containerRef,
+        className: `${css.wrapper}${divClass}`,
+        style: Object.assign(Object.assign({}, cssVars), divStyle),
+        onMouseEnter: event => {
+            handleMouseOver(), null == onMouseEnter || onMouseEnter(event);
+        },
+        onMouseLeave: event => {
+            handleMouseOut(), null == onMouseLeave || onMouseLeave(event);
+        },
+        onBlur: event => {
+            event.currentTarget.contains(event.relatedTarget) || setFocused(!1), null == onBlur || onBlur(event);
+        },
+        onFocus: event => {
+            setFocused(!0), null == onFocus || onFocus(event);
+        },
+        onMouseMove: event => {
+            handleMouseOver(), null == onMouseMove || onMouseMove(event);
+        }
+    }, rest, {
+        children: [ showCustomControls && jsxRuntime.jsxs("div", {
+            className: css.controls,
+            children: [ (void 0 !== controlOverrides || !children) && "simple" === controlMode && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [ jsxRuntime.jsxs("div", {
+                    className: css.controlsHeader,
+                    children: [ customControls.fullscreen && jsxRuntime.jsx("div", {
+                        className: css.left,
+                        children: jsxRuntime.jsx(IconButton.IconButton, Object.assign({
+                            actionName: fullscreen ? "Exit fullscreen" : "Enter fullscreen",
+                            icon: "arrows.maximize"
+                        }, buttonProps, {
+                            onClick: () => {
+                                handleFullScreen(!fullscreen).catch(() => {});
+                            }
+                        }))
+                    }), captionsSrc && customControls.captions && jsxRuntime.jsx("button", {
+                        type: "button",
+                        "aria-label": "Captions",
+                        "aria-pressed": captionsOn,
+                        onClick: () => setCaptionsOn(value => !value),
+                        children: "CC"
+                    }), customControls.volume && jsxRuntime.jsxs("div", {
+                        className: css.right,
+                        children: [ jsxRuntime.jsx(IconButton.IconButton, Object.assign({
+                            actionName: isMuted ? "Unmute" : "Mute",
+                            icon: speakerIcon,
+                            iconFill: !0
+                        }, buttonProps, {
+                            onClick: () => handleMute()
+                        })), jsxRuntime.jsx(Slider.Slider, {
+                            "aria-label": "Volume",
+                            trackColor: "rgba(0,0,0,0.5)",
+                            progressColor: "var(--core-text-light)",
+                            trackHeadSize: 0,
+                            trackHeadBorderWidth: 0,
+                            max: 1,
+                            min: 0,
+                            value: currentVolume,
+                            onChange: value => handleVolumeChange(value)
+                        }) ]
+                    }) ]
+                }), jsxRuntime.jsx("div", {
+                    className: css.controlsBody,
+                    children: customControls.play && jsxRuntime.jsx(ToggleButton.ToggleButton, Object.assign({}, buttonProps, {
+                        actionName: isPlaying ? "Pause" : "Play",
+                        selected: isPlaying,
+                        icon: "media.play-filled",
+                        iconSelected: "media.pause-filled",
+                        iconSize: 32,
+                        backgroundColor: "rgba(0, 0, 0, 0.25)",
+                        backgroundColorHover: "rgba(0, 0, 0, 0.5)",
+                        backgroundColorSelected: "rgba(0, 0, 0, 0.25)",
+                        buttonSize: "xl",
+                        iconStrokeWidth: 0,
+                        onChange: () => handlePlayClick()
+                    }))
+                }), jsxRuntime.jsx("div", {
+                    className: css.controlsFooter,
+                    children: customControls.progress && jsxRuntime.jsxs("div", {
+                        className: css.progress,
+                        children: [ jsxRuntime.jsx(ToggleButton.ToggleButton, Object.assign({}, buttonProps, {
+                            actionName: isPlaying ? "Pause" : "Play",
+                            selected: isPlaying,
+                            icon: "media.play-filled",
+                            iconSelected: "media.pause-filled",
+                            iconStrokeWidth: 0,
+                            onChange: () => handlePlayClick()
+                        })), jsxRuntime.jsx(Slider.Slider, {
+                            "aria-label": "Playback position",
+                            trackColor: "rgba(0,0,0,0.5)",
+                            progressColor: "var(--core-text-light)",
+                            trackHeadSize: 0,
+                            trackHeadBorderWidth: 0,
+                            max: 1,
+                            min: 0,
+                            value: currentProgress,
+                            onChange: handleSetProgress,
+                            onChangeEnd: handleScrubEnd,
+                            onPointerCancel: handleScrubEnd,
+                            onLostPointerCapture: handleScrubEnd,
+                            onBlur: handleScrubEnd,
+                            disabled: duration <= 0,
+                            width: "100%"
+                        }), customControls.quit && jsxRuntime.jsx(IconButton.IconButton, Object.assign({
+                            actionName: "Close video",
+                            toggle: !1,
+                            icon: "basic.cross"
+                        }, buttonProps, {
+                            onClick: () => null == onQuit ? void 0 : onQuit()
+                        })) ]
+                    })
+                }) ]
+            }), "custom" === controlMode && ("function" == typeof children ? children(controlsContext) : children) ]
+        }), jsxRuntime.jsx("video", Object.assign({}, videoAttributes, {
+            "aria-label": videoName.trim() || "Video",
+            ref: videoRef,
+            src: src,
+            autoPlay: !1,
+            playsInline: playsInline,
+            loop: loop,
+            muted: isMuted,
+            controls: "default" === controlMode,
+            poster: poster,
+            onLoadStart: resetMedia,
+            onEmptied: resetMedia,
+            onWaiting: () => setCanPlay(!1),
+            onPlaying: handlePlaying,
+            onError: () => {
+                var _a, _b;
+                setFailed(!0), setCanPlay(!1), setIsPlaying(!1), playState.current !== PlayState.Stopped && (null == onPlayStateChange || onPlayStateChange(PlayState.Stopped)), 
+                playState.current = PlayState.Stopped, null == onError || onError(null !== (_b = null === (_a = videoRef.current) || void 0 === _a ? void 0 : _a.error) && void 0 !== _b ? _b : null);
+            },
+            onVolumeChange: () => {
+                const video = videoRef.current;
+                video && (setCurrentVolume(video.volume), setIsMuted(video.muted), null == onVolumeChange || onVolumeChange(video.volume));
+            },
+            onDurationChange: () => {
+                var _a;
+                const value = null === (_a = videoRef.current) || void 0 === _a ? void 0 : _a.duration;
+                setDuration(value && Number.isFinite(value) ? value : 0);
+            },
+            onCanPlayThrough: handleCanPlayThrough,
+            onCanPlay: handleCanPlay,
+            onPlay: handlePlay,
+            onPause: handlePause,
+            onEnded: handleEnd,
+            onProgress: handleLoadProgress,
+            onTimeUpdate: handlePlayProgress,
+            onRateChange: handlePlaybackRate,
+            onLoadedMetadata: handleLoadMetadata,
+            onLoadedData: handleLoadedFrame,
+            onSeeked: handleSeekEnd,
+            className: [ css.video, null == videoAttributes ? void 0 : videoAttributes.className ].filter(Boolean).join(" "),
+            children: captionsSrc && jsxRuntime.jsx("track", {
+                kind: "captions",
+                src: captionsSrc,
+                srcLang: captionsLanguage,
+                label: captionsLabel,
+                default: captionsDefault,
+                onLoad: syncCaptions
+            })
+        })), failed && jsxRuntime.jsx("span", {
+            role: "alert",
+            children: "Unable to load video."
+        }), !failed && !canPlay && showProgressIndicator && jsxRuntime.jsx(ProgressIndicator.ProgressIndicator, {
+            show: !0,
+            label: "Loading video"
+        }) ]
+    }));
+});
+
+BaseVideo.displayName = "Video";
+
+const Video = React.memo(React.forwardRef((props, ref) => {
+    var _a;
+    return jsxRuntime.jsx(BaseVideo, Object.assign({}, props, {
+        ref: ref
+    }), null !== (_a = props.src) && void 0 !== _a ? _a : "");
+}));
+
+Video.displayName = "Video", exports.Video = Video;

package/dist/cjs/chunks/VideoController-CnYz7Sdt.js

@@ -0,0 +1,169 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js"), videoStore = require("./videoStore-B0l9iBw4.js"), theme_corners = require("../theme/corners.js"), misc = require("./misc-PmT7cZzC.js"), resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), getWaterTransition = require("./getWaterTransition-s_55VKK2.js"), usePrefersReducedMotion = require("./usePrefersReducedMotion-GpD17CAE.js"), Icon = require("./Icon-COY7IZkK.js"), IconButton = require("./IconButton-KJr15EW6.js"), useModalHost = require("./useModalHost-B8oi4tfb.js"), Overlay = require("./Overlay-CVZLmK8H.js"), getVideoControls = require("./getVideoControls-LxSY7z8h.js"), css_container = "VideoController-module_container__wNiGy", css_box = "VideoController-module_box__a0PRD", css_wrapper = "VideoController-module_wrapper__RhpUo", css_video = "VideoController-module_video__9bS2L", css_loading = "VideoController-module_loading__Pahob", css_dragHandle = "VideoController-module_dragHandle__TZE49";
+
+const defaultVariants = {
+    initial: {
+        opacity: 0
+    },
+    animate: {
+        opacity: 1
+    },
+    exit: {
+        opacity: 0
+    }
+}, descriptorKeys = new WeakMap;
+
+let nextDescriptorKey = 0;
+
+function descriptorKey(video) {
+    let key = descriptorKeys.get(video);
+    return void 0 === key && (key = ++nextDescriptorKey, descriptorKeys.set(video, key)), 
+    key;
+}
+
+function VideoLayer({descriptor: descriptor, options: options, opener: opener}) {
+    var _a, _b;
+    const {dragConstraintsRef: dragConstraintsRef, transition: transition, variants: variants = defaultVariants, initial: initial = "initial", animate: animate = "animate", exit: exit = "exit", draggable: draggable = !0, padding: padding = "var(--spacing-xxl)", borderRadius: borderRadius, quit: quit = "inside", customControls: customControls, showProgressIndicator: showProgressIndicator = !0, dialogName: dialogName = "Video player", dragIcon: dragIcon = "basic.menu", onQuit: onQuit} = options, [present, safeToRemove] = react.usePresence(), reduced = usePrefersReducedMotion.usePrefersReducedMotion(), animation = react.useAnimationControls(), dragControls = react.useDragControls(), x = react.useMotionValue(0), y = react.useMotionValue(0), host = React.useRef(null), panel = React.useRef(null), {current: current} = hooks_useTheme.useTheme(), timing = React.useMemo(() => getWaterTransition.getWaterTransition(current.motion, transition), [ current.motion, transition ]), [ready, setReady] = React.useState(!1), VideoComponent = descriptor.component, _c = null !== (_a = descriptor.props) && void 0 !== _a ? _a : {}, {onCanPlay: onCanPlay, onError: onError, onQuit: descriptorQuit} = _c, videoProps = tslib_es6.__rest(_c, [ "onCanPlay", "onError", "onQuit" ]), handleHide = () => {
+        present && videoStore.getVideo() === descriptor && (videoStore.videoActions.clear(), 
+        null == descriptorQuit || descriptorQuit(), null == onQuit || onQuit());
+    };
+    useModalHost.useModalHost(host, handleHide, opener, present), React.useEffect(() => {
+        var _a, _b, _c;
+        if (animation.stop(), !present) for (const video of Array.from(null !== (_b = null === (_a = host.current) || void 0 === _a ? void 0 : _a.querySelectorAll("video")) && void 0 !== _b ? _b : [])) video.pause();
+        if (reduced) return animation.set({
+            opacity: 1,
+            scale: 1,
+            rotate: 0
+        }), void (present || null == safeToRemove || safeToRemove());
+        let active = !0;
+        const name = present ? animate : exit, target = variants[name], definition = "function" == typeof target ? name : Object.assign(Object.assign({}, target), {
+            transition: null !== (_c = null == target ? void 0 : target.transition) && void 0 !== _c ? _c : timing
+        });
+        return animation.start(definition).then(() => {
+            active && !present && (null == safeToRemove || safeToRemove());
+        }), () => {
+            active = !1, animation.stop();
+        };
+    }, [ reduced, present, animation, animate, exit, timing, safeToRemove, variants ]), 
+    React.useEffect(() => {
+        var _a;
+        present && ready && document.activeElement === document.body && (null === (_a = panel.current) || void 0 === _a || _a.focus());
+    }, [ ready, present ]);
+    const configuredControls = null != customControls ? customControls : videoProps.customControls, mergedControls = void 0 !== configuredControls || !videoProps.controls || "simple" === videoProps.controls ? Object.assign(Object.assign({}, getVideoControls.getVideoControls(configuredControls)), {
+        quit: "inside" === quit && ready
+    }) : void 0, fallbackClose = !ready || "outside" === quit || "inside" === quit && !(null == mergedControls ? void 0 : mergedControls.progress), radius = null !== (_b = null != borderRadius ? borderRadius : videoProps.borderRadius) && void 0 !== _b ? _b : theme_corners.corners["corner-m"], style = {
+        "--overlay-padding": misc.setStyle(padding, "var(--spacing-xxl)"),
+        "--video-border-radius": misc.setStyle(radius)
+    };
+    return reduced && !present ? null : jsxRuntime.jsx("div", {
+        ref: host,
+        className: css_container,
+        style: style,
+        inert: !present,
+        "aria-hidden": !present || void 0,
+        onLoadStartCapture: () => setReady(!1),
+        onWaitingCapture: () => setReady(!1),
+        children: jsxRuntime.jsx("div", {
+            className: css_box,
+            children: jsxRuntime.jsxs(react.motion.div, {
+                ref: panel,
+                className: css_wrapper,
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-label": dialogName.trim() || "Video player",
+                tabIndex: -1,
+                variants: reduced ? void 0 : variants,
+                initial: !reduced && initial,
+                animate: animation,
+                transition: timing,
+                style: {
+                    x: x,
+                    y: y
+                },
+                drag: present && ready && draggable,
+                dragListener: !1,
+                dragControls: dragControls,
+                dragConstraints: null != dragConstraintsRef ? dragConstraintsRef : host,
+                dragElastic: 0,
+                dragMomentum: !1,
+                children: [ ready && draggable && jsxRuntime.jsx("button", {
+                    type: "button",
+                    className: css_dragHandle,
+                    "aria-label": "Move video",
+                    onPointerDown: event => {
+                        present && dragControls.start(event);
+                    },
+                    onKeyDown: event => {
+                        var _a, _b;
+                        const delta = {
+                            ArrowLeft: [ -10, 0 ],
+                            ArrowRight: [ 10, 0 ],
+                            ArrowUp: [ 0, -10 ],
+                            ArrowDown: [ 0, 10 ]
+                        }[event.key], bounds = null === (_a = (null != dragConstraintsRef ? dragConstraintsRef : host).current) || void 0 === _a ? void 0 : _a.getBoundingClientRect(), rect = null === (_b = panel.current) || void 0 === _b ? void 0 : _b.getBoundingClientRect();
+                        delta && bounds && rect && (event.preventDefault(), x.set(x.get() + Math.min(bounds.right - rect.right, Math.max(bounds.left - rect.left, delta[0]))), 
+                        y.set(y.get() + Math.min(bounds.bottom - rect.bottom, Math.max(bounds.top - rect.top, delta[1]))));
+                    },
+                    children: jsxRuntime.jsx(Icon.Icon, {
+                        name: dragIcon,
+                        size: 24
+                    })
+                }), jsxRuntime.jsx("div", {
+                    className: misc.classNames(css_video, ready ? "" : css_loading),
+                    children: jsxRuntime.jsx(VideoComponent, Object.assign({}, videoProps, {
+                        showProgressIndicator: showProgressIndicator,
+                        borderRadius: radius,
+                        onCanPlay: () => {
+                            setReady(!0), null == onCanPlay || onCanPlay();
+                        },
+                        onError: error => {
+                            setReady(!1), null == onError || onError(error);
+                        },
+                        customControls: ready ? mergedControls : {},
+                        onQuit: handleHide
+                    }))
+                }), fallbackClose && ready && jsxRuntime.jsx(IconButton.IconButton, {
+                    actionName: "Close video",
+                    icon: "basic.cross",
+                    buttonSize: "l",
+                    onClick: handleHide,
+                    backgroundColor: "rgba(255,255,255,0.05)",
+                    backgroundColorHover: "rgba(255,255,255,0.25)",
+                    iconColor: "var(--core-text-light)",
+                    iconColorHover: "var(--core-text-light)"
+                }) ]
+            })
+        })
+    });
+}
+
+exports.VideoController = function(rawProps) {
+    var _a, _b;
+    const props = resolveColorProps.resolveColorProps(rawProps), video = videoStore.useVideo(), opener = React.useRef(null);
+    return React.useEffect(() => {
+        const rememberOpener = event => {
+            !videoStore.getVideo() && event.target instanceof Element && (opener.current = event.target.closest("button, a[href], [tabindex]"));
+        };
+        return document.addEventListener("pointerdown", rememberOpener, !0), () => document.removeEventListener("pointerdown", rememberOpener, !0);
+    }, []), jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ jsxRuntime.jsx(Overlay.Overlay, {
+            show: !!video,
+            opacity: null !== (_a = props.overlayOpacity) && void 0 !== _a ? _a : .7,
+            backgroundColor: null !== (_b = props.overlayColor) && void 0 !== _b ? _b : "rgb(0,0,0)",
+            onClick: () => {
+                var _a, _b, _c;
+                videoStore.getVideo() === video && video && (videoStore.videoActions.clear(), null === (_b = null === (_a = video.props) || void 0 === _a ? void 0 : _a.onQuit) || void 0 === _b || _b.call(_a), 
+                null === (_c = props.onQuit) || void 0 === _c || _c.call(props));
+            }
+        }), jsxRuntime.jsx(react.AnimatePresence, {
+            initial: !1,
+            children: video && jsxRuntime.jsx(VideoLayer, {
+                descriptor: video,
+                options: props,
+                opener: opener
+            }, descriptorKey(video))
+        }) ]
+    });
+};

package/dist/cjs/chunks/{WSConnection-D5nSdN7z.js → WSConnection-DZKTeDtZ.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-DL37Dyu4.js");
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js");
 
 /**
  * Manage a WebSocket connection with optional unified events, retries, and keep-alive pings.

package/dist/cjs/chunks/{WebRTCConnection-CxMqLK-l.js → WebRTCConnection-DIUG7Gx3.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-DL37Dyu4.js");
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js");
 
 exports.WebRTCConnection = class {
     /**