@geekapps/silo-elements-nextjs 0.0.1 → 0.0.3

package/dist/VideoPlayer.js

@@ -1,738 +1,1043 @@
-"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",
+import React, { useMemo, useRef, useState, useCallback, useEffect } from 'react';
+import gsap from 'gsap';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var AUTO_QUALITY = {
+  id: "auto",
+  label: "Auto",
+  type: "auto"
 };
-export function Sources(_props) {
-    return null;
+function Sources(_props) {
+  return null;
 }
-export function Source(_props) {
-    return null;
+function Source(_props) {
+  return null;
 }
-export function Subtitles(_props) {
-    return null;
+function Subtitles(_props) {
+  return null;
 }
-export function Subtitle(_props) {
-    return null;
+function Subtitle(_props) {
+  return null;
 }
-export function Storyboard(_props) {
-    return null;
+function Storyboard(_props) {
+  return null;
 }
-export function StoryboardFrame(_props) {
-    return null;
+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);
+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");
         }
-    }, [sourceIndex, parsed.sources.length, initialSourceIndex]);
-    useEffect(() => {
-        if (subtitleMode !== "off" &&
-            !parsed.subtitles.some((subtitle) => subtitle.srclang === subtitleMode)) {
-            setSubtitleMode(initialSubtitleMode);
+        const text = await response.text();
+        const cues = parseStoryboardVtt(
+          text,
+          new URL(parsed.storyboard.src, window.location.href).href
+        );
+        if (!cancelled) {
+          setStoryboardCues(cues);
         }
-    }, [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;
+      } 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
             }
-            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) / 1e3)} kbps`,
+                type: "dash",
+                index
+              }))
+            ]);
+            setIsLoading(false);
+          });
+          dash.on(dashjs.MediaPlayer.events.ERROR, () => {
+            setError("N\xE3o foi poss\xEDvel reproduzir o stream MPEG-DASH.");
+            setIsLoading(false);
+          });
+          dash.initialize(video, activeSource.src, false);
+        } catch {
+          if (!cancelled) {
+            setError("N\xE3o foi poss\xEDvel carregar o player MPEG-DASH.");
+            setIsLoading(false);
+          }
         }
-        loadStoryboard();
-        return () => {
-            cancelled = true;
-        };
-    }, [parsed.storyboard]);
-    useEffect(() => {
-        const video = videoRef.current;
-        let cancelled = false;
-        if (!video || !activeSource) {
-            return;
-        }
+      })();
+      return () => {
+        cancelled = true;
         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;
+      };
+    }
+    if (sourceType === "hls") {
+      void (async () => {
         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)
+          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 * 1e3 * 1e3
+            });
+            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) / 1e3)} 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\xE3o foi poss\xEDvel reproduzir o stream HLS.");
+              setIsLoading(false);
+            });
             return;
-        video.currentTime = Math.max(0, Math.min(video.currentTime + seconds, video.duration || 0));
-    }, []);
-    const toggleFullscreen = useCallback(async () => {
-        const player = playerRef.current;
-        if (!player)
+          }
+          if (video.canPlayType("application/vnd.apple.mpegurl")) {
+            video.src = activeSource.src;
+            video.load();
+            setIsLoading(false);
             return;
-        try {
-            if (!document.fullscreenElement) {
-                await player.requestFullscreen();
-            }
-            else {
-                await document.exitFullscreen();
-            }
-        }
-        catch {
-            setError("Não foi possível alterar o modo fullscreen.");
+          }
+          setError("Este navegador n\xE3o suporta HLS.");
+          setIsLoading(false);
+        } catch {
+          if (!cancelled) {
+            setError("N\xE3o foi poss\xEDvel carregar o player HLS.");
+            setIsLoading(false);
+          }
         }
-    }, []);
-    const changeAudio = useCallback((trackId) => {
-        setSelectedAudio(trackId);
-        setOpenMenu(null);
+      })();
+      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\xE7\xE3o autom\xE1tica.");
+    }
+  }, []);
+  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\xE3o foi poss\xEDvel 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.audioTrack = trackId;
+          hlsRef.current.currentLevel = -1;
         }
-    }, []);
-    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,
-                            },
-                        },
-                    },
-                });
+        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)),
+        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
+              }
+            }
+          }
         });
-    }, [duration, storyboardCues]);
-    const handleProgressPointerLeave = useCallback(() => {
+        dashRef.current.setQualityFor("video", option.index);
+      }
+    },
+    [qualities]
+  );
+  const handleProgressPointerMove = useCallback(
+    (event) => {
+      const progress = progressRef.current;
+      if (!progress || !duration || storyboardCues.length === 0) {
         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);
+        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 /* @__PURE__ */ 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",
+      " ",
+      /* @__PURE__ */ jsx("code", { children: "<Source />" }),
+      "."
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: `mx-auto w-full max-w-6xl ${className ?? ""}`,
+      children: /* @__PURE__ */ 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: [
+            /* @__PURE__ */ jsx(
+              "video",
+              {
+                ref: videoRef,
+                className: "h-full w-full object-contain",
+                poster,
+                playsInline: true,
+                preload: "metadata",
+                crossOrigin: "anonymous",
+                children: parsed.subtitles.map((subtitle) => /* @__PURE__ */ jsx(
+                  "track",
+                  {
+                    kind: "subtitles",
+                    src: subtitle.src,
+                    srcLang: subtitle.srclang,
+                    label: subtitle.label,
+                    default: subtitle.default
+                  },
+                  `${activeSource.src}-${subtitle.srclang}`
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `pointer-events-none absolute inset-0 z-10 grid place-items-center transition ${isPlaying ? "opacity-0" : "opacity-100"}`,
+                children: /* @__PURE__ */ 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: /* @__PURE__ */ jsx(PlayIcon, { className: "ml-1 size-9" }) })
+              }
+            ),
+            isLoading && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-20 grid place-items-center bg-black/10", children: /* @__PURE__ */ jsx("div", { className: "size-9 animate-spin rounded-full border-2 border-white/25 border-t-white" }) }),
+            error && /* @__PURE__ */ 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 }),
+            /* @__PURE__ */ 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: [
+                  /* @__PURE__ */ 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: [
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      title && /* @__PURE__ */ jsx("h1", { className: "text-lg font-bold tracking-wide md:text-xl", children: title }),
+                      description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium text-white/85", children: description })
+                    ] }),
+                    parsed.sources.length > 1 && /* @__PURE__ */ 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) => /* @__PURE__ */ jsx("option", { value: String(index), className: "text-black", children: source.label ?? source.type ?? `Source ${index + 1}` }, `${source.src}-${index}`))
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("footer", { onClick: (e) => e.stopPropagation(), className: "px-7 pb-7 text-white md:px-9 md:pb-8", children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        ref: progressRef,
+                        onPointerMove: handleProgressPointerMove,
+                        onPointerLeave: handleProgressPointerLeave,
+                        onPointerDown: handleProgressPointerDown,
+                        className: "relative mb-6 h-5 cursor-pointer",
+                        children: [
+                          preview && /* @__PURE__ */ 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: [
+                                /* @__PURE__ */ 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"
+                                    }
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx("div", { className: "pt-1 text-center text-[11px] font-semibold text-white/80", children: formatTime(preview.time) })
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ 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: [
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                className: "absolute inset-y-0 left-0 bg-white/30",
+                                style: { width: `${bufferedPercent}%` }
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                className: "absolute inset-y-0 left-0 bg-white/85",
+                                style: { width: `${progressPercent}%` }
+                              }
+                            )
+                          ] })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-5", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-5", children: [
+                        /* @__PURE__ */ 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 ? /* @__PURE__ */ jsx(PauseIcon, { className: "size-7" }) : /* @__PURE__ */ jsx(PlayIcon, { className: "size-7" })
+                          }
+                        ),
+                        /* @__PURE__ */ 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: /* @__PURE__ */ jsx(ForwardIcon, { className: "size-7" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-2 text-sm font-semibold text-white/75 sm:flex", children: [
+                          /* @__PURE__ */ jsx("span", { children: formatTime(currentTime) }),
+                          /* @__PURE__ */ jsx("span", { className: "text-white/35", children: "/" }),
+                          /* @__PURE__ */ jsx("span", { children: formatTime(duration) })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                        /* @__PURE__ */ 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 ? /* @__PURE__ */ jsx(MutedIcon, { className: "size-6" }) : /* @__PURE__ */ jsx(VolumeIcon, { className: "size-6" })
+                          }
+                        ),
+                        /* @__PURE__ */ 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"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("div", { className: "mx-1 hidden h-4 w-px bg-white/20 md:block" }),
+                        audioTracks.length > 1 && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                          /* @__PURE__ */ 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: /* @__PURE__ */ jsx(AudioIcon, { className: "size-5" })
+                            }
+                          ),
+                          openMenu === "audio" && /* @__PURE__ */ jsx(PopoverMenu, { onClose: () => setOpenMenu(null), children: audioTracks.map((track) => /* @__PURE__ */ jsx(
+                            PopoverItem,
+                            {
+                              active: selectedAudio === track.id,
+                              onClick: () => changeAudio(track.id),
+                              children: track.label
+                            },
+                            track.id
+                          )) })
+                        ] }),
+                        parsed.subtitles.length > 0 && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                          /* @__PURE__ */ 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: /* @__PURE__ */ jsx(CaptionsIcon, { className: "size-5" })
+                            }
+                          ),
+                          openMenu === "captions" && /* @__PURE__ */ jsxs(PopoverMenu, { onClose: () => setOpenMenu(null), children: [
+                            /* @__PURE__ */ jsx(
+                              PopoverItem,
+                              {
+                                active: subtitleMode === "off",
+                                onClick: () => {
+                                  setSubtitleMode("off");
+                                  setOpenMenu(null);
+                                },
+                                children: "Off"
+                              }
+                            ),
+                            parsed.subtitles.map((subtitle) => /* @__PURE__ */ jsx(
+                              PopoverItem,
+                              {
+                                active: subtitleMode === subtitle.srclang,
+                                onClick: () => {
+                                  setSubtitleMode(subtitle.srclang);
+                                  setOpenMenu(null);
+                                },
+                                children: subtitle.label
+                              },
+                              subtitle.srclang
+                            ))
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                          /* @__PURE__ */ 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: [
+                                /* @__PURE__ */ jsx(QualityIcon, { className: "size-4" }),
+                                /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" })
+                              ]
+                            }
+                          ),
+                          openMenu === "quality" && /* @__PURE__ */ jsx(PopoverMenu, { onClose: () => setOpenMenu(null), children: [...qualities].reverse().map((quality) => /* @__PURE__ */ jsxs(
+                            PopoverItem,
+                            {
+                              active: selectedQuality === quality.id,
+                              onClick: () => changeQuality(quality.id),
+                              children: [
+                                quality.label,
+                                quality.id === "auto" && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] text-white/40", children: "ABR" })
+                              ]
+                            },
+                            quality.id
+                          )) })
+                        ] }),
+                        /* @__PURE__ */ 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: /* @__PURE__ */ jsx(FullscreenIcon, { className: "size-7" })
+                          }
+                        )
+                      ] })
+                    ] })
+                  ] })
+                ]
+              }
+            )
+          ]
         }
-    }, [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;
+var 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 })] }));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: onClose }),
+    /* @__PURE__ */ 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 })
+  ] });
 }
-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 PopoverItem({
+  children,
+  active,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      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: [
+        /* @__PURE__ */ 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;
+  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 !== void 0 && { src: element.props.src },
+        ...element.props.fallbackImage !== void 0 && { fallbackImage: element.props.fallbackImage },
+        ...element.props.width !== void 0 && { width: element.props.width },
+        ...element.props.height !== void 0 && { 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";
+  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;
+  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;
+  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 }),
-    };
+  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 !== void 0 && !isNaN(x) && { x },
+    ...y !== void 0 && !isNaN(y) && { y },
+    ...w !== void 0 && !isNaN(w) && { w },
+    ...h !== void 0 && !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;
+  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")}`;
+  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" }) }));
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ 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" }) }));
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ 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" }) }));
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ 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" }) }));
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ 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" }) }));
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ 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" }) }));
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", className, children: /* @__PURE__ */ 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" })] }));
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", className, children: [
+    /* @__PURE__ */ jsx("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2", stroke: "currentColor", strokeWidth: "1.75" }),
+    /* @__PURE__ */ 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" }) }));
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ 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" })] }));
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", className, children: [
+    /* @__PURE__ */ jsx("rect", { x: "2", y: "7", width: "20", height: "13", rx: "2", stroke: "currentColor", strokeWidth: "1.75" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 4h8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }),
+    /* @__PURE__ */ 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" })
+  ] });
 }
+
+export { Source, Sources, Storyboard, StoryboardFrame, Subtitle, Subtitles, Video, VideoPlayer };
+//# sourceMappingURL=VideoPlayer.js.map
 //# sourceMappingURL=VideoPlayer.js.map