@vexor-video/player 0.0.0-stage → 0.1.1

package/dist/index.cjs

@@ -0,0 +1,1312 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Controls: () => Controls,
+  VexorPlayer: () => VexorPlayer,
+  Watermark: () => Watermark,
+  createVexorPlayer: () => createVexorPlayer,
+  useVexorPlayer: () => useVexorPlayer
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/VexorPlayer.tsx
+var import_react4 = require("react");
+
+// src/hooks/useVexorPlayer.ts
+var import_react = require("react");
+var import_hls = __toESM(require("hls.js"), 1);
+
+// src/native-token-refresh.ts
+var TOKEN_REFRESH_INTERVAL_MS = 4 * 60 * 1e3;
+var TOKEN_REFRESH_RETRY_MS = 30 * 1e3;
+function startNativeTokenRefresh(video, initialUrl, refreshToken) {
+  let currentUrl = initialUrl;
+  let disposed = false;
+  let timer;
+  let refreshInFlight = null;
+  let restoreListener;
+  const schedule = (delay = TOKEN_REFRESH_INTERVAL_MS) => {
+    if (!refreshToken || disposed) return;
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => void refreshNow(), delay);
+  };
+  const refreshNow = () => {
+    if (!refreshToken || disposed) return Promise.resolve(false);
+    if (refreshInFlight) return refreshInFlight;
+    refreshInFlight = (async () => {
+      try {
+        const token = await refreshToken();
+        if (disposed || !token) return false;
+        const nextUrl = new URL(currentUrl, document.baseURI);
+        nextUrl.searchParams.set("token", token);
+        currentUrl = nextUrl.toString();
+        const resumeTime = video.currentTime;
+        const shouldResume = !video.paused;
+        restoreListener = () => {
+          restoreListener = void 0;
+          if (disposed) return;
+          if (Number.isFinite(resumeTime) && resumeTime > 0) {
+            try {
+              video.currentTime = resumeTime;
+            } catch {
+            }
+          }
+          if (shouldResume) video.play().catch(() => {
+          });
+        };
+        video.addEventListener("loadedmetadata", restoreListener, { once: true });
+        video.src = currentUrl;
+        video.load();
+        schedule();
+        return true;
+      } catch {
+        schedule(TOKEN_REFRESH_RETRY_MS);
+        return false;
+      } finally {
+        refreshInFlight = null;
+      }
+    })();
+    return refreshInFlight;
+  };
+  schedule();
+  return {
+    refreshNow,
+    stop: () => {
+      disposed = true;
+      if (timer) clearTimeout(timer);
+      if (restoreListener) video.removeEventListener("loadedmetadata", restoreListener);
+    }
+  };
+}
+
+// src/hooks/useVexorPlayer.ts
+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 = (0, import_react.useRef)(null);
+  const containerRef = (0, import_react.useRef)(null);
+  const hlsRef = (0, import_react.useRef)(null);
+  const callbacksRef = (0, import_react.useRef)({ onReady, onPlay, onPause, onEnded, onTimeUpdate, onError, onQualityChange, refreshToken });
+  callbacksRef.current = { onReady, onPlay, onPause, onEnded, onTimeUpdate, onError, onQualityChange, refreshToken };
+  const activeParamsRef = (0, import_react.useRef)("");
+  const refreshPromiseRef = (0, import_react.useRef)(null);
+  const resumeAfterRefreshRef = (0, import_react.useRef)(null);
+  const [isPlaying, setIsPlaying] = (0, import_react.useState)(false);
+  const [isBuffering, setIsBuffering] = (0, import_react.useState)(true);
+  const [currentTime, setCurrentTime] = (0, import_react.useState)(0);
+  const [duration, setDuration] = (0, import_react.useState)(0);
+  const [buffered, setBuffered] = (0, import_react.useState)(0);
+  const [volume, setVolumeState] = (0, import_react.useState)(1);
+  const [isMuted, setIsMuted] = (0, import_react.useState)(muted);
+  const [isFullscreen, setIsFullscreen] = (0, import_react.useState)(false);
+  const [qualityLevels, setQualityLevels] = (0, import_react.useState)([]);
+  const [currentQuality, setCurrentQuality] = (0, import_react.useState)(-1);
+  const [playbackRate, setPlaybackRateState] = (0, import_react.useState)(1);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [reloadTrigger, setReloadTrigger] = (0, import_react.useState)(0);
+  const activeUrl = src ? src : assetId ? `${baseUrl.replace(/\/+$/, "")}/v1/playback/${encodeURIComponent(assetId)}/master.m3u8${token ? `?token=${encodeURIComponent(token)}` : ""}` : "";
+  const destroyHls = (0, import_react.useCallback)(() => {
+    if (hlsRef.current) {
+      hlsRef.current.destroy();
+      hlsRef.current = null;
+    }
+  }, []);
+  const retry = (0, import_react.useCallback)(() => {
+    setError(null);
+    setIsBuffering(true);
+    setReloadTrigger((v) => v + 1);
+  }, []);
+  (0, import_react.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 && import_hls.default.isSupported()) {
+      activeParamsRef.current = activeUrl.includes("?") ? activeUrl.substring(activeUrl.indexOf("?")) : "";
+      class VexorLoader extends import_hls.default.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 import_hls.default({
+        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(import_hls.default.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(import_hls.default.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(import_hls.default.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 import_hls.default.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 import_hls.default.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);
+        callbacksRef.current.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]);
+  (0, import_react.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);
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(Boolean(document.fullscreenElement));
+    };
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
+  }, []);
+  const play = (0, import_react.useCallback)(async () => {
+    if (videoRef.current) {
+      await videoRef.current.play();
+    }
+  }, []);
+  const pause = (0, import_react.useCallback)(() => {
+    if (videoRef.current) {
+      videoRef.current.pause();
+    }
+  }, []);
+  const togglePlay = (0, import_react.useCallback)(() => {
+    if (!videoRef.current) return;
+    if (videoRef.current.paused) {
+      videoRef.current.play().catch(() => {
+      });
+    } else {
+      videoRef.current.pause();
+    }
+  }, []);
+  const seek = (0, import_react.useCallback)((time) => {
+    if (videoRef.current) {
+      videoRef.current.currentTime = Math.max(0, Math.min(time, videoRef.current.duration || time));
+    }
+  }, []);
+  const setVolume = (0, import_react.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 = (0, import_react.useCallback)(() => {
+    if (videoRef.current) {
+      videoRef.current.muted = !videoRef.current.muted;
+    }
+  }, []);
+  const setQuality = (0, import_react.useCallback)((levelIndex) => {
+    if (hlsRef.current) {
+      if (levelIndex === -1) {
+        hlsRef.current.currentLevel = -1;
+      } else {
+        hlsRef.current.currentLevel = levelIndex;
+      }
+      setCurrentQuality(levelIndex);
+    }
+  }, []);
+  const setPlaybackRate = (0, import_react.useCallback)((rate) => {
+    if (videoRef.current) {
+      videoRef.current.playbackRate = rate;
+      setPlaybackRateState(rate);
+    }
+  }, []);
+  const toggleFullscreen = (0, import_react.useCallback)(() => {
+    const container = containerRef.current || videoRef.current;
+    if (!container) return;
+    if (!document.fullscreenElement) {
+      container.requestFullscreen().catch(() => {
+      });
+    } else {
+      document.exitFullscreen().catch(() => {
+      });
+    }
+  }, []);
+  const togglePiP = (0, import_react.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
+var import_react2 = require("react");
+var import_jsx_runtime = require("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] = (0, import_react2.useState)(false);
+  const [showSpeedMenu, setShowSpeedMenu] = (0, import_react2.useState)(false);
+  const progressRef = (0, import_react2.useRef)(null);
+  const [isScrubbing, setIsScrubbing] = (0, import_react2.useState)(false);
+  const [pictureInPictureSupported, setPictureInPictureSupported] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    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 = (0, import_react2.useCallback)(
+    (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__ */ (0, import_jsx_runtime.jsxs)("div", { className: `vexor-controls ${visible ? "" : "is-hidden"}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vexor-progress-track", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vexor-progress-buffer", style: { width: `${buffered}%` } }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vexor-progress-played", style: { width: `${playedPercent}%` } }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vexor-progress-thumb", style: { left: `${playedPercent}%` } })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vexor-controls-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vexor-controls-group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "vexor-btn",
+            onClick: onPlayPause,
+            "aria-label": isPlaying ? "Pause" : "Play",
+            children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", { points: "5,3 19,12 5,21" }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vexor-volume-wrapper", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "vexor-btn",
+              onClick: onToggleMute,
+              "aria-label": isMuted ? "Unmute" : "Mute",
+              children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "23", y1: "9", x2: "17", y2: "15" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "17", y1: "9", x2: "23", y2: "15" })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("span", { className: "vexor-time-display", children: [
+          formatTime(currentTime),
+          " / ",
+          formatTime(duration)
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vexor-controls-group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vexor-menu-anchor", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "vexor-menu-dropdown", children: speedOptions.map((rate) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "button",
+            {
+              type: "button",
+              className: `vexor-menu-item ${playbackRate === rate ? "is-active" : ""}`,
+              onClick: () => {
+                onPlaybackRateChange(rate);
+                setShowSpeedMenu(false);
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                  rate,
+                  "x"
+                ] }),
+                playbackRate === rate && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u2713" })
+              ]
+            },
+            rate
+          )) })
+        ] }),
+        qualityLevels.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vexor-menu-anchor", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "vexor-btn",
+              onClick: () => {
+                setShowQualityMenu(!showQualityMenu);
+                setShowSpeedMenu(false);
+              },
+              "aria-label": "Video quality",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vexor-menu-dropdown", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "button",
+              {
+                type: "button",
+                className: `vexor-menu-item ${currentQuality === -1 ? "is-active" : ""}`,
+                onClick: () => {
+                  onQualityChange(-1);
+                  setShowQualityMenu(false);
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Auto" }),
+                  currentQuality === -1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u2713" })
+                ]
+              }
+            ),
+            qualityLevels.map((lvl) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "button",
+              {
+                type: "button",
+                className: `vexor-menu-item ${currentQuality === lvl.id ? "is-active" : ""}`,
+                onClick: () => {
+                  onQualityChange(lvl.id);
+                  setShowQualityMenu(false);
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: lvl.label }),
+                  currentQuality === lvl.id && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u2713" })
+                ]
+              },
+              lvl.id
+            ))
+          ] })
+        ] }),
+        pictureInPictureSupported && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "vexor-btn",
+            onClick: onTogglePiP,
+            "aria-label": "Picture in picture",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "12", y: "9", width: "8", height: "6", rx: "1", fill: "currentColor", fillOpacity: "0.4" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "vexor-btn",
+            onClick: onToggleFullscreen,
+            "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+            children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" }) })
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/Watermark.tsx
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Watermark = ({ config }) => {
+  const parsedConfig = (0, import_react3.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] = (0, import_react3.useState)({ top: "15%", left: "15%" });
+  (0, import_react3.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime2.jsx)(
+    "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
+var import_jsx_runtime3 = require("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] = (0, import_react4.useState)(true);
+  const hideTimerRef = (0, import_react4.useRef)(null);
+  const resetHideTimer = (0, import_react4.useCallback)(() => {
+    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]);
+  (0, import_react4.useEffect)(() => {
+    resetHideTimer();
+    return () => {
+      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+    };
+  }, [player.isPlaying, resetHideTimer]);
+  const handleContextMenu = (e) => {
+    if (protect) {
+      e.preventDefault();
+    }
+  };
+  (0, import_react4.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime3.jsxs)(
+    "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__ */ (0, import_jsx_runtime3.jsx)(
+          "video",
+          {
+            ref: player.videoRef,
+            className: "vexor-video",
+            poster,
+            preload,
+            muted,
+            loop,
+            playsInline: true,
+            controls: nativeControls,
+            onClick: nativeControls ? void 0 : player.togglePlay
+          }
+        ),
+        watermark && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Watermark, { config: watermark }),
+        player.isBuffering && !player.error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "vexor-spinner-overlay", "aria-label": "Buffering video", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "vexor-spinner" }) }),
+        !nativeControls && controls && !player.isPlaying && !player.isBuffering && !player.error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "vexor-center-play-overlay", onClick: player.togglePlay, "aria-label": "Play video", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vexor-center-play-button", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polygon", { points: "6,4 20,12 6,20" }) }) }) }),
+        !nativeControls && controls && !player.error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          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__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vexor-error-overlay", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "vexor-error-title", children: "Playback Error" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "vexor-error-message", children: player.error.message }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "vexor-retry-button", onClick: player.retry, children: "Retry Playback" })
+        ] }),
+        children
+      ]
+    }
+  );
+};
+
+// src/vanilla/player.ts
+var import_hls2 = __toESM(require("hls.js"), 1);
+function createVexorPlayer(target, options) {
+  const container = typeof target === "string" ? document.querySelector(target) : target;
+  if (!container) throw new Error(`Target container not found: ${String(target)}`);
+  const initialUrl = options.src ?? (options.assetId ? `${(options.baseUrl || "https://api.vexor.et").replace(/\/+$/, "")}/v1/playback/${encodeURIComponent(options.assetId)}/master.m3u8${options.token ? `?token=${encodeURIComponent(options.token)}` : ""}` : "");
+  if (!initialUrl) throw new Error("Provide either src or assetId to create the Vexor player.");
+  const hadPlayerClass = container.classList.contains("vexor-player");
+  const hadProtectedClass = container.classList.contains("is-protected");
+  container.classList.add("vexor-player");
+  const video = document.createElement("video");
+  video.className = "vexor-video";
+  video.controls = options.controls ?? true;
+  video.playsInline = true;
+  video.preload = options.preload ?? "metadata";
+  if (options.poster) video.poster = options.poster;
+  if (options.autoPlay) video.autoplay = true;
+  if (options.muted) video.muted = true;
+  if (options.loop) video.loop = true;
+  container.appendChild(video);
+  let watermarkElement = null;
+  let watermarkTimer;
+  if (options.watermark) {
+    const watermark = typeof options.watermark === "string" ? { text: options.watermark, position: "dynamic", intervalSeconds: 15, opacity: 0.35 } : { position: "dynamic", intervalSeconds: 15, opacity: 0.35, ...options.watermark };
+    watermarkElement = document.createElement("div");
+    watermarkElement.className = "vexor-watermark";
+    watermarkElement.textContent = watermark.text;
+    watermarkElement.style.opacity = String(Math.max(0, Math.min(1, watermark.opacity ?? 0.35)));
+    watermarkElement.style.fontSize = typeof watermark.fontSize === "number" ? `${watermark.fontSize}px` : watermark.fontSize ?? "12px";
+    watermarkElement.style.color = watermark.color ?? "#ffffff";
+    const placeWatermark = () => {
+      watermarkElement.style.removeProperty("top");
+      watermarkElement.style.removeProperty("right");
+      watermarkElement.style.removeProperty("bottom");
+      watermarkElement.style.removeProperty("left");
+      watermarkElement.style.removeProperty("transform");
+      switch (watermark.position) {
+        case "top-left":
+          watermarkElement.style.cssText += ";top:16px;left:16px";
+          break;
+        case "top-right":
+          watermarkElement.style.cssText += ";top:16px;right:16px";
+          break;
+        case "bottom-left":
+          watermarkElement.style.cssText += ";bottom:48px;left:16px";
+          break;
+        case "bottom-right":
+          watermarkElement.style.cssText += ";bottom:48px;right:16px";
+          break;
+        case "center":
+          watermarkElement.style.cssText += ";top:50%;left:50%;transform:translate(-50%,-50%)";
+          break;
+        default:
+          watermarkElement.style.top = `${10 + Math.floor(Math.random() * 70)}%`;
+          watermarkElement.style.left = `${10 + Math.floor(Math.random() * 70)}%`;
+      }
+    };
+    placeWatermark();
+    if (watermark.position === "dynamic") {
+      watermarkTimer = setInterval(placeWatermark, Math.max(2, watermark.intervalSeconds || 15) * 1e3);
+    }
+    container.appendChild(watermarkElement);
+  }
+  const onContextMenu = (event) => event.preventDefault();
+  const onDragStart = (event) => event.preventDefault();
+  if (options.protect) {
+    container.classList.add("is-protected");
+    container.addEventListener("contextmenu", onContextMenu);
+    video.addEventListener("contextmenu", onContextMenu);
+    video.addEventListener("dragstart", onDragStart);
+  }
+  let activeUrl = initialUrl;
+  let hls = null;
+  let nativeTokenRefresh = null;
+  let nativeErrorListener;
+  let destroyed = false;
+  let refreshPromise = null;
+  let resumeAfterRefresh = null;
+  let hasSignaledReady = false;
+  let activeParams = new URL(activeUrl, document.baseURI).search;
+  const useFallback = (error) => {
+    if (options.fallbackSrc) {
+      if (hls) hls.destroy();
+      hls = null;
+      video.src = options.fallbackSrc;
+      video.load();
+    } else if (error) options.onError?.(error);
+  };
+  const signalReady = () => {
+    if (hasSignaledReady) return;
+    hasSignaledReady = true;
+    options.onReady?.();
+  };
+  const onLoaded = () => {
+    signalReady();
+    const resume = resumeAfterRefresh;
+    resumeAfterRefresh = null;
+    if (resume && Number.isFinite(resume.time)) video.currentTime = resume.time;
+    if ((resume?.shouldPlay || options.autoPlay) && !destroyed) video.play().catch(() => {
+    });
+  };
+  video.addEventListener("loadedmetadata", onLoaded);
+  video.addEventListener("loadeddata", onLoaded);
+  const onPlay = () => options.onPlay?.();
+  const onPause = () => options.onPause?.();
+  const onEnded = () => options.onEnded?.();
+  video.addEventListener("play", onPlay);
+  video.addEventListener("pause", onPause);
+  video.addEventListener("ended", onEnded);
+  const onTimeUpdate = () => options.onTimeUpdate?.(video.currentTime, video.duration);
+  video.addEventListener("timeupdate", onTimeUpdate);
+  const isHlsUrl = activeUrl.includes(".m3u8") || activeUrl.includes("/playback/");
+  if (isHlsUrl && import_hls2.default.isSupported()) {
+    class TokenAwareLoader extends import_hls2.default.DefaultConfig.loader {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      load(context, config, callbacks) {
+        if (activeParams && context?.url) {
+          try {
+            const sourceUrl = new URL(activeUrl, document.baseURI);
+            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);
+      }
+    }
+    hls = new import_hls2.default({ enableWorker: true, loader: TokenAwareLoader, fLoader: TokenAwareLoader, pLoader: TokenAwareLoader });
+    const activeHls = hls;
+    activeHls.on(import_hls2.default.Events.MANIFEST_PARSED, () => {
+      if (hls !== activeHls || destroyed) return;
+      const resume = resumeAfterRefresh;
+      resumeAfterRefresh = null;
+      signalReady();
+      if (resume && Number.isFinite(resume.time)) video.currentTime = resume.time;
+      if ((resume?.shouldPlay || options.autoPlay) && !destroyed) video.play().catch(() => {
+      });
+    });
+    activeHls.on(import_hls2.default.Events.ERROR, async (_event, data) => {
+      if (hls !== activeHls || destroyed) return;
+      if ((data.response?.code === 401 || data.response?.code === 403) && options.refreshToken) {
+        try {
+          refreshPromise ??= options.refreshToken();
+          const newToken = await refreshPromise;
+          refreshPromise = null;
+          if (newToken && hls === activeHls && !destroyed) {
+            resumeAfterRefresh = { time: video.currentTime, shouldPlay: !video.paused };
+            const url = new URL(activeUrl, document.baseURI);
+            url.searchParams.set("token", newToken);
+            activeUrl = url.toString();
+            activeParams = url.search;
+            activeHls.loadSource(activeUrl);
+            activeHls.startLoad();
+            return;
+          }
+        } catch {
+          refreshPromise = null;
+        }
+      }
+      if (hls !== activeHls || destroyed) return;
+      if (data.fatal) useFallback({ code: data.details || "MEDIA_PLAYBACK_ERROR", message: `Failed to stream video: ${data.details || "network error"}`, fatal: true });
+    });
+    activeHls.loadSource(activeUrl);
+    activeHls.attachMedia(video);
+  } else if (isHlsUrl && video.canPlayType("application/vnd.apple.mpegurl")) {
+    video.src = activeUrl;
+    nativeTokenRefresh = startNativeTokenRefresh(video, activeUrl, options.refreshToken);
+    nativeErrorListener = () => {
+      void nativeTokenRefresh?.refreshNow().then((refreshed) => {
+        if (refreshed || destroyed) return;
+        video.removeEventListener("error", nativeErrorListener);
+        useFallback({ code: "NATIVE_HLS_ERROR", message: "Failed to play native HLS stream", fatal: true });
+      });
+    };
+    video.addEventListener("error", nativeErrorListener);
+  } else if (!isHlsUrl || options.fallbackSrc) {
+    video.src = isHlsUrl ? options.fallbackSrc : activeUrl;
+  } else {
+    useFallback({ code: "HLS_UNSUPPORTED", message: "This browser does not support HLS playback.", fatal: true });
+  }
+  return {
+    play: () => video.play(),
+    pause: () => video.pause(),
+    seek: (seconds) => {
+      video.currentTime = Math.max(0, Math.min(seconds, video.duration || seconds));
+    },
+    destroy: () => {
+      if (destroyed) return;
+      destroyed = true;
+      nativeTokenRefresh?.stop();
+      if (hls) hls.destroy();
+      hls = null;
+      if (watermarkTimer) clearInterval(watermarkTimer);
+      container.removeEventListener("contextmenu", onContextMenu);
+      video.removeEventListener("contextmenu", onContextMenu);
+      video.removeEventListener("dragstart", onDragStart);
+      video.removeEventListener("loadedmetadata", onLoaded);
+      video.removeEventListener("loadeddata", onLoaded);
+      video.removeEventListener("play", onPlay);
+      video.removeEventListener("pause", onPause);
+      video.removeEventListener("ended", onEnded);
+      video.removeEventListener("timeupdate", onTimeUpdate);
+      if (nativeErrorListener) video.removeEventListener("error", nativeErrorListener);
+      video.pause();
+      video.removeAttribute("src");
+      video.load();
+      video.remove();
+      watermarkElement?.remove();
+      if (!hadPlayerClass) container.classList.remove("vexor-player");
+      if (options.protect && !hadProtectedClass) container.classList.remove("is-protected");
+    },
+    getElement: () => video
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Controls,
+  VexorPlayer,
+  Watermark,
+  createVexorPlayer,
+  useVexorPlayer
+});
+//# sourceMappingURL=index.cjs.map