@obipascal/player 1.0.5 → 1.0.7

package/dist/wontum-player.esm.js

@@ -1,29 +1,29 @@
 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 r = (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 * as $ from "react";
-import { useRef as w, useEffect as f, useState as b } from "react";
+import * as R from "react";
+import { useRef as y, useEffect as f, useState as b } from "react";
 class _ {
   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);
+    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());
   }
   trackEvent(t, e = {}) {
-    var i;
-    if (!((i = this.config) != null && i.enabled)) return;
-    const n = {
+    var s;
+    if (!((s = this.config) != null && s.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() {
@@ -121,40 +121,43 @@ class _ {
 }
 class Q {
   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, "fullscreenButton");
-    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);
-    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();
+    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 || {}, 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", 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");
     m.id = t, m.textContent = `
       .wontum-player-container {
         position: relative;
         background: #000;
-        font-family: ${s};
+        font-family: ${n};
         overflow: hidden;
-        --primary-color: ${n};
-        --accent-color: ${i};
+        --primary-color: ${i};
+        --accent-color: ${s};
         --controls-bg: ${a};
-        --button-hover: ${r};
-        --progress-height: ${c};
+        --button-hover: ${o};
+        --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.player.setVolume(s);
+    }), 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);
+    }), this.volumeSlider.addEventListener("input", (i) => {
+      const s = i.target, n = parseFloat(s.value) / 100;
+      this.player.setVolume(n);
     }), 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((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");
+    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}"]`);
+        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;
-        this.progressBar.style.width = `${s}%`, this.progressInput.value = s.toString();
+      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 i = this.controlsContainer.querySelector(".wontum-current-time");
-      i.textContent = this.formatTime(e);
+      const s = this.controlsContainer.querySelector(".wontum-current-time");
+      s.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((s) => s.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}`}
+      (s, n) => `
+        <div class="wontum-subtitle-option ${n === i ? "active" : ""}" data-track="${n}">
+          ${s.label || s.language || `Track ${n + 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((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");
       });
     });
   }
   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(
-      (s) => `
-        <div class="wontum-speed-option ${n === s ? "active" : ""}" data-speed="${s}">
-          ${s === 1 ? "Normal" : s + "x"}
+    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"}
         </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");
+    ).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");
       });
     });
   }
@@ -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(
+      (s, n) => `
+        <div class="wontum-quality-option" data-quality="${n}">${s.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((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");
       });
     });
   }
@@ -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"/>
@@ -893,9 +935,9 @@ class Q {
 }
 class j {
   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;
   }
   /**
@@ -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((s) => i.hostname.includes(s));
     } 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 n, a;
     if (this.signedUrls.has(t))
       return t;
-    if ((s = this.config) != null && s.signUrl)
+    if ((n = this.config) != null && n.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 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"));
+        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:", o), 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: ${(o == null ? void 0 : o.message) || "Unknown error"}`);
       }
     return console.warn("No signUrl function provided. CloudFront cookies may not be set."), t;
   }
