@kodezen/player 1.0.0

package/dist/react/index.js

@@ -0,0 +1,920 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/react/index.tsx
+
+// src/emitter.ts
+var Emitter = class {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  on(name, cb) {
+    let set = this.listeners.get(name);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      this.listeners.set(name, set);
+    }
+    set.add(cb);
+    return () => this.off(name, cb);
+  }
+  off(name, cb) {
+    var _a;
+    (_a = this.listeners.get(name)) == null ? void 0 : _a.delete(cb);
+  }
+  emit(name, ...args) {
+    const set = this.listeners.get(name);
+    if (!set) return;
+    for (const cb of [...set]) cb(...args);
+  }
+  clear() {
+    this.listeners.clear();
+  }
+};
+
+// src/providers/html5.ts
+var HLS_EXTENSION = /\.m3u8($|\?)/i;
+var HLS_MIME = /mpegurl/i;
+function isHls(source) {
+  var _a, _b;
+  return HLS_MIME.test((_a = source.mime) != null ? _a : "") || HLS_EXTENSION.test((_b = source.url) != null ? _b : "");
+}
+var Html5Provider = class {
+  constructor(source) {
+    this.source = source;
+    this.capabilities = { seekable: true, rate: true, volume: true };
+    this.emitter = new Emitter();
+    this.disposers = [];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.hls = null;
+    this.video = document.createElement("video");
+    this.video.className = "kzp-media";
+    this.video.playsInline = true;
+    this.video.preload = "metadata";
+    this.video.controls = false;
+    if (source.poster) this.video.poster = source.poster;
+  }
+  async mount(container) {
+    var _a, _b;
+    const src = (_a = this.source.url) != null ? _a : "";
+    container.appendChild(this.video);
+    const on = (name, handler) => {
+      this.video.addEventListener(name, handler);
+      this.disposers.push(() => this.video.removeEventListener(name, handler));
+    };
+    on("loadedmetadata", () => {
+      this.emitter.emit("durationchange", this.getDuration());
+      this.emitter.emit("ready");
+    });
+    on("durationchange", () => this.emitter.emit("durationchange", this.getDuration()));
+    on("timeupdate", () => this.emitter.emit("timeupdate", this.video.currentTime));
+    on("play", () => this.emitter.emit("play"));
+    on("pause", () => this.emitter.emit("pause"));
+    on("ended", () => this.emitter.emit("ended"));
+    if (isHls(this.source) && !this.video.canPlayType("application/vnd.apple.mpegurl")) {
+      on("error", () => this.emitter.emit("error", "Media failed to load."));
+      const { default: Hls } = await import('hls.js');
+      if (!Hls.isSupported()) {
+        this.emitter.emit("error", "HLS playback is not supported in this browser.");
+        return;
+      }
+      this.hls = new Hls();
+      this.hls.on(Hls.Events.ERROR, (_event, data) => {
+        if (data.fatal) this.emitter.emit("error", "Media failed to load.");
+      });
+      this.hls.loadSource(src);
+      this.hls.attachMedia(this.video);
+    } else {
+      const el = document.createElement("source");
+      el.src = src;
+      el.type = (_b = this.source.mime) != null ? _b : isHls(this.source) ? "application/vnd.apple.mpegurl" : "video/mp4";
+      this.video.appendChild(el);
+      on("error", () => this.emitter.emit("error", "Media failed to load."));
+    }
+    if (this.video.readyState >= 1) {
+      this.emitter.emit("durationchange", this.getDuration());
+      this.emitter.emit("ready");
+    }
+  }
+  play() {
+    void this.video.play().catch(() => {
+    });
+  }
+  pause() {
+    this.video.pause();
+  }
+  seek(seconds) {
+    const d = this.getDuration();
+    this.video.currentTime = d > 0 ? Math.min(seconds, d) : Math.max(0, seconds);
+  }
+  getCurrentTime() {
+    return this.video.currentTime || 0;
+  }
+  getDuration() {
+    return Number.isFinite(this.video.duration) ? this.video.duration : 0;
+  }
+  setVolume(v) {
+    this.video.volume = Math.min(1, Math.max(0, v));
+  }
+  getVolume() {
+    return this.video.volume;
+  }
+  setMuted(m) {
+    this.video.muted = m;
+  }
+  isMuted() {
+    return this.video.muted;
+  }
+  setRate(r) {
+    this.video.playbackRate = r;
+  }
+  getRate() {
+    return this.video.playbackRate;
+  }
+  isPlaying() {
+    return !this.video.paused && !this.video.ended;
+  }
+  on(event, cb) {
+    return this.emitter.on(event, cb);
+  }
+  destroy() {
+    var _a;
+    for (const dispose of this.disposers) dispose();
+    this.disposers = [];
+    this.emitter.clear();
+    (_a = this.hls) == null ? void 0 : _a.destroy();
+    this.hls = null;
+    this.video.removeAttribute("src");
+    this.video.load();
+    this.video.remove();
+  }
+};
+
+// src/providers/youtube.ts
+var apiPromise = null;
+function loadApi() {
+  if (typeof window === "undefined") return Promise.reject(new Error("no window"));
+  if (window.YT && window.YT.Player) return Promise.resolve(window.YT);
+  if (apiPromise) return apiPromise;
+  apiPromise = new Promise((resolve) => {
+    const prev = window.onYouTubeIframeAPIReady;
+    window.onYouTubeIframeAPIReady = () => {
+      prev == null ? void 0 : prev();
+      resolve(window.YT);
+    };
+    const tag = document.createElement("script");
+    tag.src = "https://www.youtube.com/iframe_api";
+    document.head.appendChild(tag);
+  });
+  return apiPromise;
+}
+function parseId(source) {
+  var _a, _b;
+  if (source.id) return source.id;
+  const url = (_a = source.url) != null ? _a : "";
+  const m = url.match(/(?:youtu\.be\/|[?&]v=|\/embed\/|\/shorts\/)([\w-]{11})/);
+  return (_b = m == null ? void 0 : m[1]) != null ? _b : url;
+}
+var YouTubeProvider = class {
+  constructor(source) {
+    this.source = source;
+    this.capabilities = { seekable: true, rate: true, volume: true };
+    this.emitter = new Emitter();
+    this.yt = null;
+    this.current = 0;
+    this.duration = 0;
+    this.rate = 1;
+    this.muted = false;
+    this.volume = 1;
+    this.playing = false;
+    this.ticker = null;
+  }
+  async mount(container) {
+    const host = document.createElement("div");
+    host.className = "kzp-media kzp-embed";
+    container.appendChild(host);
+    this.host = host;
+    const YT = await loadApi();
+    this.yt = new YT.Player(host, {
+      videoId: parseId(this.source),
+      playerVars: {
+        controls: 0,
+        modestbranding: 1,
+        rel: 0,
+        playsinline: 1,
+        disablekb: 1,
+        iv_load_policy: 3
+      },
+      events: {
+        onReady: () => {
+          var _a, _b, _c;
+          this.duration = this.yt.getDuration() || 0;
+          this.volume = ((_c = (_b = (_a = this.yt).getVolume) == null ? void 0 : _b.call(_a)) != null ? _c : 100) / 100;
+          this.emitter.emit("durationchange", this.duration);
+          this.emitter.emit("ready");
+        },
+        onStateChange: (e) => {
+          const S = YT.PlayerState;
+          if (e.data === S.PLAYING) {
+            this.playing = true;
+            this.duration = this.yt.getDuration() || this.duration;
+            this.emitter.emit("durationchange", this.duration);
+            this.emitter.emit("play");
+            this.startTicker();
+          } else if (e.data === S.PAUSED) {
+            this.playing = false;
+            this.emitter.emit("pause");
+            this.stopTicker();
+          } else if (e.data === S.ENDED) {
+            this.playing = false;
+            this.emitter.emit("ended");
+            this.stopTicker();
+          }
+        },
+        onError: () => this.emitter.emit("error", "YouTube playback error.")
+      }
+    });
+  }
+  startTicker() {
+    this.stopTicker();
+    this.ticker = window.setInterval(() => {
+      if (!this.yt) return;
+      this.current = this.yt.getCurrentTime() || 0;
+      this.emitter.emit("timeupdate", this.current);
+    }, 250);
+  }
+  stopTicker() {
+    if (this.ticker !== null) {
+      clearInterval(this.ticker);
+      this.ticker = null;
+    }
+  }
+  play() {
+    var _a, _b;
+    (_b = (_a = this.yt) == null ? void 0 : _a.playVideo) == null ? void 0 : _b.call(_a);
+  }
+  pause() {
+    var _a, _b;
+    (_b = (_a = this.yt) == null ? void 0 : _a.pauseVideo) == null ? void 0 : _b.call(_a);
+  }
+  seek(seconds) {
+    var _a, _b;
+    const s = Math.max(0, seconds);
+    (_b = (_a = this.yt) == null ? void 0 : _a.seekTo) == null ? void 0 : _b.call(_a, s, true);
+    this.current = s;
+  }
+  getCurrentTime() {
+    return this.current;
+  }
+  getDuration() {
+    return this.duration;
+  }
+  setVolume(v) {
+    var _a, _b;
+    this.volume = Math.min(1, Math.max(0, v));
+    (_b = (_a = this.yt) == null ? void 0 : _a.setVolume) == null ? void 0 : _b.call(_a, this.volume * 100);
+  }
+  getVolume() {
+    return this.volume;
+  }
+  setMuted(m) {
+    var _a, _b, _c, _d;
+    this.muted = m;
+    if (m) (_b = (_a = this.yt) == null ? void 0 : _a.mute) == null ? void 0 : _b.call(_a);
+    else (_d = (_c = this.yt) == null ? void 0 : _c.unMute) == null ? void 0 : _d.call(_c);
+  }
+  isMuted() {
+    return this.muted;
+  }
+  setRate(r) {
+    var _a, _b;
+    this.rate = r;
+    (_b = (_a = this.yt) == null ? void 0 : _a.setPlaybackRate) == null ? void 0 : _b.call(_a, r);
+  }
+  getRate() {
+    return this.rate;
+  }
+  isPlaying() {
+    return this.playing;
+  }
+  on(event, cb) {
+    return this.emitter.on(event, cb);
+  }
+  destroy() {
+    var _a, _b, _c;
+    this.stopTicker();
+    this.emitter.clear();
+    (_b = (_a = this.yt) == null ? void 0 : _a.destroy) == null ? void 0 : _b.call(_a);
+    (_c = this.host) == null ? void 0 : _c.remove();
+  }
+};
+
+// src/providers/vimeo.ts
+var apiPromise2 = null;
+function loadApi2() {
+  if (typeof window === "undefined") return Promise.reject(new Error("no window"));
+  if (window.Vimeo && window.Vimeo.Player) return Promise.resolve(window.Vimeo);
+  if (apiPromise2) return apiPromise2;
+  apiPromise2 = new Promise((resolve, reject) => {
+    const tag = document.createElement("script");
+    tag.src = "https://player.vimeo.com/api/player.js";
+    tag.onload = () => resolve(window.Vimeo);
+    tag.onerror = () => reject(new Error("Vimeo API failed to load"));
+    document.head.appendChild(tag);
+  });
+  return apiPromise2;
+}
+function parseSource(source) {
+  var _a;
+  if (source.id) return { id: Number(source.id) };
+  const url = (_a = source.url) != null ? _a : "";
+  const m = url.match(/vimeo\.com\/(?:video\/)?(\d+)/);
+  if (m == null ? void 0 : m[1]) return { id: Number(m[1]) };
+  return { url };
+}
+var VimeoProvider = class {
+  constructor(source) {
+    this.source = source;
+    this.capabilities = { seekable: true, rate: true, volume: true };
+    this.emitter = new Emitter();
+    this.player = null;
+    this.current = 0;
+    this.duration = 0;
+    this.rate = 1;
+    this.muted = false;
+    this.volume = 1;
+    this.playing = false;
+  }
+  async mount(container) {
+    const host = document.createElement("div");
+    host.className = "kzp-media kzp-embed";
+    container.appendChild(host);
+    this.host = host;
+    const Vimeo = await loadApi2();
+    const opts = { controls: false, responsive: false, ...parseSource(this.source) };
+    this.player = new Vimeo.Player(host, opts);
+    this.player.on("timeupdate", (d) => {
+      var _a;
+      this.current = (_a = d.seconds) != null ? _a : this.current;
+      if (d.duration) this.duration = d.duration;
+      this.emitter.emit("timeupdate", this.current);
+    });
+    this.player.on("play", () => {
+      this.playing = true;
+      this.emitter.emit("play");
+    });
+    this.player.on("pause", () => {
+      this.playing = false;
+      this.emitter.emit("pause");
+    });
+    this.player.on("ended", () => {
+      this.playing = false;
+      this.emitter.emit("ended");
+    });
+    this.player.on("error", () => this.emitter.emit("error", "Vimeo playback error."));
+    try {
+      this.duration = await this.player.getDuration() || 0;
+      this.emitter.emit("durationchange", this.duration);
+    } catch {
+    }
+    this.emitter.emit("ready");
+  }
+  play() {
+    var _a, _b;
+    void ((_b = (_a = this.player) == null ? void 0 : _a.play) == null ? void 0 : _b.call(_a));
+  }
+  pause() {
+    var _a, _b;
+    void ((_b = (_a = this.player) == null ? void 0 : _a.pause) == null ? void 0 : _b.call(_a));
+  }
+  seek(seconds) {
+    var _a, _b;
+    this.current = Math.max(0, seconds);
+    void ((_b = (_a = this.player) == null ? void 0 : _a.setCurrentTime) == null ? void 0 : _b.call(_a, this.current));
+  }
+  getCurrentTime() {
+    return this.current;
+  }
+  getDuration() {
+    return this.duration;
+  }
+  setVolume(v) {
+    var _a, _b;
+    this.volume = Math.min(1, Math.max(0, v));
+    void ((_b = (_a = this.player) == null ? void 0 : _a.setVolume) == null ? void 0 : _b.call(_a, this.volume));
+  }
+  getVolume() {
+    return this.volume;
+  }
+  setMuted(m) {
+    var _a, _b;
+    this.muted = m;
+    void ((_b = (_a = this.player) == null ? void 0 : _a.setVolume) == null ? void 0 : _b.call(_a, m ? 0 : this.volume));
+  }
+  isMuted() {
+    return this.muted;
+  }
+  setRate(r) {
+    var _a, _b;
+    this.rate = r;
+    void ((_b = (_a = this.player) == null ? void 0 : _a.setPlaybackRate) == null ? void 0 : _b.call(_a, r));
+  }
+  getRate() {
+    return this.rate;
+  }
+  isPlaying() {
+    return this.playing;
+  }
+  on(event, cb) {
+    return this.emitter.on(event, cb);
+  }
+  destroy() {
+    var _a, _b, _c;
+    this.emitter.clear();
+    void ((_b = (_a = this.player) == null ? void 0 : _a.destroy) == null ? void 0 : _b.call(_a));
+    (_c = this.host) == null ? void 0 : _c.remove();
+  }
+};
+
+// src/providers/index.ts
+function createProvider(source) {
+  switch (source.type) {
+    case "html5":
+    case "external":
+      return new Html5Provider(source);
+    case "youtube":
+      return new YouTubeProvider(source);
+    case "vimeo":
+      return new VimeoProvider(source);
+    default:
+      throw new Error(`[kodezen-player] Unknown source type "${String(source.type)}".`);
+  }
+}
+
+// src/core/Controls.ts
+var ICONS = {
+  play: '<path d="M8 5v14l11-7z"/>',
+  pause: '<path d="M6 5h4v14H6zM14 5h4v14h-4z"/>',
+  volume: '<path d="M3 10v4h4l5 5V5L7 10H3zm13.5 2a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4z"/>',
+  muted: '<path d="M3 10v4h4l5 5V5L7 10H3zm13 2 3 3 1-1-3-3 3-3-1-1-3 3-3-3-1 1 3 3-3 3 1 1z"/>',
+  full: '<path d="M4 4h6v2H6v4H4V4zm10 0h6v6h-2V6h-4V4zM4 14h2v4h4v2H4v-6zm14 0h2v6h-6v-2h4v-4z"/>'
+};
+function icon(paths) {
+  return `<svg viewBox="0 0 24 24" aria-hidden="true">${paths}</svg>`;
+}
+function fmt(sec) {
+  if (!Number.isFinite(sec) || sec < 0) sec = 0;
+  const s = Math.floor(sec % 60);
+  const m = Math.floor(sec / 60 % 60);
+  const h = Math.floor(sec / 3600);
+  const mm = h > 0 ? String(m).padStart(2, "0") : String(m);
+  const ss = String(s).padStart(2, "0");
+  return h > 0 ? `${h}:${mm}:${ss}` : `${mm}:${ss}`;
+}
+var DEFAULT_CONFIG = {
+  playPause: true,
+  seek: true,
+  time: true,
+  volume: true,
+  speed: true,
+  fullscreen: true
+};
+var Controls = class {
+  constructor(cb, opts) {
+    this.cb = cb;
+    this.scrubbing = false;
+    this.seekableMax = Infinity;
+    this.config = { ...DEFAULT_CONFIG, ...opts.config };
+    this.lockSeek = opts.lockSeek;
+    this.el = document.createElement("div");
+    this.el.className = "kzp-controls";
+    this.build(opts.speeds);
+  }
+  build(speeds) {
+    if (this.config.playPause) {
+      this.playBtn = this.button("kzp-play", "Play", ICONS.play);
+      this.playBtn.addEventListener("click", () => this.cb.onToggle());
+      this.el.appendChild(this.playBtn);
+    }
+    if (this.config.seek) {
+      this.scrubber = document.createElement("input");
+      this.scrubber.type = "range";
+      this.scrubber.className = "kzp-scrubber";
+      this.scrubber.min = "0";
+      this.scrubber.max = "0";
+      this.scrubber.step = "0.1";
+      this.scrubber.value = "0";
+      this.scrubber.setAttribute("aria-label", "Seek");
+      const commit = () => this.cb.onSeek(this.clamp(Number(this.scrubber.value)));
+      this.scrubber.addEventListener("pointerdown", (e) => {
+        if (this.lockSeek) {
+          e.preventDefault();
+          return;
+        }
+        this.scrubbing = true;
+      });
+      this.scrubber.addEventListener("keydown", (e) => {
+        if (this.lockSeek) e.preventDefault();
+      });
+      this.scrubber.addEventListener("input", commit);
+      this.scrubber.addEventListener("change", () => {
+        commit();
+        this.scrubbing = false;
+      });
+      this.el.appendChild(this.scrubber);
+    }
+    if (this.config.time) {
+      this.timeEl = document.createElement("span");
+      this.timeEl.className = "kzp-time";
+      this.timeEl.textContent = "0:00 / 0:00";
+      this.el.appendChild(this.timeEl);
+    }
+    if (this.config.volume) {
+      const wrap = document.createElement("div");
+      wrap.className = "kzp-volume";
+      this.volBtn = this.button("kzp-mute", "Mute", ICONS.volume);
+      this.volBtn.addEventListener("click", () => this.cb.onMuteToggle());
+      this.volRange = document.createElement("input");
+      this.volRange.type = "range";
+      this.volRange.className = "kzp-vol-range";
+      this.volRange.min = "0";
+      this.volRange.max = "1";
+      this.volRange.step = "0.05";
+      this.volRange.value = "1";
+      this.volRange.setAttribute("aria-label", "Volume");
+      this.volRange.addEventListener("input", () => this.cb.onVolume(Number(this.volRange.value)));
+      wrap.append(this.volBtn, this.volRange);
+      this.el.appendChild(wrap);
+    }
+    if (this.config.speed && speeds.length > 1) {
+      const wrap = document.createElement("div");
+      wrap.className = "kzp-speed";
+      this.speedBtn = this.button("kzp-speed-btn", "Playback speed", "");
+      this.speedBtn.textContent = "1x";
+      this.speedMenu = document.createElement("div");
+      this.speedMenu.className = "kzp-speed-menu";
+      this.speedMenu.hidden = true;
+      for (const rate of speeds) {
+        const item = document.createElement("button");
+        item.type = "button";
+        item.textContent = `${rate}x`;
+        item.dataset.rate = String(rate);
+        item.addEventListener("click", () => {
+          this.cb.onRate(rate);
+          this.speedMenu.hidden = true;
+        });
+        this.speedMenu.appendChild(item);
+      }
+      this.speedBtn.addEventListener("click", () => {
+        this.speedMenu.hidden = !this.speedMenu.hidden;
+      });
+      wrap.append(this.speedBtn, this.speedMenu);
+      this.el.appendChild(wrap);
+    }
+    if (this.config.fullscreen) {
+      const btn = this.button("kzp-full", "Fullscreen", ICONS.full);
+      btn.addEventListener("click", () => this.cb.onFullscreen());
+      this.el.appendChild(btn);
+    }
+  }
+  button(cls, label, svg) {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.className = cls;
+    b.setAttribute("aria-label", label);
+    if (svg) b.innerHTML = icon(svg);
+    return b;
+  }
+  clamp(value) {
+    return this.lockSeek ? Math.min(value, this.seekableMax) : value;
+  }
+  setLockSeek(locked) {
+    this.lockSeek = locked;
+  }
+  /** Push the latest state into the DOM. Called on every player timeupdate. */
+  update(state, extras) {
+    if (this.playBtn) {
+      this.playBtn.innerHTML = icon(state.playing ? ICONS.pause : ICONS.play);
+      this.playBtn.setAttribute("aria-label", state.playing ? "Pause" : "Play");
+    }
+    if (this.scrubber) {
+      this.seekableMax = this.lockSeek ? state.furthest : Infinity;
+      this.scrubber.max = String(state.duration || 0);
+      if (!this.scrubbing) this.scrubber.value = String(state.current);
+    }
+    if (this.timeEl) {
+      this.timeEl.textContent = `${fmt(state.current)} / ${fmt(state.duration)}`;
+    }
+    if (this.volBtn) {
+      this.volBtn.innerHTML = icon(extras.muted || extras.volume === 0 ? ICONS.muted : ICONS.volume);
+    }
+    if (this.volRange && document.activeElement !== this.volRange) {
+      this.volRange.value = String(extras.muted ? 0 : extras.volume);
+    }
+    if (this.speedBtn) this.speedBtn.textContent = `${extras.rate}x`;
+  }
+  destroy() {
+    this.el.remove();
+  }
+};
+
+// src/core/Player.ts
+var DEFAULT_SPEEDS = [0.5, 1, 1.25, 1.5, 2];
+var NATURAL_ADVANCE_MAX = 2;
+var Player = class {
+  constructor(container, options) {
+    this.container = container;
+    this.options = options;
+    this.emitter = new Emitter();
+    this.furthest = 0;
+    this.lastTick = 0;
+    this.duration = 0;
+    this.playing = false;
+    this.ready = false;
+    this.disposers = [];
+    var _a, _b, _c, _d, _e, _f, _g;
+    const speeds = (_a = options.speeds) != null ? _a : DEFAULT_SPEEDS;
+    this.root = document.createElement("div");
+    this.root.className = "kzp" + (options.className ? ` ${options.className}` : "");
+    if (options.lockSeek) this.root.classList.add("kzp--locked");
+    this.stage = document.createElement("div");
+    this.stage.className = "kzp-stage";
+    this.root.appendChild(this.stage);
+    const hitLayer = document.createElement("div");
+    hitLayer.className = "kzp-hit-layer";
+    hitLayer.addEventListener("click", () => this.toggle());
+    this.stage.appendChild(hitLayer);
+    this.provider = createProvider(options.source);
+    const caps = this.provider.capabilities;
+    this.controls = new Controls(
+      {
+        onToggle: () => this.toggle(),
+        onSeek: (s) => this.seek(s),
+        onVolume: (v) => {
+          this.provider.setMuted(false);
+          this.provider.setVolume(v);
+          this.render();
+        },
+        onMuteToggle: () => {
+          this.provider.setMuted(!this.provider.isMuted());
+          this.render();
+        },
+        onRate: (r) => {
+          this.provider.setRate(r);
+          this.render();
+        },
+        onFullscreen: () => this.toggleFullscreen()
+      },
+      {
+        config: {
+          ...options.controls,
+          seek: ((_c = (_b = options.controls) == null ? void 0 : _b.seek) != null ? _c : true) && caps.seekable,
+          speed: ((_e = (_d = options.controls) == null ? void 0 : _d.speed) != null ? _e : true) && caps.rate,
+          volume: ((_g = (_f = options.controls) == null ? void 0 : _f.volume) != null ? _g : true) && caps.volume
+        },
+        speeds,
+        lockSeek: !!options.lockSeek
+      }
+    );
+    this.root.appendChild(this.controls.el);
+    this.container.appendChild(this.root);
+    this.wireProvider();
+    void this.provider.mount(this.stage);
+  }
+  wireProvider() {
+    const p = this.provider;
+    this.disposers.push(
+      p.on("ready", () => this.onReady()),
+      p.on("durationchange", (d) => {
+        this.duration = d;
+        this.emitter.emit("durationchange", d);
+        this.render();
+      }),
+      p.on("timeupdate", (current) => this.onTimeUpdate(current)),
+      p.on("play", () => {
+        this.playing = true;
+        this.emitter.emit("play");
+        this.render();
+      }),
+      p.on("pause", () => {
+        this.playing = false;
+        this.emitter.emit("pause");
+        this.render();
+      }),
+      p.on("ended", () => {
+        this.playing = false;
+        this.emitter.emit("ended");
+        this.render();
+      }),
+      p.on("error", (msg) => this.emitter.emit("error", msg))
+    );
+  }
+  onReady() {
+    var _a;
+    if (this.ready) return;
+    this.ready = true;
+    this.duration = this.provider.getDuration();
+    if (this.options.muted) this.provider.setMuted(true);
+    const resume = (_a = this.options.resumeAt) != null ? _a : 0;
+    if (resume > 0 && (this.duration === 0 || resume < this.duration - 2)) {
+      this.provider.seek(resume);
+      this.furthest = resume;
+      this.lastTick = resume;
+    }
+    this.emitter.emit("ready", { duration: this.duration });
+    if (this.options.autoplay) this.provider.play();
+    this.render();
+  }
+  onTimeUpdate(current) {
+    const advance = current - this.lastTick;
+    if (advance > 0 && advance <= NATURAL_ADVANCE_MAX && current > this.furthest) {
+      this.furthest = current;
+    }
+    this.lastTick = current;
+    this.emitter.emit("timeupdate", this.snapshot());
+    this.render();
+  }
+  snapshot() {
+    const current = this.provider.getCurrentTime();
+    const duration = this.duration || this.provider.getDuration();
+    const percent = duration > 0 ? Math.min(100, Math.round(this.furthest / duration * 100)) : 0;
+    return { current, furthest: this.furthest, duration, percent, playing: this.playing };
+  }
+  render() {
+    this.controls.update(this.snapshot(), {
+      muted: this.provider.isMuted(),
+      volume: this.provider.getVolume(),
+      rate: this.provider.getRate()
+    });
+  }
+  toggleFullscreen() {
+    var _a, _b, _c;
+    if (document.fullscreenElement === this.root) {
+      void ((_a = document.exitFullscreen) == null ? void 0 : _a.call(document));
+    } else {
+      void ((_c = (_b = this.root).requestFullscreen) == null ? void 0 : _c.call(_b));
+    }
+  }
+  // ---- Public API ----
+  play() {
+    this.provider.play();
+  }
+  pause() {
+    this.provider.pause();
+  }
+  toggle() {
+    if (this.provider.isPlaying()) this.provider.pause();
+    else this.provider.play();
+  }
+  seek(seconds) {
+    if (!this.provider.capabilities.seekable) return;
+    const target = this.options.lockSeek && seconds > this.furthest ? this.furthest : Math.max(0, seconds);
+    this.provider.seek(target);
+    this.lastTick = target;
+    this.render();
+  }
+  setLockSeek(locked) {
+    this.options.lockSeek = locked;
+    this.controls.setLockSeek(locked);
+    this.root.classList.toggle("kzp--locked", locked);
+    this.render();
+  }
+  getState() {
+    return this.snapshot();
+  }
+  on(event, cb) {
+    return this.emitter.on(event, cb);
+  }
+  off(event, cb) {
+    this.emitter.off(event, cb);
+  }
+  destroy() {
+    for (const dispose of this.disposers) dispose();
+    this.disposers = [];
+    this.provider.destroy();
+    this.controls.destroy();
+    this.emitter.clear();
+    this.root.remove();
+  }
+};
+
+// src/index.ts
+function createPlayer(container, options) {
+  return new Player(container, options);
+}
+var KodezenPlayer = forwardRef(
+  function KodezenPlayer2(props, ref) {
+    var _a, _b;
+    const hostRef = useRef(null);
+    const playerRef = useRef(null);
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    useImperativeHandle(ref, () => ({
+      play: () => {
+        var _a2;
+        return (_a2 = playerRef.current) == null ? void 0 : _a2.play();
+      },
+      pause: () => {
+        var _a2;
+        return (_a2 = playerRef.current) == null ? void 0 : _a2.pause();
+      },
+      toggle: () => {
+        var _a2;
+        return (_a2 = playerRef.current) == null ? void 0 : _a2.toggle();
+      },
+      seek: (s) => {
+        var _a2;
+        return (_a2 = playerRef.current) == null ? void 0 : _a2.seek(s);
+      },
+      setLockSeek: (locked) => {
+        var _a2;
+        return (_a2 = playerRef.current) == null ? void 0 : _a2.setLockSeek(locked);
+      },
+      getState: () => {
+        var _a2, _b2;
+        return (_b2 = (_a2 = playerRef.current) == null ? void 0 : _a2.getState()) != null ? _b2 : {
+          current: 0,
+          furthest: 0,
+          duration: 0,
+          percent: 0,
+          playing: false
+        };
+      },
+      on: (event, cb) => {
+        var _a2, _b2;
+        return (_b2 = (_a2 = playerRef.current) == null ? void 0 : _a2.on(event, cb)) != null ? _b2 : (() => {
+        });
+      },
+      off: (event, cb) => {
+        var _a2;
+        return (_a2 = playerRef.current) == null ? void 0 : _a2.off(event, cb);
+      },
+      destroy: () => {
+        var _a2;
+        return (_a2 = playerRef.current) == null ? void 0 : _a2.destroy();
+      }
+    }));
+    const sourceKey = `${props.source.type}|${(_a = props.source.url) != null ? _a : ""}|${(_b = props.source.id) != null ? _b : ""}`;
+    useEffect(() => {
+      if (!hostRef.current) return;
+      const p = propsRef.current;
+      const player = createPlayer(hostRef.current, {
+        source: p.source,
+        resumeAt: p.resumeAt,
+        lockSeek: p.lockSeek,
+        autoplay: p.autoplay,
+        muted: p.muted,
+        speeds: p.speeds,
+        controls: p.controls,
+        className: p.className
+      });
+      playerRef.current = player;
+      const offs = [
+        player.on("ready", (x) => {
+          var _a2, _b2;
+          return (_b2 = (_a2 = propsRef.current).onReady) == null ? void 0 : _b2.call(_a2, x);
+        }),
+        player.on("timeupdate", (x) => {
+          var _a2, _b2;
+          return (_b2 = (_a2 = propsRef.current).onTimeUpdate) == null ? void 0 : _b2.call(_a2, x);
+        }),
+        player.on("play", () => {
+          var _a2, _b2;
+          return (_b2 = (_a2 = propsRef.current).onPlay) == null ? void 0 : _b2.call(_a2);
+        }),
+        player.on("pause", () => {
+          var _a2, _b2;
+          return (_b2 = (_a2 = propsRef.current).onPause) == null ? void 0 : _b2.call(_a2);
+        }),
+        player.on("ended", () => {
+          var _a2, _b2;
+          return (_b2 = (_a2 = propsRef.current).onEnded) == null ? void 0 : _b2.call(_a2);
+        }),
+        player.on("error", (m) => {
+          var _a2, _b2;
+          return (_b2 = (_a2 = propsRef.current).onError) == null ? void 0 : _b2.call(_a2, m);
+        })
+      ];
+      return () => {
+        for (const off of offs) off();
+        player.destroy();
+        playerRef.current = null;
+      };
+    }, [sourceKey]);
+    useEffect(() => {
+      var _a2;
+      (_a2 = playerRef.current) == null ? void 0 : _a2.setLockSeek(!!props.lockSeek);
+    }, [props.lockSeek]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: hostRef,
+        className: props.wrapperClassName,
+        style: props.style
+      }
+    );
+  }
+);
+
+export { KodezenPlayer };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map