@obipascal/player 1.0.7 → 1.0.9

package/dist/wontum-player.esm.js

@@ -1,28 +1,36 @@
-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 r = (c, t, e) => N(c, typeof t != "symbol" ? t + "" : t, e);
+var H = Object.defineProperty;
+var V = (c, t, e) => t in c ? H(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
+var s = (c, t, e) => V(c, typeof t != "symbol" ? t + "" : t, e);
 import p from "hls.js";
-import { jsx as B } from "react/jsx-runtime";
-import * as R from "react";
-import { useRef as y, useEffect as f, useState as b } from "react";
-class _ {
+import { jsx as A } from "react/jsx-runtime";
+import * as F from "react";
+import { useRef as b, useEffect as E, useState as k } from "react";
+class N {
   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);
-    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());
+    s(this, "config");
+    s(this, "sessionId");
+    s(this, "events", []);
+    s(this, "sessionStartTime");
+    s(this, "playbackStartTime", null);
+    s(this, "totalPlayTime", 0);
+    s(this, "totalBufferTime", 0);
+    s(this, "bufferStartTime", null);
+    s(this, "rebufferCount", 0);
+    s(this, "seekCount", 0);
+    s(this, "webSocket", null);
+    s(this, "socketIO", null);
+    s(this, "wsReconnectTimeout", null);
+    s(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 s;
-    if (!((s = this.config) != null && s.enabled)) return;
+    var n;
+    if (!((n = this.config) != null && n.enabled)) return;
     const i = {
       eventType: t,
       timestamp: Date.now(),
@@ -34,7 +42,7 @@ class _ {
         ...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 _ {
   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,47 +190,47 @@ class _ {
   }
   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 Q {
+class W {
   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");
+    s(this, "container");
+    s(this, "player");
+    s(this, "controlsContainer");
+    s(this, "progressContainer");
+    s(this, "progressBar");
+    s(this, "playButton");
+    s(this, "skipBackwardButton");
+    s(this, "skipForwardButton");
+    s(this, "volumeButton");
+    s(this, "volumeContainer");
+    s(this, "fullscreenButton");
+    s(this, "pipButton");
+    s(this, "settingsButton");
     // private timeDisplay: HTMLElement
-    r(this, "volumeSlider");
-    r(this, "progressInput");
+    s(this, "volumeSlider");
+    s(this, "progressInput");
     // private controlsVisible = true
-    r(this, "hideControlsTimeout", null);
-    r(this, "stickyControls", !1);
-    r(this, "isVolumeSliderActive", !1);
+    s(this, "hideControlsTimeout", null);
+    s(this, "stickyControls", !1);
+    s(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", s = e.accentColor || "#2563eb", n = e.fontFamily || "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", a = e.controlsBackground || "linear-gradient(to top, rgba(0,0,0,0.8), transparent)", o = 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", 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");
     m.id = t, m.textContent = `
       .wontum-player-container {
         position: relative;
         background: #000;
-        font-family: ${n};
+        font-family: ${o};
         overflow: hidden;
         --primary-color: ${i};
-        --accent-color: ${s};
-        --controls-bg: ${a};
-        --button-hover: ${o};
+        --accent-color: ${n};
+        --controls-bg: ${r};
+        --button-hover: ${a};
         --progress-height: ${l};
         --border-radius: ${u};
       }
@@ -729,11 +803,11 @@ class Q {
     }), this.skipForwardButton.addEventListener("click", () => {
       this.player.skipForward(10);
     }), this.progressInput.addEventListener("input", (i) => {
-      const s = i.target, n = parseFloat(s.value), a = this.player.getState(), o = n / 100 * a.duration;
-      this.player.seek(o);
+      const n = i.target, o = parseFloat(n.value), r = this.player.getState(), a = o / 100 * r.duration;
+      this.player.seek(a);
     }), this.volumeSlider.addEventListener("input", (i) => {
-      const s = i.target, n = parseFloat(s.value) / 100;
-      this.player.setVolume(n);
+      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", () => {
@@ -760,10 +834,10 @@ class Q {
     });
     const t = this.controlsContainer.querySelectorAll(".wontum-tab");
     t.forEach((i) => {
-      i.addEventListener("click", (s) => {
-        const n = s.currentTarget, a = n.getAttribute("data-tab");
-        t.forEach((u) => u.classList.remove("active")), n.classList.add("active"), this.controlsContainer.querySelectorAll(".wontum-tab-panel").forEach((u) => u.classList.remove("active"));
-        const l = this.controlsContainer.querySelector(`[data-panel="${a}"]`);
+      i.addEventListener("click", (n) => {
+        const o = n.currentTarget, r = 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="${r}"]`);
         l == null || l.classList.add("active");
       });
     }), this.player.getVideoElement().addEventListener("click", () => {
@@ -782,11 +856,11 @@ class Q {
     }), this.player.on("timeupdate", (t) => {
       const { currentTime: e } = t.data, i = this.player.getState();
       if (i.duration > 0) {
-        const n = e / i.duration * 100;
-        this.progressBar.style.width = `${n}%`, this.progressInput.value = n.toString();
+        const o = e / i.duration * 100;
+        this.progressBar.style.width = `${o}%`, this.progressInput.value = o.toString();
       }
-      const s = this.controlsContainer.querySelector(".wontum-current-time");
-      s.textContent = this.formatTime(e);
+      const n = this.controlsContainer.querySelector(".wontum-current-time");
+      n.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);
@@ -807,35 +881,35 @@ class Q {
       t.innerHTML = '<div class="wontum-subtitle-option">No subtitles available</div>';
       return;
     }
-    const i = e.findIndex((s) => s.mode === "showing");
+    const i = e.findIndex((n) => n.mode === "showing");
     t.innerHTML = `
       <div class="wontum-subtitle-option ${i === -1 ? "active" : ""}" data-track="-1">Off</div>
       ${e.map(
-      (s, n) => `
-        <div class="wontum-subtitle-option ${n === i ? "active" : ""}" data-track="${n}">
-          ${s.label || s.language || `Track ${n + 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((s) => {
-      s.addEventListener("click", (n) => {
-        const a = n.target, o = parseInt(a.dataset.track || "-1");
-        o === -1 ? this.player.disableSubtitles() : this.player.enableSubtitles(o), t.querySelectorAll(".wontum-subtitle-option").forEach((l) => l.classList.remove("active")), a.classList.add("active");
+    `, t.querySelectorAll(".wontum-subtitle-option").forEach((n) => {
+      n.addEventListener("click", (o) => {
+        const r = o.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");
       });
     });
   }
   updateSpeedMenu() {
-    const t = this.controlsContainer.querySelector(".wontum-speed-menu"), i = this.player.getState().playbackRate || 1, s = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
-    t.innerHTML = s.map(
-      (n) => `
-        <div class="wontum-speed-option ${i === n ? "active" : ""}" data-speed="${n}">
-          ${n === 1 ? "Normal" : n + "x"}
+    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(
+      (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((n) => {
-      n.addEventListener("click", (a) => {
-        const o = a.target, l = parseFloat(o.dataset.speed || "1");
-        this.player.setPlaybackRate(l), t.querySelectorAll(".wontum-speed-option").forEach((u) => u.classList.remove("active")), o.classList.add("active");
+    ).join(""), t.querySelectorAll(".wontum-speed-option").forEach((o) => {
+      o.addEventListener("click", (r) => {
+        const a = r.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 Q {
     e.innerHTML = `
       <div class="wontum-quality-option active" data-quality="-1">Auto</div>
       ${i.map(
-      (s, n) => `
-        <div class="wontum-quality-option" data-quality="${n}">${s.name}</div>
+      (n, o) => `
+        <div class="wontum-quality-option" data-quality="${o}">${n.name}</div>
       `
     ).join("")}
-    `, e.querySelectorAll(".wontum-quality-option").forEach((s) => {
-      s.addEventListener("click", (n) => {
-        const a = n.target, o = parseInt(a.dataset.quality || "-1");
-        this.player.setQuality(o), e.querySelectorAll(".wontum-quality-option").forEach((l) => l.classList.remove("active")), a.classList.add("active");
+    `, e.querySelectorAll(".wontum-quality-option").forEach((n) => {
+      n.addEventListener("click", (o) => {
+        const r = o.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");
       });
     });
   }
@@ -933,11 +1007,11 @@ class Q {
     this.hideControlsTimeout && clearTimeout(this.hideControlsTimeout), this.controlsContainer.remove();
   }
 }
-class j {
+class _ {
   constructor(t) {
-    r(this, "config");
-    r(this, "urlCache", /* @__PURE__ */ new Map());
-    r(this, "signedUrls", /* @__PURE__ */ new Set());
+    s(this, "config");
+    s(this, "urlCache", /* @__PURE__ */ new Map());
+    s(this, "signedUrls", /* @__PURE__ */ new Set());
     this.config = t;
   }
   /**
@@ -955,7 +1029,7 @@ class j {
       return !1;
     try {
       const i = new URL(t);
-      return this.config.cloudFrontDomains.some((s) => i.hostname.includes(s));
+      return this.config.cloudFrontDomains.some((n) => i.hostname.includes(n));
     } catch {
       return !1;
     }
@@ -971,20 +1045,20 @@ class j {
    * The endpoint should set signed cookies and return the URL
    */
   async signCloudFrontUrl(t, e = 0) {
-    var n, a;
+    var o, r;
     if (this.signedUrls.has(t))
       return t;
-    if ((n = this.config) != null && n.signUrl)
+    if ((o = this.config) != null && o.signUrl)
       try {
-        const o = await this.config.signUrl(t);
-        return this.signedUrls.add(t), o;
-      } catch (o) {
-        const l = (o == null ? void 0 : o.name) === "AbortError" || ((a = o == null ? void 0 : o.message) == null ? void 0 : a.includes("aborted"));
+        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"));
         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:", o), l ? new Error(
+        throw console.error("Failed to sign CloudFront URL:", a), 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: ${(o == null ? void 0 : o.message) || "Unknown error"}`);
+        ) : new Error(`Failed to sign CloudFront URL: ${(a == null ? void 0 : a.message) || "Unknown error"}`);
       }
     return console.warn("No signUrl function provided. CloudFront cookies may not be set."), t;
   }
@@ -1004,19 +1078,19 @@ class j {
    * Get presigned URL from cache or generate new one
    */
   async getPresignedUrl(t) {
-    var s;
+    var n;
     const e = this.extractS3Key(t), i = this.urlCache.get(e);
     if (i && i.expiresAt > Date.now())
       return i.url;
-    if ((s = this.config) != null && s.getPresignedUrl)
+    if ((n = this.config) != null && n.getPresignedUrl)
       try {
-        const n = await this.config.getPresignedUrl(e);
+        const o = await this.config.getPresignedUrl(e);
         return this.urlCache.set(e, {
-          url: n,
+          url: o,
           expiresAt: Date.now() + 50 * 60 * 1e3
-        }), n;
-      } catch (n) {
-        throw console.error("Failed to generate presigned URL:", n), 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;
   }
@@ -1032,8 +1106,8 @@ class j {
   static parseS3Uri(t) {
     if (!t.startsWith("s3://"))
       return null;
-    const e = t.replace("s3://", "").split("/"), i = e[0], s = e.slice(1).join("/");
-    return { bucket: i, key: s };
+    const e = t.replace("s3://", "").split("/"), i = e[0], n = e.slice(1).join("/");
+    return { bucket: i, key: n };
   }
   /**
    * Clear URL cache and signed URLs
@@ -1042,18 +1116,18 @@ class j {
     this.urlCache.clear(), this.signedUrls.clear();
   }
 }
-class A {
+class $ {
   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", {
+    s(this, "container");
+    s(this, "videoElement");
+    s(this, "hls", null);
+    s(this, "config");
+    s(this, "eventListeners", /* @__PURE__ */ new Map());
+    s(this, "analytics");
+    s(this, "s3Handler");
+    s(this, "uiController");
+    s(this, "qualities", []);
+    s(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 _(t.analytics), this.s3Handler = new j(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);
+    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,22 +1213,22 @@ class A {
     try {
       const i = await this.s3Handler.processUrl(t);
       if (p.isSupported()) {
-        const s = ((e = this.config.s3Config) == null ? void 0 : e.withCredentials) ?? !1, n = {
+        const n = ((e = this.config.s3Config) == null ? void 0 : e.withCredentials) ?? !1, o = {
           ...this.config.hlsConfig,
-          xhrSetup: (a, o) => {
+          xhrSetup: (r, a) => {
             var l;
-            s && (a.withCredentials = !0), (l = this.config.hlsConfig) != null && l.xhrSetup && this.config.hlsConfig.xhrSetup(a, o);
+            n && (r.withCredentials = !0), (l = this.config.hlsConfig) != null && l.xhrSetup && this.config.hlsConfig.xhrSetup(r, a);
           }
         };
-        this.hls = new p(n), this.hls.loadSource(i), this.hls.attachMedia(this.videoElement), this.hls.on(p.Events.MANIFEST_PARSED, (a, o) => {
-          const l = this.extractQualities(o.levels);
+        this.hls = new p(o), this.hls.loadSource(i), this.hls.attachMedia(this.videoElement), this.hls.on(p.Events.MANIFEST_PARSED, (r, a) => {
+          const l = this.extractQualities(a.levels);
           this.qualities = l;
-        }), this.hls.on(p.Events.LEVEL_SWITCHED, (a, o) => {
+        }), this.hls.on(p.Events.LEVEL_SWITCHED, (r, a) => {
           var u;
-          const l = (u = this.hls) == null ? void 0 : u.levels[o.level];
+          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, (a, o) => {
-          o.fatal && this.handleHlsError(o);
+        }), this.hls.on(p.Events.ERROR, (r, a) => {
+          a.fatal && this.handleHlsError(a);
         });
       } else if (this.videoElement.canPlayType("application/vnd.apple.mpegurl"))
         this.videoElement.src = i;
@@ -1307,128 +1381,296 @@ class A {
     (i = this.eventListeners.get(t)) == null || i.delete(e);
   }
   emit(t, e) {
-    var s;
+    var n;
     const i = {
       type: t,
       data: e,
       timestamp: Date.now()
     };
-    (s = this.eventListeners.get(t)) == null || s.forEach((n) => {
-      n(i);
+    (n = this.eventListeners.get(t)) == null || n.forEach((o) => {
+      o(i);
     });
   }
   destroy() {
     this.hls && (this.hls.destroy(), this.hls = null), this.uiController.destroy(), this.videoElement.remove(), this.eventListeners.clear(), this.analytics.destroy();
   }
 }
+class G {
+  constructor(t) {
+    s(this, "file");
+    s(this, "videoElement", null);
+    s(this, "info", null);
+    if (!this.isVideoFile(t))
+      throw new Error(`Invalid file type: ${t.type}. Expected a video file.`);
+    this.file = t;
+  }
+  /**
+   * Check if the file is a valid video file
+   */
+  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));
+  }
+  /**
+   * Extract video metadata
+   */
+  async extract() {
+    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);
+        this.videoElement.onloadedmetadata = () => {
+          try {
+            if (!this.videoElement) {
+              e(new Error("Video element not initialized"));
+              return;
+            }
+            const n = this.videoElement.videoWidth, o = this.videoElement.videoHeight, r = this.videoElement.duration, a = this.calculateAspectRatio(n, o), 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;
+            this.info = {
+              width: n,
+              height: o,
+              aspectRatio: a,
+              size: l,
+              sizeInBytes: l,
+              // raw value alias
+              sizeFormatted: u,
+              duration: r,
+              durationInSeconds: r,
+              // raw value alias
+              durationFormatted: m,
+              mimeType: this.file.type || "video/unknown",
+              fileName: this.file.name,
+              fileExtension: g,
+              bitrate: v
+            }, URL.revokeObjectURL(i), this.videoElement.remove(), t(this.info);
+          } catch (n) {
+            URL.revokeObjectURL(i), e(n);
+          }
+        }, 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);
+      }
+    });
+  }
+  /**
+   * Calculate aspect ratio (e.g., "16:9", "4:3")
+   */
+  calculateAspectRatio(t, e) {
+    const i = this.getGCD(t, e), n = t / i, o = e / i, r = n / o;
+    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}:${o}`;
+  }
+  /**
+   * Get Greatest Common Divisor
+   */
+  getGCD(t, e) {
+    return e === 0 ? t : this.getGCD(e, t % e);
+  }
+  /**
+   * Format bytes to human-readable size
+   */
+  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]}`;
+  }
+  /**
+   * 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")}`;
+  }
+  /**
+   * Get file extension
+   */
+  getFileExtension(t) {
+    const e = t.split(".");
+    return e.length > 1 ? `.${e[e.length - 1].toLowerCase()}` : "";
+  }
+  // Getter properties for convenience
+  get width() {
+    var t;
+    return ((t = this.info) == null ? void 0 : t.width) || 0;
+  }
+  get height() {
+    var t;
+    return ((t = this.info) == null ? void 0 : t.height) || 0;
+  }
+  get aspectRatio() {
+    var t;
+    return ((t = this.info) == null ? void 0 : t.aspectRatio) || "unknown";
+  }
+  get size() {
+    var t;
+    return ((t = this.info) == null ? void 0 : t.size) || 0;
+  }
+  get sizeInBytes() {
+    var t;
+    return ((t = this.info) == null ? void 0 : t.sizeInBytes) || 0;
+  }
+  get sizeFormatted() {
+    var t;
+    return ((t = this.info) == null ? void 0 : t.sizeFormatted) || "0 Bytes";
+  }
+  get duration() {
+    var t;
+    return ((t = this.info) == null ? void 0 : t.duration) || 0;
+  }
+  get durationInSeconds() {
+    var t;
+    return ((t = this.info) == null ? void 0 : t.durationInSeconds) || 0;
+  }
+  get durationFormatted() {
+    var t;
+    return ((t = this.info) == null ? void 0 : t.durationFormatted) || "00:00";
+  }
+  get mimeType() {
+    var t;
+    return ((t = this.info) == null ? void 0 : t.mimeType) || this.file.type || "video/unknown";
+  }
+  get fileName() {
+    return this.file.name;
+  }
+  get fileExtension() {
+    var t;
+    return ((t = this.info) == null ? void 0 : t.fileExtension) || "";
+  }
+  get bitrate() {
+    var t;
+    return (t = this.info) == null ? void 0 : t.bitrate;
+  }
+  get quality() {
+    if (!this.info) return "unknown";
+    const t = this.info.height;
+    return t >= 2160 ? "4K (2160p)" : t >= 1440 ? "2K (1440p)" : t >= 1080 ? "Full HD (1080p)" : t >= 720 ? "HD (720p)" : t >= 480 ? "SD (480p)" : t >= 360 ? "360p" : "Low Quality";
+  }
+  /**
+   * Get all information as object
+   */
+  getInfo() {
+    return this.info;
+  }
+  /**
+   * Clean up resources
+   */
+  destroy() {
+    this.videoElement && (this.videoElement.remove(), this.videoElement = null), this.info = null;
+  }
+}
 const K = (c) => {
   const {
     src: t,
     autoplay: e,
     muted: i,
-    controls: s = !0,
-    poster: n,
-    preload: a,
-    theme: o,
+    controls: n = !0,
+    poster: o,
+    preload: r,
+    theme: a,
     s3Config: l,
     analytics: u,
     hlsConfig: m,
-    subtitles: $,
-    stickyControls: z,
-    onReady: k,
-    onPlay: E,
-    onPause: x,
-    onEnded: S,
-    onTimeUpdate: C,
-    onVolumeChange: L,
-    onError: T,
-    onLoadedMetadata: q,
+    subtitles: g,
+    stickyControls: v,
+    onReady: S,
+    onPlay: x,
+    onPause: C,
+    onEnded: L,
+    onTimeUpdate: T,
+    onVolumeChange: I,
+    onError: M,
+    onLoadedMetadata: R,
     onQualityChange: P,
-    style: U,
-    className: H,
-    width: g = "100%",
-    height: v = "500px"
-  } = c, w = y(null), I = y(null);
-  return f(() => {
+    style: D,
+    className: O,
+    width: f = "100%",
+    height: y = "500px"
+  } = c, w = b(null), q = b(null);
+  return E(() => {
     if (!w.current) return;
-    const D = {
+    const U = {
       src: t,
       container: w.current,
       autoplay: e,
       muted: i,
-      controls: s,
-      poster: n,
-      preload: a,
-      theme: o,
+      controls: n,
+      poster: o,
+      preload: r,
+      theme: a,
       s3Config: l,
       analytics: u,
       hlsConfig: m,
-      subtitles: $,
-      stickyControls: z
-    }, d = new A(D);
-    return I.current = d, E && d.on("play", E), x && d.on("pause", x), S && d.on("ended", S), T && d.on("error", (h) => {
-      var M;
-      return T((M = h.data) == null ? void 0 : M.error);
-    }), q && d.on("loadedmetadata", q), P && d.on("qualitychange", (h) => P(h.data.level)), C && d.on("timeupdate", (h) => C(h.data.currentTime)), L && d.on("volumechange", (h) => L(h.data.volume, h.data.muted)), k && k(d), () => {
-      d.destroy(), I.current = null;
+      subtitles: g,
+      stickyControls: v
+    }, d = new $(U);
+    return q.current = d, x && d.on("play", x), C && d.on("pause", C), L && d.on("ended", L), M && d.on("error", (h) => {
+      var B;
+      return M((B = h.data) == null ? void 0 : B.error);
+    }), R && d.on("loadedmetadata", R), 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)), S && S(d), () => {
+      d.destroy(), q.current = null;
     };
-  }, [t]), /* @__PURE__ */ B(
+  }, [t]), /* @__PURE__ */ A(
     "div",
     {
       ref: w,
-      className: H,
+      className: O,
       style: {
-        width: typeof g == "number" ? `${g}px` : g,
-        height: typeof v == "number" ? `${v}px` : v,
-        ...U
+        width: typeof f == "number" ? `${f}px` : f,
+        height: typeof y == "number" ? `${y}px` : y,
+        ...D
       }
     }
   );
-}, G = (c) => {
-  const [t, e] = b(null), [i, s] = b(null), n = y(null);
-  return f(() => {
-    if (!n.current) return;
-    const a = new A({
+}, J = (c) => {
+  const [t, e] = k(null), [i, n] = k(null), o = b(null);
+  return E(() => {
+    if (!o.current) return;
+    const r = new $({
       ...c,
-      container: n.current
+      container: o.current
     });
-    e(a);
-    const o = () => {
-      s(a.getState());
+    e(r);
+    const a = () => {
+      n(r.getState());
     };
-    return a.on("play", o), a.on("pause", o), a.on("timeupdate", o), a.on("volumechange", o), a.on("loadedmetadata", o), () => {
-      a.destroy();
+    return r.on("play", a), r.on("pause", a), r.on("timeupdate", a), r.on("volumechange", a), r.on("loadedmetadata", a), () => {
+      r.destroy();
     };
   }, [c.src]), {
-    containerRef: n,
+    containerRef: o,
     player: t,
     state: i
   };
-}, F = R.createContext({
+}, z = F.createContext({
   player: null,
   state: null
-}), J = (c) => {
-  const { player: t, children: e } = c, [i, s] = b(t.getState());
-  return f(() => {
-    const n = () => {
-      s(t.getState());
+}), Z = (c) => {
+  const { player: t, children: e } = c, [i, n] = k(t.getState());
+  return E(() => {
+    const o = () => {
+      n(t.getState());
     };
-    return t.on("play", n), t.on("pause", n), t.on("timeupdate", n), t.on("volumechange", n), t.on("loadedmetadata", n), () => {
+    return t.on("play", o), t.on("pause", o), t.on("timeupdate", o), t.on("volumechange", o), t.on("loadedmetadata", o), () => {
     };
-  }, [t]), /* @__PURE__ */ B(F.Provider, { value: { player: t, state: i }, children: e });
-}, Z = () => {
-  const c = R.useContext(F);
+  }, [t]), /* @__PURE__ */ A(z.Provider, { value: { player: t, state: i }, children: e });
+}, tt = () => {
+  const c = F.useContext(z);
   if (!c.player)
     throw new Error("useWontumPlayerContext must be used within WontumPlayerProvider");
   return c;
 };
 export {
-  _ as Analytics,
-  j as S3Handler,
-  Q as UIController,
-  A as WontumPlayer,
-  J as WontumPlayerProvider,
+  N as Analytics,
+  _ as S3Handler,
+  W as UIController,
+  G as WontumFileInfo,
+  $ as WontumPlayer,
+  Z as WontumPlayerProvider,
   K as WontumPlayerReact,
-  G as useWontumPlayer,
-  Z as useWontumPlayerContext
+  J as useWontumPlayer,
+  tt as useWontumPlayerContext
 };