@geekapps/silo-elements-nextjs 0.0.2 → 0.0.3

package/dist/VideoPlayer.js

@@ -0,0 +1,1043 @@
+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"
+};
+function Sources(_props) {
+  return null;
+}
+function Source(_props) {
+  return null;
+}
+function Subtitles(_props) {
+  return null;
+}
+function Subtitle(_props) {
+  return null;
+}
+function Storyboard(_props) {
+  return null;
+}
+function StoryboardFrame(_props) {
+  return null;
+}
+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) / 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);
+          }
+        }
+      })();
+      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 * 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;
+          }
+          if (video.canPlayType("application/vnd.apple.mpegurl")) {
+            video.src = activeSource.src;
+            video.load();
+            setIsLoading(false);
+            return;
+          }
+          setError("Este navegador n\xE3o suporta HLS.");
+          setIsLoading(false);
+        } catch {
+          if (!cancelled) {
+            setError("N\xE3o foi poss\xEDvel 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\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.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 /* @__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" })
+                          }
+                        )
+                      ] })
+                    ] })
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+var VideoPlayer = Video;
+function PopoverMenu({ children, onClose }) {
+  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 /* @__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 !== 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";
+}
+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 !== 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;
+}
+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 /* @__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 /* @__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 /* @__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 /* @__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 /* @__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 /* @__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 /* @__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 /* @__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 /* @__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