webs-sdk 0.19.64 → 0.19.66

package/dist/components/ui/media-player.js

@@ -0,0 +1,1633 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMediaPlayer = void 0;
+exports.MediaPlayer = MediaPlayer;
+exports.MediaPlayerAudio = MediaPlayerAudio;
+exports.MediaPlayerCaptions = MediaPlayerCaptions;
+exports.MediaPlayerControls = MediaPlayerControls;
+exports.MediaPlayerControlsOverlay = MediaPlayerControlsOverlay;
+exports.MediaPlayerDownload = MediaPlayerDownload;
+exports.MediaPlayerError = MediaPlayerError;
+exports.MediaPlayerFullscreen = MediaPlayerFullscreen;
+exports.MediaPlayerLoading = MediaPlayerLoading;
+exports.MediaPlayerLoop = MediaPlayerLoop;
+exports.MediaPlayerPiP = MediaPlayerPiP;
+exports.MediaPlayerPlay = MediaPlayerPlay;
+exports.MediaPlayerPlaybackSpeed = MediaPlayerPlaybackSpeed;
+exports.MediaPlayerPortal = MediaPlayerPortal;
+exports.MediaPlayerSeek = MediaPlayerSeek;
+exports.MediaPlayerSeekBackward = MediaPlayerSeekBackward;
+exports.MediaPlayerSeekForward = MediaPlayerSeekForward;
+exports.MediaPlayerSettings = MediaPlayerSettings;
+exports.MediaPlayerTime = MediaPlayerTime;
+exports.MediaPlayerTooltip = MediaPlayerTooltip;
+exports.MediaPlayerVideo = MediaPlayerVideo;
+exports.MediaPlayerVolume = MediaPlayerVolume;
+exports.MediaPlayerVolumeIndicator = MediaPlayerVolumeIndicator;
+exports.useMediaPlayerStore = useStore;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../libraries/utils");
+const media_store_1 = require("media-chrome/react/media-store");
+Object.defineProperty(exports, "useMediaPlayer", { enumerable: true, get: function () { return media_store_1.useMediaSelector; } });
+const DirectionPrimitive = __importStar(require("@radix-ui/react-direction"));
+const SliderPrimitive = __importStar(require("@radix-ui/react-slider"));
+const SlotPrimitive = __importStar(require("@radix-ui/react-slot"));
+const React = __importStar(require("react"));
+const ReactDOM = __importStar(require("react-dom"));
+const compose_refs_1 = require("./compose-refs");
+const use_lazy_ref_1 = require("./use-lazy-ref");
+const badge_1 = require("./badge");
+const dropdown_menu_1 = require("./dropdown-menu");
+const tooltip_1 = require("./tooltip");
+const lucide_react_1 = require("lucide-react");
+const _LUCIDE_ICON_MAP = {
+    AlertTriangleIcon: lucide_react_1.AlertTriangleIcon,
+    CaptionsOffIcon: lucide_react_1.CaptionsOffIcon,
+    CheckIcon: lucide_react_1.CheckIcon,
+    DownloadIcon: lucide_react_1.DownloadIcon,
+    FastForwardIcon: lucide_react_1.FastForwardIcon,
+    Loader2Icon: lucide_react_1.Loader2Icon,
+    Maximize2Icon: lucide_react_1.Maximize2Icon,
+    Minimize2Icon: lucide_react_1.Minimize2Icon,
+    PauseIcon: lucide_react_1.PauseIcon,
+    PictureInPicture2Icon: lucide_react_1.PictureInPicture2Icon,
+    PictureInPictureIcon: lucide_react_1.PictureInPictureIcon,
+    PlayIcon: lucide_react_1.PlayIcon,
+    RefreshCcwIcon: lucide_react_1.RefreshCcwIcon,
+    RepeatIcon: lucide_react_1.RepeatIcon,
+    RewindIcon: lucide_react_1.RewindIcon,
+    RotateCcwIcon: lucide_react_1.RotateCcwIcon,
+    SettingsIcon: lucide_react_1.SettingsIcon,
+    SubtitlesIcon: lucide_react_1.SubtitlesIcon,
+    Volume1Icon: lucide_react_1.Volume1Icon,
+    Volume2Icon: lucide_react_1.Volume2Icon,
+    VolumeXIcon: lucide_react_1.VolumeXIcon,
+};
+function IconPlaceholder(_a) {
+    var { lucide, tabler: _t, hugeicons: _h, phosphor: _p, remixicon: _r } = _a, props = __rest(_a, ["lucide", "tabler", "hugeicons", "phosphor", "remixicon"]);
+    const Icon = _LUCIDE_ICON_MAP[lucide];
+    if (!Icon)
+        return null;
+    return (0, jsx_runtime_1.jsx)(Icon, Object.assign({}, props));
+}
+function Button(_a) {
+    var { variant, size, asChild, className } = _a, props = __rest(_a, ["variant", "size", "asChild", "className"]);
+    const Comp = (asChild ? SlotPrimitive.Slot : "button");
+    return ((0, jsx_runtime_1.jsx)(Comp, Object.assign({ "data-slot": "button", className: (0, utils_1.cn)("inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50", variant === "ghost" && "hover:bg-white/10 text-white", variant === "secondary" && "bg-zinc-700 text-white hover:bg-zinc-600 px-3 h-8", variant === "outline" && "border border-zinc-600 text-white hover:bg-zinc-700 px-3 h-8", size === "icon" && "size-8", size === "sm" && "h-8 px-2.5 text-xs", className) }, props)));
+}
+const ROOT_NAME = "MediaPlayer";
+const SEEK_NAME = "MediaPlayerSeek";
+const SETTINGS_NAME = "MediaPlayerSettings";
+const VOLUME_NAME = "MediaPlayerVolume";
+const PLAYBACK_SPEED_NAME = "MediaPlayerPlaybackSpeed";
+const FLOATING_MENU_SIDE_OFFSET = 10;
+const SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+const SEEK_STEP_SHORT = 5;
+const SEEK_STEP_LONG = 10;
+const SEEK_COLLISION_PADDING = 10;
+const SEEK_TOOLTIP_WIDTH_FALLBACK = 240;
+const SEEK_HOVER_PERCENT = "--seek-hover-percent";
+const SEEK_TOOLTIP_X = "--seek-tooltip-x";
+const SEEK_TOOLTIP_Y = "--seek-tooltip-y";
+const SPRITE_CONTAINER_WIDTH = 224;
+const SPRITE_CONTAINER_HEIGHT = 128;
+const StoreContext = React.createContext(null);
+function useStoreContext(consumerName) {
+    const context = React.useContext(StoreContext);
+    if (!context) {
+        throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+    }
+    return context;
+}
+function useStore(selector) {
+    const store = useStoreContext("useStore");
+    const getSnapshot = React.useCallback(() => selector(store.getState()), [store, selector]);
+    return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+const MediaPlayerContext = React.createContext(null);
+function useMediaPlayerContext(consumerName) {
+    const context = React.useContext(MediaPlayerContext);
+    if (!context) {
+        throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+    }
+    return context;
+}
+function MediaPlayer(props) {
+    const listenersRef = (0, use_lazy_ref_1.useLazyRef)(() => new Set());
+    const stateRef = (0, use_lazy_ref_1.useLazyRef)(() => ({
+        controlsVisible: true,
+        dragging: false,
+        menuOpen: false,
+        volumeIndicatorVisible: false,
+    }));
+    const store = React.useMemo(() => {
+        return {
+            subscribe: (cb) => {
+                listenersRef.current.add(cb);
+                return () => listenersRef.current.delete(cb);
+            },
+            getState: () => stateRef.current,
+            setState: (key, value) => {
+                if (Object.is(stateRef.current[key], value))
+                    return;
+                stateRef.current[key] = value;
+                store.notify();
+            },
+            notify: () => {
+                for (const cb of listenersRef.current) {
+                    cb();
+                }
+            },
+        };
+    }, [listenersRef, stateRef]);
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { children: (0, jsx_runtime_1.jsx)(media_store_1.MediaProvider, { children: (0, jsx_runtime_1.jsx)(StoreContext.Provider, { value: store, children: (0, jsx_runtime_1.jsx)(MediaPlayerImpl, Object.assign({}, props)) }) }) }));
+}
+function MediaPlayerImpl(props) {
+    var _a, _b;
+    const { onPlay, onPause, onEnded, onTimeUpdate, onFullscreenChange, onVolumeChange, onMuted, onMediaError, onPipError, dir: dirProp, label, tooltipDelayDuration = 600, tooltipSideOffset = FLOATING_MENU_SIDE_OFFSET, asChild, autoHide = false, disabled = false, withoutTooltip = false, children, className, ref } = props, rootImplProps = __rest(props, ["onPlay", "onPause", "onEnded", "onTimeUpdate", "onFullscreenChange", "onVolumeChange", "onMuted", "onMediaError", "onPipError", "dir", "label", "tooltipDelayDuration", "tooltipSideOffset", "asChild", "autoHide", "disabled", "withoutTooltip", "children", "className", "ref"]);
+    const mediaId = React.useId();
+    const labelId = React.useId();
+    const descriptionId = React.useId();
+    const rootRef = React.useRef(null);
+    const fullscreenRef = (0, media_store_1.useMediaFullscreenRef)();
+    const composedRef = (0, compose_refs_1.useComposedRefs)(ref, rootRef, fullscreenRef);
+    const dir = DirectionPrimitive.useDirection(dirProp);
+    const dispatch = (0, media_store_1.useMediaDispatch)();
+    const mediaRef = React.useRef(null);
+    const store = useStoreContext(ROOT_NAME);
+    const controlsVisible = useStore((state) => state.controlsVisible);
+    const dragging = useStore((state) => state.dragging);
+    const menuOpen = useStore((state) => state.menuOpen);
+    const hideControlsTimeoutRef = React.useRef(null);
+    const lastMouseMoveRef = React.useRef(Date.now());
+    const volumeIndicatorTimeoutRef = React.useRef(null);
+    const mediaPaused = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaPaused) !== null && _a !== void 0 ? _a : true; });
+    const isFullscreen = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaIsFullscreen) !== null && _a !== void 0 ? _a : false; });
+    const [mounted, setMounted] = React.useState(false);
+    React.useLayoutEffect(() => {
+        setMounted(true);
+    }, []);
+    const portalContainer = mounted
+        ? isFullscreen
+            ? rootRef.current
+            : globalThis.document.body
+        : null;
+    const isVideo = (typeof HTMLVideoElement !== "undefined" &&
+        mediaRef.current instanceof HTMLVideoElement) ||
+        ((_b = (_a = mediaRef.current) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === "mux-player";
+    const onControlsShow = React.useCallback(() => {
+        store.setState("controlsVisible", true);
+        lastMouseMoveRef.current = Date.now();
+        if (hideControlsTimeoutRef.current) {
+            clearTimeout(hideControlsTimeoutRef.current);
+        }
+        if (autoHide && !mediaPaused && !menuOpen && !dragging) {
+            hideControlsTimeoutRef.current = setTimeout(() => {
+                store.setState("controlsVisible", false);
+            }, 3000);
+        }
+    }, [store.setState, autoHide, mediaPaused, menuOpen, dragging]);
+    const onVolumeIndicatorTrigger = React.useCallback(() => {
+        if (menuOpen)
+            return;
+        store.setState("volumeIndicatorVisible", true);
+        if (volumeIndicatorTimeoutRef.current) {
+            clearTimeout(volumeIndicatorTimeoutRef.current);
+        }
+        volumeIndicatorTimeoutRef.current = setTimeout(() => {
+            store.setState("volumeIndicatorVisible", false);
+        }, 2000);
+        if (autoHide) {
+            onControlsShow();
+        }
+    }, [store.setState, menuOpen, autoHide, onControlsShow]);
+    const onMouseLeave = React.useCallback((event) => {
+        var _a;
+        (_a = rootImplProps.onMouseLeave) === null || _a === void 0 ? void 0 : _a.call(rootImplProps, event);
+        if (event.defaultPrevented)
+            return;
+        if (autoHide && !mediaPaused && !menuOpen && !dragging) {
+            store.setState("controlsVisible", false);
+        }
+    }, [
+        store.setState,
+        rootImplProps.onMouseLeave,
+        autoHide,
+        mediaPaused,
+        menuOpen,
+        dragging,
+    ]);
+    const onMouseMove = React.useCallback((event) => {
+        var _a;
+        (_a = rootImplProps.onMouseMove) === null || _a === void 0 ? void 0 : _a.call(rootImplProps, event);
+        if (event.defaultPrevented)
+            return;
+        if (autoHide) {
+            onControlsShow();
+        }
+    }, [autoHide, rootImplProps.onMouseMove, onControlsShow]);
+    React.useEffect(() => {
+        if (mediaPaused || menuOpen || dragging) {
+            store.setState("controlsVisible", true);
+            if (hideControlsTimeoutRef.current) {
+                clearTimeout(hideControlsTimeoutRef.current);
+            }
+            return;
+        }
+        if (autoHide) {
+            onControlsShow();
+        }
+    }, [
+        store.setState,
+        onControlsShow,
+        autoHide,
+        menuOpen,
+        mediaPaused,
+        dragging,
+    ]);
+    const onKeyDown = React.useCallback((event) => {
+        var _a, _b, _c, _d;
+        if (disabled)
+            return;
+        (_a = rootImplProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(rootImplProps, event);
+        if (event.defaultPrevented)
+            return;
+        const mediaElement = mediaRef.current;
+        if (!mediaElement)
+            return;
+        const isMediaFocused = document.activeElement === mediaElement;
+        const isPlayerFocused = ((_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.closest('[data-slot="media-player"]')) !== null;
+        if (!isMediaFocused && !isPlayerFocused)
+            return;
+        if (autoHide)
+            onControlsShow();
+        switch (event.key.toLowerCase()) {
+            case " ":
+            case "k":
+                event.preventDefault();
+                dispatch({
+                    type: mediaElement.paused
+                        ? media_store_1.MediaActionTypes.MEDIA_PLAY_REQUEST
+                        : media_store_1.MediaActionTypes.MEDIA_PAUSE_REQUEST,
+                });
+                break;
+            case "f":
+                event.preventDefault();
+                dispatch({
+                    type: document.fullscreenElement
+                        ? media_store_1.MediaActionTypes.MEDIA_EXIT_FULLSCREEN_REQUEST
+                        : media_store_1.MediaActionTypes.MEDIA_ENTER_FULLSCREEN_REQUEST,
+                });
+                break;
+            case "m": {
+                event.preventDefault();
+                if (isVideo) {
+                    onVolumeIndicatorTrigger();
+                }
+                dispatch({
+                    type: mediaElement.muted
+                        ? media_store_1.MediaActionTypes.MEDIA_UNMUTE_REQUEST
+                        : media_store_1.MediaActionTypes.MEDIA_MUTE_REQUEST,
+                });
+                break;
+            }
+            case "arrowright":
+                event.preventDefault();
+                if (isVideo ||
+                    (mediaElement instanceof HTMLAudioElement && event.shiftKey)) {
+                    dispatch({
+                        type: media_store_1.MediaActionTypes.MEDIA_SEEK_REQUEST,
+                        detail: Math.min(mediaElement.duration, mediaElement.currentTime + SEEK_STEP_SHORT),
+                    });
+                }
+                break;
+            case "arrowleft":
+                event.preventDefault();
+                if (isVideo ||
+                    (mediaElement instanceof HTMLAudioElement && event.shiftKey)) {
+                    dispatch({
+                        type: media_store_1.MediaActionTypes.MEDIA_SEEK_REQUEST,
+                        detail: Math.max(0, mediaElement.currentTime - SEEK_STEP_SHORT),
+                    });
+                }
+                break;
+            case "arrowup":
+                event.preventDefault();
+                if (isVideo) {
+                    onVolumeIndicatorTrigger();
+                    dispatch({
+                        type: media_store_1.MediaActionTypes.MEDIA_VOLUME_REQUEST,
+                        detail: Math.min(1, mediaElement.volume + 0.1),
+                    });
+                }
+                break;
+            case "arrowdown":
+                event.preventDefault();
+                if (isVideo) {
+                    onVolumeIndicatorTrigger();
+                    dispatch({
+                        type: media_store_1.MediaActionTypes.MEDIA_VOLUME_REQUEST,
+                        detail: Math.max(0, mediaElement.volume - 0.1),
+                    });
+                }
+                break;
+            case "<": {
+                event.preventDefault();
+                const currentRate = mediaElement.playbackRate;
+                const currentIndex = SPEEDS.indexOf(currentRate);
+                const newIndex = Math.max(0, currentIndex - 1);
+                const newRate = (_c = SPEEDS[newIndex]) !== null && _c !== void 0 ? _c : 1;
+                dispatch({
+                    type: media_store_1.MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST,
+                    detail: newRate,
+                });
+                break;
+            }
+            case ">": {
+                event.preventDefault();
+                const currentRate = mediaElement.playbackRate;
+                const currentIndex = SPEEDS.indexOf(currentRate);
+                const newIndex = Math.min(SPEEDS.length - 1, currentIndex + 1);
+                const newRate = (_d = SPEEDS[newIndex]) !== null && _d !== void 0 ? _d : 1;
+                dispatch({
+                    type: media_store_1.MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST,
+                    detail: newRate,
+                });
+                break;
+            }
+            case "c":
+                event.preventDefault();
+                if (isVideo && mediaElement.textTracks.length > 0) {
+                    dispatch({
+                        type: media_store_1.MediaActionTypes.MEDIA_TOGGLE_SUBTITLES_REQUEST,
+                    });
+                }
+                break;
+            case "d": {
+                const hasDownload = mediaElement.querySelector('[data-slot="media-player-download"]');
+                if (!hasDownload)
+                    break;
+                event.preventDefault();
+                if (mediaElement.currentSrc) {
+                    const link = document.createElement("a");
+                    link.href = mediaElement.currentSrc;
+                    link.download = "";
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+                }
+                break;
+            }
+            case "p": {
+                event.preventDefault();
+                if (isVideo && "requestPictureInPicture" in mediaElement) {
+                    const isPip = document.pictureInPictureElement === mediaElement;
+                    dispatch({
+                        type: isPip
+                            ? media_store_1.MediaActionTypes.MEDIA_EXIT_PIP_REQUEST
+                            : media_store_1.MediaActionTypes.MEDIA_ENTER_PIP_REQUEST,
+                    });
+                    if (isPip) {
+                        document.exitPictureInPicture().catch((error) => {
+                            onPipError === null || onPipError === void 0 ? void 0 : onPipError(error, "exit");
+                        });
+                    }
+                    else {
+                        mediaElement.requestPictureInPicture().catch((error) => {
+                            onPipError === null || onPipError === void 0 ? void 0 : onPipError(error, "enter");
+                        });
+                    }
+                }
+                break;
+            }
+            case "r": {
+                event.preventDefault();
+                mediaElement.loop = !mediaElement.loop;
+                break;
+            }
+            case "j": {
+                event.preventDefault();
+                dispatch({
+                    type: media_store_1.MediaActionTypes.MEDIA_SEEK_REQUEST,
+                    detail: Math.max(0, mediaElement.currentTime - SEEK_STEP_LONG),
+                });
+                break;
+            }
+            case "l": {
+                event.preventDefault();
+                dispatch({
+                    type: media_store_1.MediaActionTypes.MEDIA_SEEK_REQUEST,
+                    detail: Math.min(mediaElement.duration, mediaElement.currentTime + SEEK_STEP_LONG),
+                });
+                break;
+            }
+            case "0":
+            case "1":
+            case "2":
+            case "3":
+            case "4":
+            case "5":
+            case "6":
+            case "7":
+            case "8":
+            case "9": {
+                event.preventDefault();
+                const percent = Number.parseInt(event.key, 10) / 10;
+                const seekTime = mediaElement.duration * percent;
+                dispatch({
+                    type: media_store_1.MediaActionTypes.MEDIA_SEEK_REQUEST,
+                    detail: seekTime,
+                });
+                break;
+            }
+            case "home": {
+                event.preventDefault();
+                dispatch({
+                    type: media_store_1.MediaActionTypes.MEDIA_SEEK_REQUEST,
+                    detail: 0,
+                });
+                break;
+            }
+            case "end": {
+                event.preventDefault();
+                dispatch({
+                    type: media_store_1.MediaActionTypes.MEDIA_SEEK_REQUEST,
+                    detail: mediaElement.duration,
+                });
+                break;
+            }
+        }
+    }, [
+        dispatch,
+        rootImplProps.onKeyDown,
+        onVolumeIndicatorTrigger,
+        onPipError,
+        disabled,
+        isVideo,
+        onControlsShow,
+        autoHide,
+    ]);
+    const onKeyUp = React.useCallback((event) => {
+        var _a;
+        (_a = rootImplProps.onKeyUp) === null || _a === void 0 ? void 0 : _a.call(rootImplProps, event);
+        const key = event.key.toLowerCase();
+        if (key === "arrowup" || key === "arrowdown" || key === "m") {
+            onVolumeIndicatorTrigger();
+        }
+    }, [rootImplProps.onKeyUp, onVolumeIndicatorTrigger]);
+    React.useEffect(() => {
+        const mediaElement = mediaRef.current;
+        if (!mediaElement)
+            return;
+        if (onPlay)
+            mediaElement.addEventListener("play", onPlay);
+        if (onPause)
+            mediaElement.addEventListener("pause", onPause);
+        if (onEnded)
+            mediaElement.addEventListener("ended", onEnded);
+        if (onTimeUpdate)
+            mediaElement.addEventListener("timeupdate", () => onTimeUpdate === null || onTimeUpdate === void 0 ? void 0 : onTimeUpdate(mediaElement.currentTime));
+        if (onVolumeChange)
+            mediaElement.addEventListener("volumechange", () => {
+                onVolumeChange === null || onVolumeChange === void 0 ? void 0 : onVolumeChange(mediaElement.volume);
+                onMuted === null || onMuted === void 0 ? void 0 : onMuted(mediaElement.muted);
+            });
+        if (onMediaError)
+            mediaElement.addEventListener("error", () => onMediaError === null || onMediaError === void 0 ? void 0 : onMediaError(mediaElement.error));
+        if (onFullscreenChange) {
+            document.addEventListener("fullscreenchange", () => onFullscreenChange === null || onFullscreenChange === void 0 ? void 0 : onFullscreenChange(!!document.fullscreenElement));
+        }
+        return () => {
+            if (onPlay)
+                mediaElement.removeEventListener("play", onPlay);
+            if (onPause)
+                mediaElement.removeEventListener("pause", onPause);
+            if (onEnded)
+                mediaElement.removeEventListener("ended", onEnded);
+            if (onTimeUpdate)
+                mediaElement.removeEventListener("timeupdate", () => onTimeUpdate === null || onTimeUpdate === void 0 ? void 0 : onTimeUpdate(mediaElement.currentTime));
+            if (onVolumeChange)
+                mediaElement.removeEventListener("volumechange", () => {
+                    onVolumeChange === null || onVolumeChange === void 0 ? void 0 : onVolumeChange(mediaElement.volume);
+                    onMuted === null || onMuted === void 0 ? void 0 : onMuted(mediaElement.muted);
+                });
+            if (onMediaError)
+                mediaElement.removeEventListener("error", () => onMediaError === null || onMediaError === void 0 ? void 0 : onMediaError(mediaElement.error));
+            if (onFullscreenChange) {
+                document.removeEventListener("fullscreenchange", () => onFullscreenChange === null || onFullscreenChange === void 0 ? void 0 : onFullscreenChange(!!document.fullscreenElement));
+            }
+            if (volumeIndicatorTimeoutRef.current) {
+                clearTimeout(volumeIndicatorTimeoutRef.current);
+            }
+            if (hideControlsTimeoutRef.current) {
+                clearTimeout(hideControlsTimeoutRef.current);
+            }
+        };
+    }, [
+        onPlay,
+        onPause,
+        onEnded,
+        onTimeUpdate,
+        onVolumeChange,
+        onMuted,
+        onMediaError,
+        onFullscreenChange,
+    ]);
+    const contextValue = React.useMemo(() => ({
+        mediaId,
+        labelId,
+        descriptionId,
+        dir,
+        rootRef,
+        mediaRef,
+        portalContainer,
+        tooltipDelayDuration,
+        tooltipSideOffset,
+        disabled,
+        isVideo,
+        withoutTooltip,
+    }), [
+        mediaId,
+        labelId,
+        descriptionId,
+        dir,
+        portalContainer,
+        tooltipDelayDuration,
+        tooltipSideOffset,
+        disabled,
+        isVideo,
+        withoutTooltip,
+    ]);
+    const RootPrimitive = asChild ? SlotPrimitive.Slot : "div";
+    return ((0, jsx_runtime_1.jsx)(MediaPlayerContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsxs)(RootPrimitive, Object.assign({ "aria-labelledby": labelId, "aria-describedby": descriptionId, "aria-disabled": disabled, "data-disabled": disabled ? "" : undefined, "data-controls-visible": controlsVisible ? "" : undefined, "data-slot": "media-player", "data-state": isFullscreen ? "fullscreen" : "windowed", dir: dir, tabIndex: disabled ? undefined : 0 }, rootImplProps, { ref: composedRef, onMouseLeave: onMouseLeave, onMouseMove: onMouseMove, onKeyDown: onKeyDown, onKeyUp: onKeyUp, className: (0, utils_1.cn)("dark relative isolate flex size-full flex-col overflow-hidden rounded-lg bg-background outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_video]:relative [&_video]:object-contain", "in-[:fullscreen]:flex in-[:fullscreen]:h-full in-[:fullscreen]:max-h-screen in-[:fullscreen]:flex-col in-[:fullscreen]:justify-between data-[state=fullscreen]:[&_video]:size-full", "**:data-slider:relative [&_[data-slider]::before]:absolute [&_[data-slider]::before]:inset-x-0 [&_[data-slider]::before]:-top-4 [&_[data-slider]::before]:-bottom-2 [&_[data-slider]::before]:z-10 [&_[data-slider]::before]:h-8 [&_[data-slider]::before]:cursor-pointer [&_[data-slider]::before]:content-[''] [&_[data-slot='media-player-seek']:not([data-hovering])::before]:cursor-default", "[&_video::-webkit-media-text-track-display]:top-auto! [&_video::-webkit-media-text-track-display]:bottom-[4%]! [&_video::-webkit-media-text-track-display]:mb-0! data-controls-visible:[&_video::-webkit-media-text-track-display]:bottom-[13%]! data-[state=fullscreen]:[&_video::-webkit-media-text-track-display]:bottom-[7%]! data-[state=fullscreen]:data-controls-visible:[&_video::-webkit-media-text-track-display]:bottom-[9%]!", className), children: [(0, jsx_runtime_1.jsx)("span", { id: labelId, className: "sr-only", children: label !== null && label !== void 0 ? label : "Media player" }), (0, jsx_runtime_1.jsx)("span", { id: descriptionId, className: "sr-only", children: isVideo
+                        ? "Video player with custom controls for playback, volume, seeking, and more. Use space bar to play/pause, arrow keys (←/→) to seek, and arrow keys (↑/↓) to adjust volume."
+                        : "Audio player with custom controls for playback, volume, seeking, and more. Use space bar to play/pause, Shift + arrow keys (←/→) to seek, and arrow keys (↑/↓) to adjust volume." }), children, (0, jsx_runtime_1.jsx)(MediaPlayerVolumeIndicator, {})] })) }));
+}
+function MediaPlayerVideo(props) {
+    const { asChild, ref } = props, videoProps = __rest(props, ["asChild", "ref"]);
+    const context = useMediaPlayerContext("MediaPlayerVideo");
+    const dispatch = (0, media_store_1.useMediaDispatch)();
+    const mediaRefCallback = (0, media_store_1.useMediaRef)();
+    const composedRef = (0, compose_refs_1.useComposedRefs)(ref, context.mediaRef, mediaRefCallback);
+    const onPlayToggle = React.useCallback((event) => {
+        var _a;
+        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+        if (event.defaultPrevented)
+            return;
+        const mediaElement = event.currentTarget;
+        if (!mediaElement)
+            return;
+        dispatch({
+            type: mediaElement.paused
+                ? media_store_1.MediaActionTypes.MEDIA_PLAY_REQUEST
+                : media_store_1.MediaActionTypes.MEDIA_PAUSE_REQUEST,
+        });
+    }, [dispatch, props.onClick]);
+    const VideoPrimitive = asChild ? SlotPrimitive.Slot : "video";
+    return ((0, jsx_runtime_1.jsx)(VideoPrimitive, Object.assign({ "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, "data-slot": "media-player-video" }, videoProps, { id: context.mediaId, ref: composedRef, onClick: onPlayToggle })));
+}
+function MediaPlayerAudio(props) {
+    const { asChild, ref } = props, audioProps = __rest(props, ["asChild", "ref"]);
+    const context = useMediaPlayerContext("MediaPlayerAudio");
+    const mediaRefCallback = (0, media_store_1.useMediaRef)();
+    const composedRef = (0, compose_refs_1.useComposedRefs)(ref, context.mediaRef, mediaRefCallback);
+    const AudioPrimitive = asChild ? SlotPrimitive.Slot : "audio";
+    return ((0, jsx_runtime_1.jsx)(AudioPrimitive, Object.assign({ "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, "data-slot": "media-player-audio" }, audioProps, { id: context.mediaId, ref: composedRef })));
+}
+function MediaPlayerControls(props) {
+    const { asChild, className } = props, controlsProps = __rest(props, ["asChild", "className"]);
+    const context = useMediaPlayerContext("MediaPlayerControls");
+    const isFullscreen = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaIsFullscreen) !== null && _a !== void 0 ? _a : false; });
+    const controlsVisible = useStore((state) => state.controlsVisible);
+    const ControlsPrimitive = asChild ? SlotPrimitive.Slot : "div";
+    return ((0, jsx_runtime_1.jsx)(ControlsPrimitive, Object.assign({ "data-disabled": context.disabled ? "" : undefined, "data-slot": "media-player-controls", "data-state": isFullscreen ? "fullscreen" : "windowed", "data-visible": controlsVisible ? "" : undefined, dir: context.dir, className: (0, utils_1.cn)("dark pointer-events-none absolute right-0 bottom-0 left-0 z-50 flex items-center gap-2 px-4 py-3 opacity-0 transition-opacity duration-200 in-[:fullscreen]:px-6 in-[:fullscreen]:py-4 data-visible:pointer-events-auto data-visible:opacity-100", className) }, controlsProps)));
+}
+function MediaPlayerLoading(props) {
+    const { delayMs = 500, asChild, className, children } = props, loadingProps = __rest(props, ["delayMs", "asChild", "className", "children"]);
+    const isLoading = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaLoading) !== null && _a !== void 0 ? _a : false; });
+    const isPaused = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaPaused) !== null && _a !== void 0 ? _a : true; });
+    const hasPlayed = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaHasPlayed) !== null && _a !== void 0 ? _a : false; });
+    const shouldShowLoading = isLoading && !isPaused;
+    const shouldUseDelay = hasPlayed && shouldShowLoading;
+    const loadingDelayMs = shouldUseDelay ? delayMs : 0;
+    const [shouldRender, setShouldRender] = React.useState(false);
+    const timeoutRef = React.useRef(null);
+    React.useEffect(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        if (shouldShowLoading) {
+            if (loadingDelayMs > 0) {
+                timeoutRef.current = setTimeout(() => {
+                    setShouldRender(true);
+                    timeoutRef.current = null;
+                }, loadingDelayMs);
+            }
+            else {
+                setShouldRender(true);
+            }
+        }
+        else {
+            setShouldRender(false);
+        }
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+                timeoutRef.current = null;
+            }
+        };
+    }, [shouldShowLoading, loadingDelayMs]);
+    if (!shouldRender)
+        return null;
+    const LoadingPrimitive = asChild ? SlotPrimitive.Slot : "div";
+    return ((0, jsx_runtime_1.jsx)(LoadingPrimitive, Object.assign({ role: "status", "aria-live": "polite", "data-slot": "media-player-loading" }, loadingProps, { className: (0, utils_1.cn)("pointer-events-none absolute inset-0 z-50 flex animate-in items-center justify-center duration-200 fade-in-0 zoom-in-95", className), children: children !== null && children !== void 0 ? children : ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "Loader2Icon", tabler: "IconLoader2", hugeicons: "Loading03Icon", phosphor: "SpinnerIcon", remixicon: "RiLoader4Line", className: "size-20 animate-spin stroke-[.0938rem] text-primary" })) })));
+}
+function MediaPlayerError(props) {
+    const { error: errorProp, label, description, onRetry: onRetryProp, onReload: onReloadProp, asChild, className, children } = props, errorProps = __rest(props, ["error", "label", "description", "onRetry", "onReload", "asChild", "className", "children"]);
+    const context = useMediaPlayerContext("MediaPlayerError");
+    const isFullscreen = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaIsFullscreen) !== null && _a !== void 0 ? _a : false; });
+    const mediaError = (0, media_store_1.useMediaSelector)((state) => state.mediaError);
+    const error = errorProp !== null && errorProp !== void 0 ? errorProp : mediaError;
+    const labelId = React.useId();
+    const descriptionId = React.useId();
+    const [actionState, setActionState] = React.useState({
+        retryPending: false,
+        reloadPending: false,
+    });
+    const onRetry = React.useCallback(() => {
+        setActionState((prev) => (Object.assign(Object.assign({}, prev), { retryPending: true })));
+        requestAnimationFrame(() => {
+            var _a;
+            const mediaElement = context.mediaRef.current;
+            if (!mediaElement) {
+                setActionState((prev) => (Object.assign(Object.assign({}, prev), { retryPending: false })));
+                return;
+            }
+            if (onRetryProp) {
+                onRetryProp();
+            }
+            else {
+                const currentSrc = (_a = mediaElement.currentSrc) !== null && _a !== void 0 ? _a : mediaElement.src;
+                if (currentSrc) {
+                    mediaElement.load();
+                }
+            }
+            setActionState((prev) => (Object.assign(Object.assign({}, prev), { retryPending: false })));
+        });
+    }, [context.mediaRef, onRetryProp]);
+    const onReload = React.useCallback(() => {
+        setActionState((prev) => (Object.assign(Object.assign({}, prev), { reloadPending: true })));
+        requestAnimationFrame(() => {
+            if (onReloadProp) {
+                onReloadProp();
+            }
+            else {
+                window.location.reload();
+            }
+        });
+    }, [onReloadProp]);
+    const errorLabel = React.useMemo(() => {
+        var _a;
+        if (label)
+            return label;
+        if (!error)
+            return "Playback Error";
+        const labelMap = {
+            [MediaError.MEDIA_ERR_ABORTED]: "Playback Interrupted",
+            [MediaError.MEDIA_ERR_NETWORK]: "Connection Problem",
+            [MediaError.MEDIA_ERR_DECODE]: "Media Error",
+            [MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED]: "Unsupported Format",
+        };
+        return (_a = labelMap[error.code]) !== null && _a !== void 0 ? _a : "Playback Error";
+    }, [label, error]);
+    const errorDescription = React.useMemo(() => {
+        var _a;
+        if (description)
+            return description;
+        if (!error)
+            return "An unknown error occurred";
+        const descriptionMap = {
+            [MediaError.MEDIA_ERR_ABORTED]: "Media playback was aborted",
+            [MediaError.MEDIA_ERR_NETWORK]: "A network error occurred while loading the media",
+            [MediaError.MEDIA_ERR_DECODE]: "An error occurred while decoding the media",
+            [MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED]: "The media format is not supported",
+        };
+        return (_a = descriptionMap[error.code]) !== null && _a !== void 0 ? _a : "An unknown error occurred";
+    }, [description, error]);
+    if (!error)
+        return null;
+    const ErrorPrimitive = asChild ? SlotPrimitive.Slot : "div";
+    return ((0, jsx_runtime_1.jsx)(ErrorPrimitive, Object.assign({ role: "alert", "aria-describedby": descriptionId, "aria-labelledby": labelId, "aria-live": "assertive", "data-slot": "media-player-error", "data-state": isFullscreen ? "fullscreen" : "windowed" }, errorProps, { className: (0, utils_1.cn)("pointer-events-auto absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/80 text-white backdrop-blur-sm", className), children: children !== null && children !== void 0 ? children : ((0, jsx_runtime_1.jsxs)("div", { className: "flex max-w-md flex-col items-center gap-4 px-6 py-8 text-center", children: [(0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "AlertTriangleIcon", tabler: "IconAlertTriangle", hugeicons: "Alert02Icon", phosphor: "WarningIcon", remixicon: "RiAlertLine", className: "size-12 text-destructive" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-px text-center", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-xl font-semibold tracking-tight", children: errorLabel }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm leading-relaxed text-balance text-muted-foreground", children: errorDescription })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)(Button, { variant: "secondary", size: "sm", onClick: onRetry, disabled: actionState.retryPending, children: [actionState.retryPending ? ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "Loader2Icon", tabler: "IconLoader2", hugeicons: "Loading03Icon", phosphor: "SpinnerIcon", remixicon: "RiLoader4Line", className: "animate-spin" })) : ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "RefreshCcwIcon", tabler: "IconRefresh", hugeicons: "RefreshIcon", phosphor: "ArrowsClockwiseIcon", remixicon: "RiRefreshLine" })), "Try again"] }), (0, jsx_runtime_1.jsxs)(Button, { variant: "outline", size: "sm", onClick: onReload, disabled: actionState.reloadPending, children: [actionState.reloadPending ? ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "Loader2Icon", tabler: "IconLoader2", hugeicons: "Loading03Icon", phosphor: "SpinnerIcon", remixicon: "RiLoader4Line", className: "animate-spin" })) : ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "RotateCcwIcon", tabler: "IconRotate2", hugeicons: "Rotate01Icon", phosphor: "ArrowCounterClockwiseIcon", remixicon: "RiResetLeftLine" })), "Reload page"] })] })] })) })));
+}
+function MediaPlayerVolumeIndicator(props) {
+    const { asChild, className } = props, indicatorProps = __rest(props, ["asChild", "className"]);
+    const mediaVolume = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaVolume) !== null && _a !== void 0 ? _a : 1; });
+    const mediaMuted = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaMuted) !== null && _a !== void 0 ? _a : false; });
+    const mediaVolumeLevel = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaVolumeLevel) !== null && _a !== void 0 ? _a : "high"; });
+    const volumeIndicatorVisible = useStore((state) => state.volumeIndicatorVisible);
+    if (!volumeIndicatorVisible)
+        return null;
+    const effectiveVolume = mediaMuted ? 0 : mediaVolume;
+    const volumePercentage = Math.round(effectiveVolume * 100);
+    const barCount = 10;
+    const activeBarCount = Math.ceil(effectiveVolume * barCount);
+    const VolumeIndicatorPrimitive = asChild ? SlotPrimitive.Slot : "div";
+    return ((0, jsx_runtime_1.jsx)(VolumeIndicatorPrimitive, Object.assign({ role: "status", "aria-live": "polite", "aria-label": `Volume ${mediaMuted ? "muted" : `${volumePercentage}%`}`, "data-slot": "media-player-volume-indicator" }, indicatorProps, { className: (0, utils_1.cn)("pointer-events-none absolute inset-0 z-50 flex items-center justify-center", className), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex animate-in flex-col items-center gap-3 rounded-lg bg-black/30 px-6 py-4 text-white backdrop-blur-xs duration-200 fade-in-0 zoom-in-95", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [mediaVolumeLevel === "off" || mediaMuted ? ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "VolumeXIcon", tabler: "IconVolumeOff", hugeicons: "VolumeOffIcon", phosphor: "SpeakerSlashIcon", remixicon: "RiVolumeMuteLine", className: "size-6" })) : mediaVolumeLevel === "high" ? ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "Volume2Icon", tabler: "IconVolume", hugeicons: "VolumeHighIcon", phosphor: "SpeakerHighIcon", remixicon: "RiVolumeUpLine", className: "size-6" })) : ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "Volume1Icon", tabler: "IconVolume2", hugeicons: "VolumeLowIcon", phosphor: "SpeakerLowIcon", remixicon: "RiVolumeDownLine", className: "size-6" })), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium tabular-nums", children: mediaMuted ? "Muted" : `${volumePercentage}%` })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: Array.from({ length: barCount }, (_, index) => ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("w-1.5 rounded-full transition-all duration-150", index < activeBarCount && !mediaMuted
+                            ? "scale-100 bg-white"
+                            : "scale-90 bg-white/30"), style: {
+                            height: `${12 + index * 2}px`,
+                            animationDelay: `${index * 50}ms`,
+                        } }, index))) })] }) })));
+}
+function MediaPlayerControlsOverlay(props) {
+    const { asChild, className } = props, overlayProps = __rest(props, ["asChild", "className"]);
+    const isFullscreen = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaIsFullscreen) !== null && _a !== void 0 ? _a : false; });
+    const controlsVisible = useStore((state) => state.controlsVisible);
+    const OverlayPrimitive = asChild ? SlotPrimitive.Slot : "div";
+    return ((0, jsx_runtime_1.jsx)(OverlayPrimitive, Object.assign({ "data-slot": "media-player-controls-overlay", "data-state": isFullscreen ? "fullscreen" : "windowed", "data-visible": controlsVisible ? "" : undefined }, overlayProps, { className: (0, utils_1.cn)("pointer-events-none absolute inset-0 -z-10 bg-linear-to-t from-black/80 to-transparent opacity-0 transition-opacity duration-200 data-visible:opacity-100", className) })));
+}
+function MediaPlayerPlay(props) {
+    const { children, className, disabled } = props, playButtonProps = __rest(props, ["children", "className", "disabled"]);
+    const context = useMediaPlayerContext("MediaPlayerPlay");
+    const dispatch = (0, media_store_1.useMediaDispatch)();
+    const mediaPaused = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaPaused) !== null && _a !== void 0 ? _a : true; });
+    const isDisabled = disabled || context.disabled;
+    const onPlayToggle = React.useCallback((event) => {
+        var _a;
+        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+        if (event.defaultPrevented)
+            return;
+        dispatch({
+            type: mediaPaused
+                ? media_store_1.MediaActionTypes.MEDIA_PLAY_REQUEST
+                : media_store_1.MediaActionTypes.MEDIA_PAUSE_REQUEST,
+        });
+    }, [dispatch, props.onClick, mediaPaused]);
+    return ((0, jsx_runtime_1.jsx)(MediaPlayerTooltip, { tooltip: mediaPaused ? "Play" : "Pause", shortcut: "Space", children: (0, jsx_runtime_1.jsx)(Button, Object.assign({ type: "button", "aria-controls": context.mediaId, "aria-label": mediaPaused ? "Play" : "Pause", "aria-pressed": !mediaPaused, "data-disabled": isDisabled ? "" : undefined, "data-slot": "media-player-play-button", "data-state": mediaPaused ? "off" : "on", disabled: isDisabled }, playButtonProps, { variant: "ghost", size: "icon", className: (0, utils_1.cn)("size-8 [&_svg:not([class*='fill-'])]:fill-current", className), onClick: onPlayToggle, children: children !== null && children !== void 0 ? children : (mediaPaused ? ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "PlayIcon", tabler: "IconPlayerPlay", hugeicons: "PlayIcon", phosphor: "PlayIcon", remixicon: "RiPlayLine" })) : ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "PauseIcon", tabler: "IconPlayerPause", hugeicons: "PauseIcon", phosphor: "PauseIcon", remixicon: "RiPauseLine" }))) })) }));
+}
+function MediaPlayerSeekBackward(props) {
+    const { seconds = SEEK_STEP_SHORT, children, className, disabled } = props, seekBackwardProps = __rest(props, ["seconds", "children", "className", "disabled"]);
+    const context = useMediaPlayerContext("MediaPlayerSeekBackward");
+    const dispatch = (0, media_store_1.useMediaDispatch)();
+    const mediaCurrentTime = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaCurrentTime) !== null && _a !== void 0 ? _a : 0; });
+    const isDisabled = disabled || context.disabled;
+    const onSeekBackward = React.useCallback((event) => {
+        var _a;
+        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+        if (event.defaultPrevented)
+            return;
+        dispatch({
+            type: media_store_1.MediaActionTypes.MEDIA_SEEK_REQUEST,
+            detail: Math.max(0, mediaCurrentTime - seconds),
+        });
+    }, [dispatch, props.onClick, mediaCurrentTime, seconds]);
+    return ((0, jsx_runtime_1.jsx)(MediaPlayerTooltip, { tooltip: `Back ${seconds}s`, shortcut: context.isVideo ? ["←"] : ["Shift ←"], children: (0, jsx_runtime_1.jsx)(Button, Object.assign({ type: "button", "aria-controls": context.mediaId, "aria-label": `Back ${seconds} seconds`, "data-disabled": isDisabled ? "" : undefined, "data-slot": "media-player-seek-backward", disabled: isDisabled }, seekBackwardProps, { variant: "ghost", size: "icon", className: (0, utils_1.cn)("size-8", className), onClick: onSeekBackward, children: children !== null && children !== void 0 ? children : ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "RewindIcon", tabler: "IconRewindBackward10", hugeicons: "ReplayIcon", phosphor: "RewindIcon", remixicon: "RiReplay10Line" })) })) }));
+}
+function MediaPlayerSeekForward(props) {
+    const { seconds = SEEK_STEP_LONG, children, className, disabled } = props, seekForwardProps = __rest(props, ["seconds", "children", "className", "disabled"]);
+    const context = useMediaPlayerContext("MediaPlayerSeekForward");
+    const dispatch = (0, media_store_1.useMediaDispatch)();
+    const mediaCurrentTime = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaCurrentTime) !== null && _a !== void 0 ? _a : 0; });
+    const [, seekableEnd] = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaSeekable) !== null && _a !== void 0 ? _a : [0, 0]; });
+    const isDisabled = disabled || context.disabled;
+    const onSeekForward = React.useCallback((event) => {
+        var _a;
+        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+        if (event.defaultPrevented)
+            return;
+        dispatch({
+            type: media_store_1.MediaActionTypes.MEDIA_SEEK_REQUEST,
+            detail: Math.min(seekableEnd !== null && seekableEnd !== void 0 ? seekableEnd : Number.POSITIVE_INFINITY, mediaCurrentTime + seconds),
+        });
+    }, [dispatch, props.onClick, mediaCurrentTime, seekableEnd, seconds]);
+    return ((0, jsx_runtime_1.jsx)(MediaPlayerTooltip, { tooltip: `Forward ${seconds}s`, shortcut: context.isVideo ? ["→"] : ["Shift →"], children: (0, jsx_runtime_1.jsx)(Button, Object.assign({ type: "button", "aria-controls": context.mediaId, "aria-label": `Forward ${seconds} seconds`, "data-disabled": isDisabled ? "" : undefined, "data-slot": "media-player-seek-forward", disabled: isDisabled }, seekForwardProps, { variant: "ghost", size: "icon", className: (0, utils_1.cn)("size-8", className), onClick: onSeekForward, children: children !== null && children !== void 0 ? children : ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "FastForwardIcon", tabler: "IconPlayerSkipForward", hugeicons: "FastForwardIcon", phosphor: "FastForwardIcon", remixicon: "RiSpeedLine" })) })) }));
+}
+function MediaPlayerSeek(props) {
+    var _a;
+    const { withTime = false, withoutChapter = false, withoutTooltip = false, tooltipTimeVariant = "current", tooltipThumbnailSrc, tooltipSideOffset, tooltipCollisionPadding = SEEK_COLLISION_PADDING, tooltipCollisionBoundary, className, disabled } = props, seekProps = __rest(props, ["withTime", "withoutChapter", "withoutTooltip", "tooltipTimeVariant", "tooltipThumbnailSrc", "tooltipSideOffset", "tooltipCollisionPadding", "tooltipCollisionBoundary", "className", "disabled"]);
+    const context = useMediaPlayerContext(SEEK_NAME);
+    const store = useStoreContext(SEEK_NAME);
+    const dispatch = (0, media_store_1.useMediaDispatch)();
+    const mediaCurrentTime = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaCurrentTime) !== null && _a !== void 0 ? _a : 0; });
+    const [seekableStart = 0, seekableEnd = 0] = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaSeekable) !== null && _a !== void 0 ? _a : [0, 0]; });
+    const mediaBuffered = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaBuffered) !== null && _a !== void 0 ? _a : []; });
+    const mediaEnded = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaEnded) !== null && _a !== void 0 ? _a : false; });
+    const chapterCues = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaChaptersCues) !== null && _a !== void 0 ? _a : []; });
+    const mediaPreviewTime = (0, media_store_1.useMediaSelector)((state) => state.mediaPreviewTime);
+    const mediaPreviewImage = (0, media_store_1.useMediaSelector)((state) => state.mediaPreviewImage);
+    const mediaPreviewCoords = (0, media_store_1.useMediaSelector)((state) => state.mediaPreviewCoords);
+    const seekRef = React.useRef(null);
+    const tooltipRef = React.useRef(null);
+    const justCommittedRef = React.useRef(false);
+    const hoverTimeRef = React.useRef(0);
+    const tooltipXRef = React.useRef(0);
+    const tooltipYRef = React.useRef(0);
+    const seekRectRef = React.useRef(null);
+    const collisionDataRef = React.useRef(null);
+    const [seekState, setSeekState] = React.useState({
+        isHovering: false,
+        pendingSeekTime: null,
+        hasInitialPosition: false,
+    });
+    const rafIdRef = React.useRef(null);
+    const seekThrottleRef = React.useRef(null);
+    const hoverTimeoutRef = React.useRef(null);
+    const lastPointerXRef = React.useRef(0);
+    const lastPointerYRef = React.useRef(0);
+    const previewDebounceRef = React.useRef(null);
+    const pointerEnterTimeRef = React.useRef(0);
+    const horizontalMovementRef = React.useRef(0);
+    const verticalMovementRef = React.useRef(0);
+    const lastSeekCommitTimeRef = React.useRef(0);
+    const timeCache = React.useRef(new Map());
+    const displayValue = (_a = seekState.pendingSeekTime) !== null && _a !== void 0 ? _a : mediaCurrentTime;
+    const isDisabled = disabled || context.disabled;
+    const tooltipDisabled = withoutTooltip || context.withoutTooltip || store.getState().menuOpen;
+    const currentTooltipSideOffset = tooltipSideOffset !== null && tooltipSideOffset !== void 0 ? tooltipSideOffset : context.tooltipSideOffset;
+    const getCachedTime = React.useCallback((time, duration) => {
+        const roundedTime = Math.floor(time);
+        const key = roundedTime + duration * 10000;
+        if (timeCache.current.has(key)) {
+            return timeCache.current.get(key);
+        }
+        const formatted = media_store_1.timeUtils.formatTime(time, duration);
+        timeCache.current.set(key, formatted);
+        if (timeCache.current.size > 100) {
+            timeCache.current.clear();
+        }
+        return formatted;
+    }, []);
+    const currentTime = getCachedTime(displayValue, seekableEnd);
+    const duration = getCachedTime(seekableEnd, seekableEnd);
+    const remainingTime = getCachedTime(seekableEnd - displayValue, seekableEnd);
+    const onCollisionDataUpdate = React.useCallback(() => {
+        if (collisionDataRef.current)
+            return collisionDataRef.current;
+        const padding = typeof tooltipCollisionPadding === "number"
+            ? {
+                top: tooltipCollisionPadding,
+                right: tooltipCollisionPadding,
+                bottom: tooltipCollisionPadding,
+                left: tooltipCollisionPadding,
+            }
+            : Object.assign({ top: 0, right: 0, bottom: 0, left: 0 }, tooltipCollisionPadding);
+        const boundaries = tooltipCollisionBoundary
+            ? Array.isArray(tooltipCollisionBoundary)
+                ? tooltipCollisionBoundary
+                : [tooltipCollisionBoundary]
+            : [context.rootRef.current].filter(Boolean);
+        collisionDataRef.current = { padding, boundaries };
+        return collisionDataRef.current;
+    }, [tooltipCollisionPadding, tooltipCollisionBoundary, context.rootRef]);
+    const getCurrentChapterCue = React.useCallback((time) => {
+        if (withoutChapter || chapterCues.length === 0)
+            return null;
+        return chapterCues.find((c) => time >= c.startTime && time < c.endTime);
+    }, [chapterCues, withoutChapter]);
+    const getThumbnail = React.useCallback((time) => {
+        if (tooltipDisabled)
+            return null;
+        if (tooltipThumbnailSrc) {
+            const src = typeof tooltipThumbnailSrc === "function"
+                ? tooltipThumbnailSrc(time)
+                : tooltipThumbnailSrc;
+            return { src, coords: null };
+        }
+        if (mediaPreviewTime !== undefined &&
+            Math.abs(time - mediaPreviewTime) < 0.1 &&
+            mediaPreviewImage) {
+            return {
+                src: mediaPreviewImage,
+                coords: mediaPreviewCoords !== null && mediaPreviewCoords !== void 0 ? mediaPreviewCoords : null,
+            };
+        }
+        return null;
+    }, [
+        tooltipThumbnailSrc,
+        mediaPreviewTime,
+        mediaPreviewImage,
+        mediaPreviewCoords,
+        tooltipDisabled,
+    ]);
+    const onPreviewUpdate = React.useCallback((time) => {
+        if (tooltipDisabled)
+            return;
+        if (previewDebounceRef.current) {
+            cancelAnimationFrame(previewDebounceRef.current);
+        }
+        previewDebounceRef.current = requestAnimationFrame(() => {
+            dispatch({
+                type: media_store_1.MediaActionTypes.MEDIA_PREVIEW_REQUEST,
+                detail: time,
+            });
+            previewDebounceRef.current = null;
+        });
+    }, [dispatch, tooltipDisabled]);
+    const onTooltipPositionUpdate = React.useCallback((clientX) => {
+        var _a, _b, _c, _d;
+        if (!seekRef.current)
+            return;
+        const tooltipWidth = (_b = (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : SEEK_TOOLTIP_WIDTH_FALLBACK;
+        let x = clientX;
+        const y = (_d = (_c = seekRectRef.current) === null || _c === void 0 ? void 0 : _c.top) !== null && _d !== void 0 ? _d : 0;
+        const collisionData = onCollisionDataUpdate();
+        const halfTooltipWidth = tooltipWidth / 2;
+        let minLeft = 0;
+        let maxRight = window.innerWidth;
+        for (const boundary of collisionData.boundaries) {
+            const boundaryRect = boundary.getBoundingClientRect();
+            minLeft = Math.max(minLeft, boundaryRect.left + collisionData.padding.left);
+            maxRight = Math.min(maxRight, boundaryRect.right - collisionData.padding.right);
+        }
+        if (x - halfTooltipWidth < minLeft) {
+            x = minLeft + halfTooltipWidth;
+        }
+        else if (x + halfTooltipWidth > maxRight) {
+            x = maxRight - halfTooltipWidth;
+        }
+        const viewportPadding = SEEK_COLLISION_PADDING;
+        if (x - halfTooltipWidth < viewportPadding) {
+            x = viewportPadding + halfTooltipWidth;
+        }
+        else if (x + halfTooltipWidth > window.innerWidth - viewportPadding) {
+            x = window.innerWidth - viewportPadding - halfTooltipWidth;
+        }
+        tooltipXRef.current = x;
+        tooltipYRef.current = y;
+        if (tooltipRef.current) {
+            tooltipRef.current.style.setProperty(SEEK_TOOLTIP_X, `${x}px`);
+            tooltipRef.current.style.setProperty(SEEK_TOOLTIP_Y, `${y}px`);
+        }
+        if (!seekState.hasInitialPosition) {
+            setSeekState((prev) => (Object.assign(Object.assign({}, prev), { hasInitialPosition: true })));
+        }
+    }, [onCollisionDataUpdate, seekState.hasInitialPosition]);
+    const onHoverProgressUpdate = React.useCallback(() => {
+        if (!seekRef.current || seekableEnd <= 0)
+            return;
+        const hoverPercent = Math.min(100, (hoverTimeRef.current / seekableEnd) * 100);
+        seekRef.current.style.setProperty(SEEK_HOVER_PERCENT, `${hoverPercent.toFixed(4)}%`);
+    }, [seekableEnd]);
+    React.useEffect(() => {
+        if (seekState.pendingSeekTime !== null) {
+            const diff = Math.abs(mediaCurrentTime - seekState.pendingSeekTime);
+            if (diff < 0.5) {
+                setSeekState((prev) => (Object.assign(Object.assign({}, prev), { pendingSeekTime: null })));
+            }
+        }
+    }, [mediaCurrentTime, seekState.pendingSeekTime]);
+    React.useEffect(() => {
+        if (!seekState.isHovering || tooltipDisabled)
+            return;
+        function onScroll() {
+            setSeekState((prev) => (Object.assign(Object.assign({}, prev), { isHovering: false, hasInitialPosition: false })));
+            dispatch({
+                type: media_store_1.MediaActionTypes.MEDIA_PREVIEW_REQUEST,
+                detail: undefined,
+            });
+        }
+        document.addEventListener("scroll", onScroll, { passive: true });
+        return () => {
+            document.removeEventListener("scroll", onScroll);
+        };
+    }, [dispatch, seekState.isHovering, tooltipDisabled]);
+    const bufferedProgress = React.useMemo(() => {
+        if (mediaBuffered.length === 0 || seekableEnd <= 0)
+            return 0;
+        if (mediaEnded)
+            return 1;
+        const containingRange = mediaBuffered.find(([start, end]) => start <= mediaCurrentTime && mediaCurrentTime <= end);
+        if (containingRange) {
+            return Math.min(1, containingRange[1] / seekableEnd);
+        }
+        return Math.min(1, seekableStart / seekableEnd);
+    }, [mediaBuffered, mediaCurrentTime, seekableEnd, mediaEnded, seekableStart]);
+    const onPointerEnter = React.useCallback(() => {
+        if (seekRef.current) {
+            seekRectRef.current = seekRef.current.getBoundingClientRect();
+        }
+        collisionDataRef.current = null;
+        pointerEnterTimeRef.current = Date.now();
+        horizontalMovementRef.current = 0;
+        verticalMovementRef.current = 0;
+        if (seekableEnd > 0) {
+            if (hoverTimeoutRef.current) {
+                clearTimeout(hoverTimeoutRef.current);
+            }
+            if (!tooltipDisabled) {
+                if (lastPointerXRef.current && seekRectRef.current) {
+                    const clientX = Math.max(seekRectRef.current.left, Math.min(lastPointerXRef.current, seekRectRef.current.right));
+                    onTooltipPositionUpdate(clientX);
+                }
+            }
+        }
+    }, [seekableEnd, onTooltipPositionUpdate, tooltipDisabled]);
+    const onPointerLeave = React.useCallback(() => {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+        if (rafIdRef.current) {
+            cancelAnimationFrame(rafIdRef.current);
+            rafIdRef.current = null;
+        }
+        if (previewDebounceRef.current) {
+            cancelAnimationFrame(previewDebounceRef.current);
+            previewDebounceRef.current = null;
+        }
+        setSeekState((prev) => (Object.assign(Object.assign({}, prev), { isHovering: false, hasInitialPosition: false })));
+        justCommittedRef.current = false;
+        seekRectRef.current = null;
+        collisionDataRef.current = null;
+        pointerEnterTimeRef.current = 0;
+        horizontalMovementRef.current = 0;
+        verticalMovementRef.current = 0;
+        lastPointerXRef.current = 0;
+        lastPointerYRef.current = 0;
+        lastSeekCommitTimeRef.current = 0;
+        if (!tooltipDisabled) {
+            dispatch({
+                type: media_store_1.MediaActionTypes.MEDIA_PREVIEW_REQUEST,
+                detail: undefined,
+            });
+        }
+    }, [dispatch, tooltipDisabled]);
+    const onPointerMove = React.useCallback((event) => {
+        if (seekableEnd <= 0)
+            return;
+        if (!seekRectRef.current && seekRef.current) {
+            seekRectRef.current = seekRef.current.getBoundingClientRect();
+        }
+        if (!seekRectRef.current)
+            return;
+        const currentX = event.clientX;
+        const currentY = event.clientY;
+        if (lastPointerXRef.current !== 0 && lastPointerYRef.current !== 0) {
+            const deltaX = Math.abs(currentX - lastPointerXRef.current);
+            const deltaY = Math.abs(currentY - lastPointerYRef.current);
+            horizontalMovementRef.current += deltaX;
+            verticalMovementRef.current += deltaY;
+        }
+        lastPointerXRef.current = currentX;
+        lastPointerYRef.current = currentY;
+        if (rafIdRef.current) {
+            cancelAnimationFrame(rafIdRef.current);
+        }
+        rafIdRef.current = requestAnimationFrame(() => {
+            const wasJustCommitted = justCommittedRef.current;
+            if (wasJustCommitted) {
+                justCommittedRef.current = false;
+            }
+            const seekRect = seekRectRef.current;
+            if (!seekRect) {
+                rafIdRef.current = null;
+                return;
+            }
+            const clientX = lastPointerXRef.current;
+            const offsetXOnSeekBar = Math.max(0, Math.min(clientX - seekRect.left, seekRect.width));
+            const relativeX = offsetXOnSeekBar / seekRect.width;
+            const calculatedHoverTime = relativeX * seekableEnd;
+            hoverTimeRef.current = calculatedHoverTime;
+            onHoverProgressUpdate();
+            const wasHovering = seekState.isHovering;
+            const isCurrentlyHovering = clientX >= seekRect.left && clientX <= seekRect.right;
+            const timeHovering = Date.now() - pointerEnterTimeRef.current;
+            const totalMovement = horizontalMovementRef.current + verticalMovementRef.current;
+            const horizontalRatio = totalMovement > 0 ? horizontalMovementRef.current / totalMovement : 0;
+            const timeSinceSeekCommit = Date.now() - lastSeekCommitTimeRef.current;
+            const isInSeekCooldown = timeSinceSeekCommit < 300;
+            const shouldShowTooltip = !wasJustCommitted &&
+                !isInSeekCooldown &&
+                (timeHovering > 150 ||
+                    horizontalRatio > 0.6 ||
+                    (totalMovement < 10 && timeHovering > 50));
+            if (!wasHovering &&
+                isCurrentlyHovering &&
+                shouldShowTooltip &&
+                !tooltipDisabled) {
+                setSeekState((prev) => (Object.assign(Object.assign({}, prev), { isHovering: true })));
+            }
+            if (!tooltipDisabled) {
+                onPreviewUpdate(calculatedHoverTime);
+                if (isCurrentlyHovering && (wasHovering || shouldShowTooltip)) {
+                    onTooltipPositionUpdate(clientX);
+                }
+            }
+            rafIdRef.current = null;
+        });
+    }, [
+        onPreviewUpdate,
+        onTooltipPositionUpdate,
+        onHoverProgressUpdate,
+        seekableEnd,
+        seekState.isHovering,
+        tooltipDisabled,
+    ]);
+    const onSeek = React.useCallback((value) => {
+        var _a;
+        const time = (_a = value[0]) !== null && _a !== void 0 ? _a : 0;
+        setSeekState((prev) => (Object.assign(Object.assign({}, prev), { pendingSeekTime: time })));
+        if (!store.getState().dragging) {
+            store.setState("dragging", true);
+        }
+        if (seekThrottleRef.current) {
+            cancelAnimationFrame(seekThrottleRef.current);
+        }
+        seekThrottleRef.current = requestAnimationFrame(() => {
+            dispatch({
+                type: media_store_1.MediaActionTypes.MEDIA_SEEK_REQUEST,
+                detail: time,
+            });
+            seekThrottleRef.current = null;
+        });
+    }, [dispatch, store.getState, store.setState]);
+    const onSeekCommit = React.useCallback((value) => {
+        var _a;
+        const time = (_a = value[0]) !== null && _a !== void 0 ? _a : 0;
+        if (seekThrottleRef.current) {
+            cancelAnimationFrame(seekThrottleRef.current);
+            seekThrottleRef.current = null;
+        }
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+        if (rafIdRef.current) {
+            cancelAnimationFrame(rafIdRef.current);
+            rafIdRef.current = null;
+        }
+        if (previewDebounceRef.current) {
+            cancelAnimationFrame(previewDebounceRef.current);
+            previewDebounceRef.current = null;
+        }
+        setSeekState((prev) => (Object.assign(Object.assign({}, prev), { pendingSeekTime: time, isHovering: false, hasInitialPosition: false })));
+        justCommittedRef.current = true;
+        collisionDataRef.current = null;
+        lastSeekCommitTimeRef.current = Date.now();
+        pointerEnterTimeRef.current = Date.now();
+        horizontalMovementRef.current = 0;
+        verticalMovementRef.current = 0;
+        if (store.getState().dragging) {
+            store.setState("dragging", false);
+        }
+        dispatch({
+            type: media_store_1.MediaActionTypes.MEDIA_SEEK_REQUEST,
+            detail: time,
+        });
+        dispatch({
+            type: media_store_1.MediaActionTypes.MEDIA_PREVIEW_REQUEST,
+            detail: undefined,
+        });
+    }, [dispatch, store.getState, store.setState]);
+    React.useEffect(() => {
+        return () => {
+            if (seekThrottleRef.current) {
+                cancelAnimationFrame(seekThrottleRef.current);
+            }
+            if (hoverTimeoutRef.current) {
+                clearTimeout(hoverTimeoutRef.current);
+            }
+            if (rafIdRef.current) {
+                cancelAnimationFrame(rafIdRef.current);
+            }
+            if (previewDebounceRef.current) {
+                cancelAnimationFrame(previewDebounceRef.current);
+            }
+        };
+    }, []);
+    const currentChapterCue = getCurrentChapterCue(hoverTimeRef.current);
+    const thumbnail = getThumbnail(hoverTimeRef.current);
+    const hoverTime = getCachedTime(hoverTimeRef.current, seekableEnd);
+    const chapterSeparators = React.useMemo(() => {
+        if (withoutChapter || chapterCues.length <= 1 || seekableEnd <= 0) {
+            return null;
+        }
+        return chapterCues.slice(1).map((chapterCue, index) => {
+            const position = (chapterCue.startTime / seekableEnd) * 100;
+            return ((0, jsx_runtime_1.jsx)("div", { role: "presentation", "aria-hidden": "true", "data-slot": "media-player-seek-chapter-separator", className: "absolute top-0 h-full bg-zinc-50 dark:bg-zinc-950", style: {
+                    width: ".1563rem",
+                    left: `${position}%`,
+                    transform: "translateX(-50%)",
+                } }, `chapter-${index}-${chapterCue.startTime}`));
+        });
+    }, [chapterCues, seekableEnd, withoutChapter]);
+    const spriteStyle = React.useMemo(() => {
+        var _a, _b;
+        if (!(thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.coords) || !(thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.src)) {
+            return {};
+        }
+        const coordX = thumbnail.coords[0];
+        const coordY = thumbnail.coords[1];
+        const spriteWidth = Number.parseFloat((_a = thumbnail.coords[2]) !== null && _a !== void 0 ? _a : "0");
+        const spriteHeight = Number.parseFloat((_b = thumbnail.coords[3]) !== null && _b !== void 0 ? _b : "0");
+        const scaleX = spriteWidth > 0 ? SPRITE_CONTAINER_WIDTH / spriteWidth : 1;
+        const scaleY = spriteHeight > 0 ? SPRITE_CONTAINER_HEIGHT / spriteHeight : 1;
+        const scale = Math.min(scaleX, scaleY);
+        return {
+            width: `${spriteWidth}px`,
+            height: `${spriteHeight}px`,
+            backgroundImage: `url(${thumbnail.src})`,
+            backgroundPosition: `-${coordX}px -${coordY}px`,
+            backgroundRepeat: "no-repeat",
+            transform: `scale(${scale})`,
+            transformOrigin: "top left",
+        };
+    }, [thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.coords, thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.src]);
+    const SeekSlider = ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "media-player-seek-container", className: "relative w-full", children: [(0, jsx_runtime_1.jsxs)(SliderPrimitive.Root, Object.assign({ "aria-controls": context.mediaId, "aria-valuetext": `${currentTime} of ${duration}`, "data-hovering": seekState.isHovering ? "" : undefined, "data-slider": "", "data-slot": "media-player-seek", disabled: isDisabled }, seekProps, { ref: seekRef, min: seekableStart, max: seekableEnd, step: 0.01, className: (0, utils_1.cn)("relative flex w-full touch-none items-center select-none data-disabled:pointer-events-none data-disabled:opacity-50", className), value: [displayValue], onValueChange: onSeek, onValueCommit: onSeekCommit, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onPointerMove: onPointerMove, children: [(0, jsx_runtime_1.jsxs)(SliderPrimitive.Track, { className: "relative h-1 w-full grow overflow-hidden rounded-full bg-primary/40", children: [(0, jsx_runtime_1.jsx)("div", { "data-slot": "media-player-seek-buffered", className: "absolute h-full bg-primary/70 will-change-[width]", style: {
+                                    width: `${bufferedProgress * 100}%`,
+                                } }), (0, jsx_runtime_1.jsx)(SliderPrimitive.Range, { className: "absolute h-full bg-primary will-change-[width]" }), seekState.isHovering && seekableEnd > 0 && ((0, jsx_runtime_1.jsx)("div", { "data-slot": "media-player-seek-hover-range", className: "absolute h-full bg-primary/70 will-change-[width,opacity]", style: {
+                                    width: `var(${SEEK_HOVER_PERCENT}, 0%)`,
+                                    transition: "opacity 150ms ease-out",
+                                } })), chapterSeparators] }), (0, jsx_runtime_1.jsx)(SliderPrimitive.Thumb, { className: "relative z-10 block size-2.5 shrink-0 rounded-full bg-primary shadow-sm ring-ring/50 transition-[color,box-shadow] will-change-transform hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" })] })), !withoutTooltip &&
+                !context.withoutTooltip &&
+                seekState.isHovering &&
+                seekableEnd > 0 && ((0, jsx_runtime_1.jsx)(MediaPlayerPortal, { children: (0, jsx_runtime_1.jsx)("div", { ref: tooltipRef, className: "pointer-events-none z-50 contain-[layout_style] [transition:opacity_150ms_ease-in-out] backface-hidden", style: {
+                        position: "fixed",
+                        left: `var(${SEEK_TOOLTIP_X}, 0rem)`,
+                        top: `var(${SEEK_TOOLTIP_Y}, 0rem)`,
+                        transform: `translateX(-50%) translateY(calc(-100% - ${currentTooltipSideOffset}px))`,
+                        visibility: seekState.hasInitialPosition ? "visible" : "hidden",
+                        opacity: seekState.hasInitialPosition ? 1 : 0,
+                    }, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex flex-col items-center gap-1.5 rounded-md border bg-background text-foreground shadow-sm dark:bg-zinc-900", thumbnail && "min-h-10", !thumbnail && currentChapterCue && "px-3 py-1.5"), children: [(thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.src) && ((0, jsx_runtime_1.jsx)("div", { "data-slot": "media-player-seek-thumbnail", className: "overflow-hidden rounded-md rounded-b-none", style: {
+                                    width: `${SPRITE_CONTAINER_WIDTH}px`,
+                                    height: `${SPRITE_CONTAINER_HEIGHT}px`,
+                                }, children: thumbnail.coords ? ((0, jsx_runtime_1.jsx)("div", { style: spriteStyle })) : ((0, jsx_runtime_1.jsx)("img", { src: thumbnail.src, alt: `Preview at ${hoverTime}`, className: "size-full object-cover" })) })), currentChapterCue && ((0, jsx_runtime_1.jsx)("div", { "data-slot": "media-player-seek-chapter-title", className: "line-clamp-2 max-w-48 text-center text-xs text-balance", children: currentChapterCue.text })), (0, jsx_runtime_1.jsx)("div", { "data-slot": "media-player-seek-time", className: (0, utils_1.cn)("text-center text-xs whitespace-nowrap tabular-nums", thumbnail && "pb-1.5", !(thumbnail || currentChapterCue) && "px-2.5 py-1"), children: tooltipTimeVariant === "progress"
+                                    ? `${hoverTime} / ${duration}`
+                                    : hoverTime })] }) }) }))] }));
+    if (withTime) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm tabular-nums", children: currentTime }), SeekSlider, (0, jsx_runtime_1.jsx)("span", { className: "text-sm tabular-nums", children: remainingTime })] }));
+    }
+    return SeekSlider;
+}
+function MediaPlayerVolume(props) {
+    const { expandable = false, className, disabled } = props, volumeProps = __rest(props, ["expandable", "className", "disabled"]);
+    const context = useMediaPlayerContext(VOLUME_NAME);
+    const store = useStoreContext(VOLUME_NAME);
+    const dispatch = (0, media_store_1.useMediaDispatch)();
+    const mediaVolume = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaVolume) !== null && _a !== void 0 ? _a : 1; });
+    const mediaMuted = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaMuted) !== null && _a !== void 0 ? _a : false; });
+    const mediaVolumeLevel = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaVolumeLevel) !== null && _a !== void 0 ? _a : "high"; });
+    const sliderId = React.useId();
+    const volumeTriggerId = React.useId();
+    const isDisabled = disabled || context.disabled;
+    const onMute = React.useCallback(() => {
+        dispatch({
+            type: mediaMuted
+                ? media_store_1.MediaActionTypes.MEDIA_UNMUTE_REQUEST
+                : media_store_1.MediaActionTypes.MEDIA_MUTE_REQUEST,
+        });
+    }, [dispatch, mediaMuted]);
+    const onVolumeChange = React.useCallback((value) => {
+        var _a;
+        const volume = (_a = value[0]) !== null && _a !== void 0 ? _a : 0;
+        if (!store.getState().dragging) {
+            store.setState("dragging", true);
+        }
+        dispatch({
+            type: media_store_1.MediaActionTypes.MEDIA_VOLUME_REQUEST,
+            detail: volume,
+        });
+    }, [dispatch, store.getState, store.setState]);
+    const onVolumeCommit = React.useCallback((value) => {
+        var _a;
+        const volume = (_a = value[0]) !== null && _a !== void 0 ? _a : 0;
+        if (store.getState().dragging) {
+            store.setState("dragging", false);
+        }
+        dispatch({
+            type: media_store_1.MediaActionTypes.MEDIA_VOLUME_REQUEST,
+            detail: volume,
+        });
+    }, [dispatch, store]);
+    const effectiveVolume = mediaMuted ? 0 : mediaVolume;
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-disabled": isDisabled ? "" : undefined, "data-slot": "media-player-volume-container", className: (0, utils_1.cn)("group flex items-center", expandable
+            ? "gap-0 group-focus-within:gap-2 group-hover:gap-1.5"
+            : "gap-1.5", className), children: [(0, jsx_runtime_1.jsx)(MediaPlayerTooltip, { tooltip: "Volume", shortcut: "M", children: (0, jsx_runtime_1.jsx)(Button, { id: volumeTriggerId, type: "button", "aria-controls": `${context.mediaId} ${sliderId}`, "aria-label": mediaMuted ? "Unmute" : "Mute", "aria-pressed": mediaMuted, "data-slot": "media-player-volume-trigger", "data-state": mediaMuted ? "on" : "off", variant: "ghost", size: "icon", className: "size-8", disabled: isDisabled, onClick: onMute, children: mediaVolumeLevel === "off" || mediaMuted ? ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "VolumeXIcon", tabler: "IconVolumeOff", hugeicons: "VolumeOffIcon", phosphor: "SpeakerSlashIcon", remixicon: "RiVolumeMuteLine" })) : mediaVolumeLevel === "high" ? ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "Volume2Icon", tabler: "IconVolume", hugeicons: "VolumeHighIcon", phosphor: "SpeakerHighIcon", remixicon: "RiVolumeUpLine" })) : ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "Volume1Icon", tabler: "IconVolume2", hugeicons: "VolumeLowIcon", phosphor: "SpeakerLowIcon", remixicon: "RiVolumeDownLine" })) }) }), (0, jsx_runtime_1.jsxs)(SliderPrimitive.Root, Object.assign({ id: sliderId, "aria-controls": context.mediaId, "aria-valuetext": `${Math.round(effectiveVolume * 100)}% volume`, "data-slider": "", "data-slot": "media-player-volume" }, volumeProps, { min: 0, max: 1, step: 0.1, className: (0, utils_1.cn)("relative flex touch-none items-center select-none", expandable
+                    ? "w-0 opacity-0 transition-[width,opacity] duration-200 ease-in-out group-focus-within:w-16 group-focus-within:opacity-100 group-hover:w-16 group-hover:opacity-100"
+                    : "w-16", className), disabled: isDisabled, value: [effectiveVolume], onValueChange: onVolumeChange, onValueCommit: onVolumeCommit, children: [(0, jsx_runtime_1.jsx)(SliderPrimitive.Track, { className: "relative h-1 w-full grow overflow-hidden rounded-full bg-zinc-500", children: (0, jsx_runtime_1.jsx)(SliderPrimitive.Range, { className: "absolute h-full bg-primary will-change-[width]" }) }), (0, jsx_runtime_1.jsx)(SliderPrimitive.Thumb, { className: "block size-2.5 shrink-0 rounded-full bg-primary shadow-sm ring-ring/50 transition-[color,box-shadow] will-change-transform hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" })] }))] }));
+}
+function MediaPlayerTime(props) {
+    const { variant = "progress", asChild, className } = props, timeProps = __rest(props, ["variant", "asChild", "className"]);
+    const context = useMediaPlayerContext("MediaPlayerTime");
+    const mediaCurrentTime = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaCurrentTime) !== null && _a !== void 0 ? _a : 0; });
+    const [, seekableEnd = 0] = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaSeekable) !== null && _a !== void 0 ? _a : [0, 0]; });
+    const times = React.useMemo(() => {
+        if (variant === "remaining") {
+            return {
+                remaining: media_store_1.timeUtils.formatTime(seekableEnd - mediaCurrentTime, seekableEnd),
+            };
+        }
+        if (variant === "duration") {
+            return {
+                duration: media_store_1.timeUtils.formatTime(seekableEnd, seekableEnd),
+            };
+        }
+        return {
+            current: media_store_1.timeUtils.formatTime(mediaCurrentTime, seekableEnd),
+            duration: media_store_1.timeUtils.formatTime(seekableEnd, seekableEnd),
+        };
+    }, [variant, mediaCurrentTime, seekableEnd]);
+    const TimePrimitive = asChild ? SlotPrimitive.Slot : "div";
+    if (variant === "remaining" || variant === "duration") {
+        return ((0, jsx_runtime_1.jsx)(TimePrimitive, Object.assign({ "data-slot": "media-player-time", "data-variant": variant, dir: context.dir }, timeProps, { className: (0, utils_1.cn)("text-sm text-foreground/80 tabular-nums", className), children: times[variant] })));
+    }
+    return ((0, jsx_runtime_1.jsxs)(TimePrimitive, Object.assign({ "data-slot": "media-player-time", "data-variant": variant, dir: context.dir }, timeProps, { className: (0, utils_1.cn)("flex items-center gap-1 text-sm text-foreground/80", className), children: [(0, jsx_runtime_1.jsx)("span", { className: "tabular-nums", children: times.current }), (0, jsx_runtime_1.jsx)("span", { role: "separator", "aria-hidden": "true", "aria-valuenow": 0, tabIndex: -1, children: "/" }), (0, jsx_runtime_1.jsx)("span", { className: "tabular-nums", children: times.duration })] })));
+}
+function MediaPlayerPlaybackSpeed(props) {
+    const { open, defaultOpen, onOpenChange: onOpenChangeProp, sideOffset = FLOATING_MENU_SIDE_OFFSET, speeds = SPEEDS, modal = false, className, disabled } = props, playbackSpeedProps = __rest(props, ["open", "defaultOpen", "onOpenChange", "sideOffset", "speeds", "modal", "className", "disabled"]);
+    const context = useMediaPlayerContext(PLAYBACK_SPEED_NAME);
+    const store = useStoreContext(PLAYBACK_SPEED_NAME);
+    const dispatch = (0, media_store_1.useMediaDispatch)();
+    const mediaPlaybackRate = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaPlaybackRate) !== null && _a !== void 0 ? _a : 1; });
+    const isDisabled = disabled || context.disabled;
+    const onPlaybackRateChange = React.useCallback((rate) => {
+        dispatch({
+            type: media_store_1.MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST,
+            detail: rate,
+        });
+    }, [dispatch]);
+    const onOpenChange = React.useCallback((open) => {
+        store.setState("menuOpen", open);
+        onOpenChangeProp === null || onOpenChangeProp === void 0 ? void 0 : onOpenChangeProp(open);
+    }, [store.setState, onOpenChangeProp]);
+    return ((0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenu, { modal: modal, open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [(0, jsx_runtime_1.jsx)(MediaPlayerTooltip, { tooltip: "Playback speed", shortcut: ["<", ">"], children: (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(Button, Object.assign({ type: "button", "aria-controls": context.mediaId, disabled: isDisabled }, playbackSpeedProps, { variant: "ghost", size: "icon", className: (0, utils_1.cn)("h-8 w-16 aria-expanded:bg-accent/50", className), children: [mediaPlaybackRate, "x"] })) }) }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuContent, { container: context.portalContainer, sideOffset: sideOffset, align: "center", className: "min-w-(--radix-dropdown-menu-trigger-width) data-[side=top]:mb-3.5", children: speeds.map((speed) => ((0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuItem, { className: "justify-between", onSelect: () => onPlaybackRateChange(speed), children: [speed, "x", mediaPlaybackRate === speed && ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "CheckIcon", tabler: "IconCheck", hugeicons: "Tick02Icon", phosphor: "CheckIcon", remixicon: "RiCheckLine" }))] }, speed))) })] }));
+}
+function MediaPlayerLoop(props) {
+    const { children, className, disabled } = props, loopProps = __rest(props, ["children", "className", "disabled"]);
+    const context = useMediaPlayerContext("MediaPlayerLoop");
+    const isDisabled = disabled || context.disabled;
+    const [isLooping, setIsLooping] = React.useState(() => {
+        var _a;
+        const mediaElement = context.mediaRef.current;
+        return (_a = mediaElement === null || mediaElement === void 0 ? void 0 : mediaElement.loop) !== null && _a !== void 0 ? _a : false;
+    });
+    React.useEffect(() => {
+        const mediaElement = context.mediaRef.current;
+        if (!mediaElement)
+            return;
+        setIsLooping(mediaElement.loop);
+        const checkLoop = () => setIsLooping(mediaElement.loop);
+        const observer = new MutationObserver(checkLoop);
+        observer.observe(mediaElement, {
+            attributes: true,
+            attributeFilter: ["loop"],
+        });
+        return () => observer.disconnect();
+    }, [context.mediaRef]);
+    const onLoopToggle = React.useCallback((event) => {
+        var _a;
+        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+        if (event.defaultPrevented)
+            return;
+        const mediaElement = context.mediaRef.current;
+        if (mediaElement) {
+            const newLoopState = !mediaElement.loop;
+            mediaElement.loop = newLoopState;
+            setIsLooping(newLoopState);
+        }
+    }, [context.mediaRef, props.onClick]);
+    return ((0, jsx_runtime_1.jsx)(MediaPlayerTooltip, { tooltip: isLooping ? "Disable loop" : "Enable loop", shortcut: "R", children: (0, jsx_runtime_1.jsx)(Button, Object.assign({ type: "button", "aria-controls": context.mediaId, "aria-label": isLooping ? "Disable loop" : "Enable loop", "aria-pressed": isLooping, "data-disabled": isDisabled ? "" : undefined, "data-slot": "media-player-loop", "data-state": isLooping ? "on" : "off", disabled: isDisabled }, loopProps, { variant: "ghost", size: "icon", className: (0, utils_1.cn)("size-8", className), onClick: onLoopToggle, children: children !== null && children !== void 0 ? children : (isLooping ? ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "RepeatIcon", tabler: "IconRepeat", hugeicons: "RepeatIcon", phosphor: "RepeatIcon", remixicon: "RiRepeatLine", className: "text-muted-foreground" })) : ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "RepeatIcon", tabler: "IconRepeat", hugeicons: "RepeatIcon", phosphor: "RepeatIcon", remixicon: "RiRepeatLine" }))) })) }));
+}
+function MediaPlayerFullscreen(props) {
+    const { children, className, disabled } = props, fullscreenProps = __rest(props, ["children", "className", "disabled"]);
+    const context = useMediaPlayerContext("MediaPlayerFullscreen");
+    const dispatch = (0, media_store_1.useMediaDispatch)();
+    const isFullscreen = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaIsFullscreen) !== null && _a !== void 0 ? _a : false; });
+    const isDisabled = disabled || context.disabled;
+    const onFullscreen = React.useCallback((event) => {
+        var _a;
+        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+        if (event.defaultPrevented)
+            return;
+        dispatch({
+            type: isFullscreen
+                ? media_store_1.MediaActionTypes.MEDIA_EXIT_FULLSCREEN_REQUEST
+                : media_store_1.MediaActionTypes.MEDIA_ENTER_FULLSCREEN_REQUEST,
+        });
+    }, [dispatch, props.onClick, isFullscreen]);
+    return ((0, jsx_runtime_1.jsx)(MediaPlayerTooltip, { tooltip: "Fullscreen", shortcut: "F", children: (0, jsx_runtime_1.jsx)(Button, Object.assign({ type: "button", "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen", "data-disabled": isDisabled ? "" : undefined, "data-slot": "media-player-fullscreen", "data-state": isFullscreen ? "on" : "off", disabled: isDisabled }, fullscreenProps, { variant: "ghost", size: "icon", className: (0, utils_1.cn)("size-8", className), onClick: onFullscreen, children: children !== null && children !== void 0 ? children : (isFullscreen ? ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "Minimize2Icon", tabler: "IconMinimize", hugeicons: "MinimizeIcon", phosphor: "ArrowsInIcon", remixicon: "RiFullscreenExitLine" })) : ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "Maximize2Icon", tabler: "IconMaximize", hugeicons: "MaximizeIcon", phosphor: "ArrowsOutIcon", remixicon: "RiFullscreenLine" }))) })) }));
+}
+function MediaPlayerPiP(props) {
+    const { children, className, onPipError, disabled } = props, pipButtonProps = __rest(props, ["children", "className", "onPipError", "disabled"]);
+    const context = useMediaPlayerContext("MediaPlayerPiP");
+    const dispatch = (0, media_store_1.useMediaDispatch)();
+    const isPictureInPicture = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaIsPip) !== null && _a !== void 0 ? _a : false; });
+    const isDisabled = disabled || context.disabled;
+    const onPictureInPicture = React.useCallback((event) => {
+        var _a;
+        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+        if (event.defaultPrevented)
+            return;
+        dispatch({
+            type: isPictureInPicture
+                ? media_store_1.MediaActionTypes.MEDIA_EXIT_PIP_REQUEST
+                : media_store_1.MediaActionTypes.MEDIA_ENTER_PIP_REQUEST,
+        });
+        const mediaElement = context.mediaRef.current;
+        if (mediaElement instanceof HTMLVideoElement) {
+            if (isPictureInPicture) {
+                document.exitPictureInPicture().catch((error) => {
+                    onPipError === null || onPipError === void 0 ? void 0 : onPipError(error, "exit");
+                });
+            }
+            else {
+                mediaElement.requestPictureInPicture().catch((error) => {
+                    onPipError === null || onPipError === void 0 ? void 0 : onPipError(error, "enter");
+                });
+            }
+        }
+    }, [dispatch, props.onClick, isPictureInPicture, onPipError, context.mediaRef]);
+    return ((0, jsx_runtime_1.jsx)(MediaPlayerTooltip, { tooltip: "Picture in picture", shortcut: "P", children: (0, jsx_runtime_1.jsx)(Button, Object.assign({ type: "button", "aria-controls": context.mediaId, "aria-label": isPictureInPicture ? "Exit pip" : "Enter pip", "data-disabled": isDisabled ? "" : undefined, "data-slot": "media-player-pip", "data-state": isPictureInPicture ? "on" : "off", disabled: isDisabled }, pipButtonProps, { variant: "ghost", size: "icon", className: (0, utils_1.cn)("size-8", className), onClick: onPictureInPicture, children: typeof children === "function"
+                ? children(isPictureInPicture)
+                : (children !== null && children !== void 0 ? children : (isPictureInPicture ? ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "PictureInPicture2Icon", tabler: "IconPictureInPictureOn", hugeicons: "PictureInPictureOnIcon", phosphor: "PictureInPictureIcon", remixicon: "RiPictureInPicture2Line" })) : ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "PictureInPictureIcon", tabler: "IconPictureInPicture", hugeicons: "PictureInPictureOnIcon", phosphor: "PictureInPictureIcon", remixicon: "RiPictureInPictureLine" })))) })) }));
+}
+function MediaPlayerCaptions(props) {
+    const { children, className, disabled } = props, captionsProps = __rest(props, ["children", "className", "disabled"]);
+    const context = useMediaPlayerContext("MediaPlayerCaptions");
+    const dispatch = (0, media_store_1.useMediaDispatch)();
+    const isSubtitlesActive = (0, media_store_1.useMediaSelector)((state) => { var _a; return ((_a = state.mediaSubtitlesShowing) !== null && _a !== void 0 ? _a : []).length > 0; });
+    const isDisabled = disabled || context.disabled;
+    const onCaptionsToggle = React.useCallback((event) => {
+        var _a;
+        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+        if (event.defaultPrevented)
+            return;
+        dispatch({
+            type: media_store_1.MediaActionTypes.MEDIA_TOGGLE_SUBTITLES_REQUEST,
+        });
+    }, [dispatch, props.onClick]);
+    return ((0, jsx_runtime_1.jsx)(MediaPlayerTooltip, { tooltip: "Captions", shortcut: "C", children: (0, jsx_runtime_1.jsx)(Button, Object.assign({ type: "button", "aria-controls": context.mediaId, "aria-label": isSubtitlesActive ? "Disable captions" : "Enable captions", "aria-pressed": isSubtitlesActive, "data-disabled": isDisabled ? "" : undefined, "data-slot": "media-player-captions", "data-state": isSubtitlesActive ? "on" : "off", disabled: isDisabled }, captionsProps, { variant: "ghost", size: "icon", className: (0, utils_1.cn)("size-8", className), onClick: onCaptionsToggle, children: children !== null && children !== void 0 ? children : (isSubtitlesActive ? ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "SubtitlesIcon", tabler: "IconCaptions", hugeicons: "ClosedCaptionIcon", phosphor: "ClosedCaptioningIcon", remixicon: "RiClosedCaptioningLine" })) : ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "CaptionsOffIcon", tabler: "IconCaptionsOff", hugeicons: "ClosedCaptionIcon", phosphor: "ClosedCaptioningIcon", remixicon: "RiClosedCaptioningOffLine" }))) })) }));
+}
+function MediaPlayerDownload(props) {
+    const { children, className, disabled } = props, downloadProps = __rest(props, ["children", "className", "disabled"]);
+    const context = useMediaPlayerContext("MediaPlayerDownload");
+    const isDisabled = disabled || context.disabled;
+    const onDownload = React.useCallback((event) => {
+        var _a;
+        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+        if (event.defaultPrevented)
+            return;
+        const mediaElement = context.mediaRef.current;
+        if (!(mediaElement === null || mediaElement === void 0 ? void 0 : mediaElement.currentSrc))
+            return;
+        const link = document.createElement("a");
+        link.href = mediaElement.currentSrc;
+        link.download = "";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }, [context.mediaRef, props.onClick]);
+    return ((0, jsx_runtime_1.jsx)(MediaPlayerTooltip, { tooltip: "Download", shortcut: "D", children: (0, jsx_runtime_1.jsx)(Button, Object.assign({ type: "button", "aria-controls": context.mediaId, "aria-label": "Download", "data-disabled": isDisabled ? "" : undefined, "data-slot": "media-player-download", disabled: isDisabled }, downloadProps, { variant: "ghost", size: "icon", className: (0, utils_1.cn)("size-8", className), onClick: onDownload, children: children !== null && children !== void 0 ? children : ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "DownloadIcon", tabler: "IconDownload", hugeicons: "Download01Icon", phosphor: "DownloadSimpleIcon", remixicon: "RiDownloadLine" })) })) }));
+}
+function MediaPlayerSettings(props) {
+    const { open, defaultOpen, onOpenChange: onOpenChangeProp, sideOffset = FLOATING_MENU_SIDE_OFFSET, speeds = SPEEDS, modal = false, className, disabled } = props, settingsProps = __rest(props, ["open", "defaultOpen", "onOpenChange", "sideOffset", "speeds", "modal", "className", "disabled"]);
+    const context = useMediaPlayerContext(SETTINGS_NAME);
+    const store = useStoreContext(SETTINGS_NAME);
+    const dispatch = (0, media_store_1.useMediaDispatch)();
+    const mediaPlaybackRate = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaPlaybackRate) !== null && _a !== void 0 ? _a : 1; });
+    const mediaSubtitlesList = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaSubtitlesList) !== null && _a !== void 0 ? _a : []; });
+    const mediaSubtitlesShowing = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaSubtitlesShowing) !== null && _a !== void 0 ? _a : []; });
+    const mediaRenditionList = (0, media_store_1.useMediaSelector)((state) => { var _a; return (_a = state.mediaRenditionList) !== null && _a !== void 0 ? _a : []; });
+    const selectedRenditionId = (0, media_store_1.useMediaSelector)((state) => state.mediaRenditionSelected);
+    const isDisabled = disabled || context.disabled;
+    const isSubtitlesActive = mediaSubtitlesShowing.length > 0;
+    const onPlaybackRateChange = React.useCallback((rate) => {
+        dispatch({
+            type: media_store_1.MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST,
+            detail: rate,
+        });
+    }, [dispatch]);
+    const onRenditionChange = React.useCallback((renditionId) => {
+        dispatch({
+            type: media_store_1.MediaActionTypes.MEDIA_RENDITION_REQUEST,
+            detail: renditionId === "auto" ? undefined : renditionId,
+        });
+    }, [dispatch]);
+    const onSubtitlesToggle = React.useCallback(() => {
+        dispatch({
+            type: media_store_1.MediaActionTypes.MEDIA_TOGGLE_SUBTITLES_REQUEST,
+            detail: false,
+        });
+    }, [dispatch]);
+    const onShowSubtitleTrack = React.useCallback((subtitleTrack) => {
+        dispatch({
+            type: media_store_1.MediaActionTypes.MEDIA_TOGGLE_SUBTITLES_REQUEST,
+            detail: false,
+        });
+        dispatch({
+            type: media_store_1.MediaActionTypes.MEDIA_SHOW_SUBTITLES_REQUEST,
+            detail: subtitleTrack,
+        });
+    }, [dispatch]);
+    const selectedSubtitleLabel = React.useMemo(() => {
+        var _a, _b;
+        if (!isSubtitlesActive)
+            return "Off";
+        if (mediaSubtitlesShowing.length > 0) {
+            return (_b = (_a = mediaSubtitlesShowing[0]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "On";
+        }
+        return "Off";
+    }, [isSubtitlesActive, mediaSubtitlesShowing]);
+    const selectedRenditionLabel = React.useMemo(() => {
+        var _a;
+        if (!selectedRenditionId)
+            return "Auto";
+        const currentRendition = mediaRenditionList === null || mediaRenditionList === void 0 ? void 0 : mediaRenditionList.find((rendition) => rendition.id === selectedRenditionId);
+        if (!currentRendition)
+            return "Auto";
+        if (currentRendition.height)
+            return `${currentRendition.height}p`;
+        if (currentRendition.width)
+            return `${currentRendition.width}p`;
+        return (_a = currentRendition.id) !== null && _a !== void 0 ? _a : "Auto";
+    }, [selectedRenditionId, mediaRenditionList]);
+    const onOpenChange = React.useCallback((open) => {
+        store.setState("menuOpen", open);
+        onOpenChangeProp === null || onOpenChangeProp === void 0 ? void 0 : onOpenChangeProp(open);
+    }, [store.setState, onOpenChangeProp]);
+    return ((0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenu, { modal: modal, open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [(0, jsx_runtime_1.jsx)(MediaPlayerTooltip, { tooltip: "Settings", children: (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(Button, Object.assign({ type: "button", "aria-controls": context.mediaId, "aria-label": "Settings", "data-disabled": isDisabled ? "" : undefined, "data-slot": "media-player-settings", disabled: isDisabled }, settingsProps, { variant: "ghost", size: "icon", className: (0, utils_1.cn)("size-8 aria-expanded:bg-accent/50", className), children: (0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "SettingsIcon", tabler: "IconSettings", hugeicons: "Settings01Icon", phosphor: "GearIcon", remixicon: "RiSettings3Line" }) })) }) }), (0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuContent, { align: "end", side: "top", sideOffset: sideOffset, container: context.portalContainer, className: "w-56 data-[side=top]:mb-3.5", children: [(0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuLabel, { className: "sr-only", children: "Settings" }), (0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuSub, { children: [(0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuSubTrigger, { children: [(0, jsx_runtime_1.jsx)("span", { className: "flex-1", children: "Speed" }), (0, jsx_runtime_1.jsxs)(badge_1.Badge, { variant: "outline", className: "rounded-sm", children: [mediaPlaybackRate, "x"] })] }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuSubContent, { children: speeds.map((speed) => ((0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuItem, { className: "justify-between", onSelect: () => onPlaybackRateChange(speed), children: [speed, "x", mediaPlaybackRate === speed && ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "CheckIcon", tabler: "IconCheck", hugeicons: "Tick02Icon", phosphor: "CheckIcon", remixicon: "RiCheckLine" }))] }, speed))) })] }), context.isVideo && mediaRenditionList.length > 0 && ((0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuSub, { children: [(0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuSubTrigger, { children: [(0, jsx_runtime_1.jsx)("span", { className: "flex-1", children: "Quality" }), (0, jsx_runtime_1.jsx)(badge_1.Badge, { variant: "outline", className: "rounded-sm", children: selectedRenditionLabel })] }), (0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuSubContent, { children: [(0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuItem, { className: "justify-between", onSelect: () => onRenditionChange("auto"), children: ["Auto", !selectedRenditionId && ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "CheckIcon", tabler: "IconCheck", hugeicons: "Tick02Icon", phosphor: "CheckIcon", remixicon: "RiCheckLine" }))] }), mediaRenditionList
+                                        .slice()
+                                        .sort((a, b) => {
+                                        var _a, _b;
+                                        const aHeight = (_a = a.height) !== null && _a !== void 0 ? _a : 0;
+                                        const bHeight = (_b = b.height) !== null && _b !== void 0 ? _b : 0;
+                                        return bHeight - aHeight;
+                                    })
+                                        .map((rendition) => {
+                                        var _a;
+                                        const label = rendition.height
+                                            ? `${rendition.height}p`
+                                            : rendition.width
+                                                ? `${rendition.width}p`
+                                                : ((_a = rendition.id) !== null && _a !== void 0 ? _a : "Unknown");
+                                        const selected = rendition.id === selectedRenditionId;
+                                        return ((0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuItem, { className: "justify-between", onSelect: () => { var _a; return onRenditionChange((_a = rendition.id) !== null && _a !== void 0 ? _a : ""); }, children: [label, selected && ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "CheckIcon", tabler: "IconCheck", hugeicons: "Tick02Icon", phosphor: "CheckIcon", remixicon: "RiCheckLine" }))] }, rendition.id));
+                                    })] })] })), (0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuSub, { children: [(0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuSubTrigger, { children: [(0, jsx_runtime_1.jsx)("span", { className: "flex-1", children: "Captions" }), (0, jsx_runtime_1.jsx)(badge_1.Badge, { variant: "outline", className: "rounded-sm", children: selectedSubtitleLabel })] }), (0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuSubContent, { children: [(0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuItem, { className: "justify-between", onSelect: onSubtitlesToggle, children: ["Off", !isSubtitlesActive && ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "CheckIcon", tabler: "IconCheck", hugeicons: "Tick02Icon", phosphor: "CheckIcon", remixicon: "RiCheckLine" }))] }), mediaSubtitlesList.map((subtitleTrack) => {
+                                        const isSelected = mediaSubtitlesShowing.some((showingSubtitle) => showingSubtitle.label === subtitleTrack.label);
+                                        return ((0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuItem, { className: "justify-between", onSelect: () => onShowSubtitleTrack(subtitleTrack), children: [subtitleTrack.label, isSelected && ((0, jsx_runtime_1.jsx)(IconPlaceholder, { lucide: "CheckIcon", tabler: "IconCheck", hugeicons: "Tick02Icon", phosphor: "CheckIcon", remixicon: "RiCheckLine" }))] }, `${subtitleTrack.kind}-${subtitleTrack.label}-${subtitleTrack.language}`));
+                                    }), mediaSubtitlesList.length === 0 && ((0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuItem, { disabled: true, children: "No captions available" }))] })] })] })] }));
+}
+function MediaPlayerPortal(props) {
+    const { container: containerProp, children } = props;
+    const context = useMediaPlayerContext("MediaPlayerPortal");
+    const container = containerProp !== null && containerProp !== void 0 ? containerProp : context.portalContainer;
+    if (!container)
+        return null;
+    return ReactDOM.createPortal(children, container);
+}
+function MediaPlayerTooltip(props) {
+    const { tooltip, shortcut, delayDuration, sideOffset, children } = props, tooltipProps = __rest(props, ["tooltip", "shortcut", "delayDuration", "sideOffset", "children"]);
+    const context = useMediaPlayerContext("MediaPlayerTooltip");
+    const tooltipDelayDuration = delayDuration !== null && delayDuration !== void 0 ? delayDuration : context.tooltipDelayDuration;
+    const tooltipSideOffset = sideOffset !== null && sideOffset !== void 0 ? sideOffset : context.tooltipSideOffset;
+    if ((!tooltip && !shortcut) || context.withoutTooltip)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    return ((0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, Object.assign({}, tooltipProps, { delayDuration: tooltipDelayDuration, children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { className: "text-foreground focus-visible:ring-ring/50", asChild: true, children: children }), (0, jsx_runtime_1.jsxs)(tooltip_1.TooltipContent, { container: context.portalContainer, sideOffset: tooltipSideOffset, className: "flex items-center gap-2 border bg-accent px-2 py-1 font-medium text-foreground data-[side=top]:mb-3.5 dark:bg-zinc-900 [&>span]:hidden", children: [(0, jsx_runtime_1.jsx)("p", { children: tooltip }), Array.isArray(shortcut) ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: shortcut.map((shortcutKey) => ((0, jsx_runtime_1.jsx)("kbd", { className: "rounded border bg-secondary px-1.5 py-0.5 font-mono text-[11.2px] text-foreground shadow-xs select-none", children: (0, jsx_runtime_1.jsx)("abbr", { title: shortcutKey, className: "no-underline", children: shortcutKey }) }, shortcutKey))) })) : (shortcut && ((0, jsx_runtime_1.jsx)("kbd", { className: "rounded border bg-secondary px-1.5 py-px font-mono text-[11.2px] text-foreground shadow-xs select-none", children: (0, jsx_runtime_1.jsx)("abbr", { title: shortcut, className: "no-underline", children: shortcut }) }, shortcut)))] })] })));
+}
+//# sourceMappingURL=media-player.js.map