@obipascal/player 1.0.0

package/dist/wontum-player.esm.js

@@ -0,0 +1,1626 @@
+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 {
+  constructor(t) {
+    o(this, "config");
+    o(this, "sessionId");
+    o(this, "events", []);
+    o(this, "sessionStartTime");
+    o(this, "playbackStartTime", null);
+    o(this, "totalPlayTime", 0);
+    o(this, "totalBufferTime", 0);
+    o(this, "bufferStartTime", null);
+    o(this, "rebufferCount", 0);
+    o(this, "seekCount", 0);
+    var e;
+    this.config = t, this.sessionId = (t == null ? void 0 : t.sessionId) || this.generateSessionId(), this.sessionStartTime = Date.now(), (e = this.config) != null && e.enabled && this.trackEvent("session_start", this.getSessionData());
+  }
+  trackEvent(t, e = {}) {
+    var r;
+    if (!((r = this.config) != null && r.enabled)) return;
+    const s = {
+      eventType: t,
+      timestamp: Date.now(),
+      sessionId: this.sessionId,
+      videoId: this.config.videoId,
+      userId: this.config.userId,
+      data: {
+        ...e,
+        ...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);
+  }
+  updateMetrics(t, e) {
+    switch (t) {
+      case "play":
+        this.playbackStartTime = Date.now();
+        break;
+      case "pause":
+      case "ended":
+        this.playbackStartTime && (this.totalPlayTime += Date.now() - this.playbackStartTime, this.playbackStartTime = null);
+        break;
+      case "buffering_start":
+        this.bufferStartTime = Date.now(), this.rebufferCount++;
+        break;
+      case "buffering_end":
+        this.bufferStartTime && (this.totalBufferTime += Date.now() - this.bufferStartTime, this.bufferStartTime = null);
+        break;
+      case "seeked":
+        this.seekCount++;
+        break;
+    }
+  }
+  getQoEMetrics() {
+    const t = Date.now() - this.sessionStartTime, e = this.totalPlayTime > 0 ? this.totalBufferTime / this.totalPlayTime : 0;
+    return {
+      sessionDuration: t,
+      totalPlayTime: this.totalPlayTime,
+      totalBufferTime: this.totalBufferTime,
+      bufferingRatio: Math.round(e * 1e3) / 1e3,
+      rebufferCount: this.rebufferCount,
+      seekCount: this.seekCount
+    };
+  }
+  getSessionData() {
+    return {
+      userAgent: navigator.userAgent,
+      platform: navigator.platform,
+      language: navigator.language,
+      screenResolution: `${screen.width}x${screen.height}`,
+      viewport: `${window.innerWidth}x${window.innerHeight}`,
+      connection: this.getConnectionInfo()
+    };
+  }
+  getConnectionInfo() {
+    const t = navigator, e = t.connection || t.mozConnection || t.webkitConnection;
+    return e ? {
+      effectiveType: e.effectiveType,
+      downlink: e.downlink,
+      rtt: e.rtt,
+      saveData: e.saveData
+    } : null;
+  }
+  async sendEvent(t) {
+    var e;
+    if ((e = this.config) != null && e.endpoint)
+      try {
+        await fetch(this.config.endpoint, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify(t)
+        });
+      } catch (s) {
+        console.error("Failed to send analytics event:", s);
+      }
+  }
+  generateSessionId() {
+    return `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+  }
+  getEvents() {
+    return [...this.events];
+  }
+  getMetrics() {
+    return {
+      sessionId: this.sessionId,
+      ...this.getQoEMetrics(),
+      eventCount: this.events.length
+    };
+  }
+  destroy() {
+    var t;
+    (t = this.config) != null && t.enabled && this.trackEvent("session_end", this.getSessionData()), this.events = [];
+  }
+}
+class ut {
+  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, "qualityButton");
+    o(this, "subtitleButton");
+    o(this, "speedButton");
+    o(this, "settingsButton");
+    // private timeDisplay: HTMLElement
+    o(this, "volumeSlider");
+    o(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.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();
+  }
+  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 = `
+      .wontum-player-container {
+        position: relative;
+        background: #000;
+        font-family: ${i};
+        overflow: hidden;
+        --primary-color: ${s};
+        --accent-color: ${r};
+        --controls-bg: ${l};
+        --button-hover: ${u};
+        --progress-height: ${v};
+        --border-radius: ${y};
+      }
+      
+      .wontum-player-video {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+      
+      .wontum-controls {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
+        padding: 15px 20px 12px;
+        transition: opacity 0.3s ease, transform 0.3s ease;
+        z-index: 10;
+      }
+      
+      .wontum-controls.hidden {
+        opacity: 0;
+        transform: translateY(100%);
+        pointer-events: none;
+      }
+      
+      .wontum-center-controls {
+        position: absolute;
+        bottom: 80px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+        gap: 120px;
+        z-index: 15;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+      }
+      
+      .wontum-player-container:hover .wontum-center-controls {
+        opacity: 1;
+      }
+      
+      .wontum-center-btn {
+        background: rgba(0, 0, 0, 0.75);
+        border: none;
+        color: white;
+        cursor: pointer;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        transition: all 0.2s ease;
+        backdrop-filter: blur(10px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+      }
+      
+      .wontum-center-btn:hover {
+        background: rgba(255, 255, 255, 0.25);
+        transform: scale(1.08);
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
+      }
+      
+      .wontum-center-btn:active {
+        transform: scale(0.95);
+      }
+      
+      .wontum-center-btn.play {
+        width: 80px;
+        height: 80px;
+      }
+      
+      .wontum-center-btn.play svg {
+        width: 40px;
+        height: 40px;
+      }
+      
+      .wontum-center-btn.skip {
+        width: 70px;
+        height: 70px;
+      }
+      
+      .wontum-center-btn.skip svg {
+        width: 70px;
+        height: 70px;
+      }
+      
+      .wontum-progress-container {
+        position: absolute;
+        bottom: 58px;
+        left: 0;
+        right: 0;
+        height: 5px;
+        cursor: pointer;
+        z-index: 12;
+        padding: 0 20px;
+        transition: height 0.2s ease, opacity 0.3s ease, transform 0.3s ease;
+      }
+      
+      .wontum-progress-container.hidden {
+        opacity: 0;
+        transform: translateY(100%);
+        pointer-events: none;
+      }
+      
+      .wontum-progress-container:hover {
+        height: 7px;
+      }
+      
+      .wontum-progress-track {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: rgba(255, 255, 255, 0.25);
+        border-radius: 3px;
+      }
+      
+      .wontum-progress-filled {
+        position: absolute;
+        height: 100%;
+        background: var(--primary-color);
+        border-radius: 3px;
+        width: 0%;
+        transition: width 0.1s linear;
+        box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
+      }
+      
+      .wontum-progress-input {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        cursor: pointer;
+        margin: 0;
+      }
+      
+      .wontum-controls-row {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        color: white;
+        height: 36px;
+      }
+      
+      .wontum-btn {
+        background: none;
+        border: none;
+        color: white;
+        cursor: pointer;
+        padding: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        transition: all 0.2s ease;
+        opacity: 0.9;
+      }
+      
+      .wontum-btn:hover {
+        background: rgba(255, 255, 255, 0.15);
+        opacity: 1;
+        transform: scale(1.05);
+      }
+      
+      .wontum-btn:active {
+        transform: scale(0.95);
+      }
+      
+      .wontum-btn svg {
+        width: 24px;
+        height: 24px;
+        fill: currentColor;
+      }
+      
+      .wontum-time-display {
+        font-size: 13px;
+        font-variant-numeric: tabular-nums;
+        font-weight: 500;
+        min-width: 100px;
+        opacity: 0.95;
+        letter-spacing: 0.3px;
+      }
+      
+      .wontum-volume-container {
+        position: relative;
+        display: flex;
+        align-items: center;
+      }
+      
+      .wontum-volume-slider-wrapper {
+        position: absolute;
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        background: rgba(20, 20, 20, 0.95);
+        backdrop-filter: blur(10px);
+        padding: 12px 8px;
+        border-radius: 6px;
+        margin-bottom: 8px;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s ease;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+      }
+      
+      .wontum-volume-container:hover .wontum-volume-slider-wrapper {
+        opacity: 1;
+        pointer-events: all;
+      }
+      
+      .wontum-volume-slider {
+        -webkit-appearance: slider-vertical;
+        appearance: slider-vertical;
+        width: 4px;
+        height: 80px;
+        background: rgba(255, 255, 255, 0.3);
+        border-radius: 2px;
+        outline: none;
+        writing-mode: bt-lr;
+        cursor: pointer;
+      }
+      
+      .wontum-volume-slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 12px;
+        height: 12px;
+        background: var(--primary-color);
+        border-radius: 50%;
+        cursor: pointer;
+      }
+      
+      .wontum-volume-slider::-moz-range-thumb {
+        width: 12px;
+        height: 12px;
+        background: var(--primary-color);
+        border-radius: 50%;
+        cursor: pointer;
+        border: none;
+      }
+      
+      .wontum-spacer {
+        flex: 1;
+      }
+      
+      .wontum-loading {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 5;
+      }
+      
+      .wontum-spinner {
+        border: 4px solid rgba(255, 255, 255, 0.3);
+        border-top: 4px solid white;
+        border-radius: 50%;
+        width: 50px;
+        height: 50px;
+        animation: wontum-spin 1s linear infinite;
+      }
+      
+      @keyframes wontum-spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+      
+      .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 {
+        padding: 10px 16px;
+        cursor: pointer;
+        white-space: nowrap;
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 13px;
+        transition: all 0.15s ease;
+      }
+      
+      .wontum-quality-option:hover {
+        background: rgba(255, 255, 255, 0.12);
+        color: white;
+      }
+      
+      .wontum-quality-option.active {
+        color: var(--primary-color);
+        background: rgba(255, 255, 255, 0.05);
+      }
+      
+      .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 {
+        padding: 10px 16px;
+        cursor: pointer;
+        white-space: nowrap;
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 13px;
+        transition: all 0.15s ease;
+      }
+      
+      .wontum-speed-option:hover {
+        background: rgba(255, 255, 255, 0.12);
+        color: white;
+      }
+      
+      .wontum-speed-option.active {
+        color: var(--primary-color);
+        background: rgba(255, 255, 255, 0.05);
+      }
+      
+      .wontum-settings-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;
+        min-width: 200px;
+        display: none;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+      }
+      
+      .wontum-settings-menu.active {
+        display: block;
+      }
+      
+      .wontum-settings-option {
+        padding: 12px 16px;
+        cursor: pointer;
+        white-space: nowrap;
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 13px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        transition: all 0.15s ease;
+      }
+      
+      .wontum-settings-option:hover {
+        background: rgba(255, 255, 255, 0.12);
+        color: white;
+      }
+      
+      .wontum-toggle-switch {
+        width: 40px;
+        height: 20px;
+        background: rgba(255, 255, 255, 0.3);
+        border-radius: 10px;
+        position: relative;
+        transition: background 0.3s;
+      }
+      
+      .wontum-toggle-switch.active {
+        background: var(--primary-color);
+      }
+      
+      .wontum-toggle-switch::after {
+        content: '';
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        background: white;
+        border-radius: 50%;
+        top: 2px;
+        left: 2px;
+        transition: left 0.3s;
+      }
+      
+      .wontum-toggle-switch.active::after {
+        left: 22px;
+      }
+      
+      .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 {
+        padding: 10px 16px;
+        cursor: pointer;
+        white-space: nowrap;
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 13px;
+        transition: all 0.15s ease;
+      }
+      
+      .wontum-subtitle-option:hover {
+        background: rgba(255, 255, 255, 0.12);
+        color: white;
+      }
+      
+      .wontum-subtitle-option.active {
+        color: var(--primary-color);
+        background: rgba(255, 255, 255, 0.05);
+      }
+      
+      .wontum-controls.sticky {
+        opacity: 1 !important;
+        transform: translateY(0) !important;
+        pointer-events: all !important;
+      }
+      
+      .wontum-progress-container.sticky {
+        opacity: 1 !important;
+        transform: translateY(0) !important;
+        pointer-events: all !important;
+      }
+    `, document.head.appendChild(g), this.container.classList.add("wontum-player-container");
+  }
+  createProgressBar() {
+    const t = document.createElement("div");
+    t.className = "wontum-progress-container", t.innerHTML = `
+      <div class="wontum-progress-track"></div>
+      <div class="wontum-progress-filled"></div>
+      <input type="range" class="wontum-progress-input" min="0" max="100" value="0" step="0.1">
+    `, this.container.appendChild(t), this.progressContainer = t;
+  }
+  createControls() {
+    const t = document.createElement("div");
+    return t.className = "wontum-controls", t.innerHTML = `
+      <div class="wontum-center-controls">
+        <button class="wontum-center-btn skip wontum-skip-backward-btn" aria-label="Skip backward 10s">
+          ${this.getSkipBackwardIcon()}
+        </button>
+        
+        <button class="wontum-center-btn play wontum-play-btn" aria-label="Play">
+          ${this.getPlayIcon()}
+        </button>
+        
+        <button class="wontum-center-btn skip wontum-skip-forward-btn" aria-label="Skip forward 10s">
+          ${this.getSkipForwardIcon()}
+        </button>
+      </div>
+      
+      <div class="wontum-controls-row">
+        
+        <div class="wontum-volume-container">
+          <button class="wontum-btn wontum-volume-btn" aria-label="Mute">
+            ${this.getVolumeIcon()}
+          </button>
+          <div class="wontum-volume-slider-wrapper">
+            <input type="range" class="wontum-volume-slider" min="0" max="100" value="100" step="1" orient="vertical">
+          </div>
+        </div>
+        
+        <div class="wontum-time-display">
+          <span class="wontum-current-time">0:00</span> / <span class="wontum-duration">0:00</span>
+        </div>
+        
+        <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>
+        
+        <button class="wontum-btn wontum-fullscreen-btn" aria-label="Fullscreen">
+          ${this.getFullscreenIcon()}
+        </button>
+      </div>
+      
+      <div class="wontum-loading" style="display: none;">
+        <div class="wontum-spinner"></div>
+      </div>
+    `, t;
+  }
+  setupEventListeners() {
+    this.playButton.addEventListener("click", () => {
+      this.player.getState().playing ? this.player.pause() : this.player.play();
+    }), this.skipBackwardButton.addEventListener("click", () => {
+      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.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();
+    }), this.player.getVideoElement().addEventListener("click", () => {
+      this.player.getState().playing ? this.player.pause() : this.player.play();
+    }), this.container.addEventListener("mousemove", () => {
+      this.showControls(), this.resetHideControlsTimeout();
+    }), this.container.addEventListener("mouseleave", () => {
+      this.hideControls();
+    });
+  }
+  setupPlayerEventListeners() {
+    this.player.on("play", () => {
+      this.playButton.innerHTML = this.getPauseIcon();
+    }), 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 r = this.controlsContainer.querySelector(".wontum-current-time");
+      r.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);
+    }), 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();
+    }), this.player.on("waiting", () => {
+      const t = this.controlsContainer.querySelector(".wontum-loading");
+      t.style.display = "block";
+    }), this.player.on("canplay", () => {
+      const t = this.controlsContainer.querySelector(".wontum-loading");
+      t.style.display = "none";
+    });
+  }
+  updateSubtitleMenu() {
+    const t = this.controlsContainer.querySelector(".wontum-subtitle-menu"), e = this.player.getSubtitleTracks();
+    if (e.length === 0) {
+      t.innerHTML = '<div class="wontum-subtitle-option">No subtitles available</div>';
+      return;
+    }
+    const s = e.findIndex((r) => r.mode === "showing");
+    t.innerHTML = `
+      <div class="wontum-subtitle-option ${s === -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}`}
+        </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");
+      });
+    });
+  }
+  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"}
+        </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");
+      });
+    });
+  }
+  updateSettingsMenu() {
+    const t = this.controlsContainer.querySelector(".wontum-settings-menu");
+    t.innerHTML = `
+      <div class="wontum-settings-option" data-setting="sticky-controls">
+        <span>Sticky Controls</span>
+        <div class="wontum-toggle-switch ${this.stickyControls ? "active" : ""}"></div>
+      </div>
+    `;
+    const e = t.querySelector('[data-setting="sticky-controls"]');
+    e.addEventListener("click", () => {
+      this.stickyControls = !this.stickyControls, e.querySelector(".wontum-toggle-switch").classList.toggle("active"), this.stickyControls ? (this.controlsContainer.classList.add("sticky"), this.progressContainer.classList.add("sticky")) : (this.controlsContainer.classList.remove("sticky"), this.progressContainer.classList.remove("sticky"));
+    });
+  }
+  updateQualityMenu(t) {
+    const e = this.controlsContainer.querySelector(".wontum-quality-menu");
+    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>
+      `
+    ).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");
+      });
+    });
+  }
+  showControls() {
+    this.controlsContainer.classList.remove("hidden"), this.progressContainer.classList.remove("hidden");
+  }
+  hideControls() {
+    if (this.stickyControls) return;
+    this.player.getState().playing && (this.controlsContainer.classList.add("hidden"), this.progressContainer.classList.add("hidden"));
+  }
+  resetHideControlsTimeout() {
+    this.stickyControls || (this.hideControlsTimeout && clearTimeout(this.hideControlsTimeout), this.hideControlsTimeout = window.setTimeout(() => {
+      this.hideControls();
+    }, 1e4));
+  }
+  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")}`;
+  }
+  // SVG Icons
+  getPlayIcon() {
+    return '<svg viewBox="0 0 24 24"><path fill="white" d="M8 5v14l11-7z"/></svg>';
+  }
+  getPauseIcon() {
+    return '<svg viewBox="0 0 24 24"><path fill="white" d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/></svg>';
+  }
+  getVolumeIcon() {
+    return '<svg viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>';
+  }
+  getMutedIcon() {
+    return '<svg viewBox="0 0 24 24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>';
+  }
+  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"/>
+			<!-- Circular arrow backward -->
+			<path d="M30 12 A18 18 0 1 0 30 48" stroke="white" stroke-width="2.5" stroke-linecap="round" fill="none"/>
+			<path d="M25 12 L30 12 L30 17" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+			<text x="30" y="35" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="white" text-anchor="middle">10</text>
+		</svg>`;
+  }
+  getSkipForwardIcon() {
+    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"/>
+			<!-- Circular arrow forward -->
+			<path d="M30 12 A18 18 0 1 1 30 48" stroke="white" stroke-width="2.5" stroke-linecap="round" fill="none"/>
+			<path d="M35 12 L30 12 L30 17" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+			<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>';
+  }
+  destroy() {
+    this.hideControlsTimeout && clearTimeout(this.hideControlsTimeout), this.controlsContainer.remove();
+  }
+}
+class dt {
+  constructor(t) {
+    o(this, "config");
+    o(this, "urlCache", /* @__PURE__ */ new Map());
+    o(this, "signedUrls", /* @__PURE__ */ new Set());
+    this.config = t;
+  }
+  /**
+   * Process a URL - sign with CloudFront cookies or generate presigned URL for S3
+   */
+  async processUrl(t) {
+    return this.isCloudFrontUrl(t) ? this.signCloudFrontUrl(t) : this.isS3Url(t) ? this.getPresignedUrl(t) : t;
+  }
+  /**
+   * Check if URL is a CloudFront URL that needs signing
+   */
+  isCloudFrontUrl(t) {
+    var e;
+    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));
+    } catch {
+      return !1;
+    }
+  }
+  /**
+   * Check if URL is an S3 URL
+   */
+  isS3Url(t) {
+    return t.includes(".s3.") || t.includes("s3.amazonaws.com") || t.startsWith("s3://");
+  }
+  /**
+   * Sign CloudFront URL by calling the signing endpoint
+   * The endpoint should set signed cookies and return the URL
+   */
+  async signCloudFrontUrl(t) {
+    var e;
+    if (this.signedUrls.has(t))
+      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");
+      }
+    return console.warn("No signUrl function provided. CloudFront cookies may not be set."), t;
+  }
+  /**
+   * Extract S3 key from URL
+   */
+  extractS3Key(t) {
+    if (t.startsWith("s3://"))
+      return t.replace("s3://", "").split("/").slice(1).join("/");
+    const e = t.match(/s3[.-]([^.]+)\.amazonaws\.com\/(.+)/);
+    if (e)
+      return e[2];
+    const s = t.match(/([^.]+)\.s3\.amazonaws\.com\/(.+)/);
+    return s ? s[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)
+      try {
+        const i = await this.config.getPresignedUrl(e);
+        return this.urlCache.set(e, {
+          url: i,
+          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");
+      }
+    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}`;
+  }
+  /**
+   * Helper to parse S3 URI (s3://bucket/key)
+   */
+  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 };
+  }
+  /**
+   * Clear URL cache and signed URLs
+   */
+  clearCache() {
+    this.urlCache.clear(), this.signedUrls.clear();
+  }
+}
+class nt {
+  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, "state", {
+      playing: !1,
+      paused: !0,
+      ended: !1,
+      buffering: !1,
+      currentTime: 0,
+      duration: 0,
+      volume: 1,
+      muted: !1,
+      playbackRate: 1,
+      quality: "auto",
+      availableQualities: [],
+      fullscreen: !1
+    });
+    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);
+  }
+  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);
+    });
+  }
+  createVideoElement() {
+    const t = document.createElement("video");
+    return t.className = "wontum-player-video", t.style.width = "100%", t.style.height = "100%", t.playsInline = !0, t;
+  }
+  setupVideoListeners() {
+    this.videoElement.addEventListener("play", () => {
+      this.state.playing = !0, this.state.paused = !1, this.emit("play"), this.analytics.trackEvent("play", this.getAnalyticsData());
+    }), this.videoElement.addEventListener("pause", () => {
+      this.state.playing = !1, this.state.paused = !0, this.emit("pause"), this.analytics.trackEvent("pause", this.getAnalyticsData());
+    }), this.videoElement.addEventListener("ended", () => {
+      this.state.ended = !0, this.state.playing = !1, this.emit("ended"), this.analytics.trackEvent("ended", this.getAnalyticsData());
+    }), this.videoElement.addEventListener("timeupdate", () => {
+      this.state.currentTime = this.videoElement.currentTime, this.emit("timeupdate", { currentTime: this.state.currentTime });
+    }), this.videoElement.addEventListener("loadedmetadata", () => {
+      this.state.duration = this.videoElement.duration, this.emit("loadedmetadata", { duration: this.state.duration }), this.analytics.trackEvent("loadedmetadata", this.getAnalyticsData());
+    }), this.videoElement.addEventListener("volumechange", () => {
+      this.state.volume = this.videoElement.volume, this.state.muted = this.videoElement.muted, this.emit("volumechange", { volume: this.state.volume, muted: this.state.muted });
+    }), this.videoElement.addEventListener("ratechange", () => {
+      this.state.playbackRate = this.videoElement.playbackRate, this.emit("ratechange", { playbackRate: this.state.playbackRate });
+    }), this.videoElement.addEventListener("waiting", () => {
+      this.state.buffering = !0, this.emit("waiting"), this.analytics.trackEvent("buffering_start", this.getAnalyticsData());
+    }), this.videoElement.addEventListener("canplay", () => {
+      this.state.buffering = !1, this.emit("canplay"), this.analytics.trackEvent("buffering_end", this.getAnalyticsData());
+    }), this.videoElement.addEventListener("seeking", () => {
+      this.emit("seeking");
+    }), this.videoElement.addEventListener("seeked", () => {
+      this.emit("seeked", { currentTime: this.state.currentTime }), this.analytics.trackEvent("seeked", this.getAnalyticsData());
+    }), this.videoElement.addEventListener("error", (t) => {
+      const e = this.videoElement.error;
+      this.emit("error", { error: e }), this.analytics.trackEvent("error", { ...this.getAnalyticsData(), error: e == null ? void 0 : e.message });
+    }), this.videoElement.addEventListener("loadstart", () => {
+      this.emit("loadstart");
+    }), this.videoElement.addEventListener("loadeddata", () => {
+      this.emit("loadeddata");
+    }), this.videoElement.addEventListener("canplaythrough", () => {
+      this.emit("canplaythrough");
+    }), this.videoElement.addEventListener("playing", () => {
+      this.state.playing = !0, this.state.buffering = !1, this.emit("playing");
+    }), this.videoElement.addEventListener("durationchange", () => {
+      this.state.duration = this.videoElement.duration, this.emit("durationchange", { duration: this.state.duration });
+    }), this.videoElement.addEventListener("progress", () => {
+      this.emit("progress", { buffered: this.videoElement.buffered });
+    }), this.videoElement.addEventListener("stalled", () => {
+      this.emit("stalled");
+    }), this.videoElement.addEventListener("suspend", () => {
+      this.emit("suspend");
+    }), this.videoElement.addEventListener("abort", () => {
+      this.emit("abort");
+    }), this.videoElement.addEventListener("emptied", () => {
+      this.emit("emptied");
+    }), this.videoElement.addEventListener("resize", () => {
+      this.emit("resize", {
+        videoWidth: this.videoElement.videoWidth,
+        videoHeight: this.videoElement.videoHeight
+      });
+    });
+  }
+  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);
+        });
+      else if (this.videoElement.canPlayType("application/vnd.apple.mpegurl"))
+        this.videoElement.src = e;
+      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 });
+    }
+  }
+  extractQualities(t) {
+    return t.map((e) => ({
+      height: e.height,
+      width: e.width,
+      bitrate: e.bitrate,
+      name: `${e.height}p`
+    }));
+  }
+  handleHlsError(t) {
+    var e, s;
+    switch (t.type) {
+      case w.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();
+        break;
+      default:
+        console.error("Fatal error occurred:", t), this.destroy();
+        break;
+    }
+  }
+  getAnalyticsData() {
+    return {
+      currentTime: this.state.currentTime,
+      duration: this.state.duration,
+      quality: this.state.quality,
+      playbackRate: this.state.playbackRate,
+      volume: this.state.volume,
+      muted: this.state.muted
+    };
+  }
+  // Public API
+  play() {
+    return this.videoElement.play();
+  }
+  pause() {
+    this.videoElement.pause();
+  }
+  seek(t) {
+    this.videoElement.currentTime = t;
+  }
+  skipForward(t = 10) {
+    const e = Math.min(this.state.currentTime + t, this.state.duration);
+    this.seek(e);
+  }
+  skipBackward(t = 10) {
+    const e = Math.max(this.state.currentTime - t, 0);
+    this.seek(e);
+  }
+  setVolume(t) {
+    this.videoElement.volume = Math.max(0, Math.min(1, t));
+  }
+  mute() {
+    this.videoElement.muted = !0;
+  }
+  unmute() {
+    this.videoElement.muted = !1;
+  }
+  setPlaybackRate(t) {
+    this.videoElement.playbackRate = t;
+  }
+  setQuality(t) {
+    this.hls && (this.hls.currentLevel = t);
+  }
+  enterFullscreen() {
+    this.container.requestFullscreen && (this.container.requestFullscreen(), this.state.fullscreen = !0, this.emit("fullscreenchange", { fullscreen: !0 }));
+  }
+  exitFullscreen() {
+    document.exitFullscreen && (document.exitFullscreen(), this.state.fullscreen = !1, this.emit("fullscreenchange", { fullscreen: !1 }));
+  }
+  getState() {
+    return { ...this.state };
+  }
+  getVideoElement() {
+    return this.videoElement;
+  }
+  /**
+   * Enable subtitles for a specific track
+   */
+  enableSubtitles(t) {
+    const e = this.videoElement.textTracks;
+    for (let s = 0; s < e.length; s++)
+      e[s].mode = s === t ? "showing" : "hidden";
+  }
+  /**
+   * Disable all subtitles
+   */
+  disableSubtitles() {
+    const t = this.videoElement.textTracks;
+    for (let e = 0; e < t.length; e++)
+      t[e].mode = "hidden";
+  }
+  /**
+   * Toggle subtitles on/off
+   */
+  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;
+  }
+  /**
+   * Get available subtitle tracks
+   */
+  getSubtitleTracks() {
+    return Array.from(this.videoElement.textTracks);
+  }
+  /**
+   * Check if subtitles are currently enabled
+   */
+  areSubtitlesEnabled() {
+    const t = this.videoElement.textTracks;
+    return Array.from(t).some((e) => e.mode === "showing");
+  }
+  on(t, e) {
+    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);
+  }
+  emit(t, e) {
+    var r;
+    const s = {
+      type: t,
+      data: e,
+      timestamp: Date.now()
+    };
+    (r = this.eventListeners.get(t)) == null || r.forEach((i) => {
+      i(s);
+    });
+  }
+  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 {
+    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 = {
+      src: t,
+      container: R.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) => {
+      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;
+    };
+  }, [t]), $(() => {
+    _.current;
+  }, [e, s, r]), /* @__PURE__ */ st.jsx(
+    "div",
+    {
+      ref: R,
+      className: z,
+      style: {
+        width: typeof T == "number" ? `${T}px` : T,
+        height: typeof L == "number" ? `${L}px` : L,
+        ...F
+      }
+    }
+  );
+}, 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
+    });
+    e(l);
+    const u = () => {
+      r(l.getState());
+    };
+    return l.on("play", u), l.on("pause", u), l.on("timeupdate", u), l.on("volumechange", u), l.on("loadedmetadata", u), () => {
+      l.destroy();
+    };
+  }, [c.src]), {
+    containerRef: i,
+    player: t,
+    state: s
+  };
+}, rt = Y.createContext({
+  player: null,
+  state: null
+}), bt = (c) => {
+  const { player: t, children: e } = c, [s, r] = V(t.getState());
+  return $(() => {
+    const i = () => {
+      r(t.getState());
+    };
+    return t.on("play", i), t.on("pause", i), t.on("timeupdate", i), t.on("volumechange", i), t.on("loadedmetadata", i), () => {
+    };
+  }, [t]), /* @__PURE__ */ st.jsx(rt.Provider, { value: { player: t, state: s }, children: e });
+}, wt = () => {
+  const c = Y.useContext(rt);
+  if (!c.player)
+    throw new Error("useWontumPlayerContext must be used within WontumPlayerProvider");
+  return c;
+};
+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
+};