@obipascal/player 1.0.8 → 1.0.10

package/dist/wontum-player.esm.js

@@ -1,24 +1,32 @@
 var V = Object.defineProperty;
-var N = (c, t, e) => t in c ? V(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
-var o = (c, t, e) => N(c, typeof t != "symbol" ? t + "" : t, e);
+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 F } from "react/jsx-runtime";
-import * as $ from "react";
-import { useRef as b, useEffect as E, useState as k } from "react";
-class W {
+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 {
   constructor(t) {
-    o(this, "config");
-    o(this, "sessionId");
-    o(this, "events", []);
-    o(this, "sessionStartTime");
-    o(this, "playbackStartTime", null);
-    o(this, "totalPlayTime", 0);
-    o(this, "totalBufferTime", 0);
-    o(this, "bufferStartTime", null);
-    o(this, "rebufferCount", 0);
-    o(this, "seekCount", 0);
-    var e;
-    this.config = t, this.sessionId = (t == null ? void 0 : t.sessionId) || this.generateSessionId(), this.sessionStartTime = Date.now(), (e = this.config) != null && e.enabled && this.trackEvent("session_start", this.getSessionData());
+    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;
+    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();
+    }
+    (i = this.config) != null && i.enabled && this.trackEvent("session_start", this.getSessionData());
   }
   trackEvent(t, e = {}) {
     var n;
@@ -34,7 +42,7 @@ class W {
         ...this.getQoEMetrics()
       }
     };
-    this.events.push(i), this.updateMetrics(t, e), this.config.endpoint && this.sendEvent(i), process.env.NODE_ENV === "development" && console.log("[Analytics]", t, i.data);
+    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);
   }
   updateMetrics(t, e) {
     switch (t) {
@@ -104,6 +112,72 @@ class W {
   generateSessionId() {
     return `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
   }
+  async initializeSocketIO() {
+    var e;
+    if (!((e = this.config) != null && e.webSocket) || !("type" in this.config.webSocket)) return;
+    const t = this.config.webSocket;
+    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 || {});
+        } 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);
+        });
+      } catch (i) {
+        console.error("[Analytics Socket.IO] Failed to initialize:", i);
+      }
+  }
+  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);
+      }
+  }
+  initializeWebSocket() {
+    var e;
+    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) {
+          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);
+    }
+  }
+  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);
+      }
+  }
   getEvents() {
     return [...this.events];
   }
@@ -116,46 +190,46 @@ class W {
   }
   destroy() {
     var t;
-    (t = this.config) != null && t.enabled && this.trackEvent("session_end", this.getSessionData()), this.events = [];
+    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 j {
+class W {
   constructor(t, e) {
-    o(this, "container");
-    o(this, "player");
-    o(this, "controlsContainer");
-    o(this, "progressContainer");
-    o(this, "progressBar");
-    o(this, "playButton");
-    o(this, "skipBackwardButton");
-    o(this, "skipForwardButton");
-    o(this, "volumeButton");
-    o(this, "volumeContainer");
-    o(this, "fullscreenButton");
-    o(this, "pipButton");
-    o(this, "settingsButton");
+    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");
     // private timeDisplay: HTMLElement
-    o(this, "volumeSlider");
-    o(this, "progressInput");
+    r(this, "volumeSlider");
+    r(this, "progressInput");
     // private controlsVisible = true
-    o(this, "hideControlsTimeout", null);
-    o(this, "stickyControls", !1);
-    o(this, "isVolumeSliderActive", !1);
+    r(this, "hideControlsTimeout", null);
+    r(this, "stickyControls", !1);
+    r(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", s = e.fontFamily || "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", r = 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");
+    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 = `
       .wontum-player-container {
         position: relative;
         background: #000;
-        font-family: ${s};
+        font-family: ${o};
         overflow: hidden;
         --primary-color: ${i};
         --accent-color: ${n};
-        --controls-bg: ${r};
+        --controls-bg: ${s};
         --button-hover: ${a};
         --progress-height: ${l};
         --border-radius: ${u};
@@ -729,11 +803,11 @@ class j {
     }), this.skipForwardButton.addEventListener("click", () => {
       this.player.skipForward(10);
     }), this.progressInput.addEventListener("input", (i) => {
-      const n = i.target, s = parseFloat(n.value), r = this.player.getState(), a = s / 100 * r.duration;
+      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, s = parseFloat(n.value) / 100;
-      this.player.setVolume(s);
+      const n = i.target, o = parseFloat(n.value) / 100;
+      this.player.setVolume(o);
     }), this.volumeButton.addEventListener("click", () => {
       this.player.getState().muted ? this.player.unmute() : this.player.mute();
     }), this.volumeContainer.addEventListener("mouseenter", () => {
@@ -761,9 +835,9 @@ class j {
     const t = this.controlsContainer.querySelectorAll(".wontum-tab");
     t.forEach((i) => {
       i.addEventListener("click", (n) => {
-        const s = n.currentTarget, r = s.getAttribute("data-tab");
-        t.forEach((u) => u.classList.remove("active")), s.classList.add("active"), this.controlsContainer.querySelectorAll(".wontum-tab-panel").forEach((u) => u.classList.remove("active"));
-        const l = this.controlsContainer.querySelector(`[data-panel="${r}"]`);
+        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"));
+        const l = this.controlsContainer.querySelector(`[data-panel="${s}"]`);
         l == null || l.classList.add("active");
       });
     }), this.player.getVideoElement().addEventListener("click", () => {
@@ -782,8 +856,8 @@ class j {
     }), this.player.on("timeupdate", (t) => {
       const { currentTime: e } = t.data, i = this.player.getState();
       if (i.duration > 0) {
-        const s = e / i.duration * 100;
-        this.progressBar.style.width = `${s}%`, this.progressInput.value = s.toString();
+        const o = e / i.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);
@@ -811,30 +885,30 @@ class j {
     t.innerHTML = `
       <div class="wontum-subtitle-option ${i === -1 ? "active" : ""}" data-track="-1">Off</div>
       ${e.map(
-      (n, s) => `
-        <div class="wontum-subtitle-option ${s === i ? "active" : ""}" data-track="${s}">
-          ${n.label || n.language || `Track ${s + 1}`}
+      (n, o) => `
+        <div class="wontum-subtitle-option ${o === i ? "active" : ""}" data-track="${o}">
+          ${n.label || n.language || `Track ${o + 1}`}
         </div>
       `
     ).join("")}
     `, t.querySelectorAll(".wontum-subtitle-option").forEach((n) => {
-      n.addEventListener("click", (s) => {
-        const r = s.target, a = parseInt(r.dataset.track || "-1");
-        a === -1 ? this.player.disableSubtitles() : this.player.enableSubtitles(a), t.querySelectorAll(".wontum-subtitle-option").forEach((l) => l.classList.remove("active")), r.classList.add("active");
+      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");
       });
     });
   }
   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(
-      (s) => `
-        <div class="wontum-speed-option ${i === s ? "active" : ""}" data-speed="${s}">
-          ${s === 1 ? "Normal" : s + "x"}
+      (o) => `
+        <div class="wontum-speed-option ${i === o ? "active" : ""}" data-speed="${o}">
+          ${o === 1 ? "Normal" : o + "x"}
         </div>
       `
-    ).join(""), t.querySelectorAll(".wontum-speed-option").forEach((s) => {
-      s.addEventListener("click", (r) => {
-        const a = r.target, l = parseFloat(a.dataset.speed || "1");
+    ).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");
       });
     });
@@ -861,14 +935,14 @@ class j {
     e.innerHTML = `
       <div class="wontum-quality-option active" data-quality="-1">Auto</div>
       ${i.map(
-      (n, s) => `
-        <div class="wontum-quality-option" data-quality="${s}">${n.name}</div>
+      (n, o) => `
+        <div class="wontum-quality-option" data-quality="${o}">${n.name}</div>
       `
     ).join("")}
     `, e.querySelectorAll(".wontum-quality-option").forEach((n) => {
-      n.addEventListener("click", (s) => {
-        const r = s.target, a = parseInt(r.dataset.quality || "-1");
-        this.player.setQuality(a), e.querySelectorAll(".wontum-quality-option").forEach((l) => l.classList.remove("active")), r.classList.add("active");
+      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");
       });
     });
   }
@@ -933,11 +1007,11 @@ class j {
     this.hideControlsTimeout && clearTimeout(this.hideControlsTimeout), this.controlsContainer.remove();
   }
 }
-class Q {
+class _ {
   constructor(t) {
-    o(this, "config");
-    o(this, "urlCache", /* @__PURE__ */ new Map());
-    o(this, "signedUrls", /* @__PURE__ */ new Set());
+    r(this, "config");
+    r(this, "urlCache", /* @__PURE__ */ new Map());
+    r(this, "signedUrls", /* @__PURE__ */ new Set());
     this.config = t;
   }
   /**
@@ -971,15 +1045,15 @@ class Q {
    * The endpoint should set signed cookies and return the URL
    */
   async signCloudFrontUrl(t, e = 0) {
-    var s, r;
+    var o, s;
     if (this.signedUrls.has(t))
       return t;
-    if ((s = this.config) != null && s.signUrl)
+    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" || ((r = a == null ? void 0 : a.message) == null ? void 0 : r.includes("aborted"));
+        const l = (a == null ? void 0 : a.name) === "AbortError" || ((s = a == null ? void 0 : a.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(
@@ -1010,13 +1084,13 @@ class Q {
       return i.url;
     if ((n = this.config) != null && n.getPresignedUrl)
       try {
-        const s = await this.config.getPresignedUrl(e);
+        const o = await this.config.getPresignedUrl(e);
         return this.urlCache.set(e, {
-          url: s,
+          url: o,
           expiresAt: Date.now() + 50 * 60 * 1e3
-        }), s;
-      } catch (s) {
-        throw console.error("Failed to generate presigned URL:", s), new Error("Failed to generate presigned URL for S3 object");
+        }), o;
+      } catch (o) {
+        throw console.error("Failed to generate presigned URL:", o), new Error("Failed to generate presigned URL for S3 object");
       }
     return console.warn("No getPresignedUrl function provided. Using direct S3 URL (requires public bucket)"), t;
   }
@@ -1042,18 +1116,18 @@ class Q {
     this.urlCache.clear(), this.signedUrls.clear();
   }
 }
-class A {
+class $ {
   constructor(t) {
-    o(this, "container");
-    o(this, "videoElement");
-    o(this, "hls", null);
-    o(this, "config");
-    o(this, "eventListeners", /* @__PURE__ */ new Map());
-    o(this, "analytics");
-    o(this, "s3Handler");
-    o(this, "uiController");
-    o(this, "qualities", []);
-    o(this, "state", {
+    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", {
       playing: !1,
       paused: !0,
       ended: !1,
@@ -1069,7 +1143,7 @@ class A {
     });
     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 W(t.analytics), this.s3Handler = new Q(t.s3Config), this.videoElement = this.createVideoElement(), this.container.appendChild(this.videoElement), this.uiController = new j(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 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);
   }
   addSubtitleTracks(t) {
     t.forEach((e) => {
@@ -1139,21 +1213,21 @@ class A {
     try {
       const i = await this.s3Handler.processUrl(t);
       if (p.isSupported()) {
-        const n = ((e = this.config.s3Config) == null ? void 0 : e.withCredentials) ?? !1, s = {
+        const n = ((e = this.config.s3Config) == null ? void 0 : e.withCredentials) ?? !1, o = {
           ...this.config.hlsConfig,
-          xhrSetup: (r, a) => {
+          xhrSetup: (s, a) => {
             var l;
-            n && (r.withCredentials = !0), (l = this.config.hlsConfig) != null && l.xhrSetup && this.config.hlsConfig.xhrSetup(r, a);
+            n && (s.withCredentials = !0), (l = this.config.hlsConfig) != null && l.xhrSetup && this.config.hlsConfig.xhrSetup(s, a);
           }
         };
-        this.hls = new p(s), this.hls.loadSource(i), this.hls.attachMedia(this.videoElement), this.hls.on(p.Events.MANIFEST_PARSED, (r, a) => {
+        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.qualities = l;
-        }), this.hls.on(p.Events.LEVEL_SWITCHED, (r, a) => {
+        }), this.hls.on(p.Events.LEVEL_SWITCHED, (s, a) => {
           var u;
           const l = (u = this.hls) == null ? void 0 : u.levels[a.level];
           l && (this.state.quality = `${l.height}p`, this.emit("qualitychange", { quality: this.state.quality }));
-        }), this.hls.on(p.Events.ERROR, (r, a) => {
+        }), this.hls.on(p.Events.ERROR, (s, a) => {
           a.fatal && this.handleHlsError(a);
         });
       } else if (this.videoElement.canPlayType("application/vnd.apple.mpegurl"))
@@ -1313,8 +1387,8 @@ class A {
       data: e,
       timestamp: Date.now()
     };
-    (n = this.eventListeners.get(t)) == null || n.forEach((s) => {
-      s(i);
+    (n = this.eventListeners.get(t)) == null || n.forEach((o) => {
+      o(i);
     });
   }
   destroy() {
@@ -1323,9 +1397,10 @@ class A {
 }
 class G {
   constructor(t) {
-    o(this, "file");
-    o(this, "videoElement", null);
-    o(this, "info", null);
+    r(this, "file");
+    r(this, "videoElement", null);
+    r(this, "audioContext", null);
+    r(this, "info", null);
     if (!this.isVideoFile(t))
       throw new Error(`Invalid file type: ${t.type}. Expected a video file.`);
     this.file = t;
@@ -1347,29 +1422,32 @@ class G {
       try {
         this.videoElement = document.createElement("video"), this.videoElement.preload = "metadata", this.videoElement.muted = !0;
         const i = URL.createObjectURL(this.file);
-        this.videoElement.onloadedmetadata = () => {
+        this.videoElement.onloadedmetadata = async () => {
           try {
             if (!this.videoElement) {
               e(new Error("Video element not initialized"));
               return;
             }
-            const n = this.videoElement.videoWidth, s = this.videoElement.videoHeight, r = this.videoElement.duration, a = this.calculateAspectRatio(n, s), l = this.file.size, u = this.formatBytes(l), m = this.formatDuration(r), g = this.getFileExtension(this.file.name), v = r > 0 ? Math.round(l * 8 / r / 1e3) : void 0;
+            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);
             this.info = {
               width: n,
-              height: s,
+              height: o,
               aspectRatio: a,
               size: l,
               sizeInBytes: l,
               // raw value alias
               sizeFormatted: u,
-              duration: r,
-              durationInSeconds: r,
+              duration: s,
+              durationInSeconds: s,
               // raw value alias
               durationFormatted: m,
               mimeType: this.file.type || "video/unknown",
               fileName: this.file.name,
-              fileExtension: g,
-              bitrate: v
+              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);
@@ -1386,8 +1464,59 @@ class G {
    * Calculate aspect ratio (e.g., "16:9", "4:3")
    */
   calculateAspectRatio(t, e) {
-    const i = this.getGCD(t, e), n = t / i, s = e / i, r = n / s;
-    return Math.abs(r - 16 / 9) < 0.01 ? "16:9" : Math.abs(r - 4 / 3) < 0.01 ? "4:3" : Math.abs(r - 21 / 9) < 0.01 ? "21:9" : Math.abs(r - 1) < 0.01 ? "1:1" : `${n}:${s}`;
+    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}`;
+  }
+  /**
+   * Detect frame rate by analyzing video playback
+   */
+  async detectFrameRate() {
+    if (this.videoElement)
+      try {
+        return "requestVideoFrameCallback" in this.videoElement ? new Promise((t) => {
+          let e = 0, i = 0;
+          const n = 10, o = (s, a) => {
+            if (!this.videoElement) {
+              t(void 0);
+              return;
+            }
+            if (e++, e === 1)
+              i = s, this.videoElement.requestVideoFrameCallback(o);
+            else if (e < n)
+              this.videoElement.requestVideoFrameCallback(o);
+            else {
+              const l = (s - i) / 1e3, u = Math.round((e - 1) / l);
+              t(u);
+            }
+          };
+          this.videoElement ? (this.videoElement.currentTime = 1, this.videoElement.play().catch(() => t(void 0)), this.videoElement.requestVideoFrameCallback(o)) : t(void 0);
+        }) : void 0;
+      } catch {
+        return;
+      }
+  }
+  /**
+   * Detect audio channel information using Web Audio API
+   */
+  async detectAudioInfo(t) {
+    var e;
+    if (!this.videoElement) return { hasAudio: !1 };
+    try {
+      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)
+          return { hasAudio: !0 };
+        this.audioContext = new n();
+        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 {
+        return { hasAudio: !0 };
+      }
+    } catch {
+      return { hasAudio: !1 };
+    }
   }
   /**
    * Get Greatest Common Divisor
@@ -1470,6 +1599,18 @@ class G {
     var t;
     return (t = this.info) == null ? void 0 : t.bitrate;
   }
+  get frameRate() {
+    var t;
+    return (t = this.info) == null ? void 0 : t.frameRate;
+  }
+  get audioChannels() {
+    var t;
+    return (t = this.info) == null ? void 0 : t.audioChannels;
+  }
+  get hasAudio() {
+    var t;
+    return ((t = this.info) == null ? void 0 : t.hasAudio) || !1;
+  }
   get quality() {
     if (!this.info) return "unknown";
     const t = this.info.height;
@@ -1485,7 +1626,8 @@ class G {
    * Clean up resources
    */
   destroy() {
-    this.videoElement && (this.videoElement.remove(), this.videoElement = null), this.info = null;
+    this.videoElement && (this.videoElement.pause(), this.videoElement.remove(), this.videoElement = null), this.audioContext && (this.audioContext.close().catch(() => {
+    }), this.audioContext = null), this.info = null;
   }
 }
 const K = (c) => {
@@ -1494,107 +1636,107 @@ const K = (c) => {
     autoplay: e,
     muted: i,
     controls: n = !0,
-    poster: s,
-    preload: r,
+    poster: o,
+    preload: s,
     theme: a,
     s3Config: l,
     analytics: u,
     hlsConfig: m,
-    subtitles: g,
-    stickyControls: v,
-    onReady: x,
-    onPlay: S,
+    subtitles: f,
+    stickyControls: y,
+    onReady: v,
+    onPlay: g,
     onPause: C,
     onEnded: L,
     onTimeUpdate: T,
     onVolumeChange: I,
-    onError: M,
-    onLoadedMetadata: q,
-    onQualityChange: P,
-    style: U,
-    className: D,
-    width: f = "100%",
-    height: w = "500px"
-  } = c, y = b(null), B = b(null);
-  return E(() => {
-    if (!y.current) return;
-    const H = {
+    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 = {
       src: t,
-      container: y.current,
+      container: k.current,
       autoplay: e,
       muted: i,
       controls: n,
-      poster: s,
-      preload: r,
+      poster: o,
+      preload: s,
       theme: a,
       s3Config: l,
       analytics: u,
       hlsConfig: m,
-      subtitles: g,
-      stickyControls: v
-    }, d = new A(H);
-    return B.current = d, S && d.on("play", S), C && d.on("pause", C), L && d.on("ended", L), M && d.on("error", (h) => {
-      var R;
-      return M((R = h.data) == null ? void 0 : R.error);
-    }), q && d.on("loadedmetadata", q), P && d.on("qualitychange", (h) => P(h.data.level)), T && d.on("timeupdate", (h) => T(h.data.currentTime)), I && d.on("volumechange", (h) => I(h.data.volume, h.data.muted)), x && x(d), () => {
-      d.destroy(), B.current = null;
+      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;
     };
-  }, [t]), /* @__PURE__ */ F(
+  }, [t]), /* @__PURE__ */ P(
     "div",
     {
-      ref: y,
-      className: D,
+      ref: k,
+      className: O,
       style: {
-        width: typeof f == "number" ? `${f}px` : f,
-        height: typeof w == "number" ? `${w}px` : w,
-        ...U
+        width: typeof w == "number" ? `${w}px` : w,
+        height: typeof b == "number" ? `${b}px` : b,
+        ...D
       }
     }
   );
 }, J = (c) => {
-  const [t, e] = k(null), [i, n] = k(null), s = b(null);
-  return E(() => {
-    if (!s.current) return;
-    const r = new A({
+  const [t, e] = S(null), [i, n] = S(null), o = E(null);
+  return x(() => {
+    if (!o.current) return;
+    const s = new $({
       ...c,
-      container: s.current
+      container: o.current
     });
-    e(r);
+    e(s);
     const a = () => {
-      n(r.getState());
+      n(s.getState());
     };
-    return r.on("play", a), r.on("pause", a), r.on("timeupdate", a), r.on("volumechange", a), r.on("loadedmetadata", a), () => {
-      r.destroy();
+    return s.on("play", a), s.on("pause", a), s.on("timeupdate", a), s.on("volumechange", a), s.on("loadedmetadata", a), () => {
+      s.destroy();
     };
   }, [c.src]), {
-    containerRef: s,
+    containerRef: o,
     player: t,
     state: i
   };
-}, z = $.createContext({
+}, z = B.createContext({
   player: null,
   state: null
 }), Z = (c) => {
-  const { player: t, children: e } = c, [i, n] = k(t.getState());
-  return E(() => {
-    const s = () => {
+  const { player: t, children: e } = c, [i, n] = S(t.getState());
+  return x(() => {
+    const o = () => {
       n(t.getState());
     };
-    return t.on("play", s), t.on("pause", s), t.on("timeupdate", s), t.on("volumechange", s), t.on("loadedmetadata", s), () => {
+    return t.on("play", o), t.on("pause", o), t.on("timeupdate", o), t.on("volumechange", o), t.on("loadedmetadata", o), () => {
     };
-  }, [t]), /* @__PURE__ */ F(z.Provider, { value: { player: t, state: i }, children: e });
+  }, [t]), /* @__PURE__ */ P(z.Provider, { value: { player: t, state: i }, children: e });
 }, tt = () => {
-  const c = $.useContext(z);
+  const c = B.useContext(z);
   if (!c.player)
     throw new Error("useWontumPlayerContext must be used within WontumPlayerProvider");
   return c;
 };
 export {
-  W as Analytics,
-  Q as S3Handler,
-  j as UIController,
+  N as Analytics,
+  _ as S3Handler,
+  W as UIController,
   G as WontumFileInfo,
-  A as WontumPlayer,
+  $ as WontumPlayer,
   Z as WontumPlayerProvider,
   K as WontumPlayerReact,
   J as useWontumPlayer,