@geekapps/silo-elements-nextjs 0.0.1

package/dist/VideoPlayer.js

@@ -0,0 +1,738 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import gsap from "gsap";
+const AUTO_QUALITY = {
+    id: "auto",
+    label: "Auto",
+    type: "auto",
+};
+export function Sources(_props) {
+    return null;
+}
+export function Source(_props) {
+    return null;
+}
+export function Subtitles(_props) {
+    return null;
+}
+export function Subtitle(_props) {
+    return null;
+}
+export function Storyboard(_props) {
+    return null;
+}
+export function StoryboardFrame(_props) {
+    return null;
+}
+export function Video({ title, description, poster, children, className, autoHideControls = true, defaultVolume = 0.72, }) {
+    const parsed = useMemo(() => parseVideoChildren(children), [children]);
+    const initialSourceIndex = useMemo(() => {
+        const index = parsed.sources.findIndex((source) => source.default);
+        return index >= 0 ? index : 0;
+    }, [parsed.sources]);
+    const initialSubtitleMode = useMemo(() => {
+        const track = parsed.subtitles.find((subtitle) => subtitle.default);
+        return track?.srclang ?? "off";
+    }, [parsed.subtitles]);
+    const containerRef = useRef(null);
+    const chromeRef = useRef(null);
+    const playerRef = useRef(null);
+    const videoRef = useRef(null);
+    const progressRef = useRef(null);
+    const hlsRef = useRef(null);
+    const dashRef = useRef(null);
+    const hideTimerRef = useRef(null);
+    const [sourceIndex, setSourceIndex] = useState(initialSourceIndex);
+    const [qualities, setQualities] = useState([AUTO_QUALITY]);
+    const [selectedQuality, setSelectedQuality] = useState("auto");
+    const [audioTracks, setAudioTracks] = useState([]);
+    const [selectedAudio, setSelectedAudio] = useState(0);
+    const [openMenu, setOpenMenu] = useState(null);
+    const [subtitleMode, setSubtitleMode] = useState(initialSubtitleMode);
+    const [storyboardCues, setStoryboardCues] = useState([]);
+    const [preview, setPreview] = useState(null);
+    const [duration, setDuration] = useState(0);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [bufferedTime, setBufferedTime] = useState(0);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const [controlsVisible, setControlsVisible] = useState(true);
+    const [volume, setVolume] = useState(defaultVolume);
+    const [isMuted, setIsMuted] = useState(false);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [error, setError] = useState(null);
+    const activeSource = parsed.sources[sourceIndex] ?? parsed.sources[0] ?? null;
+    const progressPercent = duration ? (currentTime / duration) * 100 : 0;
+    const bufferedPercent = duration ? (bufferedTime / duration) * 100 : 0;
+    const destroyMediaEngines = useCallback(() => {
+        if (hlsRef.current) {
+            hlsRef.current.destroy();
+            hlsRef.current = null;
+        }
+        if (dashRef.current) {
+            dashRef.current.reset();
+            dashRef.current = null;
+        }
+    }, []);
+    const applySubtitleMode = useCallback((mode) => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        Array.from(video.textTracks).forEach((track) => {
+            track.mode =
+                mode !== "off" && track.language === mode ? "showing" : "disabled";
+        });
+    }, []);
+    const showControlsTemporarily = useCallback(() => {
+        setControlsVisible(true);
+        if (hideTimerRef.current) {
+            window.clearTimeout(hideTimerRef.current);
+        }
+        const video = videoRef.current;
+        if (autoHideControls && video && !video.paused) {
+            hideTimerRef.current = window.setTimeout(() => {
+                setControlsVisible(false);
+            }, 2400);
+        }
+    }, [autoHideControls]);
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        gsap.fromTo(containerRef.current, {
+            opacity: 0,
+            y: 36,
+            scale: 0.985,
+            filter: "blur(10px)",
+        }, {
+            opacity: 1,
+            y: 0,
+            scale: 1,
+            filter: "blur(0px)",
+            duration: 0.85,
+            ease: "power3.out",
+        });
+    }, []);
+    useEffect(() => {
+        if (!chromeRef.current)
+            return;
+        gsap.to(chromeRef.current, {
+            opacity: controlsVisible ? 1 : 0,
+            y: controlsVisible ? 0 : 10,
+            duration: 0.22,
+            ease: "power2.out",
+        });
+    }, [controlsVisible]);
+    useEffect(() => {
+        if (sourceIndex >= parsed.sources.length) {
+            setSourceIndex(initialSourceIndex);
+        }
+    }, [sourceIndex, parsed.sources.length, initialSourceIndex]);
+    useEffect(() => {
+        if (subtitleMode !== "off" &&
+            !parsed.subtitles.some((subtitle) => subtitle.srclang === subtitleMode)) {
+            setSubtitleMode(initialSubtitleMode);
+        }
+    }, [subtitleMode, parsed.subtitles, initialSubtitleMode]);
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        const syncTime = () => {
+            setCurrentTime(video.currentTime || 0);
+            if (video.buffered.length > 0) {
+                setBufferedTime(video.buffered.end(video.buffered.length - 1));
+            }
+        };
+        const syncDuration = () => {
+            setDuration(Number.isFinite(video.duration) ? video.duration : 0);
+            applySubtitleMode(subtitleMode);
+        };
+        const onPlay = () => {
+            setIsPlaying(true);
+            showControlsTemporarily();
+        };
+        const onPause = () => {
+            setIsPlaying(false);
+            setControlsVisible(true);
+        };
+        const onWaiting = () => setIsLoading(true);
+        const onCanPlay = () => setIsLoading(false);
+        const onEnded = () => setControlsVisible(true);
+        video.addEventListener("timeupdate", syncTime);
+        video.addEventListener("progress", syncTime);
+        video.addEventListener("loadedmetadata", syncDuration);
+        video.addEventListener("durationchange", syncDuration);
+        video.addEventListener("play", onPlay);
+        video.addEventListener("pause", onPause);
+        video.addEventListener("waiting", onWaiting);
+        video.addEventListener("canplay", onCanPlay);
+        video.addEventListener("ended", onEnded);
+        return () => {
+            video.removeEventListener("timeupdate", syncTime);
+            video.removeEventListener("progress", syncTime);
+            video.removeEventListener("loadedmetadata", syncDuration);
+            video.removeEventListener("durationchange", syncDuration);
+            video.removeEventListener("play", onPlay);
+            video.removeEventListener("pause", onPause);
+            video.removeEventListener("waiting", onWaiting);
+            video.removeEventListener("canplay", onCanPlay);
+            video.removeEventListener("ended", onEnded);
+        };
+    }, [applySubtitleMode, subtitleMode, showControlsTemporarily]);
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        video.volume = volume;
+        video.muted = isMuted || volume === 0;
+    }, [volume, isMuted]);
+    useEffect(() => {
+        applySubtitleMode(subtitleMode);
+    }, [subtitleMode, applySubtitleMode]);
+    useEffect(() => {
+        const onFullscreenChange = () => {
+            setIsFullscreen(Boolean(document.fullscreenElement));
+        };
+        document.addEventListener("fullscreenchange", onFullscreenChange);
+        return () => {
+            document.removeEventListener("fullscreenchange", onFullscreenChange);
+        };
+    }, []);
+    useEffect(() => {
+        let cancelled = false;
+        async function loadStoryboard() {
+            if (!parsed.storyboard) {
+                setStoryboardCues([]);
+                return;
+            }
+            if (parsed.storyboard.frames.length > 0) {
+                setStoryboardCues(parsed.storyboard.frames);
+                return;
+            }
+            if (!parsed.storyboard.src) {
+                setStoryboardCues([]);
+                return;
+            }
+            try {
+                const response = await fetch(parsed.storyboard.src);
+                if (!response.ok) {
+                    throw new Error("Storyboard not found");
+                }
+                const text = await response.text();
+                const cues = parseStoryboardVtt(text, new URL(parsed.storyboard.src, window.location.href).href);
+                if (!cancelled) {
+                    setStoryboardCues(cues);
+                }
+            }
+            catch {
+                if (!cancelled && parsed.storyboard.fallbackImage) {
+                    setStoryboardCues([
+                        {
+                            start: 0,
+                            end: Number.MAX_SAFE_INTEGER,
+                            image: parsed.storyboard.fallbackImage,
+                            w: parsed.storyboard.width ?? 160,
+                            h: parsed.storyboard.height ?? 90,
+                        },
+                    ]);
+                }
+            }
+        }
+        loadStoryboard();
+        return () => {
+            cancelled = true;
+        };
+    }, [parsed.storyboard]);
+    useEffect(() => {
+        const video = videoRef.current;
+        let cancelled = false;
+        if (!video || !activeSource) {
+            return;
+        }
+        destroyMediaEngines();
+        setError(null);
+        setIsLoading(true);
+        setCurrentTime(0);
+        setBufferedTime(0);
+        setDuration(0);
+        setSelectedQuality("auto");
+        setQualities([AUTO_QUALITY]);
+        setAudioTracks([]);
+        setSelectedAudio(0);
+        setOpenMenu(null);
+        video.pause();
+        video.removeAttribute("src");
+        video.load();
+        const sourceType = inferSourceType(activeSource);
+        if (sourceType === "dash") {
+            void (async () => {
+                try {
+                    const dashModule = await import("dashjs");
+                    if (cancelled)
+                        return;
+                    const dashjs = dashModule;
+                    const dash = dashjs.MediaPlayer().create();
+                    dashRef.current = dash;
+                    dash.updateSettings({
+                        streaming: {
+                            abr: {
+                                autoSwitchBitrate: {
+                                    video: true,
+                                },
+                            },
+                        },
+                    });
+                    dash.on(dashjs.MediaPlayer.events.STREAM_INITIALIZED, () => {
+                        const bitrates = dash.getBitrateInfoListFor("video") ?? [];
+                        setQualities([
+                            AUTO_QUALITY,
+                            ...bitrates.map((item, index) => ({
+                                id: `dash-${index}`,
+                                label: item.height
+                                    ? `${item.height}p`
+                                    : `${Math.round((item.bitrate ?? 0) / 1000)} kbps`,
+                                type: "dash",
+                                index,
+                            })),
+                        ]);
+                        setIsLoading(false);
+                    });
+                    dash.on(dashjs.MediaPlayer.events.ERROR, () => {
+                        setError("Não foi possível reproduzir o stream MPEG-DASH.");
+                        setIsLoading(false);
+                    });
+                    dash.initialize(video, activeSource.src, false);
+                }
+                catch {
+                    if (!cancelled) {
+                        setError("Não foi possível carregar o player MPEG-DASH.");
+                        setIsLoading(false);
+                    }
+                }
+            })();
+            return () => {
+                cancelled = true;
+                destroyMediaEngines();
+            };
+        }
+        if (sourceType === "hls") {
+            void (async () => {
+                try {
+                    const HlsModule = await import("hls.js");
+                    if (cancelled)
+                        return;
+                    const Hls = HlsModule.default;
+                    if (Hls.isSupported()) {
+                        const hls = new Hls({
+                            enableWorker: true,
+                            maxBufferLength: 30,
+                            maxMaxBufferLength: 60,
+                            maxBufferSize: 60 * 1000 * 1000,
+                        });
+                        hlsRef.current = hls;
+                        hls.loadSource(activeSource.src);
+                        hls.attachMedia(video);
+                        hls.on(Hls.Events.MANIFEST_PARSED, (_, data) => {
+                            const levels = data.levels ?? hls.levels ?? [];
+                            setQualities([
+                                AUTO_QUALITY,
+                                ...levels.map((level, index) => ({
+                                    id: `hls-${index}`,
+                                    label: level.height
+                                        ? `${level.height}p`
+                                        : `${Math.round((level.bitrate ?? 0) / 1000)} kbps`,
+                                    type: "hls",
+                                    index,
+                                })),
+                            ]);
+                            const tracks = hls.audioTracks ?? [];
+                            if (tracks.length > 1) {
+                                setAudioTracks(tracks.map((t, i) => ({
+                                    id: i,
+                                    label: t.name ?? t.lang ?? `Track ${i + 1}`,
+                                })));
+                                setSelectedAudio(hls.audioTrack ?? 0);
+                            }
+                            setIsLoading(false);
+                        });
+                        hls.on(Hls.Events.AUDIO_TRACKS_UPDATED, (_, data) => {
+                            const tracks = data.audioTracks ?? [];
+                            if (tracks.length > 1) {
+                                setAudioTracks(tracks.map((t, i) => ({
+                                    id: i,
+                                    label: t.name ?? t.lang ?? `Track ${i + 1}`,
+                                })));
+                            }
+                        });
+                        hls.on(Hls.Events.ERROR, (_, data) => {
+                            if (!data.fatal)
+                                return;
+                            if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
+                                hls.recoverMediaError();
+                                return;
+                            }
+                            setError("Não foi possível reproduzir o stream HLS.");
+                            setIsLoading(false);
+                        });
+                        return;
+                    }
+                    if (video.canPlayType("application/vnd.apple.mpegurl")) {
+                        video.src = activeSource.src;
+                        video.load();
+                        setIsLoading(false);
+                        return;
+                    }
+                    setError("Este navegador não suporta HLS.");
+                    setIsLoading(false);
+                }
+                catch {
+                    if (!cancelled) {
+                        setError("Não foi possível carregar o player HLS.");
+                        setIsLoading(false);
+                    }
+                }
+            })();
+            return () => {
+                cancelled = true;
+                destroyMediaEngines();
+            };
+        }
+        video.src = activeSource.src;
+        video.load();
+        setIsLoading(false);
+        return () => {
+            cancelled = true;
+            video.removeAttribute("src");
+            video.load();
+        };
+    }, [activeSource, destroyMediaEngines]);
+    const togglePlay = useCallback(async () => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        try {
+            if (video.paused) {
+                await video.play();
+            }
+            else {
+                video.pause();
+            }
+        }
+        catch {
+            setError("O navegador bloqueou a reprodução automática.");
+        }
+    }, []);
+    const seekRelative = useCallback((seconds) => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        video.currentTime = Math.max(0, Math.min(video.currentTime + seconds, video.duration || 0));
+    }, []);
+    const toggleFullscreen = useCallback(async () => {
+        const player = playerRef.current;
+        if (!player)
+            return;
+        try {
+            if (!document.fullscreenElement) {
+                await player.requestFullscreen();
+            }
+            else {
+                await document.exitFullscreen();
+            }
+        }
+        catch {
+            setError("Não foi possível alterar o modo fullscreen.");
+        }
+    }, []);
+    const changeAudio = useCallback((trackId) => {
+        setSelectedAudio(trackId);
+        setOpenMenu(null);
+        if (hlsRef.current) {
+            hlsRef.current.audioTrack = trackId;
+        }
+    }, []);
+    const changeQuality = useCallback((qualityId) => {
+        const option = qualities.find((quality) => quality.id === qualityId);
+        if (!option)
+            return;
+        setSelectedQuality(qualityId);
+        setOpenMenu(null);
+        if (option.type === "auto") {
+            if (hlsRef.current) {
+                hlsRef.current.currentLevel = -1;
+            }
+            if (dashRef.current) {
+                dashRef.current.updateSettings({
+                    streaming: {
+                        abr: {
+                            autoSwitchBitrate: {
+                                video: true,
+                            },
+                        },
+                    },
+                });
+            }
+            return;
+        }
+        if (option.type === "hls" && hlsRef.current && option.index != null) {
+            hlsRef.current.currentLevel = option.index;
+            return;
+        }
+        if (option.type === "dash" && dashRef.current && option.index != null) {
+            dashRef.current.updateSettings({
+                streaming: {
+                    abr: {
+                        autoSwitchBitrate: {
+                            video: false,
+                        },
+                    },
+                },
+            });
+            dashRef.current.setQualityFor("video", option.index);
+        }
+    }, [qualities]);
+    const handleProgressPointerMove = useCallback((event) => {
+        const progress = progressRef.current;
+        if (!progress || !duration || storyboardCues.length === 0) {
+            setPreview(null);
+            return;
+        }
+        const rect = progress.getBoundingClientRect();
+        const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width));
+        const time = (x / rect.width) * duration;
+        const cue = findStoryboardCue(storyboardCues, time);
+        if (!cue) {
+            setPreview(null);
+            return;
+        }
+        setPreview({
+            cue,
+            time,
+            left: Math.max(80, Math.min(x, rect.width - 80)),
+        });
+    }, [duration, storyboardCues]);
+    const handleProgressPointerLeave = useCallback(() => {
+        setPreview(null);
+    }, []);
+    const handleProgressPointerDown = useCallback((event) => {
+        const video = videoRef.current;
+        const progress = progressRef.current;
+        if (!video || !progress || !duration)
+            return;
+        const rect = progress.getBoundingClientRect();
+        const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width));
+        const nextTime = (x / rect.width) * duration;
+        video.currentTime = nextTime;
+        setCurrentTime(nextTime);
+    }, [duration]);
+    const handleKeyDown = useCallback((event) => {
+        const target = event.target;
+        const tagName = target.tagName.toLowerCase();
+        if (["input", "select", "button"].includes(tagName)) {
+            return;
+        }
+        if (event.key === " ") {
+            event.preventDefault();
+            togglePlay();
+        }
+        if (event.key === "ArrowRight") {
+            seekRelative(10);
+        }
+        if (event.key === "ArrowLeft") {
+            seekRelative(-10);
+        }
+        if (event.key.toLowerCase() === "f") {
+            toggleFullscreen();
+        }
+        if (event.key.toLowerCase() === "m") {
+            setIsMuted((value) => !value);
+        }
+    }, [seekRelative, toggleFullscreen, togglePlay]);
+    if (!activeSource) {
+        return (_jsxs("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700", children: ["O componente Video precisa de pelo menos um", " ", _jsx("code", { children: "<Source />" }), "."] }));
+    }
+    return (_jsx("div", { ref: containerRef, className: `mx-auto w-full max-w-6xl ${className ?? ""}`, children: _jsxs("div", { ref: playerRef, tabIndex: 0, onKeyDown: handleKeyDown, onMouseMove: showControlsTemporarily, onMouseLeave: () => {
+                if (isPlaying && autoHideControls) {
+                    setControlsVisible(false);
+                }
+            }, className: "relative aspect-video w-full overflow-hidden rounded-[14px] bg-black shadow-[0_30px_90px_rgba(15,15,15,0.22)] outline-none ring-1 ring-black/5", children: [_jsx("video", { ref: videoRef, className: "h-full w-full object-contain", poster: poster, playsInline: true, preload: "metadata", crossOrigin: "anonymous", children: parsed.subtitles.map((subtitle) => (_jsx("track", { kind: "subtitles", src: subtitle.src, srcLang: subtitle.srclang, label: subtitle.label, default: subtitle.default }, `${activeSource.src}-${subtitle.srclang}`))) }), _jsx("div", { className: `pointer-events-none absolute inset-0 z-10 grid place-items-center transition ${isPlaying ? "opacity-0" : "opacity-100"}`, children: _jsx("span", { className: "grid size-20 place-items-center rounded-full bg-white/15 text-white backdrop-blur-xl ring-1 ring-white/20", children: _jsx(PlayIcon, { className: "ml-1 size-9" }) }) }), isLoading && (_jsx("div", { className: "pointer-events-none absolute inset-0 z-20 grid place-items-center bg-black/10", children: _jsx("div", { className: "size-9 animate-spin rounded-full border-2 border-white/25 border-t-white" }) })), error && (_jsx("div", { className: "absolute inset-x-8 top-1/2 z-40 -translate-y-1/2 rounded-2xl border border-white/10 bg-black/75 p-5 text-center text-sm text-white shadow-2xl backdrop-blur-xl", children: error })), _jsxs("div", { ref: chromeRef, onClick: togglePlay, className: `absolute inset-0 z-30 flex flex-col justify-between bg-gradient-to-b from-black/55 via-black/10 to-black/75 ${controlsVisible ? "" : "pointer-events-none"}`, children: [_jsxs("header", { onClick: (e) => e.stopPropagation(), className: "flex items-start justify-between gap-4 px-7 pt-7 text-white md:px-9 md:pt-8", children: [_jsxs("div", { children: [title && (_jsx("h1", { className: "text-lg font-bold tracking-wide md:text-xl", children: title })), description && (_jsx("p", { className: "mt-1 text-sm font-medium text-white/85", children: description }))] }), parsed.sources.length > 1 && (_jsx("select", { value: String(sourceIndex), onChange: (e) => setSourceIndex(Number(e.target.value)), "aria-label": "Video source", className: "h-8 rounded-full border border-white/15 bg-white/10 px-3 text-xs font-semibold text-white outline-none backdrop-blur-md transition hover:bg-white/15", children: parsed.sources.map((source, index) => (_jsx("option", { value: String(index), className: "text-black", children: source.label ?? source.type ?? `Source ${index + 1}` }, `${source.src}-${index}`))) }))] }), _jsxs("footer", { onClick: (e) => e.stopPropagation(), className: "px-7 pb-7 text-white md:px-9 md:pb-8", children: [_jsxs("div", { ref: progressRef, onPointerMove: handleProgressPointerMove, onPointerLeave: handleProgressPointerLeave, onPointerDown: handleProgressPointerDown, className: "relative mb-6 h-5 cursor-pointer", children: [preview && (_jsxs("div", { className: "pointer-events-none absolute bottom-8 z-20 -translate-x-1/2 rounded-lg bg-black/80 p-1 shadow-2xl ring-1 ring-white/15 backdrop-blur", style: { left: preview.left }, children: [_jsx("div", { className: "overflow-hidden rounded-md bg-neutral-900", style: {
+                                                        width: preview.cue.w ?? 160,
+                                                        height: preview.cue.h ?? 90,
+                                                        backgroundImage: `url(${preview.cue.image})`,
+                                                        backgroundPosition: preview.cue.x != null && preview.cue.y != null
+                                                            ? `-${preview.cue.x}px -${preview.cue.y}px`
+                                                            : "center",
+                                                        backgroundSize: preview.cue.x != null ? "auto" : "cover",
+                                                        backgroundRepeat: "no-repeat",
+                                                    } }), _jsx("div", { className: "pt-1 text-center text-[11px] font-semibold text-white/80", children: formatTime(preview.time) })] })), _jsxs("div", { className: "absolute left-0 right-0 top-1/2 h-[5px] -translate-y-1/2 overflow-hidden rounded-full bg-white/22", children: [_jsx("div", { className: "absolute inset-y-0 left-0 bg-white/30", style: { width: `${bufferedPercent}%` } }), _jsx("div", { className: "absolute inset-y-0 left-0 bg-white/85", style: { width: `${progressPercent}%` } })] })] }), _jsxs("div", { className: "flex items-center justify-between gap-5", children: [_jsxs("div", { className: "flex items-center gap-5", children: [_jsx("button", { type: "button", onClick: togglePlay, className: "grid size-8 place-items-center text-white transition hover:scale-105 hover:text-white/80", "aria-label": isPlaying ? "Pause" : "Play", children: isPlaying ? (_jsx(PauseIcon, { className: "size-7" })) : (_jsx(PlayIcon, { className: "size-7" })) }), _jsx("button", { type: "button", onClick: () => seekRelative(10), className: "hidden size-8 place-items-center text-white transition hover:scale-105 hover:text-white/80 sm:grid", "aria-label": "Forward 10 seconds", children: _jsx(ForwardIcon, { className: "size-7" }) }), _jsxs("div", { className: "hidden items-center gap-2 text-sm font-semibold text-white/75 sm:flex", children: [_jsx("span", { children: formatTime(currentTime) }), _jsx("span", { className: "text-white/35", children: "/" }), _jsx("span", { children: formatTime(duration) })] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => setIsMuted((value) => !value), className: "grid size-8 place-items-center text-white transition hover:scale-105 hover:text-white/80", "aria-label": isMuted ? "Unmute" : "Mute", children: isMuted || volume === 0 ? (_jsx(MutedIcon, { className: "size-6" })) : (_jsx(VolumeIcon, { className: "size-6" })) }), _jsx("input", { type: "range", min: "0", max: "1", step: "0.01", value: isMuted ? 0 : volume, onChange: (event) => {
+                                                        const nextVolume = Number(event.target.value);
+                                                        setVolume(nextVolume);
+                                                        setIsMuted(nextVolume === 0);
+                                                    }, className: "hidden h-1 w-20 accent-white md:block", "aria-label": "Audio level" }), _jsx("div", { className: "mx-1 hidden h-4 w-px bg-white/20 md:block" }), audioTracks.length > 1 && (_jsxs("div", { className: "relative", children: [_jsx("button", { type: "button", onClick: () => setOpenMenu(openMenu === "audio" ? null : "audio"), className: `grid size-8 place-items-center rounded transition hover:text-white/80 ${openMenu === "audio" ? "text-white" : "text-white/60"}`, "aria-label": "Audio track", children: _jsx(AudioIcon, { className: "size-5" }) }), openMenu === "audio" && (_jsx(PopoverMenu, { onClose: () => setOpenMenu(null), children: audioTracks.map((track) => (_jsx(PopoverItem, { active: selectedAudio === track.id, onClick: () => changeAudio(track.id), children: track.label }, track.id))) }))] })), parsed.subtitles.length > 0 && (_jsxs("div", { className: "relative", children: [_jsx("button", { type: "button", onClick: () => setOpenMenu(openMenu === "captions" ? null : "captions"), className: `grid size-8 place-items-center rounded transition hover:text-white/80 ${subtitleMode !== "off" || openMenu === "captions" ? "text-white" : "text-white/60"}`, "aria-label": "Captions", children: _jsx(CaptionsIcon, { className: "size-5" }) }), openMenu === "captions" && (_jsxs(PopoverMenu, { onClose: () => setOpenMenu(null), children: [_jsx(PopoverItem, { active: subtitleMode === "off", onClick: () => { setSubtitleMode("off"); setOpenMenu(null); }, children: "Off" }), parsed.subtitles.map((subtitle) => (_jsx(PopoverItem, { active: subtitleMode === subtitle.srclang, onClick: () => { setSubtitleMode(subtitle.srclang); setOpenMenu(null); }, children: subtitle.label }, subtitle.srclang)))] }))] })), _jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => setOpenMenu(openMenu === "quality" ? null : "quality"), className: `flex h-8 items-center gap-1 rounded px-2 text-xs font-semibold transition hover:text-white/80 ${openMenu === "quality" ? "text-white" : "text-white/60"}`, "aria-label": "Quality", children: [_jsx(QualityIcon, { className: "size-4" }), _jsx("span", { className: "hidden sm:inline", children: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" })] }), openMenu === "quality" && (_jsx(PopoverMenu, { onClose: () => setOpenMenu(null), children: [...qualities].reverse().map((quality) => (_jsxs(PopoverItem, { active: selectedQuality === quality.id, onClick: () => changeQuality(quality.id), children: [quality.label, quality.id === "auto" && (_jsx("span", { className: "ml-1 text-[10px] text-white/40", children: "ABR" }))] }, quality.id))) }))] }), _jsx("button", { type: "button", onClick: toggleFullscreen, className: "grid size-8 place-items-center text-white/60 transition hover:scale-105 hover:text-white/80", "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen", children: _jsx(FullscreenIcon, { className: "size-7" }) })] })] })] })] })] }) }));
+}
+export const VideoPlayer = Video;
+function PopoverMenu({ children, onClose }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: onClose }), _jsx("div", { className: "absolute bottom-full right-0 z-50 mb-2 min-w-[120px] overflow-hidden rounded-xl border border-white/10 bg-black/85 py-1 shadow-2xl backdrop-blur-xl", children: children })] }));
+}
+function PopoverItem({ children, active, onClick, }) {
+    return (_jsxs("button", { type: "button", onClick: onClick, className: `flex w-full items-center gap-2 px-4 py-2 text-left text-sm font-medium transition hover:bg-white/10 ${active ? "text-white" : "text-white/55"}`, children: [_jsx("span", { className: `size-1.5 rounded-full ${active ? "bg-white" : "bg-transparent"}` }), children] }));
+}
+function parseVideoChildren(children) {
+    const parsed = {
+        sources: [],
+        subtitles: [],
+    };
+    React.Children.forEach(children, (child) => {
+        if (!React.isValidElement(child))
+            return;
+        if (child.type === Sources) {
+            const element = child;
+            React.Children.forEach(element.props.children, (sourceChild) => {
+                if (!React.isValidElement(sourceChild))
+                    return;
+                if (sourceChild.type !== Source)
+                    return;
+                const sourceElement = sourceChild;
+                parsed.sources.push(sourceElement.props);
+            });
+        }
+        if (child.type === Subtitles) {
+            const element = child;
+            React.Children.forEach(element.props.children, (subtitleChild) => {
+                if (!React.isValidElement(subtitleChild))
+                    return;
+                if (subtitleChild.type !== Subtitle)
+                    return;
+                const subtitleElement = subtitleChild;
+                parsed.subtitles.push(subtitleElement.props);
+            });
+        }
+        if (child.type === Storyboard) {
+            const element = child;
+            const frames = [];
+            React.Children.forEach(element.props.children, (frameChild) => {
+                if (!React.isValidElement(frameChild))
+                    return;
+                if (frameChild.type !== StoryboardFrame)
+                    return;
+                const frameElement = frameChild;
+                frames.push(frameElement.props);
+            });
+            parsed.storyboard = {
+                ...(element.props.src !== undefined && { src: element.props.src }),
+                ...(element.props.fallbackImage !== undefined && { fallbackImage: element.props.fallbackImage }),
+                ...(element.props.width !== undefined && { width: element.props.width }),
+                ...(element.props.height !== undefined && { height: element.props.height }),
+                frames,
+            };
+        }
+    });
+    return parsed;
+}
+function inferSourceType(source) {
+    if (source.type)
+        return source.type;
+    const src = source.src.toLowerCase();
+    if (src.includes(".mpd") || src.includes("/dash"))
+        return "dash";
+    if (src.includes(".m3u8") || src.includes("/hls"))
+        return "hls";
+    return "file";
+}
+function findStoryboardCue(cues, time) {
+    return cues.find((cue) => time >= cue.start && time <= cue.end) ?? null;
+}
+function parseStoryboardVtt(text, baseUrl) {
+    const lines = text
+        .split(/\r?\n/)
+        .map((line) => line.trim())
+        .filter(Boolean);
+    const cues = [];
+    for (let index = 0; index < lines.length; index++) {
+        const line = lines[index];
+        if (!line || !line.includes("-->"))
+            continue;
+        const parts = line.split(/\s+-->\s+/);
+        const startRaw = parts[0];
+        const endRaw = parts[1];
+        const imageLine = lines[index + 1];
+        if (!startRaw || !endRaw || !imageLine)
+            continue;
+        const image = parseStoryboardImageLine(imageLine, baseUrl);
+        cues.push({
+            start: parseVttTimestamp(startRaw),
+            end: parseVttTimestamp(endRaw),
+            ...image,
+        });
+    }
+    return cues;
+}
+function parseStoryboardImageLine(line, baseUrl) {
+    const splitIndex = line.indexOf("#xywh=");
+    const imageRaw = splitIndex >= 0 ? line.slice(0, splitIndex) : line;
+    const xywhRaw = splitIndex >= 0 ? line.slice(splitIndex + 6) : null;
+    const image = new URL(imageRaw, baseUrl).href;
+    if (!xywhRaw) {
+        return { image };
+    }
+    const [x, y, w, h] = xywhRaw.split(",").map(Number);
+    return {
+        image,
+        ...(x !== undefined && !isNaN(x) && { x }),
+        ...(y !== undefined && !isNaN(y) && { y }),
+        ...(w !== undefined && !isNaN(w) && { w }),
+        ...(h !== undefined && !isNaN(h) && { h }),
+    };
+}
+function parseVttTimestamp(value) {
+    const normalized = value.replace(",", ".");
+    const parts = normalized.split(":").map(Number);
+    if (parts.length === 3) {
+        return (parts[0] ?? 0) * 3600 + (parts[1] ?? 0) * 60 + (parts[2] ?? 0);
+    }
+    if (parts.length === 2) {
+        return (parts[0] ?? 0) * 60 + (parts[1] ?? 0);
+    }
+    return Number(normalized) || 0;
+}
+function formatTime(seconds) {
+    if (!Number.isFinite(seconds))
+        return "00:00";
+    const safeSeconds = Math.max(0, Math.floor(seconds));
+    const hours = Math.floor(safeSeconds / 3600);
+    const minutes = Math.floor((safeSeconds % 3600) / 60);
+    const secs = safeSeconds % 60;
+    if (hours > 0) {
+        return `${hours}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+    }
+    return `${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+}
+function PlayIcon({ className }) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: className, children: _jsx("path", { d: "M8 5.14v13.72c0 .76.84 1.22 1.48.8l10.2-6.86a.96.96 0 0 0 0-1.6L9.48 4.34A.96.96 0 0 0 8 5.14Z" }) }));
+}
+function PauseIcon({ className }) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: className, children: _jsx("path", { d: "M7 5.5A1.5 1.5 0 0 1 8.5 4h1A1.5 1.5 0 0 1 11 5.5v13A1.5 1.5 0 0 1 9.5 20h-1A1.5 1.5 0 0 1 7 18.5v-13Zm6 0A1.5 1.5 0 0 1 14.5 4h1A1.5 1.5 0 0 1 17 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5v-13Z" }) }));
+}
+function ForwardIcon({ className }) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: className, children: _jsx("path", { d: "M5 5.14v13.72c0 .76.84 1.22 1.48.8l8.7-5.86a.96.96 0 0 0 0-1.6L6.48 4.34A.96.96 0 0 0 5 5.14Zm12.5-.64A1.5 1.5 0 0 0 16 6v12a1.5 1.5 0 0 0 3 0V6a1.5 1.5 0 0 0-1.5-1.5Z" }) }));
+}
+function VolumeIcon({ className }) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: className, children: _jsx("path", { d: "M4 9.5A2.5 2.5 0 0 1 6.5 7H9l5-4v18l-5-4H6.5A2.5 2.5 0 0 1 4 14.5v-5Zm12.5-2.15a1 1 0 0 1 1.4.2 7.5 7.5 0 0 1 0 8.9 1 1 0 1 1-1.6-1.2 5.5 5.5 0 0 0 0-6.5 1 1 0 0 1 .2-1.4Zm3-2.25a1 1 0 0 1 1.4.2 11.25 11.25 0 0 1 0 13.4 1 1 0 1 1-1.6-1.2 9.25 9.25 0 0 0 0-11.2 1 1 0 0 1 .2-1.2Z" }) }));
+}
+function MutedIcon({ className }) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: className, children: _jsx("path", { d: "M4 9.5A2.5 2.5 0 0 1 6.5 7H9l5-4v18l-5-4H6.5A2.5 2.5 0 0 1 4 14.5v-5Zm13.7.1a1 1 0 0 1 1.4 0l1.4 1.4 1.4-1.4a1 1 0 1 1 1.4 1.4L21.9 12l1.4 1.4a1 1 0 0 1-1.4 1.4l-1.4-1.4-1.4 1.4a1 1 0 1 1-1.4-1.4L19.1 12l-1.4-1.4a1 1 0 0 1 0-1Z" }) }));
+}
+function FullscreenIcon({ className }) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", className: className, children: _jsx("path", { d: "M8.5 4H5.75A1.75 1.75 0 0 0 4 5.75V8.5M15.5 4h2.75A1.75 1.75 0 0 1 20 5.75V8.5M20 15.5v2.75A1.75 1.75 0 0 1 18.25 20H15.5M8.5 20H5.75A1.75 1.75 0 0 1 4 18.25V15.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+}
+function CaptionsIcon({ className }) {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", className: className, children: [_jsx("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2", stroke: "currentColor", strokeWidth: "1.75" }), _jsx("path", { d: "M6 12h4M6 15h8M14 12h4", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" })] }));
+}
+function AudioIcon({ className }) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: className, children: _jsx("path", { d: "M12 3a1 1 0 0 0-1.707-.707l-4 4H4a2 2 0 0 0-2 2v3.414a2 2 0 0 0 2 2h2.293l4 4A1 1 0 0 0 12 17V3ZM17.5 8.5a1 1 0 0 1 1.414 0 6 6 0 0 1 0 8.486 1 1 0 1 1-1.414-1.414 4 4 0 0 0 0-5.657 1 1 0 0 1 0-1.415ZM15.086 10.914a1 1 0 0 1 1.414 0 3 3 0 0 1 0 4.243 1 1 0 0 1-1.414-1.414 1 1 0 0 0 0-1.415 1 1 0 0 1 0-1.414Z" }) }));
+}
+function QualityIcon({ className }) {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", className: className, children: [_jsx("rect", { x: "2", y: "7", width: "20", height: "13", rx: "2", stroke: "currentColor", strokeWidth: "1.75" }), _jsx("path", { d: "M8 4h8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }), _jsx("path", { d: "M9 13.5v-3l1.5 1.5L12 10v3.5M14 10.5h2.5M14 12.5h2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+//# sourceMappingURL=VideoPlayer.js.map