@obipascal/player 1.0.2 → 1.0.4

package/dist/wontum-player.esm.js

@@ -1,9 +1,11 @@
-var at = Object.defineProperty;
-var lt = (c, t, e) => t in c ? at(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
-var o = (c, t, e) => lt(c, typeof t != "symbol" ? t + "" : t, e);
-import w from "hls.js";
-import Y, { useRef as U, useEffect as $, useState as V } from "react";
-class ct {
+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);
+import p from "hls.js";
+import { jsx as $ } from "react/jsx-runtime";
+import * as F from "react";
+import { useRef as w, useEffect as f, useState as b } from "react";
+class j {
   constructor(t) {
     o(this, "config");
     o(this, "sessionId");
@@ -19,9 +21,9 @@ class ct {
     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 r;
-    if (!((r = this.config) != null && r.enabled)) return;
-    const s = {
+    var i;
+    if (!((i = this.config) != null && i.enabled)) return;
+    const n = {
       eventType: t,
       timestamp: Date.now(),
       sessionId: this.sessionId,
@@ -32,7 +34,7 @@ class ct {
         ...this.getQoEMetrics()
       }
     };
-    this.events.push(s), this.updateMetrics(t, e), this.config.endpoint && this.sendEvent(s), process.env.NODE_ENV === "development" && console.log("[Analytics]", t, s.data);
+    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);
   }
   updateMetrics(t, e) {
     switch (t) {
@@ -95,8 +97,8 @@ class ct {
           },
           body: JSON.stringify(t)
         });
-      } catch (s) {
-        console.error("Failed to send analytics event:", s);
+      } catch (n) {
+        console.error("Failed to send analytics event:", n);
       }
   }
   generateSessionId() {
@@ -117,7 +119,7 @@ class ct {
     (t = this.config) != null && t.enabled && this.trackEvent("session_end", this.getSessionData()), this.events = [];
   }
 }
-class ut {
+class W {
   constructor(t, e) {
     o(this, "container");
     o(this, "player");
@@ -129,9 +131,6 @@ class ut {
     o(this, "skipForwardButton");
     o(this, "volumeButton");
     o(this, "fullscreenButton");
-    o(this, "qualityButton");
-    o(this, "subtitleButton");
-    o(this, "speedButton");
     o(this, "settingsButton");
     // private timeDisplay: HTMLElement
     o(this, "volumeSlider");
@@ -139,24 +138,24 @@ class ut {
     // 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.qualityButton = this.controlsContainer.querySelector(".wontum-quality-btn"), this.subtitleButton = this.controlsContainer.querySelector(".wontum-subtitle-btn"), this.speedButton = this.controlsContainer.querySelector(".wontum-speed-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();
+    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();
   }
   injectStyles() {
     const t = "wontum-player-styles";
     if (document.getElementById(t)) return;
-    const e = this.player.config.theme || {}, s = e.primaryColor || "#3b82f6", r = e.accentColor || "#2563eb", i = e.fontFamily || "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", l = e.controlsBackground || "linear-gradient(to top, rgba(0,0,0,0.8), transparent)", u = e.buttonHoverBg || "rgba(255, 255, 255, 0.1)", v = e.progressHeight || "6px", y = e.borderRadius || "4px", g = document.createElement("style");
-    g.id = t, g.textContent = `
+    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", r = e.controlsBackground || "linear-gradient(to top, rgba(0,0,0,0.8), transparent)", a = e.buttonHoverBg || "rgba(255, 255, 255, 0.1)", c = e.progressHeight || "6px", d = e.borderRadius || "4px", m = document.createElement("style");
+    m.id = t, m.textContent = `
       .wontum-player-container {
         position: relative;
         background: #000;
-        font-family: ${i};
+        font-family: ${s};
         overflow: hidden;
-        --primary-color: ${s};
-        --accent-color: ${r};
-        --controls-bg: ${l};
-        --button-hover: ${u};
-        --progress-height: ${v};
-        --border-radius: ${y};
+        --primary-color: ${n};
+        --accent-color: ${i};
+        --controls-bg: ${r};
+        --button-hover: ${a};
+        --progress-height: ${c};
+        --border-radius: ${d};
       }
       
       .wontum-player-video {
@@ -425,21 +424,7 @@ class ut {
       }
       
       .wontum-quality-menu {
-        position: absolute;
-        bottom: 100%;
-        right: 0;
-        background: rgba(20, 20, 20, 0.95);
-        backdrop-filter: blur(10px);
-        border-radius: 6px;
         padding: 6px 0;
-        margin-bottom: 8px;
-        display: none;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-        min-width: 120px;
-      }
-      
-      .wontum-quality-menu.active {
-        display: block;
       }
       
       .wontum-quality-option {
@@ -462,21 +447,7 @@ class ut {
       }
       
       .wontum-speed-menu {
-        position: absolute;
-        bottom: 100%;
-        right: 0;
-        background: rgba(20, 20, 20, 0.95);
-        backdrop-filter: blur(10px);
-        border-radius: 6px;
         padding: 6px 0;
-        margin-bottom: 8px;
-        display: none;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-        min-width: 120px;
-      }
-      
-      .wontum-speed-menu.active {
-        display: block;
       }
       
       .wontum-speed-option {
@@ -498,24 +469,73 @@ class ut {
         background: rgba(255, 255, 255, 0.05);
       }
       
-      .wontum-settings-menu {
+      .wontum-settings-panel {
         position: absolute;
         bottom: 100%;
         right: 0;
         background: rgba(20, 20, 20, 0.95);
         backdrop-filter: blur(10px);
-        border-radius: 6px;
-        padding: 6px 0;
+        border-radius: 8px;
         margin-bottom: 8px;
-        min-width: 200px;
+        min-width: 320px;
         display: none;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+        overflow: hidden;
+      }
+      
+      .wontum-settings-panel.active {
+        display: flex;
+        flex-direction: column;
+      }
+      
+      .wontum-settings-tabs {
+        display: flex;
+        background: rgba(0, 0, 0, 0.3);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      }
+      
+      .wontum-tab {
+        flex: 1;
+        padding: 10px 12px;
+        background: none;
+        border: none;
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 12px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        border-bottom: 2px solid transparent;
+        font-family: inherit;
+      }
+      
+      .wontum-tab:hover {
+        background: rgba(255, 255, 255, 0.05);
+        color: rgba(255, 255, 255, 0.9);
       }
       
-      .wontum-settings-menu.active {
+      .wontum-tab.active {
+        color: var(--primary-color);
+        border-bottom-color: var(--primary-color);
+        background: rgba(59, 130, 246, 0.1);
+      }
+      
+      .wontum-settings-content {
+        min-height: 120px;
+        max-height: 300px;
+        overflow-y: auto;
+      }
+      
+      .wontum-tab-panel {
+        display: none;
+      }
+      
+      .wontum-tab-panel.active {
         display: block;
       }
       
+      .wontum-settings-menu {
+        padding: 6px 0;
+      }
+      
       .wontum-settings-option {
         padding: 12px 16px;
         cursor: pointer;
@@ -563,21 +583,7 @@ class ut {
       }
       
       .wontum-subtitle-menu {
-        position: absolute;
-        bottom: 100%;
-        right: 0;
-        background: rgba(20, 20, 20, 0.95);
-        backdrop-filter: blur(10px);
-        border-radius: 6px;
         padding: 6px 0;
-        margin-bottom: 8px;
-        display: none;
-        min-width: 150px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-      }
-      
-      .wontum-subtitle-menu.active {
-        display: block;
       }
       
       .wontum-subtitle-option {
@@ -610,7 +616,7 @@ class ut {
         transform: translateY(0) !important;
         pointer-events: all !important;
       }
-    `, document.head.appendChild(g), this.container.classList.add("wontum-player-container");
+    `, document.head.appendChild(m), this.container.classList.add("wontum-player-container");
   }
   createProgressBar() {
     const t = document.createElement("div");
@@ -654,32 +660,32 @@ class ut {
         
         <div class="wontum-spacer"></div>
         
-        <div class="wontum-subtitle-container" style="position: relative;">
-          <button class="wontum-btn wontum-subtitle-btn" aria-label="Subtitles">
-            ${this.getSubtitleIcon()}
-          </button>
-          <div class="wontum-subtitle-menu"></div>
-        </div>
-        
-        <div class="wontum-speed-container" style="position: relative;">
-          <button class="wontum-btn wontum-speed-btn" aria-label="Playback Speed">
-            ${this.getSpeedIcon()}
-          </button>
-          <div class="wontum-speed-menu"></div>
-        </div>
-        
-        <div class="wontum-quality-container" style="position: relative;">
-          <button class="wontum-btn wontum-quality-btn" aria-label="Quality">
-            ${this.getQualityIcon()}
-          </button>
-          <div class="wontum-quality-menu"></div>
-        </div>
-        
         <div class="wontum-settings-container" style="position: relative;">
           <button class="wontum-btn wontum-settings-btn" aria-label="Settings">
             ${this.getSettingsIcon()}
           </button>
-          <div class="wontum-settings-menu"></div>
+          <div class="wontum-settings-panel">
+            <div class="wontum-settings-tabs">
+              <button class="wontum-tab active" data-tab="general">General</button>
+              <button class="wontum-tab" data-tab="quality">Quality</button>
+              <button class="wontum-tab" data-tab="speed">Speed</button>
+              <button class="wontum-tab" data-tab="subtitles">Subtitles</button>
+            </div>
+            <div class="wontum-settings-content">
+              <div class="wontum-tab-panel active" data-panel="general">
+                <div class="wontum-settings-menu"></div>
+              </div>
+              <div class="wontum-tab-panel" data-panel="quality">
+                <div class="wontum-quality-menu"></div>
+              </div>
+              <div class="wontum-tab-panel" data-panel="speed">
+                <div class="wontum-speed-menu"></div>
+              </div>
+              <div class="wontum-tab-panel" data-panel="subtitles">
+                <div class="wontum-subtitle-menu"></div>
+              </div>
+            </div>
+          </div>
         </div>
         
         <button class="wontum-btn wontum-fullscreen-btn" aria-label="Fullscreen">
@@ -699,28 +705,28 @@ class ut {
       this.player.skipBackward(10);
     }), this.skipForwardButton.addEventListener("click", () => {
       this.player.skipForward(10);
-    }), this.progressInput.addEventListener("input", (e) => {
-      const s = e.target, r = parseFloat(s.value), i = this.player.getState(), l = r / 100 * i.duration;
-      this.player.seek(l);
-    }), this.volumeSlider.addEventListener("input", (e) => {
-      const s = e.target, r = parseFloat(s.value) / 100;
-      this.player.setVolume(r);
+    }), this.progressInput.addEventListener("input", (n) => {
+      const i = n.target, s = parseFloat(i.value), r = this.player.getState(), a = s / 100 * r.duration;
+      this.player.seek(a);
+    }), this.volumeSlider.addEventListener("input", (n) => {
+      const i = n.target, s = parseFloat(i.value) / 100;
+      this.player.setVolume(s);
     }), this.volumeButton.addEventListener("click", () => {
       this.player.getState().muted ? this.player.unmute() : this.player.mute();
     }), this.fullscreenButton.addEventListener("click", () => {
       this.player.getState().fullscreen ? this.player.exitFullscreen() : this.player.enterFullscreen();
-    }), this.qualityButton.addEventListener("click", () => {
-      var s, r, i;
-      this.controlsContainer.querySelector(".wontum-quality-menu").classList.toggle("active"), (s = this.controlsContainer.querySelector(".wontum-settings-menu")) == null || s.classList.remove("active"), (r = this.controlsContainer.querySelector(".wontum-subtitle-menu")) == null || r.classList.remove("active"), (i = this.controlsContainer.querySelector(".wontum-speed-menu")) == null || i.classList.remove("active");
-    }), this.subtitleButton.addEventListener("click", () => {
-      var s, r, i;
-      this.controlsContainer.querySelector(".wontum-subtitle-menu").classList.toggle("active"), (s = this.controlsContainer.querySelector(".wontum-settings-menu")) == null || s.classList.remove("active"), (r = this.controlsContainer.querySelector(".wontum-quality-menu")) == null || r.classList.remove("active"), (i = this.controlsContainer.querySelector(".wontum-speed-menu")) == null || i.classList.remove("active"), this.updateSubtitleMenu();
-    }), this.speedButton.addEventListener("click", () => {
-      var s, r, i;
-      this.controlsContainer.querySelector(".wontum-speed-menu").classList.toggle("active"), (s = this.controlsContainer.querySelector(".wontum-settings-menu")) == null || s.classList.remove("active"), (r = this.controlsContainer.querySelector(".wontum-quality-menu")) == null || r.classList.remove("active"), (i = this.controlsContainer.querySelector(".wontum-subtitle-menu")) == null || i.classList.remove("active"), this.updateSpeedMenu();
     }), this.settingsButton.addEventListener("click", () => {
-      var s, r, i;
-      this.controlsContainer.querySelector(".wontum-settings-menu").classList.toggle("active"), (s = this.controlsContainer.querySelector(".wontum-quality-menu")) == null || s.classList.remove("active"), (r = this.controlsContainer.querySelector(".wontum-subtitle-menu")) == null || r.classList.remove("active"), (i = this.controlsContainer.querySelector(".wontum-speed-menu")) == null || i.classList.remove("active"), this.updateSettingsMenu();
+      const n = this.controlsContainer.querySelector(".wontum-settings-panel");
+      n.classList.toggle("active"), n.classList.contains("active") && (this.updateSettingsMenu(), this.updateQualityMenu(), this.updateSpeedMenu(), this.updateSubtitleMenu());
+    });
+    const t = this.controlsContainer.querySelectorAll(".wontum-tab");
+    t.forEach((n) => {
+      n.addEventListener("click", (i) => {
+        const s = i.currentTarget, r = s.getAttribute("data-tab");
+        t.forEach((d) => d.classList.remove("active")), s.classList.add("active"), this.controlsContainer.querySelectorAll(".wontum-tab-panel").forEach((d) => d.classList.remove("active"));
+        const c = this.controlsContainer.querySelector(`[data-panel="${r}"]`);
+        c == null || c.classList.add("active");
+      });
     }), this.player.getVideoElement().addEventListener("click", () => {
       this.player.getState().playing ? this.player.pause() : this.player.play();
     }), this.container.addEventListener("mousemove", () => {
@@ -735,19 +741,19 @@ class ut {
     }), this.player.on("pause", () => {
       this.playButton.innerHTML = this.getPlayIcon();
     }), this.player.on("timeupdate", (t) => {
-      const { currentTime: e } = t.data, s = this.player.getState();
-      if (s.duration > 0) {
-        const i = e / s.duration * 100;
-        this.progressBar.style.width = `${i}%`, this.progressInput.value = i.toString();
+      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 r = this.controlsContainer.querySelector(".wontum-current-time");
-      r.textContent = this.formatTime(e);
+      const i = this.controlsContainer.querySelector(".wontum-current-time");
+      i.textContent = this.formatTime(e);
     }), this.player.on("loadedmetadata", (t) => {
-      const { duration: e } = t.data, s = this.controlsContainer.querySelector(".wontum-duration");
-      s.textContent = this.formatTime(e), t.data.qualities && this.updateQualityMenu(t.data.qualities);
+      const { duration: e } = t.data, n = this.controlsContainer.querySelector(".wontum-duration");
+      n.textContent = this.formatTime(e), t.data.qualities && this.updateQualityMenu(t.data.qualities);
     }), this.player.on("volumechange", (t) => {
-      const { volume: e, muted: s } = t.data;
-      this.volumeSlider.value = (e * 100).toString(), this.volumeButton.innerHTML = s ? this.getMutedIcon() : this.getVolumeIcon();
+      const { volume: e, muted: n } = t.data;
+      this.volumeSlider.value = (e * 100).toString(), this.volumeButton.innerHTML = n ? this.getMutedIcon() : this.getVolumeIcon();
     }), this.player.on("waiting", () => {
       const t = this.controlsContainer.querySelector(".wontum-loading");
       t.style.display = "block";
@@ -762,35 +768,35 @@ class ut {
       t.innerHTML = '<div class="wontum-subtitle-option">No subtitles available</div>';
       return;
     }
-    const s = e.findIndex((r) => r.mode === "showing");
+    const n = e.findIndex((i) => i.mode === "showing");
     t.innerHTML = `
-      <div class="wontum-subtitle-option ${s === -1 ? "active" : ""}" data-track="-1">Off</div>
+      <div class="wontum-subtitle-option ${n === -1 ? "active" : ""}" data-track="-1">Off</div>
       ${e.map(
-      (r, i) => `
-        <div class="wontum-subtitle-option ${i === s ? "active" : ""}" data-track="${i}">
-          ${r.label || r.language || `Track ${i + 1}`}
+      (i, s) => `
+        <div class="wontum-subtitle-option ${s === n ? "active" : ""}" data-track="${s}">
+          ${i.label || i.language || `Track ${s + 1}`}
         </div>
       `
     ).join("")}
-    `, t.querySelectorAll(".wontum-subtitle-option").forEach((r) => {
-      r.addEventListener("click", (i) => {
-        const l = i.target, u = parseInt(l.dataset.track || "-1");
-        u === -1 ? this.player.disableSubtitles() : this.player.enableSubtitles(u), t.querySelectorAll(".wontum-subtitle-option").forEach((v) => v.classList.remove("active")), l.classList.add("active"), t.classList.remove("active");
+    `, t.querySelectorAll(".wontum-subtitle-option").forEach((i) => {
+      i.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((c) => c.classList.remove("active")), r.classList.add("active");
       });
     });
   }
   updateSpeedMenu() {
-    const t = this.controlsContainer.querySelector(".wontum-speed-menu"), s = this.player.getState().playbackRate || 1, r = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
-    t.innerHTML = r.map(
-      (i) => `
-        <div class="wontum-speed-option ${s === i ? "active" : ""}" data-speed="${i}">
-          ${i === 1 ? "Normal" : i + "x"}
+    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"}
         </div>
       `
-    ).join(""), t.querySelectorAll(".wontum-speed-option").forEach((i) => {
-      i.addEventListener("click", (l) => {
-        const u = l.target, v = parseFloat(u.dataset.speed || "1");
-        this.player.setPlaybackRate(v), t.querySelectorAll(".wontum-speed-option").forEach((y) => y.classList.remove("active")), u.classList.add("active"), t.classList.remove("active");
+    ).join(""), t.querySelectorAll(".wontum-speed-option").forEach((s) => {
+      s.addEventListener("click", (r) => {
+        const a = r.target, c = parseFloat(a.dataset.speed || "1");
+        this.player.setPlaybackRate(c), t.querySelectorAll(".wontum-speed-option").forEach((d) => d.classList.remove("active")), a.classList.add("active");
       });
     });
   }
@@ -808,18 +814,22 @@ class ut {
     });
   }
   updateQualityMenu(t) {
-    const e = this.controlsContainer.querySelector(".wontum-quality-menu");
+    const e = this.controlsContainer.querySelector(".wontum-quality-menu"), n = t || this.player.getQualities();
+    if (!n || n.length === 0) {
+      e.innerHTML = '<div class="wontum-quality-option">No qualities available</div>';
+      return;
+    }
     e.innerHTML = `
       <div class="wontum-quality-option active" data-quality="-1">Auto</div>
-      ${t.map(
-      (s, r) => `
-        <div class="wontum-quality-option" data-quality="${r}">${s.name}</div>
+      ${n.map(
+      (i, s) => `
+        <div class="wontum-quality-option" data-quality="${s}">${i.name}</div>
       `
     ).join("")}
-    `, e.querySelectorAll(".wontum-quality-option").forEach((s) => {
-      s.addEventListener("click", (r) => {
-        const i = r.target, l = parseInt(i.dataset.quality || "-1");
-        this.player.setQuality(l), e.querySelectorAll(".wontum-quality-option").forEach((u) => u.classList.remove("active")), i.classList.add("active"), e.classList.remove("active");
+    `, e.querySelectorAll(".wontum-quality-option").forEach((i) => {
+      i.addEventListener("click", (s) => {
+        const r = s.target, a = parseInt(r.dataset.quality || "-1");
+        this.player.setQuality(a), e.querySelectorAll(".wontum-quality-option").forEach((c) => c.classList.remove("active")), r.classList.add("active");
       });
     });
   }
@@ -837,8 +847,8 @@ class ut {
   }
   formatTime(t) {
     if (isNaN(t)) return "0:00";
-    const e = Math.floor(t / 60), s = Math.floor(t % 60);
-    return `${e}:${s.toString().padStart(2, "0")}`;
+    const e = Math.floor(t / 60), n = Math.floor(t % 60);
+    return `${e}:${n.toString().padStart(2, "0")}`;
   }
   // SVG Icons
   getPlayIcon() {
@@ -856,9 +866,6 @@ class ut {
   getFullscreenIcon() {
     return '<svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>';
   }
-  getQualityIcon() {
-    return '<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8 12H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm7-1c0 .55-.45 1-1 1h-.75v1.5h-1.5V15H14c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v4zm-3.5-.5h2v-3h-2v3z"/></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"/>
@@ -877,12 +884,6 @@ class ut {
 			<text x="30" y="35" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="white" text-anchor="middle">10</text>
 		</svg>`;
   }
-  getSubtitleIcon() {
-    return '<svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z"/></svg>';
-  }
-  getSpeedIcon() {
-    return '<svg viewBox="0 0 24 24"><path d="M20.38 8.57l-1.23 1.85a8 8 0 0 1-.22 7.58H5.07A8 8 0 0 1 15.58 6.85l1.85-1.23A10 10 0 0 0 3.35 19a2 2 0 0 0 1.72 1h13.85a2 2 0 0 0 1.74-1 10 10 0 0 0-.27-10.44zm-9.79 6.84a2 2 0 0 0 2.83 0l5.66-8.49-8.49 5.66a2 2 0 0 0 0 2.83z"/></svg>';
-  }
   getSettingsIcon() {
     return '<svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>';
   }
@@ -890,7 +891,7 @@ class ut {
     this.hideControlsTimeout && clearTimeout(this.hideControlsTimeout), this.controlsContainer.remove();
   }
 }
-class dt {
+class Q {
   constructor(t) {
     o(this, "config");
     o(this, "urlCache", /* @__PURE__ */ new Map());
@@ -911,8 +912,8 @@ class dt {
     if (!((e = this.config) != null && e.cloudFrontDomains) || this.config.cloudFrontDomains.length === 0)
       return !1;
     try {
-      const s = new URL(t);
-      return this.config.cloudFrontDomains.some((r) => s.hostname.includes(r));
+      const n = new URL(t);
+      return this.config.cloudFrontDomains.some((i) => n.hostname.includes(i));
     } catch {
       return !1;
     }
@@ -933,10 +934,10 @@ class dt {
       return t;
     if ((e = this.config) != null && e.signUrl)
       try {
-        const s = await this.config.signUrl(t);
-        return this.signedUrls.add(t), s;
-      } catch (s) {
-        throw console.error("Failed to sign CloudFront URL:", s), new Error("Failed to sign CloudFront URL");
+        const n = await this.config.signUrl(t);
+        return this.signedUrls.add(t), n;
+      } catch (n) {
+        throw console.error("Failed to sign CloudFront URL:", n), new Error("Failed to sign CloudFront URL");
       }
     return console.warn("No signUrl function provided. CloudFront cookies may not be set."), t;
   }
@@ -949,34 +950,34 @@ class dt {
     const e = t.match(/s3[.-]([^.]+)\.amazonaws\.com\/(.+)/);
     if (e)
       return e[2];
-    const s = t.match(/([^.]+)\.s3\.amazonaws\.com\/(.+)/);
-    return s ? s[2] : t;
+    const n = t.match(/([^.]+)\.s3\.amazonaws\.com\/(.+)/);
+    return n ? n[2] : t;
   }
   /**
    * Get presigned URL from cache or generate new one
    */
   async getPresignedUrl(t) {
-    var r;
-    const e = this.extractS3Key(t), s = this.urlCache.get(e);
-    if (s && s.expiresAt > Date.now())
-      return s.url;
-    if ((r = this.config) != null && r.getPresignedUrl)
+    var i;
+    const e = this.extractS3Key(t), n = this.urlCache.get(e);
+    if (n && n.expiresAt > Date.now())
+      return n.url;
+    if ((i = this.config) != null && i.getPresignedUrl)
       try {
-        const i = await this.config.getPresignedUrl(e);
+        const s = await this.config.getPresignedUrl(e);
         return this.urlCache.set(e, {
-          url: i,
+          url: s,
           expiresAt: Date.now() + 50 * 60 * 1e3
-        }), i;
-      } catch (i) {
-        throw console.error("Failed to generate presigned URL:", i), new Error("Failed to generate presigned URL for S3 object");
+        }), s;
+      } catch (s) {
+        throw console.error("Failed to generate presigned URL:", s), 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, s = "us-east-1") {
-    return `https://${t}.s3.${s}.amazonaws.com/${e}`;
+  static constructS3Url(t, e, n = "us-east-1") {
+    return `https://${t}.s3.${n}.amazonaws.com/${e}`;
   }
   /**
    * Helper to parse S3 URI (s3://bucket/key)
@@ -984,8 +985,8 @@ class dt {
   static parseS3Uri(t) {
     if (!t.startsWith("s3://"))
       return null;
-    const e = t.replace("s3://", "").split("/"), s = e[0], r = e.slice(1).join("/");
-    return { bucket: s, key: r };
+    const e = t.replace("s3://", "").split("/"), n = e[0], i = e.slice(1).join("/");
+    return { bucket: n, key: i };
   }
   /**
    * Clear URL cache and signed URLs
@@ -994,7 +995,7 @@ class dt {
     this.urlCache.clear(), this.signedUrls.clear();
   }
 }
-class nt {
+class R {
   constructor(t) {
     o(this, "container");
     o(this, "videoElement");
@@ -1004,6 +1005,7 @@ class nt {
     o(this, "analytics");
     o(this, "s3Handler");
     o(this, "uiController");
+    o(this, "qualities", []);
     o(this, "state", {
       playing: !1,
       paused: !0,
@@ -1020,12 +1022,12 @@ class nt {
     });
     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 ct(t.analytics), this.s3Handler = new dt(t.s3Config), this.videoElement = this.createVideoElement(), this.container.appendChild(this.videoElement), this.uiController = new ut(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 j(t.analytics), this.s3Handler = new Q(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) => {
-      const s = document.createElement("track");
-      s.kind = "subtitles", s.label = e.label, s.src = e.src, s.srclang = e.srclang, e.default && (s.default = !0), this.videoElement.appendChild(s);
+      const n = document.createElement("track");
+      n.kind = "subtitles", n.label = e.label, n.src = e.src, n.srclang = e.srclang, e.default && (n.default = !0), this.videoElement.appendChild(n);
     });
   }
   createVideoElement() {
@@ -1088,16 +1090,16 @@ class nt {
   async loadSource(t) {
     try {
       const e = await this.s3Handler.processUrl(t);
-      if (w.isSupported())
-        this.hls = new w(this.config.hlsConfig), this.hls.loadSource(e), this.hls.attachMedia(this.videoElement), this.hls.on(w.Events.MANIFEST_PARSED, (s, r) => {
-          const i = this.extractQualities(r.levels);
-          this.state.availableQualities = i.map((l) => l.name), this.emit("loadedmetadata", { qualities: i });
-        }), this.hls.on(w.Events.LEVEL_SWITCHED, (s, r) => {
-          var l;
-          const i = (l = this.hls) == null ? void 0 : l.levels[r.level];
-          i && (this.state.quality = `${i.height}p`, this.emit("qualitychange", { quality: this.state.quality }));
-        }), this.hls.on(w.Events.ERROR, (s, r) => {
-          r.fatal && this.handleHlsError(r);
+      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 r;
+          const s = (r = this.hls) == null ? void 0 : r.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);
         });
       else if (this.videoElement.canPlayType("application/vnd.apple.mpegurl"))
         this.videoElement.src = e;
@@ -1116,13 +1118,13 @@ class nt {
     }));
   }
   handleHlsError(t) {
-    var e, s;
+    var e, n;
     switch (t.type) {
-      case w.ErrorTypes.NETWORK_ERROR:
+      case p.ErrorTypes.NETWORK_ERROR:
         console.error("Network error occurred"), (e = this.hls) == null || e.startLoad();
         break;
-      case w.ErrorTypes.MEDIA_ERROR:
-        console.error("Media error occurred"), (s = this.hls) == null || s.recoverMediaError();
+      case p.ErrorTypes.MEDIA_ERROR:
+        console.error("Media error occurred"), (n = this.hls) == null || n.recoverMediaError();
         break;
       default:
         console.error("Fatal error occurred:", t), this.destroy();
@@ -1172,6 +1174,9 @@ class nt {
   setQuality(t) {
     this.hls && (this.hls.currentLevel = t);
   }
+  getQualities() {
+    return this.qualities;
+  }
   enterFullscreen() {
     this.container.requestFullscreen && (this.container.requestFullscreen(), this.state.fullscreen = !0, this.emit("fullscreenchange", { fullscreen: !0 }));
   }
@@ -1189,8 +1194,8 @@ class nt {
    */
   enableSubtitles(t) {
     const e = this.videoElement.textTracks;
-    for (let s = 0; s < e.length; s++)
-      e[s].mode = s === t ? "showing" : "hidden";
+    for (let n = 0; n < e.length; n++)
+      e[n].mode = n === t ? "showing" : "hidden";
   }
   /**
    * Disable all subtitles
@@ -1205,7 +1210,7 @@ class nt {
    */
   toggleSubtitles() {
     const t = this.videoElement.textTracks;
-    return Array.from(t).some((s) => s.mode === "showing") ? (this.disableSubtitles(), !1) : t.length > 0 ? (this.enableSubtitles(0), !0) : !1;
+    return Array.from(t).some((n) => n.mode === "showing") ? (this.disableSubtitles(), !1) : t.length > 0 ? (this.enableSubtitles(0), !0) : !1;
   }
   /**
    * Get available subtitle tracks
@@ -1224,403 +1229,132 @@ class nt {
     this.eventListeners.has(t) || this.eventListeners.set(t, /* @__PURE__ */ new Set()), this.eventListeners.get(t).add(e);
   }
   off(t, e) {
-    var s;
-    (s = this.eventListeners.get(t)) == null || s.delete(e);
+    var n;
+    (n = this.eventListeners.get(t)) == null || n.delete(e);
   }
   emit(t, e) {
-    var r;
-    const s = {
+    var i;
+    const n = {
       type: t,
       data: e,
       timestamp: Date.now()
     };
-    (r = this.eventListeners.get(t)) == null || r.forEach((i) => {
-      i(s);
+    (i = this.eventListeners.get(t)) == null || i.forEach((s) => {
+      s(n);
     });
   }
   destroy() {
     this.hls && (this.hls.destroy(), this.hls = null), this.uiController.destroy(), this.videoElement.remove(), this.eventListeners.clear(), this.analytics.destroy();
   }
 }
-var W = { exports: {} }, q = {};
-/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var tt;
-function ht() {
-  if (tt) return q;
-  tt = 1;
-  var c = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
-  function e(s, r, i) {
-    var l = null;
-    if (i !== void 0 && (l = "" + i), r.key !== void 0 && (l = "" + r.key), "key" in r) {
-      i = {};
-      for (var u in r)
-        u !== "key" && (i[u] = r[u]);
-    } else i = r;
-    return r = i.ref, {
-      $$typeof: c,
-      type: s,
-      key: l,
-      ref: r !== void 0 ? r : null,
-      props: i
-    };
-  }
-  return q.Fragment = t, q.jsx = e, q.jsxs = e, q;
-}
-var P = {};
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var et;
-function mt() {
-  return et || (et = 1, process.env.NODE_ENV !== "production" && function() {
-    function c(n) {
-      if (n == null) return null;
-      if (typeof n == "function")
-        return n.$$typeof === I ? null : n.displayName || n.name || null;
-      if (typeof n == "string") return n;
-      switch (n) {
-        case k:
-          return "Fragment";
-        case F:
-          return "Profiler";
-        case M:
-          return "StrictMode";
-        case R:
-          return "Suspense";
-        case _:
-          return "SuspenseList";
-        case f:
-          return "Activity";
-      }
-      if (typeof n == "object")
-        switch (typeof n.tag == "number" && console.error(
-          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), n.$$typeof) {
-          case A:
-            return "Portal";
-          case T:
-            return n.displayName || "Context";
-          case z:
-            return (n._context.displayName || "Context") + ".Consumer";
-          case L:
-            var a = n.render;
-            return n = n.displayName, n || (n = a.displayName || a.name || "", n = n !== "" ? "ForwardRef(" + n + ")" : "ForwardRef"), n;
-          case O:
-            return a = n.displayName || null, a !== null ? a : c(n.type) || "Memo";
-          case p:
-            a = n._payload, n = n._init;
-            try {
-              return c(n(a));
-            } catch {
-            }
-        }
-      return null;
-    }
-    function t(n) {
-      return "" + n;
-    }
-    function e(n) {
-      try {
-        t(n);
-        var a = !1;
-      } catch {
-        a = !0;
-      }
-      if (a) {
-        a = console;
-        var d = a.error, h = typeof Symbol == "function" && Symbol.toStringTag && n[Symbol.toStringTag] || n.constructor.name || "Object";
-        return d.call(
-          a,
-          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          h
-        ), t(n);
-      }
-    }
-    function s(n) {
-      if (n === k) return "<>";
-      if (typeof n == "object" && n !== null && n.$$typeof === p)
-        return "<...>";
-      try {
-        var a = c(n);
-        return a ? "<" + a + ">" : "<...>";
-      } catch {
-        return "<...>";
-      }
-    }
-    function r() {
-      var n = j.A;
-      return n === null ? null : n.getOwner();
-    }
-    function i() {
-      return Error("react-stack-top-frame");
-    }
-    function l(n) {
-      if (Q.call(n, "key")) {
-        var a = Object.getOwnPropertyDescriptor(n, "key").get;
-        if (a && a.isReactWarning) return !1;
-      }
-      return n.key !== void 0;
-    }
-    function u(n, a) {
-      function d() {
-        J || (J = !0, console.error(
-          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          a
-        ));
-      }
-      d.isReactWarning = !0, Object.defineProperty(n, "key", {
-        get: d,
-        configurable: !0
-      });
-    }
-    function v() {
-      var n = c(this.type);
-      return X[n] || (X[n] = !0, console.error(
-        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      )), n = this.props.ref, n !== void 0 ? n : null;
-    }
-    function y(n, a, d, h, B, H) {
-      var m = d.ref;
-      return n = {
-        $$typeof: C,
-        type: n,
-        key: a,
-        props: d,
-        _owner: h
-      }, (m !== void 0 ? m : null) !== null ? Object.defineProperty(n, "ref", {
-        enumerable: !1,
-        get: v
-      }) : Object.defineProperty(n, "ref", { enumerable: !1, value: null }), n._store = {}, Object.defineProperty(n._store, "validated", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: 0
-      }), Object.defineProperty(n, "_debugInfo", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: null
-      }), Object.defineProperty(n, "_debugStack", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: B
-      }), Object.defineProperty(n, "_debugTask", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: H
-      }), Object.freeze && (Object.freeze(n.props), Object.freeze(n)), n;
-    }
-    function g(n, a, d, h, B, H) {
-      var m = a.children;
-      if (m !== void 0)
-        if (h)
-          if (it(m)) {
-            for (h = 0; h < m.length; h++)
-              x(m[h]);
-            Object.freeze && Object.freeze(m);
-          } else
-            console.error(
-              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
-            );
-        else x(m);
-      if (Q.call(a, "key")) {
-        m = c(n);
-        var E = Object.keys(a).filter(function(ot) {
-          return ot !== "key";
-        });
-        h = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}", K[m + h] || (E = 0 < E.length ? "{" + E.join(": ..., ") + ": ...}" : "{}", console.error(
-          `A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`,
-          h,
-          m,
-          E,
-          m
-        ), K[m + h] = !0);
-      }
-      if (m = null, d !== void 0 && (e(d), m = "" + d), l(a) && (e(a.key), m = "" + a.key), "key" in a) {
-        d = {};
-        for (var N in a)
-          N !== "key" && (d[N] = a[N]);
-      } else d = a;
-      return m && u(
-        d,
-        typeof n == "function" ? n.displayName || n.name || "Unknown" : n
-      ), y(
-        n,
-        m,
-        d,
-        r(),
-        B,
-        H
-      );
-    }
-    function x(n) {
-      S(n) ? n._store && (n._store.validated = 1) : typeof n == "object" && n !== null && n.$$typeof === p && (n._payload.status === "fulfilled" ? S(n._payload.value) && n._payload.value._store && (n._payload.value._store.validated = 1) : n._store && (n._store.validated = 1));
-    }
-    function S(n) {
-      return typeof n == "object" && n !== null && n.$$typeof === C;
-    }
-    var b = Y, C = Symbol.for("react.transitional.element"), A = Symbol.for("react.portal"), k = Symbol.for("react.fragment"), M = Symbol.for("react.strict_mode"), F = Symbol.for("react.profiler"), z = Symbol.for("react.consumer"), T = Symbol.for("react.context"), L = Symbol.for("react.forward_ref"), R = Symbol.for("react.suspense"), _ = Symbol.for("react.suspense_list"), O = Symbol.for("react.memo"), p = Symbol.for("react.lazy"), f = Symbol.for("react.activity"), I = Symbol.for("react.client.reference"), j = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Q = Object.prototype.hasOwnProperty, it = Array.isArray, D = console.createTask ? console.createTask : function() {
-      return null;
-    };
-    b = {
-      react_stack_bottom_frame: function(n) {
-        return n();
-      }
-    };
-    var J, X = {}, G = b.react_stack_bottom_frame.bind(
-      b,
-      i
-    )(), Z = D(s(i)), K = {};
-    P.Fragment = k, P.jsx = function(n, a, d) {
-      var h = 1e4 > j.recentlyCreatedOwnerStacks++;
-      return g(
-        n,
-        a,
-        d,
-        !1,
-        h ? Error("react-stack-top-frame") : G,
-        h ? D(s(n)) : Z
-      );
-    }, P.jsxs = function(n, a, d) {
-      var h = 1e4 > j.recentlyCreatedOwnerStacks++;
-      return g(
-        n,
-        a,
-        d,
-        !0,
-        h ? Error("react-stack-top-frame") : G,
-        h ? D(s(n)) : Z
-      );
-    };
-  }()), P;
-}
-process.env.NODE_ENV === "production" ? W.exports = ht() : W.exports = mt();
-var st = W.exports;
-const ft = (c) => {
+const X = (l) => {
   const {
     src: t,
     autoplay: e,
-    muted: s,
-    controls: r = !0,
-    poster: i,
-    preload: l,
-    theme: u,
-    s3Config: v,
-    analytics: y,
-    hlsConfig: g,
-    onReady: x,
-    onPlay: S,
-    onPause: b,
-    onEnded: C,
-    onTimeUpdate: A,
-    onVolumeChange: k,
-    onError: M,
-    style: F,
-    className: z,
-    width: T = "100%",
-    height: L = "500px"
-  } = c, R = U(null), _ = U(null);
-  return $(() => {
-    if (!R.current) return;
-    const O = {
+    muted: n,
+    controls: i = !0,
+    poster: s,
+    preload: r,
+    theme: a,
+    s3Config: c,
+    analytics: d,
+    hlsConfig: m,
+    subtitles: z,
+    stickyControls: A,
+    onReady: k,
+    onPlay: E,
+    onPause: x,
+    onEnded: S,
+    onTimeUpdate: C,
+    onVolumeChange: L,
+    onError: T,
+    onLoadedMetadata: q,
+    onQualityChange: M,
+    style: H,
+    className: U,
+    width: g = "100%",
+    height: v = "500px"
+  } = l, y = w(null), B = w(null);
+  return f(() => {
+    if (!y.current) return;
+    const D = {
       src: t,
-      container: R.current,
+      container: y.current,
       autoplay: e,
-      muted: s,
-      controls: r,
-      poster: i,
-      preload: l,
-      theme: u,
-      s3Config: v,
-      analytics: y,
-      hlsConfig: g
-    }, p = new nt(O);
-    return _.current = p, S && p.on("play", S), b && p.on("pause", b), C && p.on("ended", C), M && p.on("error", (f) => {
+      muted: n,
+      controls: i,
+      poster: s,
+      preload: r,
+      theme: a,
+      s3Config: c,
+      analytics: d,
+      hlsConfig: m,
+      subtitles: z,
+      stickyControls: A
+    }, u = new R(D);
+    return B.current = u, E && u.on("play", E), x && u.on("pause", x), S && u.on("ended", S), T && u.on("error", (h) => {
       var I;
-      return M((I = f.data) == null ? void 0 : I.error);
-    }), A && p.on("timeupdate", (f) => A(f.data.currentTime)), k && p.on("volumechange", (f) => k(f.data.volume, f.data.muted)), x && x(p), () => {
-      p.destroy(), _.current = null;
+      return T((I = h.data) == null ? void 0 : I.error);
+    }), q && u.on("loadedmetadata", q), M && u.on("qualitychange", (h) => M(h.data.level)), C && u.on("timeupdate", (h) => C(h.data.currentTime)), L && u.on("volumechange", (h) => L(h.data.volume, h.data.muted)), k && k(u), () => {
+      u.destroy(), B.current = null;
     };
-  }, [t]), $(() => {
-    _.current;
-  }, [e, s, r]), /* @__PURE__ */ st.jsx(
+  }, [t]), /* @__PURE__ */ $(
     "div",
     {
-      ref: R,
-      className: z,
+      ref: y,
+      className: U,
       style: {
-        width: typeof T == "number" ? `${T}px` : T,
-        height: typeof L == "number" ? `${L}px` : L,
-        ...F
+        width: typeof g == "number" ? `${g}px` : g,
+        height: typeof v == "number" ? `${v}px` : v,
+        ...H
       }
     }
   );
-}, yt = (c) => {
-  const [t, e] = V(null), [s, r] = V(null), i = U(null);
-  return $(() => {
-    if (!i.current) return;
-    const l = new nt({
-      ...c,
-      container: i.current
+}, G = (l) => {
+  const [t, e] = b(null), [n, i] = b(null), s = w(null);
+  return f(() => {
+    if (!s.current) return;
+    const r = new R({
+      ...l,
+      container: s.current
     });
-    e(l);
-    const u = () => {
-      r(l.getState());
+    e(r);
+    const a = () => {
+      i(r.getState());
     };
-    return l.on("play", u), l.on("pause", u), l.on("timeupdate", u), l.on("volumechange", u), l.on("loadedmetadata", u), () => {
-      l.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: i,
+  }, [l.src]), {
+    containerRef: s,
     player: t,
-    state: s
+    state: n
   };
-}, rt = Y.createContext({
+}, P = F.createContext({
   player: null,
   state: null
-}), bt = (c) => {
-  const { player: t, children: e } = c, [s, r] = V(t.getState());
-  return $(() => {
-    const i = () => {
-      r(t.getState());
+}), J = (l) => {
+  const { player: t, children: e } = l, [n, i] = b(t.getState());
+  return f(() => {
+    const s = () => {
+      i(t.getState());
     };
-    return t.on("play", i), t.on("pause", i), t.on("timeupdate", i), t.on("volumechange", i), t.on("loadedmetadata", i), () => {
+    return t.on("play", s), t.on("pause", s), t.on("timeupdate", s), t.on("volumechange", s), t.on("loadedmetadata", s), () => {
     };
-  }, [t]), /* @__PURE__ */ st.jsx(rt.Provider, { value: { player: t, state: s }, children: e });
-}, wt = () => {
-  const c = Y.useContext(rt);
-  if (!c.player)
+  }, [t]), /* @__PURE__ */ $(P.Provider, { value: { player: t, state: n }, children: e });
+}, Z = () => {
+  const l = F.useContext(P);
+  if (!l.player)
     throw new Error("useWontumPlayerContext must be used within WontumPlayerProvider");
-  return c;
+  return l;
 };
 export {
-  ct as Analytics,
-  dt as S3Handler,
-  ut as UIController,
-  nt as WontumPlayer,
-  bt as WontumPlayerProvider,
-  ft as WontumPlayerReact,
-  yt as useWontumPlayer,
-  wt as useWontumPlayerContext
+  j as Analytics,
+  Q as S3Handler,
+  W as UIController,
+  R as WontumPlayer,
+  J as WontumPlayerProvider,
+  X as WontumPlayerReact,
+  G as useWontumPlayer,
+  Z as useWontumPlayerContext
 };