@vexor-video/player 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,991 @@
+"use client";
+import {
+  createVexorPlayer,
+  startNativeTokenRefresh
+} from "./chunk-NBWDQALI.js";
+
+// src/components/VexorPlayer.tsx
+import { useState as useState4, useEffect as useEffect4, useRef as useRef3, useCallback as useCallback3 } from "react";
+
+// src/hooks/useVexorPlayer.ts
+import { useEffect, useRef, useState, useCallback } from "react";
+import Hls from "hls.js";
+function useVexorPlayer({
+  src,
+  assetId,
+  token,
+  baseUrl = "https://api.vexor.et",
+  fallbackSrc,
+  autoPlay = false,
+  muted = false,
+  refreshToken,
+  onReady,
+  onPlay,
+  onPause,
+  onEnded,
+  onTimeUpdate,
+  onError,
+  onQualityChange
+}) {
+  const videoRef = useRef(null);
+  const containerRef = useRef(null);
+  const hlsRef = useRef(null);
+  const callbacksRef = useRef({ onReady, onPlay, onPause, onEnded, onTimeUpdate, onError, onQualityChange, refreshToken });
+  callbacksRef.current = { onReady, onPlay, onPause, onEnded, onTimeUpdate, onError, onQualityChange, refreshToken };
+  const activeParamsRef = useRef("");
+  const refreshPromiseRef = useRef(null);
+  const resumeAfterRefreshRef = useRef(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isBuffering, setIsBuffering] = useState(true);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [buffered, setBuffered] = useState(0);
+  const [volume, setVolumeState] = useState(1);
+  const [isMuted, setIsMuted] = useState(muted);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [qualityLevels, setQualityLevels] = useState([]);
+  const [currentQuality, setCurrentQuality] = useState(-1);
+  const [playbackRate, setPlaybackRateState] = useState(1);
+  const [error, setError] = useState(null);
+  const [reloadTrigger, setReloadTrigger] = useState(0);
+  const activeUrl = src ? src : assetId ? `${baseUrl.replace(/\/+$/, "")}/v1/playback/${encodeURIComponent(assetId)}/master.m3u8${token ? `?token=${encodeURIComponent(token)}` : ""}` : "";
+  const destroyHls = useCallback(() => {
+    if (hlsRef.current) {
+      hlsRef.current.destroy();
+      hlsRef.current = null;
+    }
+  }, []);
+  const retry = useCallback(() => {
+    setError(null);
+    setIsBuffering(true);
+    setReloadTrigger((v) => v + 1);
+  }, []);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    let cleanupFallback = () => {
+    };
+    const loadFallback = () => {
+      if (!fallbackSrc) return false;
+      destroyHls();
+      setIsBuffering(true);
+      video.src = fallbackSrc;
+      const onLoaded = () => {
+        setIsBuffering(false);
+        callbacksRef.current.onReady?.();
+      };
+      const onError2 = () => {
+        const errObj = {
+          code: "FALLBACK_PLAYBACK_ERROR",
+          message: "Unable to load fallback media source",
+          fatal: true
+        };
+        setError(errObj);
+        callbacksRef.current.onError?.(errObj);
+        setIsBuffering(false);
+      };
+      video.addEventListener("loadeddata", onLoaded);
+      video.addEventListener("error", onError2);
+      cleanupFallback = () => {
+        video.removeEventListener("loadeddata", onLoaded);
+        video.removeEventListener("error", onError2);
+      };
+      video.load();
+      return true;
+    };
+    const setFatalError = (code, message) => {
+      destroyHls();
+      const errObj = { code, message, fatal: true };
+      setError(errObj);
+      callbacksRef.current.onError?.(errObj);
+      setIsBuffering(false);
+    };
+    destroyHls();
+    setError(null);
+    setCurrentTime(0);
+    setDuration(0);
+    setBuffered(0);
+    setQualityLevels([]);
+    setCurrentQuality(-1);
+    setIsBuffering(Boolean(activeUrl));
+    if (!activeUrl) {
+      video.pause();
+      video.removeAttribute("src");
+      video.load();
+      return;
+    }
+    const isHlsUrl = activeUrl.includes(".m3u8") || activeUrl.includes("/playback/");
+    let fatalRecoveryAttempts = 0;
+    if (isHlsUrl && Hls.isSupported()) {
+      activeParamsRef.current = activeUrl.includes("?") ? activeUrl.substring(activeUrl.indexOf("?")) : "";
+      class VexorLoader extends Hls.DefaultConfig.loader {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        load(context, config, callbacks) {
+          const activeParams = activeParamsRef.current;
+          if (activeParams && context?.url) {
+            try {
+              const sourceUrl = new URL(activeUrl, window.location.href);
+              const childUrl = new URL(context.url, sourceUrl);
+              if (childUrl.origin === sourceUrl.origin && !childUrl.searchParams.has("token")) {
+                new URLSearchParams(activeParams).forEach((value, key) => {
+                  if (!childUrl.searchParams.has(key)) childUrl.searchParams.set(key, value);
+                });
+                context.url = childUrl.toString();
+              }
+            } catch {
+            }
+          }
+          super.load(context, config, callbacks);
+        }
+      }
+      const hls = new Hls({
+        startFragPrefetch: true,
+        maxBufferLength: 30,
+        maxMaxBufferLength: 60,
+        enableWorker: true,
+        lowLatencyMode: true,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        loader: VexorLoader,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        fLoader: VexorLoader,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        pLoader: VexorLoader
+      });
+      hlsRef.current = hls;
+      hls.loadSource(activeUrl);
+      hls.attachMedia(video);
+      hls.on(Hls.Events.MANIFEST_PARSED, (_event, data) => {
+        if (hlsRef.current !== hls) return;
+        setIsBuffering(false);
+        const levels = data.levels.map((lvl, index) => {
+          let label = `${lvl.height}p`;
+          if (lvl.height === 0 || lvl.videoCodec === void 0) {
+            label = "Audio only";
+          }
+          return {
+            id: index,
+            height: lvl.height,
+            width: lvl.width,
+            bitrate: lvl.bitrate,
+            label
+          };
+        });
+        setQualityLevels(levels);
+        callbacksRef.current.onReady?.();
+        const resume = resumeAfterRefreshRef.current;
+        if (resume) {
+          resumeAfterRefreshRef.current = null;
+          if (Number.isFinite(resume.time) && resume.time > 0) video.currentTime = resume.time;
+          if (resume.shouldPlay) video.play().catch(() => {
+          });
+        }
+        if (autoPlay) {
+          video.play().catch(() => {
+          });
+        }
+      });
+      hls.on(Hls.Events.LEVEL_SWITCHED, (_event, data) => {
+        if (hlsRef.current !== hls) return;
+        setCurrentQuality(hls.autoLevelEnabled ? -1 : data.level);
+        callbacksRef.current.onQualityChange?.(hls.autoLevelEnabled ? -1 : data.level);
+      });
+      hls.on(Hls.Events.ERROR, async (_event, data) => {
+        if (hlsRef.current !== hls) return;
+        if ((data.response?.code === 401 || data.response?.code === 403) && callbacksRef.current.refreshToken) {
+          try {
+            if (!refreshPromiseRef.current) {
+              refreshPromiseRef.current = callbacksRef.current.refreshToken();
+            }
+            const newToken = await refreshPromiseRef.current;
+            refreshPromiseRef.current = null;
+            if (newToken && hlsRef.current === hls) {
+              resumeAfterRefreshRef.current = {
+                time: video.currentTime,
+                shouldPlay: !video.paused
+              };
+              const url = new URL(activeUrl, window.location.href);
+              url.searchParams.set("token", newToken);
+              activeParamsRef.current = url.search;
+              hls.loadSource(url.toString());
+              hls.startLoad();
+              return;
+            }
+          } catch {
+            refreshPromiseRef.current = null;
+          }
+        }
+        if (hlsRef.current !== hls) return;
+        if (data.fatal) {
+          switch (data.type) {
+            case Hls.ErrorTypes.NETWORK_ERROR:
+              if (fatalRecoveryAttempts++ < 1) {
+                hls.startLoad();
+              } else if (!loadFallback()) {
+                setFatalError(data.details || "NETWORK_ERROR", `Failed to stream video: ${data.details || "network error"}`);
+              }
+              break;
+            case Hls.ErrorTypes.MEDIA_ERROR:
+              if (fatalRecoveryAttempts++ < 1) {
+                hls.recoverMediaError();
+              } else if (!loadFallback()) {
+                setFatalError(data.details || "MEDIA_ERROR", `Failed to stream video: ${data.details || "media error"}`);
+              }
+              break;
+            default:
+              if (!loadFallback()) {
+                setFatalError(data.details || "MEDIA_PLAYBACK_ERROR", `Failed to stream video: ${data.details || "network error"}`);
+              }
+              break;
+          }
+        }
+      });
+    } else if (isHlsUrl && video.canPlayType("application/vnd.apple.mpegurl")) {
+      video.src = activeUrl;
+      const nativeTokenRefresh = startNativeTokenRefresh(
+        video,
+        activeUrl,
+        callbacksRef.current.refreshToken
+      );
+      const onLoaded = () => {
+        setIsBuffering(false);
+        callbacksRef.current.onReady?.();
+        if (autoPlay) {
+          video.play().catch(() => {
+          });
+        }
+      };
+      const onNativeError = () => {
+        void nativeTokenRefresh.refreshNow().then((refreshed) => {
+          if (refreshed || hlsRef.current) return;
+          if (loadFallback()) {
+            video.removeEventListener("error", onNativeError);
+            return;
+          }
+          setFatalError("NATIVE_HLS_ERROR", "Failed to play native HLS stream");
+        });
+      };
+      video.addEventListener("loadedmetadata", onLoaded);
+      video.addEventListener("error", onNativeError);
+      return () => {
+        nativeTokenRefresh.stop();
+        video.removeEventListener("loadedmetadata", onLoaded);
+        video.removeEventListener("error", onNativeError);
+      };
+    } else if (!isHlsUrl) {
+      video.src = activeUrl;
+      const onLoaded = () => {
+        setIsBuffering(false);
+        onReady?.();
+      };
+      const onErr = () => {
+        const errObj = {
+          code: "DIRECT_PLAYBACK_ERROR",
+          message: "Unable to load media source",
+          fatal: true
+        };
+        setError(errObj);
+        callbacksRef.current.onError?.(errObj);
+        setIsBuffering(false);
+      };
+      video.addEventListener("loadeddata", onLoaded);
+      video.addEventListener("error", onErr);
+      return () => {
+        video.removeEventListener("loadeddata", onLoaded);
+        video.removeEventListener("error", onErr);
+      };
+    } else if (fallbackSrc) {
+      loadFallback();
+    } else {
+      const errObj = {
+        code: "HLS_UNSUPPORTED",
+        message: "This browser does not support HLS playback and no fallback source was provided",
+        fatal: true
+      };
+      setError(errObj);
+      callbacksRef.current.onError?.(errObj);
+      setIsBuffering(false);
+    }
+    return () => {
+      cleanupFallback();
+      destroyHls();
+    };
+  }, [activeUrl, fallbackSrc, autoPlay, reloadTrigger, destroyHls]);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    const onPlayEvent = () => {
+      setIsPlaying(true);
+      callbacksRef.current.onPlay?.();
+    };
+    const onPauseEvent = () => {
+      setIsPlaying(false);
+      callbacksRef.current.onPause?.();
+    };
+    const onEndedEvent = () => {
+      setIsPlaying(false);
+      callbacksRef.current.onEnded?.();
+    };
+    const onWaiting = () => setIsBuffering(true);
+    const onPlaying = () => setIsBuffering(false);
+    const onTimeUpdateEvent = () => {
+      setCurrentTime(video.currentTime);
+      callbacksRef.current.onTimeUpdate?.(video.currentTime, video.duration);
+      if (video.buffered.length > 0 && video.duration > 0) {
+        for (let i = video.buffered.length - 1; i >= 0; i--) {
+          if (video.buffered.start(i) <= video.currentTime) {
+            setBuffered(video.buffered.end(i) / video.duration * 100);
+            break;
+          }
+        }
+      }
+    };
+    const onDurationChange = () => setDuration(video.duration || 0);
+    const onVolumeChangeEvent = () => {
+      setVolumeState(video.volume);
+      setIsMuted(video.muted);
+    };
+    video.addEventListener("play", onPlayEvent);
+    video.addEventListener("pause", onPauseEvent);
+    video.addEventListener("ended", onEndedEvent);
+    video.addEventListener("waiting", onWaiting);
+    video.addEventListener("playing", onPlaying);
+    video.addEventListener("timeupdate", onTimeUpdateEvent);
+    video.addEventListener("durationchange", onDurationChange);
+    video.addEventListener("volumechange", onVolumeChangeEvent);
+    return () => {
+      video.removeEventListener("play", onPlayEvent);
+      video.removeEventListener("pause", onPauseEvent);
+      video.removeEventListener("ended", onEndedEvent);
+      video.removeEventListener("waiting", onWaiting);
+      video.removeEventListener("playing", onPlaying);
+      video.removeEventListener("timeupdate", onTimeUpdateEvent);
+      video.removeEventListener("durationchange", onDurationChange);
+      video.removeEventListener("volumechange", onVolumeChangeEvent);
+    };
+  }, []);
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(Boolean(document.fullscreenElement));
+    };
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
+  }, []);
+  const play = useCallback(async () => {
+    if (videoRef.current) {
+      await videoRef.current.play();
+    }
+  }, []);
+  const pause = useCallback(() => {
+    if (videoRef.current) {
+      videoRef.current.pause();
+    }
+  }, []);
+  const togglePlay = useCallback(() => {
+    if (!videoRef.current) return;
+    if (videoRef.current.paused) {
+      videoRef.current.play().catch(() => {
+      });
+    } else {
+      videoRef.current.pause();
+    }
+  }, []);
+  const seek = useCallback((time) => {
+    if (videoRef.current) {
+      videoRef.current.currentTime = Math.max(0, Math.min(time, videoRef.current.duration || time));
+    }
+  }, []);
+  const setVolume = useCallback((vol) => {
+    if (videoRef.current) {
+      const clamped = Math.max(0, Math.min(1, vol));
+      videoRef.current.volume = clamped;
+      videoRef.current.muted = clamped === 0;
+    }
+  }, []);
+  const toggleMute = useCallback(() => {
+    if (videoRef.current) {
+      videoRef.current.muted = !videoRef.current.muted;
+    }
+  }, []);
+  const setQuality = useCallback((levelIndex) => {
+    if (hlsRef.current) {
+      if (levelIndex === -1) {
+        hlsRef.current.currentLevel = -1;
+      } else {
+        hlsRef.current.currentLevel = levelIndex;
+      }
+      setCurrentQuality(levelIndex);
+    }
+  }, []);
+  const setPlaybackRate = useCallback((rate) => {
+    if (videoRef.current) {
+      videoRef.current.playbackRate = rate;
+      setPlaybackRateState(rate);
+    }
+  }, []);
+  const toggleFullscreen = useCallback(() => {
+    const container = containerRef.current || videoRef.current;
+    if (!container) return;
+    if (!document.fullscreenElement) {
+      container.requestFullscreen().catch(() => {
+      });
+    } else {
+      document.exitFullscreen().catch(() => {
+      });
+    }
+  }, []);
+  const togglePiP = useCallback(async () => {
+    const video = videoRef.current;
+    if (!video) return;
+    try {
+      if (document.pictureInPictureElement) {
+        await document.exitPictureInPicture();
+      } else if (document.pictureInPictureEnabled) {
+        await video.requestPictureInPicture();
+      }
+    } catch {
+    }
+  }, []);
+  return {
+    videoRef,
+    containerRef,
+    isPlaying,
+    isBuffering,
+    currentTime,
+    duration,
+    buffered,
+    volume,
+    isMuted,
+    isFullscreen,
+    qualityLevels,
+    currentQuality,
+    playbackRate,
+    error,
+    play,
+    pause,
+    togglePlay,
+    seek,
+    setVolume,
+    toggleMute,
+    setQuality,
+    setPlaybackRate,
+    toggleFullscreen,
+    togglePiP,
+    retry
+  };
+}
+
+// src/components/Controls.tsx
+import { useState as useState2, useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function formatTime(seconds) {
+  if (isNaN(seconds) || seconds < 0) return "0:00";
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor(seconds % 3600 / 60);
+  const s = Math.floor(seconds % 60);
+  if (h > 0) {
+    return `${h}:${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+  }
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+var Controls = ({
+  isPlaying,
+  currentTime,
+  duration,
+  buffered,
+  volume,
+  isMuted,
+  isFullscreen,
+  qualityLevels,
+  currentQuality,
+  playbackRate,
+  visible,
+  onPlayPause,
+  onSeek,
+  onVolumeChange,
+  onToggleMute,
+  onQualityChange,
+  onPlaybackRateChange,
+  onToggleFullscreen,
+  onTogglePiP
+}) => {
+  const [showQualityMenu, setShowQualityMenu] = useState2(false);
+  const [showSpeedMenu, setShowSpeedMenu] = useState2(false);
+  const progressRef = useRef2(null);
+  const [isScrubbing, setIsScrubbing] = useState2(false);
+  const [pictureInPictureSupported, setPictureInPictureSupported] = useState2(false);
+  useEffect2(() => {
+    setPictureInPictureSupported(
+      typeof document !== "undefined" && document.pictureInPictureEnabled
+    );
+  }, []);
+  const playedPercent = duration > 0 ? currentTime / duration * 100 : 0;
+  const speedOptions = [0.5, 0.75, 1, 1.25, 1.5, 2];
+  const handleScrub = useCallback2(
+    (e) => {
+      if (!progressRef.current || duration <= 0) return;
+      const rect = progressRef.current.getBoundingClientRect();
+      const pos = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+      onSeek(pos * duration);
+    },
+    [duration, onSeek]
+  );
+  const handlePointerDown = (e) => {
+    if (e.button !== 0) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setIsScrubbing(true);
+    handleScrub(e);
+  };
+  const handleTimelineKeyDown = (e) => {
+    if (duration <= 0) return;
+    const step = e.shiftKey ? 30 : 5;
+    let nextTime;
+    if (e.key === "ArrowLeft") nextTime = currentTime - step;
+    if (e.key === "ArrowRight") nextTime = currentTime + step;
+    if (e.key === "Home") nextTime = 0;
+    if (e.key === "End") nextTime = duration;
+    if (nextTime !== void 0) {
+      e.preventDefault();
+      onSeek(Math.max(0, Math.min(duration, nextTime)));
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `vexor-controls ${visible ? "" : "is-hidden"}`, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "vexor-progress-container",
+        ref: progressRef,
+        onPointerDown: handlePointerDown,
+        onPointerMove: (event) => {
+          if (isScrubbing) handleScrub(event);
+        },
+        onPointerUp: (event) => {
+          if (progressRef.current?.hasPointerCapture(event.pointerId)) {
+            progressRef.current.releasePointerCapture(event.pointerId);
+          }
+          setIsScrubbing(false);
+        },
+        onPointerCancel: () => setIsScrubbing(false),
+        onKeyDown: handleTimelineKeyDown,
+        tabIndex: 0,
+        role: "slider",
+        "aria-label": "Video timeline",
+        "aria-valuemin": 0,
+        "aria-valuemax": duration,
+        "aria-valuenow": Math.min(currentTime, duration || 0),
+        "aria-valuetext": `${formatTime(currentTime)} of ${formatTime(duration)}`,
+        children: /* @__PURE__ */ jsxs("div", { className: "vexor-progress-track", children: [
+          /* @__PURE__ */ jsx("div", { className: "vexor-progress-buffer", style: { width: `${buffered}%` } }),
+          /* @__PURE__ */ jsx("div", { className: "vexor-progress-played", style: { width: `${playedPercent}%` } }),
+          /* @__PURE__ */ jsx("div", { className: "vexor-progress-thumb", style: { left: `${playedPercent}%` } })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "vexor-controls-row", children: [
+      /* @__PURE__ */ jsxs("div", { className: "vexor-controls-group", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "vexor-btn",
+            onClick: onPlayPause,
+            "aria-label": isPlaying ? "Pause" : "Play",
+            children: isPlaying ? /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: [
+              /* @__PURE__ */ jsx("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" }),
+              /* @__PURE__ */ jsx("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" })
+            ] }) : /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("polygon", { points: "5,3 19,12 5,21" }) })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "vexor-volume-wrapper", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "vexor-btn",
+              onClick: onToggleMute,
+              "aria-label": isMuted ? "Unmute" : "Mute",
+              children: isMuted || volume === 0 ? /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ jsx("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+                /* @__PURE__ */ jsx("line", { x1: "23", y1: "9", x2: "17", y2: "15" }),
+                /* @__PURE__ */ jsx("line", { x1: "17", y1: "9", x2: "23", y2: "15" })
+              ] }) : /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ jsx("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+                /* @__PURE__ */ jsx("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" }),
+                /* @__PURE__ */ jsx("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: "0",
+              max: "1",
+              step: "0.05",
+              value: isMuted ? 0 : volume,
+              onChange: (e) => onVolumeChange(parseFloat(e.target.value)),
+              className: "vexor-volume-slider",
+              "aria-label": "Volume slider"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "vexor-time-display", children: [
+          formatTime(currentTime),
+          " / ",
+          formatTime(duration)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "vexor-controls-group", children: [
+        /* @__PURE__ */ jsxs("div", { className: "vexor-menu-anchor", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "vexor-btn",
+              onClick: () => {
+                setShowSpeedMenu(!showSpeedMenu);
+                setShowQualityMenu(false);
+              },
+              "aria-label": "Playback speed",
+              style: { fontSize: "11px", fontWeight: 600, padding: "4px 8px" },
+              children: playbackRate === 1 ? "1x" : `${playbackRate}x`
+            }
+          ),
+          showSpeedMenu && /* @__PURE__ */ jsx("div", { className: "vexor-menu-dropdown", children: speedOptions.map((rate) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: `vexor-menu-item ${playbackRate === rate ? "is-active" : ""}`,
+              onClick: () => {
+                onPlaybackRateChange(rate);
+                setShowSpeedMenu(false);
+              },
+              children: [
+                /* @__PURE__ */ jsxs("span", { children: [
+                  rate,
+                  "x"
+                ] }),
+                playbackRate === rate && /* @__PURE__ */ jsx("span", { children: "\u2713" })
+              ]
+            },
+            rate
+          )) })
+        ] }),
+        qualityLevels.length > 0 && /* @__PURE__ */ jsxs("div", { className: "vexor-menu-anchor", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "vexor-btn",
+              onClick: () => {
+                setShowQualityMenu(!showQualityMenu);
+                setShowSpeedMenu(false);
+              },
+              "aria-label": "Video quality",
+              children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
+                /* @__PURE__ */ jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
+              ] })
+            }
+          ),
+          showQualityMenu && /* @__PURE__ */ jsxs("div", { className: "vexor-menu-dropdown", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: `vexor-menu-item ${currentQuality === -1 ? "is-active" : ""}`,
+                onClick: () => {
+                  onQualityChange(-1);
+                  setShowQualityMenu(false);
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: "Auto" }),
+                  currentQuality === -1 && /* @__PURE__ */ jsx("span", { children: "\u2713" })
+                ]
+              }
+            ),
+            qualityLevels.map((lvl) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: `vexor-menu-item ${currentQuality === lvl.id ? "is-active" : ""}`,
+                onClick: () => {
+                  onQualityChange(lvl.id);
+                  setShowQualityMenu(false);
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: lvl.label }),
+                  currentQuality === lvl.id && /* @__PURE__ */ jsx("span", { children: "\u2713" })
+                ]
+              },
+              lvl.id
+            ))
+          ] })
+        ] }),
+        pictureInPictureSupported && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "vexor-btn",
+            onClick: onTogglePiP,
+            "aria-label": "Picture in picture",
+            children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+              /* @__PURE__ */ jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
+              /* @__PURE__ */ jsx("rect", { x: "12", y: "9", width: "8", height: "6", rx: "1", fill: "currentColor", fillOpacity: "0.4" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "vexor-btn",
+            onClick: onToggleFullscreen,
+            "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+            children: isFullscreen ? /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" }) }) : /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" }) })
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/Watermark.tsx
+import { useEffect as useEffect3, useState as useState3, useMemo } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Watermark = ({ config }) => {
+  const parsedConfig = useMemo(() => {
+    if (!config) return null;
+    if (typeof config === "string") {
+      return { text: config, position: "dynamic", intervalSeconds: 15, opacity: 0.35 };
+    }
+    return {
+      position: "dynamic",
+      intervalSeconds: 15,
+      opacity: 0.35,
+      ...config
+    };
+  }, [config]);
+  const [coords, setCoords] = useState3({ top: "15%", left: "15%" });
+  useEffect3(() => {
+    if (!parsedConfig || parsedConfig.position !== "dynamic") return;
+    const intervalMs = Math.max(2, parsedConfig.intervalSeconds || 15) * 1e3;
+    const updatePosition = () => {
+      const top = Math.floor(10 + Math.random() * 70);
+      const left = Math.floor(10 + Math.random() * 70);
+      setCoords({ top: `${top}%`, left: `${left}%` });
+    };
+    updatePosition();
+    const timer = setInterval(updatePosition, intervalMs);
+    return () => clearInterval(timer);
+  }, [parsedConfig?.position, parsedConfig?.intervalSeconds]);
+  const getPositionStyles = () => {
+    switch (parsedConfig?.position) {
+      case "top-left":
+        return { top: "16px", left: "16px" };
+      case "top-right":
+        return { top: "16px", right: "16px" };
+      case "bottom-left":
+        return { bottom: "48px", left: "16px" };
+      case "bottom-right":
+        return { bottom: "48px", right: "16px" };
+      case "center":
+        return { top: "50%", left: "50%", transform: "translate(-50%, -50%)" };
+      case "dynamic":
+      default:
+        return { top: coords.top, left: coords.left };
+    }
+  };
+  if (!parsedConfig) return null;
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "vexor-watermark",
+      style: {
+        ...getPositionStyles(),
+        opacity: Math.max(0, Math.min(1, parsedConfig.opacity ?? 0.35)),
+        fontSize: parsedConfig.fontSize ?? "12px",
+        color: parsedConfig.color ?? "#ffffff"
+      },
+      "aria-hidden": "true",
+      children: parsedConfig.text
+    }
+  );
+};
+
+// src/components/VexorPlayer.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var VexorPlayer = (props) => {
+  const {
+    poster,
+    preload = "metadata",
+    muted = false,
+    loop = false,
+    controls = true,
+    nativeControls = false,
+    watermark,
+    protect = false,
+    className = "",
+    style,
+    children
+  } = props;
+  const player = useVexorPlayer(props);
+  const [controlsVisible, setControlsVisible] = useState4(true);
+  const hideTimerRef = useRef3(null);
+  const resetHideTimer = useCallback3(() => {
+    setControlsVisible(true);
+    if (hideTimerRef.current) {
+      clearTimeout(hideTimerRef.current);
+    }
+    if (player.isPlaying && !player.containerRef.current?.contains(document.activeElement)) {
+      hideTimerRef.current = setTimeout(() => {
+        setControlsVisible(false);
+      }, 2500);
+    }
+  }, [player.isPlaying]);
+  useEffect4(() => {
+    resetHideTimer();
+    return () => {
+      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+    };
+  }, [player.isPlaying, resetHideTimer]);
+  const handleContextMenu = (e) => {
+    if (protect) {
+      e.preventDefault();
+    }
+  };
+  useEffect4(() => {
+    const handleKeyDown = (e) => {
+      const target = e.target;
+      if (target?.closest("input, textarea, select, button, [contenteditable='true'], [role='slider']")) return;
+      const container = player.containerRef.current;
+      if (!container || !document.fullscreenElement && !container.contains(document.activeElement) && !container.matches(":hover")) {
+        return;
+      }
+      switch (e.key.toLowerCase()) {
+        case " ":
+        case "k":
+          e.preventDefault();
+          player.togglePlay();
+          resetHideTimer();
+          break;
+        case "arrowleft":
+        case "j":
+          e.preventDefault();
+          player.seek(player.currentTime - 5);
+          resetHideTimer();
+          break;
+        case "arrowright":
+        case "l":
+          e.preventDefault();
+          player.seek(player.currentTime + 5);
+          resetHideTimer();
+          break;
+        case "arrowup":
+          e.preventDefault();
+          player.setVolume(player.volume + 0.1);
+          resetHideTimer();
+          break;
+        case "arrowdown":
+          e.preventDefault();
+          player.setVolume(player.volume - 0.1);
+          resetHideTimer();
+          break;
+        case "m":
+          e.preventDefault();
+          player.toggleMute();
+          resetHideTimer();
+          break;
+        case "f":
+          e.preventDefault();
+          player.toggleFullscreen();
+          resetHideTimer();
+          break;
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [player, resetHideTimer]);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: player.containerRef,
+      className: `vexor-player ${player.isFullscreen ? "is-fullscreen" : ""} ${protect ? "is-protected" : ""} ${className}`,
+      style,
+      onMouseMove: resetHideTimer,
+      onMouseLeave: (event) => {
+        if (player.isPlaying && !event.currentTarget.contains(document.activeElement)) {
+          setControlsVisible(false);
+        }
+      },
+      onFocusCapture: () => {
+        if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+        setControlsVisible(true);
+      },
+      onBlurCapture: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) resetHideTimer();
+      },
+      onContextMenu: handleContextMenu,
+      tabIndex: 0,
+      role: "region",
+      "aria-label": "Video Player",
+      children: [
+        /* @__PURE__ */ jsx3(
+          "video",
+          {
+            ref: player.videoRef,
+            className: "vexor-video",
+            poster,
+            preload,
+            muted,
+            loop,
+            playsInline: true,
+            controls: nativeControls,
+            onClick: nativeControls ? void 0 : player.togglePlay
+          }
+        ),
+        watermark && /* @__PURE__ */ jsx3(Watermark, { config: watermark }),
+        player.isBuffering && !player.error && /* @__PURE__ */ jsx3("div", { className: "vexor-spinner-overlay", "aria-label": "Buffering video", children: /* @__PURE__ */ jsx3("div", { className: "vexor-spinner" }) }),
+        !nativeControls && controls && !player.isPlaying && !player.isBuffering && !player.error && /* @__PURE__ */ jsx3("button", { type: "button", className: "vexor-center-play-overlay", onClick: player.togglePlay, "aria-label": "Play video", children: /* @__PURE__ */ jsx3("span", { className: "vexor-center-play-button", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx3("polygon", { points: "6,4 20,12 6,20" }) }) }) }),
+        !nativeControls && controls && !player.error && /* @__PURE__ */ jsx3(
+          Controls,
+          {
+            isPlaying: player.isPlaying,
+            isBuffering: player.isBuffering,
+            currentTime: player.currentTime,
+            duration: player.duration,
+            buffered: player.buffered,
+            volume: player.volume,
+            isMuted: player.isMuted,
+            isFullscreen: player.isFullscreen,
+            qualityLevels: player.qualityLevels,
+            currentQuality: player.currentQuality,
+            playbackRate: player.playbackRate,
+            visible: controlsVisible,
+            onPlayPause: player.togglePlay,
+            onSeek: player.seek,
+            onVolumeChange: player.setVolume,
+            onToggleMute: player.toggleMute,
+            onQualityChange: player.setQuality,
+            onPlaybackRateChange: player.setPlaybackRate,
+            onToggleFullscreen: player.toggleFullscreen,
+            onTogglePiP: player.togglePiP
+          }
+        ),
+        player.error && /* @__PURE__ */ jsxs2("div", { className: "vexor-error-overlay", children: [
+          /* @__PURE__ */ jsx3("div", { className: "vexor-error-title", children: "Playback Error" }),
+          /* @__PURE__ */ jsx3("div", { className: "vexor-error-message", children: player.error.message }),
+          /* @__PURE__ */ jsx3("button", { type: "button", className: "vexor-retry-button", onClick: player.retry, children: "Retry Playback" })
+        ] }),
+        children
+      ]
+    }
+  );
+};
+export {
+  Controls,
+  VexorPlayer,
+  Watermark,
+  createVexorPlayer,
+  useVexorPlayer
+};
+//# sourceMappingURL=index.js.map