@obipascal/player 1.0.10 → 1.0.12

package/dist/wontum-player.esm.js

@@ -1,37 +1,37 @@
-var V = Object.defineProperty;
-var H = (c, t, e) => t in c ? V(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
-var r = (c, t, e) => H(c, typeof t != "symbol" ? t + "" : t, e);
-import p from "hls.js";
-import { jsx as P } from "react/jsx-runtime";
-import * as B from "react";
-import { useRef as E, useEffect as x, useState as S } from "react";
-class N {
+var _ = Object.defineProperty;
+var j = (u, t, e) => t in u ? _(u, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : u[t] = e;
+var a = (u, t, e) => j(u, typeof t != "symbol" ? t + "" : t, e);
+import y from "hls.js";
+import { jsx as $ } from "react/jsx-runtime";
+import * as z from "react";
+import { useRef as E, useEffect as S, useState as v, useCallback as L } from "react";
+class O {
   constructor(t) {
-    r(this, "config");
-    r(this, "sessionId");
-    r(this, "events", []);
-    r(this, "sessionStartTime");
-    r(this, "playbackStartTime", null);
-    r(this, "totalPlayTime", 0);
-    r(this, "totalBufferTime", 0);
-    r(this, "bufferStartTime", null);
-    r(this, "rebufferCount", 0);
-    r(this, "seekCount", 0);
-    r(this, "webSocket", null);
-    r(this, "socketIO", null);
-    r(this, "wsReconnectTimeout", null);
-    r(this, "isDestroyed", !1);
-    var e, i;
+    a(this, "config");
+    a(this, "sessionId");
+    a(this, "events", []);
+    a(this, "sessionStartTime");
+    a(this, "playbackStartTime", null);
+    a(this, "totalPlayTime", 0);
+    a(this, "totalBufferTime", 0);
+    a(this, "bufferStartTime", null);
+    a(this, "rebufferCount", 0);
+    a(this, "seekCount", 0);
+    a(this, "webSocket", null);
+    a(this, "socketIO", null);
+    a(this, "wsReconnectTimeout", null);
+    a(this, "isDestroyed", !1);
+    var e, n;
     if (this.config = t, this.sessionId = (t == null ? void 0 : t.sessionId) || this.generateSessionId(), this.sessionStartTime = Date.now(), (e = this.config) != null && e.webSocket) {
-      const n = this.config.webSocket;
-      "type" in n ? n.type === "socket.io" ? this.initializeSocketIO() : this.initializeWebSocket() : this.initializeWebSocket();
+      const i = this.config.webSocket;
+      "type" in i ? i.type === "socket.io" ? this.initializeSocketIO() : this.initializeWebSocket() : this.initializeWebSocket();
     }
-    (i = this.config) != null && i.enabled && this.trackEvent("session_start", this.getSessionData());
+    (n = this.config) != null && n.enabled && this.trackEvent("session_start", this.getSessionData());
   }
   trackEvent(t, e = {}) {
-    var n;
-    if (!((n = this.config) != null && n.enabled)) return;
-    const i = {
+    var i;
+    if (!((i = this.config) != null && i.enabled)) return;
+    const n = {
       eventType: t,
       timestamp: Date.now(),
       sessionId: this.sessionId,
@@ -42,7 +42,7 @@ class N {
         ...this.getQoEMetrics()
       }
     };
-    this.events.push(i), this.updateMetrics(t, e), this.webSocket && this.webSocket.readyState === WebSocket.OPEN && this.sendToWebSocket(i), this.socketIO && this.socketIO.connected && this.sendToSocketIO(i), this.config.endpoint && this.sendEvent(i), process.env.NODE_ENV === "development" && console.log("[Analytics]", t, i.data);
+    this.events.push(n), this.updateMetrics(t, e), this.webSocket && this.webSocket.readyState === WebSocket.OPEN && this.sendToWebSocket(n), this.socketIO && this.socketIO.connected && this.sendToSocketIO(n), this.config.endpoint && this.sendEvent(n), process.env.NODE_ENV === "development" && console.log("[Analytics]", t, n.data);
   }
   updateMetrics(t, e) {
     switch (t) {
@@ -105,8 +105,8 @@ class N {
           },
           body: JSON.stringify(t)
         });
-      } catch (i) {
-        console.error("Failed to send analytics event:", i);
+      } catch (n) {
+        console.error("Failed to send analytics event:", n);
       }
   }
   generateSessionId() {
@@ -119,32 +119,32 @@ class N {
     if (t.type === "socket.io")
       try {
         if (typeof t.connection == "string") {
-          const n = (await import("socket.io-client")).default;
-          this.socketIO = n(t.connection, t.options || {});
+          const i = (await import("socket.io-client")).default;
+          this.socketIO = i(t.connection, t.options || {});
         } else
           this.socketIO = t.connection;
         if (!this.socketIO) return;
         this.socketIO.on("connect", () => {
           process.env.NODE_ENV === "development" && console.log("[Analytics Socket.IO] Connected"), t.onConnect && t.onConnect();
-        }), this.socketIO.on("connect_error", (i) => {
-          console.error("[Analytics Socket.IO] Connection error:", i), t.onError && t.onError(i);
-        }), this.socketIO.on("disconnect", (i) => {
-          process.env.NODE_ENV === "development" && console.log("[Analytics Socket.IO] Disconnected:", i), t.onDisconnect && t.onDisconnect(i);
-        }), this.socketIO.on("error", (i) => {
-          console.error("[Analytics Socket.IO] Error:", i), t.onError && t.onError(i);
+        }), this.socketIO.on("connect_error", (n) => {
+          console.error("[Analytics Socket.IO] Connection error:", n), t.onError && t.onError(n);
+        }), this.socketIO.on("disconnect", (n) => {
+          process.env.NODE_ENV === "development" && console.log("[Analytics Socket.IO] Disconnected:", n), t.onDisconnect && t.onDisconnect(n);
+        }), this.socketIO.on("error", (n) => {
+          console.error("[Analytics Socket.IO] Error:", n), t.onError && t.onError(n);
         });
-      } catch (i) {
-        console.error("[Analytics Socket.IO] Failed to initialize:", i);
+      } catch (n) {
+        console.error("[Analytics Socket.IO] Failed to initialize:", n);
       }
   }
   sendToSocketIO(t) {
     var e;
     if (!(!this.socketIO || !this.socketIO.connected))
       try {
-        const i = (e = this.config) == null ? void 0 : e.webSocket, n = i != null && i.transform ? i.transform(t) : t, o = (i == null ? void 0 : i.eventName) || "analytics";
-        this.socketIO.emit(o, n), process.env.NODE_ENV === "development" && console.log(`[Analytics Socket.IO] Emitted (${o}):`, t.eventType);
-      } catch (i) {
-        console.error("[Analytics Socket.IO] Failed to emit event:", i);
+        const n = (e = this.config) == null ? void 0 : e.webSocket, i = n != null && n.transform ? n.transform(t) : t, o = (n == null ? void 0 : n.eventName) || "analytics";
+        this.socketIO.emit(o, i), process.env.NODE_ENV === "development" && console.log(`[Analytics Socket.IO] Emitted (${o}):`, t.eventType);
+      } catch (n) {
+        console.error("[Analytics Socket.IO] Failed to emit event:", n);
       }
   }
   initializeWebSocket() {
@@ -152,30 +152,30 @@ class N {
     if (!((e = this.config) != null && e.webSocket)) return;
     const t = this.config.webSocket;
     try {
-      typeof t.connection == "string" ? this.webSocket = new WebSocket(t.connection) : this.webSocket = t.connection, this.webSocket.onopen = (i) => {
-        process.env.NODE_ENV === "development" && console.log("[Analytics WebSocket] Connected"), t.onOpen && t.onOpen(i);
-      }, this.webSocket.onerror = (i) => {
-        console.error("[Analytics WebSocket] Error:", i), t.onError && t.onError(i);
-      }, this.webSocket.onclose = (i) => {
-        if (process.env.NODE_ENV === "development" && console.log("[Analytics WebSocket] Disconnected"), t.onClose && t.onClose(i), t.autoReconnect !== !1 && !this.isDestroyed) {
+      typeof t.connection == "string" ? this.webSocket = new WebSocket(t.connection) : this.webSocket = t.connection, this.webSocket.onopen = (n) => {
+        process.env.NODE_ENV === "development" && console.log("[Analytics WebSocket] Connected"), t.onOpen && t.onOpen(n);
+      }, this.webSocket.onerror = (n) => {
+        console.error("[Analytics WebSocket] Error:", n), t.onError && t.onError(n);
+      }, this.webSocket.onclose = (n) => {
+        if (process.env.NODE_ENV === "development" && console.log("[Analytics WebSocket] Disconnected"), t.onClose && t.onClose(n), t.autoReconnect !== !1 && !this.isDestroyed) {
           const o = t.reconnectDelay || 3e3;
           process.env.NODE_ENV === "development" && console.log(`[Analytics WebSocket] Reconnecting in ${o}ms...`), this.wsReconnectTimeout = window.setTimeout(() => {
             this.initializeWebSocket();
           }, o);
         }
       };
-    } catch (i) {
-      console.error("[Analytics WebSocket] Failed to initialize:", i);
+    } catch (n) {
+      console.error("[Analytics WebSocket] Failed to initialize:", n);
     }
   }
   sendToWebSocket(t) {
     var e;
     if (!(!this.webSocket || this.webSocket.readyState !== WebSocket.OPEN))
       try {
-        const i = (e = this.config) == null ? void 0 : e.webSocket, n = i != null && i.transform ? i.transform(t) : t;
-        this.webSocket.send(JSON.stringify(n)), process.env.NODE_ENV === "development" && console.log("[Analytics WebSocket] Sent:", t.eventType);
-      } catch (i) {
-        console.error("[Analytics WebSocket] Failed to send event:", i);
+        const n = (e = this.config) == null ? void 0 : e.webSocket, i = n != null && n.transform ? n.transform(t) : t;
+        this.webSocket.send(JSON.stringify(i)), process.env.NODE_ENV === "development" && console.log("[Analytics WebSocket] Sent:", t.eventType);
+      } catch (n) {
+        console.error("[Analytics WebSocket] Failed to send event:", n);
       }
   }
   getEvents() {
@@ -193,46 +193,46 @@ class N {
     this.isDestroyed = !0, (t = this.config) != null && t.enabled && this.trackEvent("session_end", this.getSessionData()), this.wsReconnectTimeout && (clearTimeout(this.wsReconnectTimeout), this.wsReconnectTimeout = null), this.webSocket && (this.webSocket.close(), this.webSocket = null), this.socketIO && (this.socketIO.removeAllListeners(), this.socketIO.disconnect(), this.socketIO = null), this.events = [];
   }
 }
-class W {
+class Q {
   constructor(t, e) {
-    r(this, "container");
-    r(this, "player");
-    r(this, "controlsContainer");
-    r(this, "progressContainer");
-    r(this, "progressBar");
-    r(this, "playButton");
-    r(this, "skipBackwardButton");
-    r(this, "skipForwardButton");
-    r(this, "volumeButton");
-    r(this, "volumeContainer");
-    r(this, "fullscreenButton");
-    r(this, "pipButton");
-    r(this, "settingsButton");
+    a(this, "container");
+    a(this, "player");
+    a(this, "controlsContainer");
+    a(this, "progressContainer");
+    a(this, "progressBar");
+    a(this, "playButton");
+    a(this, "skipBackwardButton");
+    a(this, "skipForwardButton");
+    a(this, "volumeButton");
+    a(this, "volumeContainer");
+    a(this, "fullscreenButton");
+    a(this, "pipButton");
+    a(this, "settingsButton");
     // private timeDisplay: HTMLElement
-    r(this, "volumeSlider");
-    r(this, "progressInput");
+    a(this, "volumeSlider");
+    a(this, "progressInput");
     // private controlsVisible = true
-    r(this, "hideControlsTimeout", null);
-    r(this, "stickyControls", !1);
-    r(this, "isVolumeSliderActive", !1);
+    a(this, "hideControlsTimeout", null);
+    a(this, "stickyControls", !1);
+    a(this, "isVolumeSliderActive", !1);
     this.container = t, this.player = e, this.injectStyles(), this.createProgressBar(), this.controlsContainer = this.createControls(), this.container.appendChild(this.controlsContainer), this.playButton = this.controlsContainer.querySelector(".wontum-play-btn"), this.skipBackwardButton = this.controlsContainer.querySelector(".wontum-skip-backward-btn"), this.skipForwardButton = this.controlsContainer.querySelector(".wontum-skip-forward-btn"), this.volumeButton = this.controlsContainer.querySelector(".wontum-volume-btn"), this.volumeContainer = this.controlsContainer.querySelector(".wontum-volume-container"), this.fullscreenButton = this.controlsContainer.querySelector(".wontum-fullscreen-btn"), this.pipButton = this.controlsContainer.querySelector(".wontum-pip-btn"), this.settingsButton = this.controlsContainer.querySelector(".wontum-settings-btn"), this.volumeSlider = this.controlsContainer.querySelector(".wontum-volume-slider"), this.progressInput = this.container.querySelector(".wontum-progress-input"), this.progressBar = this.container.querySelector(".wontum-progress-filled"), this.stickyControls = this.player.config.stickyControls || !1, this.stickyControls && this.controlsContainer.classList.add("sticky"), this.setupEventListeners(), this.setupPlayerEventListeners();
   }
   injectStyles() {
     const t = "wontum-player-styles";
     if (document.getElementById(t)) return;
-    const e = this.player.config.theme || {}, i = e.primaryColor || "#3b82f6", n = e.accentColor || "#2563eb", o = e.fontFamily || "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", s = e.controlsBackground || "linear-gradient(to top, rgba(0,0,0,0.8), transparent)", a = e.buttonHoverBg || "rgba(255, 255, 255, 0.1)", l = e.progressHeight || "6px", u = e.borderRadius || "4px", m = document.createElement("style");
-    m.id = t, m.textContent = `
+    const e = this.player.config.theme || {}, n = e.primaryColor || "#3b82f6", i = e.accentColor || "#2563eb", o = e.fontFamily || "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", s = e.controlsBackground || "linear-gradient(to top, rgba(0,0,0,0.8), transparent)", r = e.buttonHoverBg || "rgba(255, 255, 255, 0.1)", l = e.progressHeight || "6px", c = e.borderRadius || "4px", d = document.createElement("style");
+    d.id = t, d.textContent = `
       .wontum-player-container {
         position: relative;
         background: #000;
         font-family: ${o};
         overflow: hidden;
-        --primary-color: ${i};
-        --accent-color: ${n};
+        --primary-color: ${n};
+        --accent-color: ${i};
         --controls-bg: ${s};
-        --button-hover: ${a};
+        --button-hover: ${r};
         --progress-height: ${l};
-        --border-radius: ${u};
+        --border-radius: ${c};
       }
       
       .wontum-player-video {
@@ -709,7 +709,7 @@ class W {
         transform: translateY(0) !important;
         pointer-events: all !important;
       }
-    `, document.head.appendChild(m), this.container.classList.add("wontum-player-container");
+    `, document.head.appendChild(d), this.container.classList.add("wontum-player-container");
   }
   createProgressBar() {
     const t = document.createElement("div");
@@ -802,11 +802,11 @@ class W {
       this.player.skipBackward(10);
     }), this.skipForwardButton.addEventListener("click", () => {
       this.player.skipForward(10);
-    }), this.progressInput.addEventListener("input", (i) => {
-      const n = i.target, o = parseFloat(n.value), s = this.player.getState(), a = o / 100 * s.duration;
-      this.player.seek(a);
-    }), this.volumeSlider.addEventListener("input", (i) => {
-      const n = i.target, o = parseFloat(n.value) / 100;
+    }), this.progressInput.addEventListener("input", (n) => {
+      const i = n.target, o = parseFloat(i.value), s = this.player.getState(), r = o / 100 * s.duration;
+      this.player.seek(r);
+    }), this.volumeSlider.addEventListener("input", (n) => {
+      const i = n.target, o = parseFloat(i.value) / 100;
       this.player.setVolume(o);
     }), this.volumeButton.addEventListener("click", () => {
       this.player.getState().muted ? this.player.unmute() : this.player.mute();
@@ -825,18 +825,18 @@ class W {
     }), this.pipButton.addEventListener("click", async () => {
       try {
         await this.player.togglePictureInPicture();
-      } catch (i) {
-        console.error("PiP error:", i);
+      } catch (n) {
+        console.error("PiP error:", n);
       }
     }), this.settingsButton.addEventListener("click", () => {
-      const i = this.controlsContainer.querySelector(".wontum-settings-panel");
-      i.classList.toggle("active"), i.classList.contains("active") && (this.updateSettingsMenu(), this.updateQualityMenu(), this.updateSpeedMenu(), this.updateSubtitleMenu());
+      const n = this.controlsContainer.querySelector(".wontum-settings-panel");
+      n.classList.toggle("active"), n.classList.contains("active") && (this.updateSettingsMenu(), this.updateQualityMenu(), this.updateSpeedMenu(), this.updateSubtitleMenu());
     });
     const t = this.controlsContainer.querySelectorAll(".wontum-tab");
-    t.forEach((i) => {
-      i.addEventListener("click", (n) => {
-        const o = n.currentTarget, s = o.getAttribute("data-tab");
-        t.forEach((u) => u.classList.remove("active")), o.classList.add("active"), this.controlsContainer.querySelectorAll(".wontum-tab-panel").forEach((u) => u.classList.remove("active"));
+    t.forEach((n) => {
+      n.addEventListener("click", (i) => {
+        const o = i.currentTarget, s = o.getAttribute("data-tab");
+        t.forEach((c) => c.classList.remove("active")), o.classList.add("active"), this.controlsContainer.querySelectorAll(".wontum-tab-panel").forEach((c) => c.classList.remove("active"));
         const l = this.controlsContainer.querySelector(`[data-panel="${s}"]`);
         l == null || l.classList.add("active");
       });
@@ -854,19 +854,19 @@ class W {
     }), this.player.on("pause", () => {
       this.playButton.innerHTML = this.getPlayIcon();
     }), this.player.on("timeupdate", (t) => {
-      const { currentTime: e } = t.data, i = this.player.getState();
-      if (i.duration > 0) {
-        const o = e / i.duration * 100;
+      const { currentTime: e } = t.data, n = this.player.getState();
+      if (n.duration > 0) {
+        const o = e / n.duration * 100;
         this.progressBar.style.width = `${o}%`, this.progressInput.value = o.toString();
       }
-      const n = this.controlsContainer.querySelector(".wontum-current-time");
-      n.textContent = this.formatTime(e);
+      const i = this.controlsContainer.querySelector(".wontum-current-time");
+      i.textContent = this.formatTime(e);
     }), this.player.on("loadedmetadata", (t) => {
-      const { duration: e } = t.data, i = this.controlsContainer.querySelector(".wontum-duration");
-      i.textContent = this.formatTime(e), t.data.qualities && this.updateQualityMenu(t.data.qualities);
+      const { duration: e } = t.data, n = this.controlsContainer.querySelector(".wontum-duration");
+      n.textContent = this.formatTime(e), t.data.qualities && this.updateQualityMenu(t.data.qualities);
     }), this.player.on("volumechange", (t) => {
-      const { volume: e, muted: i } = t.data;
-      this.volumeSlider.value = (e * 100).toString(), this.volumeButton.innerHTML = i ? this.getMutedIcon() : this.getVolumeIcon();
+      const { volume: e, muted: n } = t.data;
+      this.volumeSlider.value = (e * 100).toString(), this.volumeButton.innerHTML = n ? this.getMutedIcon() : this.getVolumeIcon();
     }), this.player.on("waiting", () => {
       const t = this.controlsContainer.querySelector(".wontum-loading");
       t.style.display = "block";
@@ -881,35 +881,35 @@ class W {
       t.innerHTML = '<div class="wontum-subtitle-option">No subtitles available</div>';
       return;
     }
-    const i = e.findIndex((n) => n.mode === "showing");
+    const n = e.findIndex((i) => i.mode === "showing");
     t.innerHTML = `
-      <div class="wontum-subtitle-option ${i === -1 ? "active" : ""}" data-track="-1">Off</div>
+      <div class="wontum-subtitle-option ${n === -1 ? "active" : ""}" data-track="-1">Off</div>
       ${e.map(
-      (n, o) => `
-        <div class="wontum-subtitle-option ${o === i ? "active" : ""}" data-track="${o}">
-          ${n.label || n.language || `Track ${o + 1}`}
+      (i, o) => `
+        <div class="wontum-subtitle-option ${o === n ? "active" : ""}" data-track="${o}">
+          ${i.label || i.language || `Track ${o + 1}`}
         </div>
       `
     ).join("")}
-    `, t.querySelectorAll(".wontum-subtitle-option").forEach((n) => {
-      n.addEventListener("click", (o) => {
-        const s = o.target, a = parseInt(s.dataset.track || "-1");
-        a === -1 ? this.player.disableSubtitles() : this.player.enableSubtitles(a), t.querySelectorAll(".wontum-subtitle-option").forEach((l) => l.classList.remove("active")), s.classList.add("active");
+    `, t.querySelectorAll(".wontum-subtitle-option").forEach((i) => {
+      i.addEventListener("click", (o) => {
+        const s = o.target, r = parseInt(s.dataset.track || "-1");
+        r === -1 ? this.player.disableSubtitles() : this.player.enableSubtitles(r), t.querySelectorAll(".wontum-subtitle-option").forEach((l) => l.classList.remove("active")), s.classList.add("active");
       });
     });
   }
   updateSpeedMenu() {
-    const t = this.controlsContainer.querySelector(".wontum-speed-menu"), i = this.player.getState().playbackRate || 1, n = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
-    t.innerHTML = n.map(
+    const t = this.controlsContainer.querySelector(".wontum-speed-menu"), n = this.player.getState().playbackRate || 1, i = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+    t.innerHTML = i.map(
       (o) => `
-        <div class="wontum-speed-option ${i === o ? "active" : ""}" data-speed="${o}">
+        <div class="wontum-speed-option ${n === o ? "active" : ""}" data-speed="${o}">
           ${o === 1 ? "Normal" : o + "x"}
         </div>
       `
     ).join(""), t.querySelectorAll(".wontum-speed-option").forEach((o) => {
       o.addEventListener("click", (s) => {
-        const a = s.target, l = parseFloat(a.dataset.speed || "1");
-        this.player.setPlaybackRate(l), t.querySelectorAll(".wontum-speed-option").forEach((u) => u.classList.remove("active")), a.classList.add("active");
+        const r = s.target, l = parseFloat(r.dataset.speed || "1");
+        this.player.setPlaybackRate(l), t.querySelectorAll(".wontum-speed-option").forEach((c) => c.classList.remove("active")), r.classList.add("active");
       });
     });
   }
@@ -927,22 +927,22 @@ class W {
     });
   }
   updateQualityMenu(t) {
-    const e = this.controlsContainer.querySelector(".wontum-quality-menu"), i = t || this.player.getQualities();
-    if (!i || i.length === 0) {
+    const e = this.controlsContainer.querySelector(".wontum-quality-menu"), n = t || this.player.getQualities();
+    if (!n || n.length === 0) {
       e.innerHTML = '<div class="wontum-quality-option">No qualities available</div>';
       return;
     }
     e.innerHTML = `
       <div class="wontum-quality-option active" data-quality="-1">Auto</div>
-      ${i.map(
-      (n, o) => `
-        <div class="wontum-quality-option" data-quality="${o}">${n.name}</div>
+      ${n.map(
+      (i, o) => `
+        <div class="wontum-quality-option" data-quality="${o}">${i.name}</div>
       `
     ).join("")}
-    `, e.querySelectorAll(".wontum-quality-option").forEach((n) => {
-      n.addEventListener("click", (o) => {
-        const s = o.target, a = parseInt(s.dataset.quality || "-1");
-        this.player.setQuality(a), e.querySelectorAll(".wontum-quality-option").forEach((l) => l.classList.remove("active")), s.classList.add("active");
+    `, e.querySelectorAll(".wontum-quality-option").forEach((i) => {
+      i.addEventListener("click", (o) => {
+        const s = o.target, r = parseInt(s.dataset.quality || "-1");
+        this.player.setQuality(r), e.querySelectorAll(".wontum-quality-option").forEach((l) => l.classList.remove("active")), s.classList.add("active");
       });
     });
   }
@@ -960,8 +960,8 @@ class W {
   }
   formatTime(t) {
     if (isNaN(t)) return "0:00";
-    const e = Math.floor(t / 60), i = Math.floor(t % 60);
-    return `${e}:${i.toString().padStart(2, "0")}`;
+    const e = Math.floor(t / 60), n = Math.floor(t % 60);
+    return `${e}:${n.toString().padStart(2, "0")}`;
   }
   // SVG Icons
   getPlayIcon() {
@@ -1004,14 +1004,14 @@ class W {
     return '<svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>';
   }
   destroy() {
-    this.hideControlsTimeout && clearTimeout(this.hideControlsTimeout), this.controlsContainer.remove();
+    this.hideControlsTimeout && clearTimeout(this.hideControlsTimeout), this.controlsContainer && this.controlsContainer.remove(), this.progressContainer && this.progressContainer.remove();
   }
 }
-class _ {
+class Y {
   constructor(t) {
-    r(this, "config");
-    r(this, "urlCache", /* @__PURE__ */ new Map());
-    r(this, "signedUrls", /* @__PURE__ */ new Set());
+    a(this, "config");
+    a(this, "urlCache", /* @__PURE__ */ new Map());
+    a(this, "signedUrls", /* @__PURE__ */ new Set());
     this.config = t;
   }
   /**
@@ -1028,8 +1028,8 @@ class _ {
     if (!((e = this.config) != null && e.cloudFrontDomains) || this.config.cloudFrontDomains.length === 0)
       return !1;
     try {
-      const i = new URL(t);
-      return this.config.cloudFrontDomains.some((n) => i.hostname.includes(n));
+      const n = new URL(t);
+      return this.config.cloudFrontDomains.some((i) => n.hostname.includes(i));
     } catch {
       return !1;
     }
@@ -1050,15 +1050,15 @@ class _ {
       return t;
     if ((o = this.config) != null && o.signUrl)
       try {
-        const a = await this.config.signUrl(t);
-        return this.signedUrls.add(t), a;
-      } catch (a) {
-        const l = (a == null ? void 0 : a.name) === "AbortError" || ((s = a == null ? void 0 : a.message) == null ? void 0 : s.includes("aborted"));
+        const r = await this.config.signUrl(t);
+        return this.signedUrls.add(t), r;
+      } catch (r) {
+        const l = (r == null ? void 0 : r.name) === "AbortError" || ((s = r == null ? void 0 : r.message) == null ? void 0 : s.includes("aborted"));
         if (l && e < 2)
-          return console.warn(`Sign URL aborted, retrying (${e + 1}/2)...`), await new Promise((u) => setTimeout(u, 300)), this.signCloudFrontUrl(t, e + 1);
-        throw console.error("Failed to sign CloudFront URL:", a), l ? new Error(
+          return console.warn(`Sign URL aborted, retrying (${e + 1}/2)...`), await new Promise((c) => setTimeout(c, 300)), this.signCloudFrontUrl(t, e + 1);
+        throw console.error("Failed to sign CloudFront URL:", r), l ? new Error(
           "Failed to sign CloudFront URL: Request was aborted. If using Apollo Client or other GraphQL clients, consider moving the query outside component lifecycle or using useQuery with skip option."
-        ) : new Error(`Failed to sign CloudFront URL: ${(a == null ? void 0 : a.message) || "Unknown error"}`);
+        ) : new Error(`Failed to sign CloudFront URL: ${(r == null ? void 0 : r.message) || "Unknown error"}`);
       }
     return console.warn("No signUrl function provided. CloudFront cookies may not be set."), t;
   }
@@ -1071,18 +1071,18 @@ class _ {
     const e = t.match(/s3[.-]([^.]+)\.amazonaws\.com\/(.+)/);
     if (e)
       return e[2];
-    const i = t.match(/([^.]+)\.s3\.amazonaws\.com\/(.+)/);
-    return i ? i[2] : t;
+    const n = t.match(/([^.]+)\.s3\.amazonaws\.com\/(.+)/);
+    return n ? n[2] : t;
   }
   /**
    * Get presigned URL from cache or generate new one
    */
   async getPresignedUrl(t) {
-    var n;
-    const e = this.extractS3Key(t), i = this.urlCache.get(e);
-    if (i && i.expiresAt > Date.now())
-      return i.url;
-    if ((n = this.config) != null && n.getPresignedUrl)
+    var i;
+    const e = this.extractS3Key(t), n = this.urlCache.get(e);
+    if (n && n.expiresAt > Date.now())
+      return n.url;
+    if ((i = this.config) != null && i.getPresignedUrl)
       try {
         const o = await this.config.getPresignedUrl(e);
         return this.urlCache.set(e, {
@@ -1097,8 +1097,8 @@ class _ {
   /**
    * Helper to construct S3 URL from bucket and key
    */
-  static constructS3Url(t, e, i = "us-east-1") {
-    return `https://${t}.s3.${i}.amazonaws.com/${e}`;
+  static constructS3Url(t, e, n = "us-east-1") {
+    return `https://${t}.s3.${n}.amazonaws.com/${e}`;
   }
   /**
    * Helper to parse S3 URI (s3://bucket/key)
@@ -1106,8 +1106,8 @@ class _ {
   static parseS3Uri(t) {
     if (!t.startsWith("s3://"))
       return null;
-    const e = t.replace("s3://", "").split("/"), i = e[0], n = e.slice(1).join("/");
-    return { bucket: i, key: n };
+    const e = t.replace("s3://", "").split("/"), n = e[0], i = e.slice(1).join("/");
+    return { bucket: n, key: i };
   }
   /**
    * Clear URL cache and signed URLs
@@ -1116,18 +1116,18 @@ class _ {
     this.urlCache.clear(), this.signedUrls.clear();
   }
 }
-class $ {
+class D {
   constructor(t) {
-    r(this, "container");
-    r(this, "videoElement");
-    r(this, "hls", null);
-    r(this, "config");
-    r(this, "eventListeners", /* @__PURE__ */ new Map());
-    r(this, "analytics");
-    r(this, "s3Handler");
-    r(this, "uiController");
-    r(this, "qualities", []);
-    r(this, "state", {
+    a(this, "container");
+    a(this, "videoElement");
+    a(this, "hls", null);
+    a(this, "config");
+    a(this, "eventListeners", /* @__PURE__ */ new Map());
+    a(this, "analytics");
+    a(this, "s3Handler");
+    a(this, "uiController");
+    a(this, "qualities", []);
+    a(this, "state", {
       playing: !1,
       paused: !0,
       ended: !1,
@@ -1143,12 +1143,12 @@ class $ {
     });
     if (this.config = t, this.container = typeof t.container == "string" ? document.querySelector(t.container) : t.container, !this.container)
       throw new Error("Container element not found");
-    this.analytics = new N(t.analytics), this.s3Handler = new _(t.s3Config), this.videoElement = this.createVideoElement(), this.container.appendChild(this.videoElement), this.uiController = new W(this.container, this), this.setupVideoListeners(), this.loadSource(t.src), t.autoplay && (this.videoElement.autoplay = !0), t.muted && this.mute(), t.poster && (this.videoElement.poster = t.poster), t.preload && (this.videoElement.preload = t.preload), t.subtitles && this.addSubtitleTracks(t.subtitles);
+    this.analytics = new O(t.analytics), this.s3Handler = new Y(t.s3Config), this.videoElement = this.createVideoElement(), this.container.appendChild(this.videoElement), this.uiController = new Q(this.container, this), this.setupVideoListeners(), this.loadSource(t.src), t.autoplay && (this.videoElement.autoplay = !0), t.muted && this.mute(), t.poster && (this.videoElement.poster = t.poster), t.preload && (this.videoElement.preload = t.preload), t.subtitles && this.addSubtitleTracks(t.subtitles);
   }
   addSubtitleTracks(t) {
     t.forEach((e) => {
-      const i = document.createElement("track");
-      i.kind = "subtitles", i.label = e.label, i.src = e.src, i.srclang = e.srclang, e.default && (i.default = !0), this.videoElement.appendChild(i);
+      const n = document.createElement("track");
+      n.kind = "subtitles", n.label = e.label, n.src = e.src, n.srclang = e.srclang, e.default && (n.default = !0), this.videoElement.appendChild(n);
     });
   }
   createVideoElement() {
@@ -1211,31 +1211,31 @@ class $ {
   async loadSource(t) {
     var e;
     try {
-      const i = await this.s3Handler.processUrl(t);
-      if (p.isSupported()) {
-        const n = ((e = this.config.s3Config) == null ? void 0 : e.withCredentials) ?? !1, o = {
+      const n = await this.s3Handler.processUrl(t);
+      if (y.isSupported()) {
+        const i = ((e = this.config.s3Config) == null ? void 0 : e.withCredentials) ?? !1, o = {
           ...this.config.hlsConfig,
-          xhrSetup: (s, a) => {
+          xhrSetup: (s, r) => {
             var l;
-            n && (s.withCredentials = !0), (l = this.config.hlsConfig) != null && l.xhrSetup && this.config.hlsConfig.xhrSetup(s, a);
+            i && (s.withCredentials = !0), (l = this.config.hlsConfig) != null && l.xhrSetup && this.config.hlsConfig.xhrSetup(s, r);
           }
         };
-        this.hls = new p(o), this.hls.loadSource(i), this.hls.attachMedia(this.videoElement), this.hls.on(p.Events.MANIFEST_PARSED, (s, a) => {
-          const l = this.extractQualities(a.levels);
+        this.hls = new y(o), this.hls.loadSource(n), this.hls.attachMedia(this.videoElement), this.hls.on(y.Events.MANIFEST_PARSED, (s, r) => {
+          const l = this.extractQualities(r.levels);
           this.qualities = l;
-        }), this.hls.on(p.Events.LEVEL_SWITCHED, (s, a) => {
-          var u;
-          const l = (u = this.hls) == null ? void 0 : u.levels[a.level];
+        }), this.hls.on(y.Events.LEVEL_SWITCHED, (s, r) => {
+          var c;
+          const l = (c = this.hls) == null ? void 0 : c.levels[r.level];
           l && (this.state.quality = `${l.height}p`, this.emit("qualitychange", { quality: this.state.quality }));
-        }), this.hls.on(p.Events.ERROR, (s, a) => {
-          a.fatal && this.handleHlsError(a);
+        }), this.hls.on(y.Events.ERROR, (s, r) => {
+          r.fatal && this.handleHlsError(r);
         });
       } else if (this.videoElement.canPlayType("application/vnd.apple.mpegurl"))
-        this.videoElement.src = i;
+        this.videoElement.src = n;
       else
         throw new Error("HLS is not supported in this browser");
-    } catch (i) {
-      console.error("Failed to load video source:", i), this.emit("error", { error: i });
+    } catch (n) {
+      console.error("Failed to load video source:", n), this.emit("error", { error: n });
     }
   }
   extractQualities(t) {
@@ -1247,13 +1247,13 @@ class $ {
     }));
   }
   handleHlsError(t) {
-    var e, i;
+    var e, n;
     switch (t.type) {
-      case p.ErrorTypes.NETWORK_ERROR:
+      case y.ErrorTypes.NETWORK_ERROR:
         console.error("Network error occurred"), (e = this.hls) == null || e.startLoad();
         break;
-      case p.ErrorTypes.MEDIA_ERROR:
-        console.error("Media error occurred"), (i = this.hls) == null || i.recoverMediaError();
+      case y.ErrorTypes.MEDIA_ERROR:
+        console.error("Media error occurred"), (n = this.hls) == null || n.recoverMediaError();
         break;
       default:
         console.error("Fatal error occurred:", t), this.destroy();
@@ -1342,8 +1342,8 @@ class $ {
    */
   enableSubtitles(t) {
     const e = this.videoElement.textTracks;
-    for (let i = 0; i < e.length; i++)
-      e[i].mode = i === t ? "showing" : "hidden";
+    for (let n = 0; n < e.length; n++)
+      e[n].mode = n === t ? "showing" : "hidden";
   }
   /**
    * Disable all subtitles
@@ -1358,7 +1358,7 @@ class $ {
    */
   toggleSubtitles() {
     const t = this.videoElement.textTracks;
-    return Array.from(t).some((i) => i.mode === "showing") ? (this.disableSubtitles(), !1) : t.length > 0 ? (this.enableSubtitles(0), !0) : !1;
+    return Array.from(t).some((n) => n.mode === "showing") ? (this.disableSubtitles(), !1) : t.length > 0 ? (this.enableSubtitles(0), !0) : !1;
   }
   /**
    * Get available subtitle tracks
@@ -1377,30 +1377,38 @@ class $ {
     this.eventListeners.has(t) || this.eventListeners.set(t, /* @__PURE__ */ new Set()), this.eventListeners.get(t).add(e);
   }
   off(t, e) {
-    var i;
-    (i = this.eventListeners.get(t)) == null || i.delete(e);
+    var n;
+    (n = this.eventListeners.get(t)) == null || n.delete(e);
   }
   emit(t, e) {
-    var n;
-    const i = {
+    var i;
+    const n = {
       type: t,
       data: e,
       timestamp: Date.now()
     };
-    (n = this.eventListeners.get(t)) == null || n.forEach((o) => {
-      o(i);
+    (i = this.eventListeners.get(t)) == null || i.forEach((o) => {
+      o(n);
     });
   }
+  /**
+   * Update video source without recreating the entire player
+   * This is more efficient than destroying and recreating the player
+   * @param src - New video source URL
+   */
+  async updateSource(t) {
+    this.pause(), this.state.currentTime = 0, this.state.ended = !1, this.state.buffering = !1, this.hls && (this.hls.destroy(), this.hls = null), this.config.src = t, await this.loadSource(t), this.emit("sourcechange", { src: t });
+  }
   destroy() {
     this.hls && (this.hls.destroy(), this.hls = null), this.uiController.destroy(), this.videoElement.remove(), this.eventListeners.clear(), this.analytics.destroy();
   }
 }
-class G {
+class X {
   constructor(t) {
-    r(this, "file");
-    r(this, "videoElement", null);
-    r(this, "audioContext", null);
-    r(this, "info", null);
+    a(this, "file");
+    a(this, "videoElement", null);
+    a(this, "audioContext", null);
+    a(this, "info", null);
     if (!this.isVideoFile(t))
       throw new Error(`Invalid file type: ${t.type}. Expected a video file.`);
     this.file = t;
@@ -1411,8 +1419,8 @@ class G {
   isVideoFile(t) {
     if (t.type.startsWith("video/"))
       return !0;
-    const e = [".mp4", ".webm", ".ogg", ".mov", ".avi", ".mkv", ".flv", ".wmv", ".m4v", ".3gp", ".ts", ".m3u8"], i = t.name.toLowerCase();
-    return e.some((n) => i.endsWith(n));
+    const e = [".mp4", ".webm", ".ogg", ".mov", ".avi", ".mkv", ".flv", ".wmv", ".m4v", ".3gp", ".ts", ".m3u8"], n = t.name.toLowerCase();
+    return e.some((i) => n.endsWith(i));
   }
   /**
    * Extract video metadata
@@ -1421,42 +1429,42 @@ class G {
     return new Promise((t, e) => {
       try {
         this.videoElement = document.createElement("video"), this.videoElement.preload = "metadata", this.videoElement.muted = !0;
-        const i = URL.createObjectURL(this.file);
+        const n = URL.createObjectURL(this.file);
         this.videoElement.onloadedmetadata = async () => {
           try {
             if (!this.videoElement) {
               e(new Error("Video element not initialized"));
               return;
             }
-            const n = this.videoElement.videoWidth, o = this.videoElement.videoHeight, s = this.videoElement.duration, a = this.calculateAspectRatio(n, o), l = this.file.size, u = this.formatBytes(l), m = this.formatDuration(s), f = this.getFileExtension(this.file.name), y = s > 0 ? Math.round(l * 8 / s / 1e3) : void 0, v = await this.detectFrameRate(), g = await this.detectAudioInfo(i);
+            const i = this.videoElement.videoWidth, o = this.videoElement.videoHeight, s = this.videoElement.duration, r = this.calculateAspectRatio(i, o), l = this.file.size, c = this.formatBytes(l), d = this.formatDuration(s), m = this.getFileExtension(this.file.name), h = s > 0 ? Math.round(l * 8 / s / 1e3) : void 0, b = await this.detectFrameRate(), w = await this.detectAudioInfo(n);
             this.info = {
-              width: n,
+              width: i,
               height: o,
-              aspectRatio: a,
+              aspectRatio: r,
               size: l,
               sizeInBytes: l,
               // raw value alias
-              sizeFormatted: u,
+              sizeFormatted: c,
               duration: s,
               durationInSeconds: s,
               // raw value alias
-              durationFormatted: m,
+              durationFormatted: d,
               mimeType: this.file.type || "video/unknown",
               fileName: this.file.name,
-              fileExtension: f,
-              bitrate: y,
-              frameRate: v,
-              audioChannels: g.channels,
-              hasAudio: g.hasAudio
-            }, URL.revokeObjectURL(i), this.videoElement.remove(), t(this.info);
-          } catch (n) {
-            URL.revokeObjectURL(i), e(n);
+              fileExtension: m,
+              bitrate: h,
+              frameRate: b,
+              audioChannels: w.channels,
+              hasAudio: w.hasAudio
+            }, URL.revokeObjectURL(n), this.videoElement.remove(), t(this.info);
+          } catch (i) {
+            URL.revokeObjectURL(n), e(i);
           }
         }, this.videoElement.onerror = () => {
-          URL.revokeObjectURL(i), e(new Error(`Failed to load video file: ${this.file.name}`));
-        }, this.videoElement.src = i;
-      } catch (i) {
-        e(i);
+          URL.revokeObjectURL(n), e(new Error(`Failed to load video file: ${this.file.name}`));
+        }, this.videoElement.src = n;
+      } catch (n) {
+        e(n);
       }
     });
   }
@@ -1464,8 +1472,8 @@ class G {
    * Calculate aspect ratio (e.g., "16:9", "4:3")
    */
   calculateAspectRatio(t, e) {
-    const i = this.getGCD(t, e), n = t / i, o = e / i, s = n / o;
-    return Math.abs(s - 16 / 9) < 0.01 ? "16:9" : Math.abs(s - 4 / 3) < 0.01 ? "4:3" : Math.abs(s - 21 / 9) < 0.01 ? "21:9" : Math.abs(s - 1) < 0.01 ? "1:1" : `${n}:${o}`;
+    const n = this.getGCD(t, e), i = t / n, o = e / n, s = i / o;
+    return Math.abs(s - 16 / 9) < 0.01 ? "16:9" : Math.abs(s - 4 / 3) < 0.01 ? "4:3" : Math.abs(s - 21 / 9) < 0.01 ? "21:9" : Math.abs(s - 1) < 0.01 ? "1:1" : `${i}:${o}`;
   }
   /**
    * Detect frame rate by analyzing video playback
@@ -1474,19 +1482,19 @@ class G {
     if (this.videoElement)
       try {
         return "requestVideoFrameCallback" in this.videoElement ? new Promise((t) => {
-          let e = 0, i = 0;
-          const n = 10, o = (s, a) => {
+          let e = 0, n = 0;
+          const i = 10, o = (s, r) => {
             if (!this.videoElement) {
               t(void 0);
               return;
             }
             if (e++, e === 1)
-              i = s, this.videoElement.requestVideoFrameCallback(o);
-            else if (e < n)
+              n = s, this.videoElement.requestVideoFrameCallback(o);
+            else if (e < i)
               this.videoElement.requestVideoFrameCallback(o);
             else {
-              const l = (s - i) / 1e3, u = Math.round((e - 1) / l);
-              t(u);
+              const l = (s - n) / 1e3, c = Math.round((e - 1) / l);
+              t(c);
             }
           };
           this.videoElement ? (this.videoElement.currentTime = 1, this.videoElement.play().catch(() => t(void 0)), this.videoElement.requestVideoFrameCallback(o)) : t(void 0);
@@ -1505,10 +1513,10 @@ class G {
       if (!(this.videoElement.mozHasAudio || (this.videoElement.webkitAudioDecodedByteCount ?? 0) > 0 || (((e = this.videoElement.audioTracks) == null ? void 0 : e.length) ?? 0) > 0))
         return { hasAudio: !1 };
       try {
-        const n = window.AudioContext || window.webkitAudioContext;
-        if (!n)
+        const i = window.AudioContext || window.webkitAudioContext;
+        if (!i)
           return { hasAudio: !0 };
-        this.audioContext = new n();
+        this.audioContext = new i();
         const o = this.audioContext.createMediaElementSource(this.videoElement), s = this.audioContext.createAnalyser();
         return o.connect(s), s.connect(this.audioContext.destination), { hasAudio: !0, channels: o.channelCount };
       } catch {
@@ -1529,16 +1537,16 @@ class G {
    */
   formatBytes(t) {
     if (t === 0) return "0 Bytes";
-    const e = 1024, i = ["Bytes", "KB", "MB", "GB", "TB"], n = Math.floor(Math.log(t) / Math.log(e));
-    return `${parseFloat((t / Math.pow(e, n)).toFixed(2))} ${i[n]}`;
+    const e = 1024, n = ["Bytes", "KB", "MB", "GB", "TB"], i = Math.floor(Math.log(t) / Math.log(e));
+    return `${parseFloat((t / Math.pow(e, i)).toFixed(2))} ${n[i]}`;
   }
   /**
    * Format duration to HH:MM:SS
    */
   formatDuration(t) {
     if (!isFinite(t) || t < 0) return "00:00";
-    const e = Math.floor(t / 3600), i = Math.floor(t % 3600 / 60), n = Math.floor(t % 60);
-    return e > 0 ? `${e.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}:${n.toString().padStart(2, "0")}` : `${i.toString().padStart(2, "0")}:${n.toString().padStart(2, "0")}`;
+    const e = Math.floor(t / 3600), n = Math.floor(t % 3600 / 60), i = Math.floor(t % 60);
+    return e > 0 ? `${e.toString().padStart(2, "0")}:${n.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}` : `${n.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}`;
   }
   /**
    * Get file extension
@@ -1630,115 +1638,213 @@ class G {
     }), this.audioContext = null), this.info = null;
   }
 }
-const K = (c) => {
+const tt = (u) => {
   const {
     src: t,
     autoplay: e,
-    muted: i,
-    controls: n = !0,
+    muted: n,
+    controls: i = !0,
     poster: o,
     preload: s,
-    theme: a,
+    theme: r,
     s3Config: l,
-    analytics: u,
-    hlsConfig: m,
-    subtitles: f,
-    stickyControls: y,
-    onReady: v,
-    onPlay: g,
-    onPause: C,
-    onEnded: L,
-    onTimeUpdate: T,
-    onVolumeChange: I,
-    onError: A,
-    onLoadedMetadata: R,
-    onQualityChange: M,
-    style: D,
-    className: O,
-    width: w = "100%",
-    height: b = "500px"
-  } = c, k = E(null), q = E(null);
-  return x(() => {
-    if (!k.current) return;
-    const U = {
+    analytics: c,
+    hlsConfig: d,
+    subtitles: m,
+    stickyControls: h,
+    onReady: b,
+    onPlay: w,
+    onPause: I,
+    onEnded: T,
+    onTimeUpdate: A,
+    onVolumeChange: R,
+    onError: M,
+    onLoadedMetadata: q,
+    onQualityChange: F,
+    style: V,
+    className: H,
+    width: P = "100%",
+    height: B = "500px"
+  } = u, f = E(null), x = E(null);
+  return S(() => {
+    if (!f.current) return;
+    if (f.current) {
+      const g = f.current.querySelectorAll(".wontum-player-video"), C = f.current.querySelectorAll(".wontum-controls"), W = f.current.querySelectorAll(".wontum-progress-container");
+      g.forEach((k) => k.remove()), C.forEach((k) => k.remove()), W.forEach((k) => k.remove());
+    }
+    const N = {
       src: t,
-      container: k.current,
+      container: f.current,
       autoplay: e,
-      muted: i,
-      controls: n,
+      muted: n,
+      controls: i,
       poster: o,
       preload: s,
-      theme: a,
+      theme: r,
       s3Config: l,
-      analytics: u,
-      hlsConfig: m,
-      subtitles: f,
-      stickyControls: y
-    }, d = new $(U);
-    return q.current = d, g && d.on("play", g), C && d.on("pause", C), L && d.on("ended", L), A && d.on("error", (h) => {
-      var F;
-      return A((F = h.data) == null ? void 0 : F.error);
-    }), R && d.on("loadedmetadata", R), M && d.on("qualitychange", (h) => M(h.data.level)), T && d.on("timeupdate", (h) => T(h.data.currentTime)), I && d.on("volumechange", (h) => I(h.data.volume, h.data.muted)), v && v(d), () => {
-      d.destroy(), q.current = null;
+      analytics: c,
+      hlsConfig: d,
+      subtitles: m,
+      stickyControls: h
+    }, p = new D(N);
+    return x.current = p, w && p.on("play", w), I && p.on("pause", I), T && p.on("ended", T), M && p.on("error", (g) => {
+      var C;
+      return M((C = g.data) == null ? void 0 : C.error);
+    }), q && p.on("loadedmetadata", q), F && p.on("qualitychange", (g) => F(g.data.level)), A && p.on("timeupdate", (g) => A(g.data.currentTime)), R && p.on("volumechange", (g) => R(g.data.volume, g.data.muted)), b && b(p), () => {
+      x.current && (x.current.destroy(), x.current = null);
     };
-  }, [t]), /* @__PURE__ */ P(
+  }, [
+    t,
+    e,
+    n,
+    i,
+    o,
+    s,
+    r,
+    l,
+    c,
+    d,
+    m,
+    h,
+    w,
+    I,
+    T,
+    M,
+    q,
+    F,
+    A,
+    R,
+    b
+  ]), /* @__PURE__ */ $(
     "div",
     {
-      ref: k,
-      className: O,
+      ref: f,
+      className: H,
       style: {
-        width: typeof w == "number" ? `${w}px` : w,
-        height: typeof b == "number" ? `${b}px` : b,
-        ...D
+        width: typeof P == "number" ? `${P}px` : P,
+        height: typeof B == "number" ? `${B}px` : B,
+        ...V
       }
     }
   );
-}, J = (c) => {
-  const [t, e] = S(null), [i, n] = S(null), o = E(null);
-  return x(() => {
+}, et = (u) => {
+  const [t, e] = v(null), [n, i] = v(null), o = E(null);
+  return S(() => {
     if (!o.current) return;
-    const s = new $({
-      ...c,
+    const s = new D({
+      ...u,
       container: o.current
     });
     e(s);
-    const a = () => {
-      n(s.getState());
+    const r = () => {
+      i(s.getState());
     };
-    return s.on("play", a), s.on("pause", a), s.on("timeupdate", a), s.on("volumechange", a), s.on("loadedmetadata", a), () => {
+    return s.on("play", r), s.on("pause", r), s.on("timeupdate", r), s.on("volumechange", r), s.on("loadedmetadata", r), () => {
       s.destroy();
     };
-  }, [c.src]), {
+  }, [u.src]), {
     containerRef: o,
     player: t,
-    state: i
+    state: n
   };
-}, z = B.createContext({
+}, U = z.createContext({
   player: null,
   state: null
-}), Z = (c) => {
-  const { player: t, children: e } = c, [i, n] = S(t.getState());
-  return x(() => {
+}), nt = (u) => {
+  const { player: t, children: e } = u, [n, i] = v(t.getState());
+  return S(() => {
     const o = () => {
-      n(t.getState());
+      i(t.getState());
     };
     return t.on("play", o), t.on("pause", o), t.on("timeupdate", o), t.on("volumechange", o), t.on("loadedmetadata", o), () => {
     };
-  }, [t]), /* @__PURE__ */ P(z.Provider, { value: { player: t, state: i }, children: e });
-}, tt = () => {
-  const c = B.useContext(z);
-  if (!c.player)
+  }, [t]), /* @__PURE__ */ $(U.Provider, { value: { player: t, state: n }, children: e });
+}, it = () => {
+  const u = z.useContext(U);
+  if (!u.player)
     throw new Error("useWontumPlayerContext must be used within WontumPlayerProvider");
-  return c;
+  return u;
+}, ot = (u) => {
+  const [t, e] = v(null), [n, i] = v(!1), [o, s] = v(null), r = E(null), l = L(async () => {
+    if (!u) {
+      e(null), s(null), i(!1);
+      return;
+    }
+    i(!0), s(null);
+    try {
+      r.current && (r.current.destroy(), r.current = null);
+      const c = new X(u);
+      r.current = c;
+      const d = await c.extract();
+      e(d), s(null);
+    } catch (c) {
+      const d = c instanceof Error ? c.message : "Failed to extract video information";
+      s(d), e(null);
+    } finally {
+      i(!1);
+    }
+  }, [u]);
+  return S(() => (l(), () => {
+    r.current && (r.current.destroy(), r.current = null);
+  }), [l]), { info: t, loading: n, error: o, refetch: l };
+}, st = (u) => {
+  const t = E(null), [e, n] = v(!1), [i, o] = v("");
+  S(() => {
+    const c = new O(u);
+    if (t.current = c, o(c.getMetrics().sessionId), u != null && u.webSocket) {
+      const d = setInterval(() => {
+        if (!t.current) {
+          n(!1);
+          return;
+        }
+        const m = u.webSocket;
+        if (m && "type" in m && m.type === "websocket") {
+          const h = t.current.webSocket;
+          n((h == null ? void 0 : h.readyState) === WebSocket.OPEN);
+        } else if (m && "type" in m && m.type === "socket.io") {
+          const h = t.current.socketIO;
+          n((h == null ? void 0 : h.connected) ?? !1);
+        } else if (m) {
+          const h = t.current.webSocket;
+          n((h == null ? void 0 : h.readyState) === WebSocket.OPEN);
+        }
+      }, 1e3);
+      return () => {
+        clearInterval(d), t.current && (t.current.destroy(), t.current = null);
+      };
+    }
+    return () => {
+      t.current && (t.current.destroy(), t.current = null);
+    };
+  }, [u]);
+  const s = L((c, d) => {
+    var m;
+    (m = t.current) == null || m.trackEvent(c, d);
+  }, []), r = L(() => {
+    var c;
+    return ((c = t.current) == null ? void 0 : c.getEvents()) ?? [];
+  }, []), l = L(() => {
+    var c;
+    return ((c = t.current) == null ? void 0 : c.getMetrics()) ?? {};
+  }, []);
+  return {
+    trackEvent: s,
+    getEvents: r,
+    getMetrics: l,
+    connected: e,
+    sessionId: i
+  };
 };
 export {
-  N as Analytics,
-  _ as S3Handler,
-  W as UIController,
-  G as WontumFileInfo,
-  $ as WontumPlayer,
-  Z as WontumPlayerProvider,
-  K as WontumPlayerReact,
-  J as useWontumPlayer,
-  tt as useWontumPlayerContext
+  O as Analytics,
+  Y as S3Handler,
+  Q as UIController,
+  X as WontumFileInfo,
+  D as WontumPlayer,
+  nt as WontumPlayerProvider,
+  tt as WontumPlayerReact,
+  st as useAnalytics,
+  ot as useVideoFileInfo,
+  et as useWontumPlayer,
+  it as useWontumPlayerContext
 };