@obipascal/player 1.0.6 → 1.0.8

package/dist/wontum-player.esm.js

@@ -1,11 +1,11 @@
 var V = Object.defineProperty;
-var N = (l, t, e) => t in l ? V(l, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[t] = e;
-var o = (l, t, e) => N(l, typeof t != "symbol" ? t + "" : t, e);
+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);
 import p from "hls.js";
-import { jsx as B } from "react/jsx-runtime";
+import { jsx as F } from "react/jsx-runtime";
 import * as $ from "react";
-import { useRef as w, useEffect as f, useState as b } from "react";
-class _ {
+import { useRef as b, useEffect as E, useState as k } from "react";
+class W {
   constructor(t) {
     o(this, "config");
     o(this, "sessionId");
@@ -21,9 +21,9 @@ class _ {
     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());
   }
   trackEvent(t, e = {}) {
-    var i;
-    if (!((i = this.config) != null && i.enabled)) return;
-    const n = {
+    var n;
+    if (!((n = this.config) != null && n.enabled)) return;
+    const i = {
       eventType: t,
       timestamp: Date.now(),
       sessionId: this.sessionId,
@@ -34,7 +34,7 @@ class _ {
         ...this.getQoEMetrics()
       }
     };
-    this.events.push(n), this.updateMetrics(t, e), this.config.endpoint && this.sendEvent(n), process.env.NODE_ENV === "development" && console.log("[Analytics]", t, n.data);
+    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);
   }
   updateMetrics(t, e) {
     switch (t) {
@@ -97,8 +97,8 @@ class _ {
           },
           body: JSON.stringify(t)
         });
-      } catch (n) {
-        console.error("Failed to send analytics event:", n);
+      } catch (i) {
+        console.error("Failed to send analytics event:", i);
       }
   }
   generateSessionId() {
@@ -119,7 +119,7 @@ class _ {
     (t = this.config) != null && t.enabled && this.trackEvent("session_end", this.getSessionData()), this.events = [];
   }
 }