@@ -955,34 +997,34 @@ 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 s;
+    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)
       try {
-        const s = await this.config.getPresignedUrl(e);
+        const n = await this.config.getPresignedUrl(e);
         return this.urlCache.set(e, {
-          url: s,
+          url: n,
           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");
+        }), n;
+      } catch (n) {
+        throw console.error("Failed to generate presigned URL:", n), 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;
   }
   /**
    * 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], s = e.slice(1).join("/");
+    return { bucket: i, key: s };
   }
   /**
    * Clear URL cache and signed URLs
@@ -1000,18 +1042,18 @@ class j {
     this.urlCache.clear(), this.signedUrls.clear();
   }
 }
-class F {
+class A {
   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,
@@ -1031,13 +1073,13 @@ class F {
   }
   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() {
     const t = document.createElement("video");
-    return t.className = "wontum-player-video", t.style.width = "100%", t.style.height = "100%", t.playsInline = !0, t;
+    return t.className = "wontum-player-video", t.style.width = "100%", t.style.height = "100%", t.playsInline = !0, t.crossOrigin = "use-credentials", t;
   }
   setupVideoListeners() {
     this.videoElement.addEventListener("play", () => {
@@ -1093,25 +1135,33 @@ class F {
     });
   }
   async loadSource(t) {
+    var e;
     try {
-      const e = await this.s3Handler.processUrl(t);
-      if (p.isSupported())
-        this.hls = new p(this.config.hlsConfig), this.hls.loadSource(e), this.hls.attachMedia(this.videoElement), this.hls.on(p.Events.MANIFEST_PARSED, (n, i) => {
-          const s = this.extractQualities(i.levels);
-          this.qualities = s;
-        }), this.hls.on(p.Events.LEVEL_SWITCHED, (n, i) => {
-          var a;
-          const s = (a = this.hls) == null ? void 0 : a.levels[i.level];
-          s && (this.state.quality = `${s.height}p`, this.emit("qualitychange", { quality: this.state.quality }));
-        }), this.hls.on(p.Events.ERROR, (n, i) => {
-          i.fatal && this.handleHlsError(i);
+      const i = await this.s3Handler.processUrl(t);
+      if (p.isSupported()) {
+        const s = ((e = this.config.s3Config) == null ? void 0 : e.withCredentials) ?? !1, n = {
+          ...this.config.hlsConfig,
+          xhrSetup: (a, o) => {
+            var l;
+            s && (a.withCredentials = !0), (l = this.config.hlsConfig) != null && l.xhrSetup && this.config.hlsConfig.xhrSetup(a, o);
+          }
+        };
+        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.qualities = l;
+        }), this.hls.on(p.Events.LEVEL_SWITCHED, (a, o) => {
+          var u;
+          const l = (u = this.hls) == null ? void 0 : u.levels[o.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);
         });
-      else if (this.videoElement.canPlayType("application/vnd.apple.mpegurl"))
-        this.videoElement.src = e;
+      } else if (this.videoElement.canPlayType("application/vnd.apple.mpegurl"))
+        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) {
@@ -1123,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();
@@ -1188,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 };
   }
@@ -1199,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
@@ -1215,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
@@ -1234,38 +1303,38 @@ 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 s;
+    const i = {
       type: t,
       data: e,
       timestamp: Date.now()
     };
-    (i = this.eventListeners.get(t)) == null || i.forEach((s) => {
-      s(n);
+    (s = this.eventListeners.get(t)) == null || s.forEach((n) => {
+      n(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) => {
+const K = (c) => {
   const {
     src: t,
     autoplay: e,
-    muted: n,
-    controls: i = !0,
-    poster: s,
+    muted: i,
+    controls: s = !0,
+    poster: n,
     preload: a,
-    theme: r,
-    s3Config: c,
+    theme: o,
+    s3Config: l,
     analytics: u,
     hlsConfig: m,
-    subtitles: P,
-    stickyControls: U,
+    subtitles: $,
+    stickyControls: z,
     onReady: k,
     onPlay: E,
     onPause: x,
@@ -1274,90 +1343,90 @@ const K = (l) => {
     onVolumeChange: L,
     onError: T,
     onLoadedMetadata: q,
-    onQualityChange: M,
-    style: z,
-    className: D,
+    onQualityChange: P,
+    style: U,
+    className: H,
     width: g = "100%",
     height: v = "500px"
-  } = l, y = w(null), R = w(null);
+  } = c, w = y(null), I = y(null);
   return f(() => {
-    if (!y.current) return;
-    const H = {
+    if (!w.current) return;
+    const D = {
       src: t,
-      container: y.current,
+      container: w.current,
       autoplay: e,
-      muted: n,
-      controls: i,
-      poster: s,
+      muted: i,
+      controls: s,
+      poster: n,
       preload: a,
-      theme: r,
-      s3Config: c,
+      theme: o,
+      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: $,
+      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;
     };
   }, [t]), /* @__PURE__ */ B(
     "div",
     {
-      ref: y,
-      className: D,
+      ref: w,
+      className: H,
       style: {
         width: typeof g == "number" ? `${g}px` : g,
         height: typeof v == "number" ? `${v}px` : v,
-        ...z
+        ...U
       }
     }
   );
-}, G = (l) => {
-  const [t, e] = b(null), [n, i] = b(null), s = w(null);
+}, G = (c) => {
+  const [t, e] = b(null), [i, s] = b(null), n = y(null);
   return f(() => {
-    if (!s.current) return;
-    const a = new F({
-      ...l,
-      container: s.current
+    if (!n.current) return;
+    const a = new A({
+      ...c,
+      container: n.current
     });
     e(a);
-    const r = () => {
-      i(a.getState());
+    const o = () => {
+      s(a.getState());
     };
-    return a.on("play", r), a.on("pause", r), a.on("timeupdate", r), a.on("volumechange", r), a.on("loadedmetadata", r), () => {
+    return a.on("play", o), a.on("pause", o), a.on("timeupdate", o), a.on("volumechange", o), a.on("loadedmetadata", o), () => {
       a.destroy();
     };
-  }, [l.src]), {
-    containerRef: s,
+  }, [c.src]), {
+    containerRef: n,
     player: t,
-    state: n
+    state: i
   };
-}, A = $.createContext({
+}, F = R.createContext({
   player: null,
   state: null
-}), J = (l) => {
-  const { player: t, children: e } = l, [n, i] = b(t.getState());
+}), J = (c) => {
+  const { player: t, children: e } = c, [i, s] = b(t.getState());
   return f(() => {
-    const s = () => {
-      i(t.getState());
+    const n = () => {
+      s(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", n), t.on("pause", n), t.on("timeupdate", n), t.on("volumechange", n), t.on("loadedmetadata", n), () => {
     };
-  }, [t]), /* @__PURE__ */ B(A.Provider, { value: { player: t, state: n }, children: e });
+  }, [t]), /* @__PURE__ */ B(F.Provider, { value: { player: t, state: i }, children: e });
 }, Z = () => {
-  const l = $.useContext(A);
-  if (!l.player)
+  const c = R.useContext(F);
+  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,
+  A as WontumPlayer,
   J as WontumPlayerProvider,
   K as WontumPlayerReact,
   G as useWontumPlayer,