-class Q {
+class j {
   constructor(t, e) {
     o(this, "container");
     o(this, "player");
@@ -130,7 +130,9 @@ class Q {
     o(this, "skipBackwardButton");
     o(this, "skipForwardButton");
     o(this, "volumeButton");
+    o(this, "volumeContainer");
     o(this, "fullscreenButton");
+    o(this, "pipButton");
     o(this, "settingsButton");
     // private timeDisplay: HTMLElement
     o(this, "volumeSlider");
@@ -138,23 +140,24 @@ class Q {
     // private controlsVisible = true
     o(this, "hideControlsTimeout", null);
     o(this, "stickyControls", !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.fullscreenButton = this.controlsContainer.querySelector(".wontum-fullscreen-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();
+    o(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 || {}, n = e.primaryColor || "#3b82f6", i = e.accentColor || "#2563eb", s = e.fontFamily || "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", a = e.controlsBackground || "linear-gradient(to top, rgba(0,0,0,0.8), transparent)", r = e.buttonHoverBg || "rgba(255, 255, 255, 0.1)", c = 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", 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");
     m.id = t, m.textContent = `
       .wontum-player-container {
         position: relative;
         background: #000;
         font-family: ${s};
         overflow: hidden;
-        --primary-color: ${n};
-        --accent-color: ${i};
-        --controls-bg: ${a};
-        --button-hover: ${r};
-        --progress-height: ${c};
+        --primary-color: ${i};
+        --accent-color: ${n};
+        --controls-bg: ${r};
+        --button-hover: ${a};
+        --progress-height: ${l};
         --border-radius: ${u};
       }
       
@@ -246,18 +249,20 @@ class Q {
       .wontum-progress-container {
         position: absolute;
         bottom: 58px;
-        left: 0;
-        right: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 70%;
+        max-width: 600px;
         height: 5px;
         cursor: pointer;
         z-index: 12;
-        padding: 0 20px;
+        padding: 0;
         transition: height 0.2s ease, opacity 0.3s ease, transform 0.3s ease;
       }
       
       .wontum-progress-container.hidden {
         opacity: 0;
-        transform: translateY(100%);
+        transform: translateX(-50%) translateY(100%);
         pointer-events: none;
       }
       
@@ -343,6 +348,7 @@ class Q {
         position: relative;
         display: flex;
         align-items: center;
+        gap: 0;
       }
       
       .wontum-volume-slider-wrapper {
@@ -354,18 +360,31 @@ class Q {
         backdrop-filter: blur(10px);
         padding: 12px 8px;
         border-radius: 6px;
-        margin-bottom: 8px;
+        margin-bottom: 5px;
         opacity: 0;
         pointer-events: none;
         transition: opacity 0.2s ease;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        z-index: 20;
       }
       
-      .wontum-volume-container:hover .wontum-volume-slider-wrapper {
+      .wontum-volume-container:hover .wontum-volume-slider-wrapper,
+      .wontum-volume-slider-wrapper:hover {
         opacity: 1;
         pointer-events: all;
       }
       
+      /* Add a bridge area between button and slider to prevent gap */
+      .wontum-volume-container::before {
+        content: '';
+        position: absolute;
+        bottom: 100%;
+        left: 0;
+        right: 0;
+        height: 10px;
+        background: transparent;
+      }
+      
       .wontum-volume-slider {
         -webkit-appearance: slider-vertical;
         appearance: slider-vertical;
@@ -688,6 +707,10 @@ class Q {
           </div>
         </div>
         
+        <button class="wontum-btn wontum-pip-btn" aria-label="Picture-in-Picture">
+          ${this.getPipIcon()}
+        </button>
+        
         <button class="wontum-btn wontum-fullscreen-btn" aria-label="Fullscreen">
           ${this.getFullscreenIcon()}
         </button>
@@ -705,27 +728,43 @@ class Q {
       this.player.skipBackward(10);
     }), this.skipForwardButton.addEventListener("click", () => {
       this.player.skipForward(10);
-    }), this.progressInput.addEventListener("input", (n) => {
-      const i = n.target, s = parseFloat(i.value), a = this.player.getState(), r = s / 100 * a.duration;
-      this.player.seek(r);
-    }), this.volumeSlider.addEventListener("input", (n) => {
-      const i = n.target, s = parseFloat(i.value) / 100;
+    }), this.progressInput.addEventListener("input", (i) => {
+      const n = i.target, s = parseFloat(n.value), r = this.player.getState(), a = s / 100 * r.duration;
+      this.player.seek(a);
+    }), this.volumeSlider.addEventListener("input", (i) => {
+      const n = i.target, s = parseFloat(n.value) / 100;
       this.player.setVolume(s);
     }), this.volumeButton.addEventListener("click", () => {
       this.player.getState().muted ? this.player.unmute() : this.player.mute();
+    }), this.volumeContainer.addEventListener("mouseenter", () => {
+      this.isVolumeSliderActive = !0;
+    }), this.volumeContainer.addEventListener("mouseleave", () => {
+      this.isVolumeSliderActive = !1;
+    }), this.volumeSlider.addEventListener("input", () => {
+      this.isVolumeSliderActive = !0, this.resetHideControlsTimeout();
+    }), this.volumeSlider.addEventListener("change", () => {
+      setTimeout(() => {
+        this.isVolumeSliderActive = !1;
+      }, 500);
     }), this.fullscreenButton.addEventListener("click", () => {
       this.player.getState().fullscreen ? this.player.exitFullscreen() : this.player.enterFullscreen();
+    }), this.pipButton.addEventListener("click", async () => {
+      try {
+        await this.player.togglePictureInPicture();
+      } catch (i) {
+        console.error("PiP error:", i);
+      }
     }), this.settingsButton.addEventListener("click", () => {
-      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 i = this.controlsContainer.querySelector(".wontum-settings-panel");
+      i.classList.toggle("active"), i.classList.contains("active") && (this.updateSettingsMenu(), this.updateQualityMenu(), this.updateSpeedMenu(), this.updateSubtitleMenu());
     });
     const t = this.controlsContainer.querySelectorAll(".wontum-tab");
-    t.forEach((n) => {
-      n.addEventListener("click", (i) => {
-        const s = i.currentTarget, a = s.getAttribute("data-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 c = this.controlsContainer.querySelector(`[data-panel="${a}"]`);
-        c == null || c.classList.add("active");
+        const l = this.controlsContainer.querySelector(`[data-panel="${r}"]`);
+        l == null || l.classList.add("active");
       });
     }), this.player.getVideoElement().addEventListener("click", () => {
       this.player.getState().playing ? this.player.pause() : this.player.play();
@@ -741,19 +780,19 @@ class Q {
     }), this.player.on("pause", () => {
       this.playButton.innerHTML = this.getPlayIcon();
     }), this.player.on("timeupdate", (t) => {
-      const { currentTime: e } = t.data, n = this.player.getState();
-      if (n.duration > 0) {
-        const s = e / n.duration * 100;
+      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 i = this.controlsContainer.querySelector(".wontum-current-time");
-      i.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, n = this.controlsContainer.querySelector(".wontum-duration");
-      n.textContent = this.formatTime(e), t.data.qualities && this.updateQualityMenu(t.data.qualities);
+      const { duration: e } = t.data, i = this.controlsContainer.querySelector(".wontum-duration");
+      i.textContent = this.formatTime(e), t.data.qualities && this.updateQualityMenu(t.data.qualities);
     }), this.player.on("volumechange", (t) => {
-      const { volume: e, muted: n } = t.data;
-      this.volumeSlider.value = (e * 100).toString(), this.volumeButton.innerHTML = n ? this.getMutedIcon() : this.getVolumeIcon();
+      const { volume: e, muted: i } = t.data;
+      this.volumeSlider.value = (e * 100).toString(), this.volumeButton.innerHTML = i ? this.getMutedIcon() : this.getVolumeIcon();
     }), this.player.on("waiting", () => {
       const t = this.controlsContainer.querySelector(".wontum-loading");
       t.style.display = "block";
@@ -768,35 +807,35 @@ class Q {
       t.innerHTML = '<div class="wontum-subtitle-option">No subtitles available</div>';
       return;
     }
-    const n = e.findIndex((i) => i.mode === "showing");
+    const i = e.findIndex((n) => n.mode === "showing");
     t.innerHTML = `
-      <div class="wontum-subtitle-option ${n === -1 ? "active" : ""}" data-track="-1">Off</div>
+      <div class="wontum-subtitle-option ${i === -1 ? "active" : ""}" data-track="-1">Off</div>
       ${e.map(
-      (i, s) => `
-        <div class="wontum-subtitle-option ${s === n ? "active" : ""}" data-track="${s}">
-          ${i.label || i.language || `Track ${s + 1}`}
+      (n, s) => `
+        <div class="wontum-subtitle-option ${s === i ? "active" : ""}" data-track="${s}">
+          ${n.label || n.language || `Track ${s + 1}`}
         </div>
       `
     ).join("")}
-    `, t.querySelectorAll(".wontum-subtitle-option").forEach((i) => {
-      i.addEventListener("click", (s) => {
-        const a = s.target, r = parseInt(a.dataset.track || "-1");
-        r === -1 ? this.player.disableSubtitles() : this.player.enableSubtitles(r), t.querySelectorAll(".wontum-subtitle-option").forEach((c) => c.classList.remove("active")), a.classList.add("active");
+    `, 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");
       });
     });
   }
   updateSpeedMenu() {
-    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(
+    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 ${n === s ? "active" : ""}" data-speed="${s}">
+        <div class="wontum-speed-option ${i === s ? "active" : ""}" data-speed="${s}">
           ${s === 1 ? "Normal" : s + "x"}
         </div>
       `
     ).join(""), t.querySelectorAll(".wontum-speed-option").forEach((s) => {
-      s.addEventListener("click", (a) => {
-        const r = a.target, c = parseFloat(r.dataset.speed || "1");
-        this.player.setPlaybackRate(c), t.querySelectorAll(".wontum-speed-option").forEach((u) => u.classList.remove("active")), r.classList.add("active");
+      s.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");
       });
     });
   }
@@ -814,22 +853,22 @@ class Q {
     });
   }
   updateQualityMenu(t) {
-    const e = this.controlsContainer.querySelector(".wontum-quality-menu"), n = t || this.player.getQualities();
-    if (!n || n.length === 0) {
+    const e = this.controlsContainer.querySelector(".wontum-quality-menu"), i = t || this.player.getQualities();
+    if (!i || i.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>
-      ${n.map(
-      (i, s) => `
-        <div class="wontum-quality-option" data-quality="${s}">${i.name}</div>
+      ${i.map(
+      (n, s) => `
+        <div class="wontum-quality-option" data-quality="${s}">${n.name}</div>
       `
     ).join("")}
-    `, e.querySelectorAll(".wontum-quality-option").forEach((i) => {
-      i.addEventListener("click", (s) => {
-        const a = s.target, r = parseInt(a.dataset.quality || "-1");
-        this.player.setQuality(r), e.querySelectorAll(".wontum-quality-option").forEach((c) => c.classList.remove("active")), a.classList.add("active");
+    `, 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");
       });
     });
   }
@@ -837,7 +876,7 @@ class Q {
     this.controlsContainer.classList.remove("hidden"), this.progressContainer.classList.remove("hidden");
   }
   hideControls() {
-    if (this.stickyControls) return;
+    if (this.stickyControls || this.isVolumeSliderActive) return;
     this.player.getState().playing && (this.controlsContainer.classList.add("hidden"), this.progressContainer.classList.add("hidden"));
   }
   resetHideControlsTimeout() {
@@ -847,8 +886,8 @@ class Q {
   }
   formatTime(t) {
     if (isNaN(t)) return "0:00";
-    const e = Math.floor(t / 60), n = Math.floor(t % 60);
-    return `${e}:${n.toString().padStart(2, "0")}`;
+    const e = Math.floor(t / 60), i = Math.floor(t % 60);
+    return `${e}:${i.toString().padStart(2, "0")}`;
   }
   // SVG Icons
   getPlayIcon() {
@@ -866,6 +905,9 @@ class Q {
   getFullscreenIcon() {
     return '<svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>';
   }
+  getPipIcon() {
+    return '<svg viewBox="0 0 24 24"><path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z"/></svg>';
+  }
   getSkipBackwardIcon() {
     return `<svg viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<circle cx="30" cy="30" r="28" stroke="white" stroke-width="2"/>
@@ -891,7 +933,7 @@ class Q {
     this.hideControlsTimeout && clearTimeout(this.hideControlsTimeout), this.controlsContainer.remove();
   }
 }
-class j {
+class Q {
   constructor(t) {
     o(this, "config");
     o(this, "urlCache", /* @__PURE__ */ new Map());
@@ -912,8 +954,8 @@ class j {
     if (!((e = this.config) != null && e.cloudFrontDomains) || this.config.cloudFrontDomains.length === 0)
       return !1;
     try {
-      const n = new URL(t);
-      return this.config.cloudFrontDomains.some((i) => n.hostname.includes(i));
+      const i = new URL(t);
+      return this.config.cloudFrontDomains.some((n) => i.hostname.includes(n));
     } catch {
       return !1;
     }
@@ -929,20 +971,20 @@ class j {
    * The endpoint should set signed cookies and return the URL
    */
   async signCloudFrontUrl(t, e = 0) {
-    var s, a;
+    var s, r;
     if (this.signedUrls.has(t))
       return t;
     if ((s = this.config) != null && s.signUrl)
       try {
-        const r = await this.config.signUrl(t);
-        return this.signedUrls.add(t), r;
-      } catch (r) {
-        const c = (r == null ? void 0 : r.name) === "AbortError" || ((a = r == null ? void 0 : r.message) == null ? void 0 : a.includes("aborted"));
-        if (c && e < 2)
+        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:", r), c ? 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: ${(r == null ? void 0 : r.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;
   }
@@ -955,18 +997,18 @@ class j {
     const e = t.match(/s3[.-]([^.]+)\.amazonaws\.com\/(.+)/);
     if (e)
       return e[2];
-    const n = t.match(/([^.]+)\.s3\.amazonaws\.com\/(.+)/);
-    return n ? n[2] : t;
+    const i = t.match(/([^.]+)\.s3\.amazonaws\.com\/(.+)/);
+    return i ? i[2] : t;
   }
   /**
    * Get presigned URL from cache or generate new one
    */
   async getPresignedUrl(t) {
-    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)
+    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)
       try {
         const s = await this.config.getPresignedUrl(e);
         return this.urlCache.set(e, {
@@ -981,8 +1023,8 @@ class j {
   /**
    * Helper to construct S3 URL from bucket and key
    */
-  static constructS3Url(t, e, n = "us-east-1") {
-    return `https://${t}.s3.${n}.amazonaws.com/${e}`;
+  static constructS3Url(t, e, i = "us-east-1") {
+    return `https://${t}.s3.${i}.amazonaws.com/${e}`;
   }
   /**
    * Helper to parse S3 URI (s3://bucket/key)
@@ -990,8 +1032,8 @@ class j {
   static parseS3Uri(t) {
     if (!t.startsWith("s3://"))
       return null;
-    const e = t.replace("s3://", "").split("/"), n = e[0], i = e.slice(1).join("/");
-    return { bucket: n, key: i };
+    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
@@ -1000,7 +1042,7 @@ class j {
     this.urlCache.clear(), this.signedUrls.clear();
   }
 }
-class F {
+class A {
   constructor(t) {
     o(this, "container");
     o(this, "videoElement");
@@ -1027,12 +1069,12 @@ class F {
     });
     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 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);
   }
   addSubtitleTracks(t) {
     t.forEach((e) => {
-      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);
+      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);
     });
   }
   createVideoElement() {
@@ -1093,32 +1135,33 @@ class F {
     });
   }
   async loadSource(t) {
+    var e;
     try {
-      const e = await this.s3Handler.processUrl(t);
+      const i = await this.s3Handler.processUrl(t);
       if (p.isSupported()) {
-        const n = {
+        const n = ((e = this.config.s3Config) == null ? void 0 : e.withCredentials) ?? !1, s = {
           ...this.config.hlsConfig,
-          xhrSetup: (i, s) => {
-            var a;
-            i.withCredentials = !0, (a = this.config.hlsConfig) != null && a.xhrSetup && this.config.hlsConfig.xhrSetup(i, s);
+          xhrSetup: (r, a) => {
+            var l;
+            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(e), this.hls.attachMedia(this.videoElement), this.hls.on(p.Events.MANIFEST_PARSED, (i, s) => {
-          const a = this.extractQualities(s.levels);
-          this.qualities = a;
-        }), this.hls.on(p.Events.LEVEL_SWITCHED, (i, s) => {
-          var r;
-          const a = (r = this.hls) == null ? void 0 : r.levels[s.level];
-          a && (this.state.quality = `${a.height}p`, this.emit("qualitychange", { quality: this.state.quality }));
-        }), this.hls.on(p.Events.ERROR, (i, s) => {
-          s.fatal && this.handleHlsError(s);
+        this.hls = new p(s), 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, (r, 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) => {
+          a.fatal && this.handleHlsError(a);
         });
       } else if (this.videoElement.canPlayType("application/vnd.apple.mpegurl"))
-        this.videoElement.src = e;
+        this.videoElement.src = i;
       else
         throw new Error("HLS is not supported in this browser");
-    } catch (e) {
-      console.error("Failed to load video source:", e), this.emit("error", { error: e });
+    } catch (i) {
+      console.error("Failed to load video source:", i), this.emit("error", { error: i });
     }
   }
   extractQualities(t) {
@@ -1130,13 +1173,13 @@ class F {
     }));
   }
   handleHlsError(t) {
-    var e, n;
+    var e, i;
     switch (t.type) {
       case p.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"), (n = this.hls) == null || n.recoverMediaError();
+        console.error("Media error occurred"), (i = this.hls) == null || i.recoverMediaError();
         break;
       default:
         console.error("Fatal error occurred:", t), this.destroy();
@@ -1195,6 +1238,25 @@ class F {
   exitFullscreen() {
     document.exitFullscreen && (document.exitFullscreen(), this.state.fullscreen = !1, this.emit("fullscreenchange", { fullscreen: !1 }));
   }
+  async enterPictureInPicture() {
+    if (document.pictureInPictureEnabled && !this.videoElement.disablePictureInPicture)
+      try {
+        await this.videoElement.requestPictureInPicture(), this.emit("pictureinpictureenter", {});
+      } catch (t) {
+        throw console.error("Failed to enter Picture-in-Picture:", t), t;
+      }
+  }
+  async exitPictureInPicture() {
+    if (document.pictureInPictureElement)
+      try {
+        await document.exitPictureInPicture(), this.emit("pictureinpictureexit", {});
+      } catch (t) {
+        throw console.error("Failed to exit Picture-in-Picture:", t), t;
+      }
+  }
+  async togglePictureInPicture() {
+    document.pictureInPictureElement ? await this.exitPictureInPicture() : await this.enterPictureInPicture();
+  }
   getState() {
     return { ...this.state };
   }
@@ -1206,8 +1268,8 @@ class F {
    */
   enableSubtitles(t) {
     const e = this.videoElement.textTracks;
-    for (let n = 0; n < e.length; n++)
-      e[n].mode = n === t ? "showing" : "hidden";
+    for (let i = 0; i < e.length; i++)
+      e[i].mode = i === t ? "showing" : "hidden";
   }
   /**
    * Disable all subtitles
@@ -1222,7 +1284,7 @@ class F {
    */
   toggleSubtitles() {
     const t = this.videoElement.textTracks;
-    return Array.from(t).some((n) => n.mode === "showing") ? (this.disableSubtitles(), !1) : t.length > 0 ? (this.enableSubtitles(0), !0) : !1;
+    return Array.from(t).some((i) => i.mode === "showing") ? (this.disableSubtitles(), !1) : t.length > 0 ? (this.enableSubtitles(0), !0) : !1;
   }
   /**
    * Get available subtitle tracks
@@ -1241,132 +1303,300 @@ class F {
     this.eventListeners.has(t) || this.eventListeners.set(t, /* @__PURE__ */ new Set()), this.eventListeners.get(t).add(e);
   }
   off(t, e) {
-    var n;
-    (n = this.eventListeners.get(t)) == null || n.delete(e);
+    var i;
+    (i = this.eventListeners.get(t)) == null || i.delete(e);
   }
   emit(t, e) {
-    var i;
-    const n = {
+    var n;
+    const i = {
       type: t,
       data: e,
       timestamp: Date.now()
     };
-    (i = this.eventListeners.get(t)) == null || i.forEach((s) => {
-      s(n);
+    (n = this.eventListeners.get(t)) == null || n.forEach((s) => {
+      s(i);
     });
   }
   destroy() {
     this.hls && (this.hls.destroy(), this.hls = null), this.uiController.destroy(), this.videoElement.remove(), this.eventListeners.clear(), this.analytics.destroy();
   }
 }
-const K = (l) => {
+class G {
+  constructor(t) {
+    o(this, "file");
+    o(this, "videoElement", null);
+    o(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, 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;
+            this.info = {
+              width: n,
+              height: s,
+              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, 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}`;
+  }
+  /**
+   * 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: n,
-    controls: i = !0,
+    muted: i,
+    controls: n = !0,
     poster: s,
-    preload: a,
-    theme: r,
-    s3Config: c,
+    preload: r,
+    theme: a,
+    s3Config: l,
     analytics: u,
     hlsConfig: m,
-    subtitles: P,
-    stickyControls: U,
-    onReady: k,
-    onPlay: E,
-    onPause: x,
-    onEnded: S,
-    onTimeUpdate: C,
-    onVolumeChange: L,
-    onError: T,
+    subtitles: g,
+    stickyControls: v,
+    onReady: x,
+    onPlay: S,
+    onPause: C,
+    onEnded: L,
+    onTimeUpdate: T,
+    onVolumeChange: I,
+    onError: M,
     onLoadedMetadata: q,
-    onQualityChange: M,
-    style: z,
+    onQualityChange: P,
+    style: U,
     className: D,
-    width: g = "100%",
-    height: v = "500px"
-  } = l, y = w(null), R = w(null);
-  return f(() => {
+    width: f = "100%",
+    height: w = "500px"
+  } = c, y = b(null), B = b(null);
+  return E(() => {
     if (!y.current) return;
     const H = {
       src: t,
       container: y.current,
       autoplay: e,
-      muted: n,
-      controls: i,
+      muted: i,
+      controls: n,
       poster: s,
-      preload: a,
-      theme: r,
-      s3Config: c,
+      preload: r,
+      theme: a,
+      s3Config: l,
       analytics: u,
       hlsConfig: m,
-      subtitles: P,
-      stickyControls: U
-    }, d = new F(H);
-    return R.current = d, E && d.on("play", E), x && d.on("pause", x), S && d.on("ended", S), T && d.on("error", (h) => {
-      var I;
-      return T((I = h.data) == null ? void 0 : I.error);
-    }), q && d.on("loadedmetadata", q), M && d.on("qualitychange", (h) => M(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(), R.current = null;
+      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;
     };
-  }, [t]), /* @__PURE__ */ B(
+  }, [t]), /* @__PURE__ */ F(
     "div",
     {
       ref: y,
       className: D,
       style: {
-        width: typeof g == "number" ? `${g}px` : g,
-        height: typeof v == "number" ? `${v}px` : v,
-        ...z
+        width: typeof f == "number" ? `${f}px` : f,
+        height: typeof w == "number" ? `${w}px` : w,
+        ...U
       }
     }
   );
-}, G = (l) => {
-  const [t, e] = b(null), [n, i] = b(null), s = w(null);
-  return f(() => {
+}, J = (c) => {
+  const [t, e] = k(null), [i, n] = k(null), s = b(null);
+  return E(() => {
     if (!s.current) return;
-    const a = new F({
-      ...l,
+    const r = new A({
+      ...c,
       container: s.current
     });
-    e(a);
-    const r = () => {
-      i(a.getState());
+    e(r);
+    const a = () => {
+      n(r.getState());
     };
-    return a.on("play", r), a.on("pause", r), a.on("timeupdate", r), a.on("volumechange", r), a.on("loadedmetadata", r), () => {
-      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();
     };
-  }, [l.src]), {
+  }, [c.src]), {
     containerRef: s,
     player: t,
-    state: n
+    state: i
   };
-}, A = $.createContext({
+}, z = $.createContext({
   player: null,
   state: null
-}), J = (l) => {
-  const { player: t, children: e } = l, [n, i] = b(t.getState());
-  return f(() => {
+}), Z = (c) => {
+  const { player: t, children: e } = c, [i, n] = k(t.getState());
+  return E(() => {
     const s = () => {
-      i(t.getState());
+      n(t.getState());
     };
     return t.on("play", s), t.on("pause", s), t.on("timeupdate", s), t.on("volumechange", s), t.on("loadedmetadata", s), () => {
     };
-  }, [t]), /* @__PURE__ */ B(A.Provider, { value: { player: t, state: n }, children: e });
-}, Z = () => {
-  const l = $.useContext(A);
-  if (!l.player)
+  }, [t]), /* @__PURE__ */ F(z.Provider, { value: { player: t, state: i }, children: e });
+}, tt = () => {
+  const c = $.useContext(z);
+  if (!c.player)
     throw new Error("useWontumPlayerContext must be used within WontumPlayerProvider");
-  return l;
+  return c;
 };
 export {
-  _ as Analytics,
-  j as S3Handler,
-  Q as UIController,
-  F as WontumPlayer,
-  J as WontumPlayerProvider,
+  W as Analytics,
+  Q as S3Handler,
+  j as UIController,
+  G as WontumFileInfo,
+  A as WontumPlayer,
+  Z as WontumPlayerProvider,
   K as WontumPlayerReact,
-  G as useWontumPlayer,
-  Z as useWontumPlayerContext
+  J as useWontumPlayer,
+  tt as useWontumPlayerContext
 };