@frameset/plex-player 1.0.6 → 2.0.1

package/dist/plex-player.js

@@ -1,1033 +0,0 @@
-/*!
- * @frameset/plex-player v1.0.6
- * Professional video player with VAST ads, Chromecast, PiP, subtitles, playlists and more. Built by FRAMESET Studio.
- * (c) 2026 FRAMESET Studio
- * Released under the MIT License
- * https://frameset.dev/plex-player
- */
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.PlexPlayer = {}));
-})(this, (function (exports) { 'use strict';
-
-  /**
-   * @frameset/plex-player - Core Entry Point
-   * Professional Video Player by FRAMESET Studio
-   * https://frameset.dev
-   */
-
-  /**
-   * Utility Functions
-   */
-  const Utils = {
-    formatTime(seconds) {
-      if (isNaN(seconds) || !isFinite(seconds)) return '0:00';
-      seconds = Math.max(0, Math.floor(seconds));
-      const hours = Math.floor(seconds / 3600);
-      const minutes = Math.floor(seconds % 3600 / 60);
-      const secs = seconds % 60;
-      if (hours > 0) {
-        return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
-      }
-      return `${minutes}:${secs.toString().padStart(2, '0')}`;
-    },
-    clamp(num, min, max) {
-      return Math.min(Math.max(num, min), max);
-    },
-    throttle(fn, delay) {
-      let lastCall = 0;
-      return function (...args) {
-        const now = Date.now();
-        if (now - lastCall >= delay) {
-          lastCall = now;
-          return fn.apply(this, args);
-        }
-      };
-    },
-    debounce(fn, delay) {
-      let timeoutId;
-      return function (...args) {
-        clearTimeout(timeoutId);
-        timeoutId = setTimeout(() => fn.apply(this, args), delay);
-      };
-    }
-  };
-
-  /**
-   * PlexPlayer - Main Player Class
-   * A complete, standalone video player
-   */
-  class PlexPlayer {
-    constructor(options = {}) {
-      // Validate container
-      if (!options.container) {
-        throw new Error('PlexPlayer: container option is required');
-      }
-
-      // Get container element
-      this.container = typeof options.container === 'string' ? document.querySelector(options.container) : options.container;
-      if (!this.container) {
-        throw new Error('PlexPlayer: container element not found');
-      }
-
-      // Store options with defaults
-      this.options = {
-        autoplay: false,
-        muted: false,
-        loop: false,
-        volume: 1,
-        poster: '',
-        preload: 'metadata',
-        keyboard: true,
-        touch: true,
-        pip: true,
-        cast: true,
-        fullscreen: true,
-        controlsHideDelay: 3000,
-        theme: {},
-        subtitles: {},
-        ads: {
-          enabled: false
-        },
-        i18n: {},
-        ...options
-      };
-
-      // Internationalization with defaults
-      this.i18n = {
-        play: 'Play',
-        pause: 'Pause',
-        mute: 'Mute',
-        unmute: 'Unmute',
-        fullscreen: 'Fullscreen',
-        exitFullscreen: 'Exit Fullscreen',
-        pip: 'Picture-in-Picture',
-        exitPip: 'Exit Picture-in-Picture',
-        settings: 'Settings',
-        speed: 'Speed',
-        quality: 'Quality',
-        subtitles: 'Subtitles',
-        off: 'Off',
-        normal: 'Normal',
-        captions: 'Captions',
-        audio: 'Audio',
-        volume: 'Volume',
-        seekForward: 'Seek Forward',
-        seekBackward: 'Seek Backward',
-        ...this.options.i18n
-      };
-
-      // Internal state
-      this._eventListeners = new Map();
-      this._state = {
-        playing: false,
-        paused: true,
-        muted: this.options.muted,
-        volume: this.options.volume,
-        currentTime: 0,
-        duration: 0,
-        buffered: 0,
-        fullscreen: false,
-        pip: false,
-        playbackRate: 1
-      };
-
-      // Playlist state
-      this._playlist = [];
-      this._currentIndex = 0;
-
-      // Controls timeout
-      this._controlsTimeout = null;
-
-      // Initialize player
-      this._init();
-    }
-    _init() {
-      // Add player class
-      this.container.classList.add('plex-player');
-      // Show controls initially
-      this.container.classList.add('plex-controls-visible');
-
-      // Apply theme
-      this._applyTheme();
-
-      // Create DOM structure
-      this._createDOM();
-
-      // Bind events
-      this._bindEvents();
-
-      // Initialize features
-      if (this.options.keyboard) this._initKeyboard();
-      if (this.options.touch) this._initTouch();
-      if (this.options.pip) this._initPiP();
-      if (this.options.cast) this._initCast();
-
-      // Emit ready event
-      setTimeout(() => this._emit('ready'), 0);
-    }
-    _applyTheme() {
-      const {
-        theme
-      } = this.options;
-      if (theme.primary) this.container.style.setProperty('--plex-primary', theme.primary);
-      if (theme.background) this.container.style.setProperty('--plex-bg', theme.background);
-      if (theme.text) this.container.style.setProperty('--plex-text', theme.text);
-      if (theme.borderRadius) this.container.style.setProperty('--plex-border-radius', theme.borderRadius);
-    }
-    _createDOM() {
-      // Video element
-      this.video = document.createElement('video');
-      this.video.className = 'plex-video';
-      this.video.setAttribute('playsinline', '');
-      this.video.setAttribute('webkit-playsinline', '');
-      this.video.preload = this.options.preload;
-      this.video.muted = this.options.muted;
-      this.video.volume = this.options.volume;
-      this.video.loop = this.options.loop;
-      if (this.options.poster) this.video.poster = this.options.poster;
-      this.container.appendChild(this.video);
-
-      // Controls overlay
-      this.controls = document.createElement('div');
-      this.controls.className = 'plex-controls';
-      this.controls.innerHTML = this._getControlsHTML();
-      this.container.appendChild(this.controls);
-
-      // Cache control elements
-      this._cacheElements();
-
-      // Big play button
-      this.bigPlayBtn = document.createElement('div');
-      this.bigPlayBtn.className = 'plex-big-play';
-      this.bigPlayBtn.innerHTML = `<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>`;
-      this.container.appendChild(this.bigPlayBtn);
-
-      // Loading spinner
-      this.loader = document.createElement('div');
-      this.loader.className = 'plex-loader';
-      this.loader.innerHTML = '<div class="plex-spinner"></div>';
-      this.container.appendChild(this.loader);
-
-      // Settings panel
-      this.settingsPanel = document.createElement('div');
-      this.settingsPanel.className = 'plex-settings-panel';
-      this.settingsPanel.innerHTML = this._getSettingsHTML();
-      this.container.appendChild(this.settingsPanel);
-    }
-    _getSettingsHTML() {
-      const i18n = this.i18n;
-      return `
-      <div class="plex-settings-header">
-        <span class="plex-settings-title">${i18n.settings || 'Settings'}</span>
-        <button class="plex-settings-close">
-          <svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
-        </button>
-      </div>
-      <div class="plex-settings-content">
-        <div class="plex-settings-item" data-setting="speed">
-          <span class="plex-settings-label">${i18n.speed || 'Speed'}</span>
-          <span class="plex-settings-value">1x</span>
-        </div>
-        <div class="plex-settings-item" data-setting="quality">
-          <span class="plex-settings-label">${i18n.quality || 'Quality'}</span>
-          <span class="plex-settings-value">Auto</span>
-        </div>
-        <div class="plex-settings-item" data-setting="subtitles">
-          <span class="plex-settings-label">${i18n.subtitles || 'Subtitles'}</span>
-          <span class="plex-settings-value">${i18n.off || 'Off'}</span>
-        </div>
-      </div>
-      <div class="plex-settings-submenu plex-settings-speed" style="display: none;">
-        <div class="plex-settings-back">
-          <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
-          <span>${i18n.speed || 'Speed'}</span>
-        </div>
-        <div class="plex-speed-options">
-          <button class="plex-speed-option" data-speed="0.25">0.25x</button>
-          <button class="plex-speed-option" data-speed="0.5">0.5x</button>
-          <button class="plex-speed-option" data-speed="0.75">0.75x</button>
-          <button class="plex-speed-option active" data-speed="1">1x</button>
-          <button class="plex-speed-option" data-speed="1.25">1.25x</button>
-          <button class="plex-speed-option" data-speed="1.5">1.5x</button>
-          <button class="plex-speed-option" data-speed="1.75">1.75x</button>
-          <button class="plex-speed-option" data-speed="2">2x</button>
-        </div>
-      </div>
-    `;
-    }
-    _getControlsHTML() {
-      const i18n = this.i18n;
-      return `
-      <div class="plex-progress-container">
-        <div class="plex-progress-bar">
-          <div class="plex-progress-buffered"></div>
-          <div class="plex-progress-played"></div>
-          <div class="plex-progress-handle"></div>
-        </div>
-        <div class="plex-progress-preview">
-          <div class="plex-preview-time">0:00</div>
-        </div>
-      </div>
-      <div class="plex-controls-bar">
-        <div class="plex-controls-left">
-          <button class="plex-btn plex-play-btn" title="${i18n.play || 'Play'}">
-            <svg class="plex-icon-play" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
-            <svg class="plex-icon-pause" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
-          </button>
-          <button class="plex-btn plex-prev-btn" title="${i18n.previous || 'Previous'}">
-            <svg viewBox="0 0 24 24"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
-          </button>
-          <button class="plex-btn plex-next-btn" title="${i18n.next || 'Next'}">
-            <svg viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
-          </button>
-          <div class="plex-volume-container">
-            <button class="plex-btn plex-volume-btn" title="${i18n.mute || 'Mute'}">
-              <svg class="plex-icon-volume-high" 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.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
-              <svg class="plex-icon-volume-low" viewBox="0 0 24 24"><path d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/></svg>
-              <svg class="plex-icon-volume-mute" 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>
-            </button>
-            <div class="plex-volume-slider">
-              <div class="plex-volume-track">
-                <div class="plex-volume-level"></div>
-                <div class="plex-volume-handle"></div>
-              </div>
-            </div>
-          </div>
-          <div class="plex-time">
-            <span class="plex-time-current">0:00</span>
-            <span class="plex-time-separator">/</span>
-            <span class="plex-time-duration">0:00</span>
-          </div>
-        </div>
-        <div class="plex-controls-right">
-          <button class="plex-btn plex-settings-btn" title="${i18n.settings || 'Settings'}">
-            <svg viewBox="0 0 24 24"><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></svg>
-          </button>
-          ${this.options.pip ? `
-          <button class="plex-btn plex-pip-btn" title="${i18n.pip || 'Picture-in-Picture'}">
-            <svg viewBox="0 0 24 24"><path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z"/></svg>
-          </button>
-          ` : ''}
-          ${this.options.cast ? `
-          <button class="plex-btn plex-cast-btn" title="${i18n.cast || 'Cast'}">
-            <svg viewBox="0 0 24 24"><path d="M21 3H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm0-4v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11z"/></svg>
-          </button>
-          ` : ''}
-          ${this.options.fullscreen ? `
-          <button class="plex-btn plex-fullscreen-btn" title="${i18n.fullscreen || 'Fullscreen'}">
-            <svg class="plex-icon-fullscreen" viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
-            <svg class="plex-icon-fullscreen-exit" viewBox="0 0 24 24"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>
-          </button>
-          ` : ''}
-        </div>
-      </div>
-    `;
-    }
-    _cacheElements() {
-      const $ = sel => this.controls.querySelector(sel);
-      this.els = {
-        progressContainer: $('.plex-progress-container'),
-        progressBar: $('.plex-progress-bar'),
-        progressBuffered: $('.plex-progress-buffered'),
-        progressPlayed: $('.plex-progress-played'),
-        progressHandle: $('.plex-progress-handle'),
-        progressPreview: $('.plex-progress-preview'),
-        previewTime: $('.plex-preview-time'),
-        playBtn: $('.plex-play-btn'),
-        prevBtn: $('.plex-prev-btn'),
-        nextBtn: $('.plex-next-btn'),
-        volumeBtn: $('.plex-volume-btn'),
-        volumeSlider: $('.plex-volume-slider'),
-        volumeTrack: $('.plex-volume-track'),
-        volumeLevel: $('.plex-volume-level'),
-        volumeHandle: $('.plex-volume-handle'),
-        timeCurrent: $('.plex-time-current'),
-        timeDuration: $('.plex-time-duration'),
-        settingsBtn: $('.plex-settings-btn'),
-        pipBtn: $('.plex-pip-btn'),
-        castBtn: $('.plex-cast-btn'),
-        fullscreenBtn: $('.plex-fullscreen-btn')
-      };
-    }
-    _bindEvents() {
-      // Video events
-      this.video.addEventListener('play', () => this._onPlay());
-      this.video.addEventListener('pause', () => this._onPause());
-      this.video.addEventListener('ended', () => this._onEnded());
-      this.video.addEventListener('timeupdate', () => this._onTimeUpdate());
-      this.video.addEventListener('progress', () => this._onProgress());
-      this.video.addEventListener('loadedmetadata', () => this._onLoadedMetadata());
-      this.video.addEventListener('volumechange', () => this._onVolumeChange());
-      this.video.addEventListener('waiting', () => this._onWaiting());
-      this.video.addEventListener('canplay', () => this._onCanPlay());
-      this.video.addEventListener('error', e => this._onError(e));
-
-      // Control events
-      this.bigPlayBtn.addEventListener('click', () => this.togglePlay());
-      this.video.addEventListener('click', () => this.togglePlay());
-      this.els.playBtn?.addEventListener('click', () => this.togglePlay());
-      this.els.prevBtn?.addEventListener('click', () => this.previous());
-      this.els.nextBtn?.addEventListener('click', () => this.next());
-      this.els.volumeBtn?.addEventListener('click', () => this.toggleMute());
-      this.els.pipBtn?.addEventListener('click', () => this.togglePiP());
-      this.els.fullscreenBtn?.addEventListener('click', () => this.toggleFullscreen());
-      this.els.settingsBtn?.addEventListener('click', () => this.toggleSettings());
-      this.els.castBtn?.addEventListener('click', () => this.cast());
-
-      // Settings panel events
-      this._bindSettingsEvents();
-
-      // Progress bar
-      this._bindProgressEvents();
-
-      // Volume slider
-      this._bindVolumeEvents();
-
-      // Controls visibility
-      this._bindControlsVisibility();
-
-      // Fullscreen change
-      document.addEventListener('fullscreenchange', () => this._onFullscreenChange());
-      document.addEventListener('webkitfullscreenchange', () => this._onFullscreenChange());
-    }
-    _bindProgressEvents() {
-      const progress = this.els.progressContainer;
-      if (!progress) return;
-      let isDragging = false;
-      const seek = e => {
-        const rect = this.els.progressBar.getBoundingClientRect();
-        const percent = Utils.clamp((e.clientX - rect.left) / rect.width, 0, 1);
-        this.seekPercent(percent * 100);
-      };
-      const updatePreview = e => {
-        const rect = this.els.progressBar.getBoundingClientRect();
-        const percent = Utils.clamp((e.clientX - rect.left) / rect.width, 0, 1);
-        const time = percent * this.video.duration;
-        if (this.els.previewTime) {
-          this.els.previewTime.textContent = Utils.formatTime(time);
-        }
-        if (this.els.progressPreview) {
-          const left = Utils.clamp(e.clientX - rect.left, 30, rect.width - 30);
-          this.els.progressPreview.style.left = `${left}px`;
-        }
-      };
-      progress.addEventListener('mousedown', e => {
-        isDragging = true;
-        seek(e);
-      });
-      progress.addEventListener('mousemove', e => {
-        updatePreview(e);
-        if (isDragging) seek(e);
-      });
-      document.addEventListener('mouseup', () => {
-        isDragging = false;
-      });
-      document.addEventListener('mousemove', e => {
-        if (isDragging) seek(e);
-      });
-    }
-    _bindVolumeEvents() {
-      const volumeTrack = this.els.volumeTrack;
-      if (!volumeTrack) return;
-      let isDragging = false;
-      const setVolume = e => {
-        const rect = volumeTrack.getBoundingClientRect();
-        const percent = Utils.clamp((e.clientX - rect.left) / rect.width, 0, 1);
-        this.setVolume(percent);
-      };
-      volumeTrack.addEventListener('mousedown', e => {
-        isDragging = true;
-        setVolume(e);
-      });
-      document.addEventListener('mousemove', e => {
-        if (isDragging) setVolume(e);
-      });
-      document.addEventListener('mouseup', () => {
-        isDragging = false;
-      });
-    }
-    _bindControlsVisibility() {
-      const showControls = () => {
-        this.container.classList.add('plex-controls-visible');
-        clearTimeout(this._controlsTimeout);
-        if (this._state.playing) {
-          this._controlsTimeout = setTimeout(() => {
-            this.container.classList.remove('plex-controls-visible');
-          }, this.options.controlsHideDelay);
-        }
-      };
-      this.container.addEventListener('mousemove', showControls);
-      this.container.addEventListener('mouseenter', showControls);
-      this.container.addEventListener('mouseleave', () => {
-        if (this._state.playing) {
-          this.container.classList.remove('plex-controls-visible');
-        }
-      });
-
-      // Always show when paused
-      this.video.addEventListener('pause', showControls);
-    }
-
-    // Event handlers
-    _onPlay() {
-      this._state.playing = true;
-      this._state.paused = false;
-      this.container.classList.add('plex-playing');
-      this.container.classList.remove('plex-paused');
-      this.bigPlayBtn.style.display = 'none';
-      this._emit('play');
-    }
-    _onPause() {
-      this._state.playing = false;
-      this._state.paused = true;
-      this.container.classList.remove('plex-playing');
-      this.container.classList.add('plex-paused');
-      this.bigPlayBtn.style.display = '';
-      this._emit('pause');
-    }
-    _onEnded() {
-      this._state.playing = false;
-      this.container.classList.remove('plex-playing');
-
-      // Auto-play next if playlist
-      if (this._playlist.length > 0 && this._currentIndex < this._playlist.length - 1) {
-        this.next();
-      } else {
-        this._emit('ended');
-      }
-    }
-    _onTimeUpdate() {
-      this._state.currentTime = this.video.currentTime;
-      const percent = this.video.currentTime / this.video.duration * 100;
-      if (this.els.progressPlayed) {
-        this.els.progressPlayed.style.width = `${percent}%`;
-      }
-      if (this.els.progressHandle) {
-        this.els.progressHandle.style.left = `${percent}%`;
-      }
-      if (this.els.timeCurrent) {
-        this.els.timeCurrent.textContent = Utils.formatTime(this.video.currentTime);
-      }
-      this._emit('timeupdate', {
-        currentTime: this.video.currentTime,
-        duration: this.video.duration
-      });
-    }
-    _onProgress() {
-      const buffered = this.video.buffered;
-      if (buffered.length > 0) {
-        const percent = buffered.end(buffered.length - 1) / this.video.duration * 100;
-        this._state.buffered = percent;
-        if (this.els.progressBuffered) {
-          this.els.progressBuffered.style.width = `${percent}%`;
-        }
-        this._emit('progress', {
-          buffered: percent
-        });
-      }
-    }
-    _onLoadedMetadata() {
-      this._state.duration = this.video.duration;
-      if (this.els.timeDuration) {
-        this.els.timeDuration.textContent = Utils.formatTime(this.video.duration);
-      }
-      this._emit('loadedmetadata', {
-        duration: this.video.duration
-      });
-    }
-    _onVolumeChange() {
-      this._state.volume = this.video.volume;
-      this._state.muted = this.video.muted;
-      const volume = this.video.muted ? 0 : this.video.volume;
-
-      // Update volume UI
-      if (this.els.volumeLevel) {
-        this.els.volumeLevel.style.width = `${volume * 100}%`;
-      }
-      if (this.els.volumeHandle) {
-        this.els.volumeHandle.style.left = `${volume * 100}%`;
-      }
-
-      // Update icon
-      this.container.classList.remove('plex-muted', 'plex-volume-low');
-      if (this.video.muted || volume === 0) {
-        this.container.classList.add('plex-muted');
-      } else if (volume < 0.5) {
-        this.container.classList.add('plex-volume-low');
-      }
-      this._emit('volumechange', {
-        volume: this.video.volume,
-        muted: this.video.muted
-      });
-    }
-    _onWaiting() {
-      this.container.classList.add('plex-loading');
-      this._emit('waiting');
-    }
-    _onCanPlay() {
-      this.container.classList.remove('plex-loading');
-      this._emit('canplay');
-    }
-    _onError(e) {
-      this._emit('error', {
-        code: this.video.error?.code,
-        message: this.video.error?.message
-      });
-    }
-    _onFullscreenChange() {
-      const isFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement);
-      this._state.fullscreen = isFullscreen;
-      if (isFullscreen) {
-        this.container.classList.add('plex-fullscreen');
-      } else {
-        this.container.classList.remove('plex-fullscreen');
-      }
-      this._emit('fullscreenchange', {
-        isFullscreen
-      });
-    }
-
-    // Keyboard support
-    _initKeyboard() {
-      this._keyHandler = e => {
-        if (!this.container.contains(document.activeElement) && document.activeElement !== document.body) return;
-        switch (e.key) {
-          case ' ':
-          case 'k':
-            e.preventDefault();
-            this.togglePlay();
-            break;
-          case 'ArrowLeft':
-            e.preventDefault();
-            this.seek(this.video.currentTime - 10);
-            break;
-          case 'ArrowRight':
-            e.preventDefault();
-            this.seek(this.video.currentTime + 10);
-            break;
-          case 'ArrowUp':
-            e.preventDefault();
-            this.setVolume(Math.min(1, this.video.volume + 0.1));
-            break;
-          case 'ArrowDown':
-            e.preventDefault();
-            this.setVolume(Math.max(0, this.video.volume - 0.1));
-            break;
-          case 'm':
-            this.toggleMute();
-            break;
-          case 'f':
-            this.toggleFullscreen();
-            break;
-          case 'p':
-            this.togglePiP();
-            break;
-          case 'n':
-            if (e.shiftKey) {
-              this.previous();
-            } else {
-              this.next();
-            }
-            break;
-        }
-      };
-      document.addEventListener('keydown', this._keyHandler);
-    }
-
-    // Touch support
-    _initTouch() {
-      let touchStartX = 0;
-      let touchStartY = 0;
-      let touchStartTime = 0;
-      this.video.addEventListener('touchstart', e => {
-        touchStartX = e.touches[0].clientX;
-        touchStartY = e.touches[0].clientY;
-        touchStartTime = Date.now();
-      });
-      this.video.addEventListener('touchend', e => {
-        const touchEndX = e.changedTouches[0].clientX;
-        const touchEndY = e.changedTouches[0].clientY;
-        const touchDuration = Date.now() - touchStartTime;
-        const deltaX = touchEndX - touchStartX;
-        const deltaY = touchEndY - touchStartY;
-
-        // Tap to toggle play (if quick tap)
-        if (Math.abs(deltaX) < 30 && Math.abs(deltaY) < 30 && touchDuration < 300) {
-          this.togglePlay();
-        }
-        // Swipe to seek
-        else if (Math.abs(deltaX) > 50 && Math.abs(deltaY) < 30) {
-          if (deltaX > 0) {
-            this.seek(this.video.currentTime + 10);
-          } else {
-            this.seek(this.video.currentTime - 10);
-          }
-        }
-      });
-    }
-
-    // PiP support
-    _initPiP() {
-      if (!document.pictureInPictureEnabled) {
-        if (this.els.pipBtn) {
-          this.els.pipBtn.style.display = 'none';
-        }
-        return;
-      }
-      this.video.addEventListener('enterpictureinpicture', () => {
-        this._state.pip = true;
-        this.container.classList.add('plex-pip');
-        this._emit('enterpip');
-      });
-      this.video.addEventListener('leavepictureinpicture', () => {
-        this._state.pip = false;
-        this.container.classList.remove('plex-pip');
-        this._emit('leavepip');
-      });
-    }
-
-    // Cast support
-    _initCast() {
-      // Chromecast requires HTTPS and specific browser
-      const isChrome = /Chrome/.test(navigator.userAgent) && !/Edge/.test(navigator.userAgent);
-      const isHTTPS = location.protocol === 'https:' || location.hostname === 'localhost';
-      if (!isChrome || !isHTTPS) {
-        if (this.els.castBtn) {
-          this.els.castBtn.style.display = 'none';
-        }
-        return;
-      }
-
-      // Load Cast SDK if available
-      if (window.chrome && window.chrome.cast) {
-        this._initCastApi();
-      } else {
-        window['__onGCastApiAvailable'] = isAvailable => {
-          if (isAvailable) this._initCastApi();
-        };
-      }
-    }
-    _initCastApi() {
-      if (this.els.castBtn) {
-        this.els.castBtn.addEventListener('click', () => {
-          if (window.cast && window.cast.framework) {
-            const context = cast.framework.CastContext.getInstance();
-            context.requestSession();
-          }
-        });
-      }
-    }
-
-    // Event system
-    on(event, callback) {
-      if (!this._eventListeners.has(event)) {
-        this._eventListeners.set(event, new Set());
-      }
-      this._eventListeners.get(event).add(callback);
-      return this;
-    }
-    off(event, callback) {
-      if (this._eventListeners.has(event)) {
-        this._eventListeners.get(event).delete(callback);
-      }
-      return this;
-    }
-    _emit(event, data = {}) {
-      if (this._eventListeners.has(event)) {
-        this._eventListeners.get(event).forEach(callback => {
-          try {
-            callback(data);
-          } catch (e) {
-            console.error(`PlexPlayer: Error in ${event} handler:`, e);
-          }
-        });
-      }
-    }
-
-    // Public API
-    load(src, poster) {
-      this.video.src = src;
-      if (poster) this.video.poster = poster;
-      this.video.load();
-      if (this.options.autoplay) {
-        this.play();
-      }
-      return this;
-    }
-    loadPlaylist(items) {
-      this._playlist = items.map((item, index) => ({
-        ...item,
-        index
-      }));
-      this._currentIndex = 0;
-      if (this._playlist.length > 0) {
-        const first = this._playlist[0];
-        this.load(first.src, first.poster);
-        this._emit('playlistload', {
-          playlist: this._playlist
-        });
-      }
-      return this;
-    }
-    play() {
-      return this.video.play();
-    }
-    pause() {
-      this.video.pause();
-      return this;
-    }
-    togglePlay() {
-      if (this.video.paused) {
-        this.play();
-      } else {
-        this.pause();
-      }
-      return this;
-    }
-    seek(time) {
-      this.video.currentTime = Utils.clamp(time, 0, this.video.duration || 0);
-      return this;
-    }
-    seekPercent(percent) {
-      const time = percent / 100 * this.video.duration;
-      return this.seek(time);
-    }
-    setVolume(level) {
-      this.video.volume = Utils.clamp(level, 0, 1);
-      if (this.video.muted && level > 0) {
-        this.video.muted = false;
-      }
-      return this;
-    }
-    getVolume() {
-      return this.video.volume;
-    }
-    mute() {
-      this.video.muted = true;
-      return this;
-    }
-    unmute() {
-      this.video.muted = false;
-      return this;
-    }
-    toggleMute() {
-      this.video.muted = !this.video.muted;
-      return this;
-    }
-    setPlaybackRate(rate) {
-      this.video.playbackRate = rate;
-      this._state.playbackRate = rate;
-      this._emit('ratechange', {
-        rate
-      });
-      return this;
-    }
-    getPlaybackRate() {
-      return this.video.playbackRate;
-    }
-    enterFullscreen() {
-      const el = this.container;
-      if (el.requestFullscreen) {
-        return el.requestFullscreen();
-      } else if (el.webkitRequestFullscreen) {
-        return el.webkitRequestFullscreen();
-      }
-    }
-    exitFullscreen() {
-      if (document.exitFullscreen) {
-        return document.exitFullscreen();
-      } else if (document.webkitExitFullscreen) {
-        return document.webkitExitFullscreen();
-      }
-    }
-    toggleFullscreen() {
-      if (this._state.fullscreen) {
-        this.exitFullscreen();
-      } else {
-        this.enterFullscreen();
-      }
-      return this;
-    }
-    enterPiP() {
-      if (document.pictureInPictureEnabled && this.video !== document.pictureInPictureElement) {
-        return this.video.requestPictureInPicture();
-      }
-    }
-    exitPiP() {
-      if (document.pictureInPictureElement) {
-        return document.exitPictureInPicture();
-      }
-    }
-    togglePiP() {
-      if (this._state.pip) {
-        this.exitPiP();
-      } else {
-        this.enterPiP();
-      }
-      return this;
-    }
-    next() {
-      if (this._playlist.length > 0 && this._currentIndex < this._playlist.length - 1) {
-        this._currentIndex++;
-        const item = this._playlist[this._currentIndex];
-        this.load(item.src, item.poster);
-        this.play();
-        this._emit('trackchange', {
-          index: this._currentIndex,
-          item
-        });
-      }
-      return this;
-    }
-    previous() {
-      if (this._playlist.length > 0 && this._currentIndex > 0) {
-        this._currentIndex--;
-        const item = this._playlist[this._currentIndex];
-        this.load(item.src, item.poster);
-        this.play();
-        this._emit('trackchange', {
-          index: this._currentIndex,
-          item
-        });
-      }
-      return this;
-    }
-    playAt(index) {
-      if (this._playlist.length > 0 && index >= 0 && index < this._playlist.length) {
-        this._currentIndex = index;
-        const item = this._playlist[this._currentIndex];
-        this.load(item.src, item.poster);
-        this.play();
-        this._emit('trackchange', {
-          index: this._currentIndex,
-          item
-        });
-      }
-      return this;
-    }
-
-    // Settings
-    toggleSettings() {
-      if (this.settingsPanel.classList.contains('plex-settings-open')) {
-        this.closeSettings();
-      } else {
-        this.openSettings();
-      }
-      return this;
-    }
-    openSettings() {
-      this.settingsPanel.classList.add('plex-settings-open');
-      // Reset to main menu
-      const content = this.settingsPanel.querySelector('.plex-settings-content');
-      const speedMenu = this.settingsPanel.querySelector('.plex-settings-speed');
-      if (content) content.style.display = 'block';
-      if (speedMenu) speedMenu.style.display = 'none';
-      return this;
-    }
-    closeSettings() {
-      this.settingsPanel.classList.remove('plex-settings-open');
-      return this;
-    }
-    _bindSettingsEvents() {
-      if (!this.settingsPanel) return;
-
-      // Close button
-      const closeBtn = this.settingsPanel.querySelector('.plex-settings-close');
-      closeBtn?.addEventListener('click', () => this.closeSettings());
-
-      // Settings items
-      const speedItem = this.settingsPanel.querySelector('[data-setting="speed"]');
-      const speedMenu = this.settingsPanel.querySelector('.plex-settings-speed');
-      const content = this.settingsPanel.querySelector('.plex-settings-content');
-      const backBtn = this.settingsPanel.querySelector('.plex-settings-back');
-      speedItem?.addEventListener('click', () => {
-        if (content) content.style.display = 'none';
-        if (speedMenu) speedMenu.style.display = 'block';
-      });
-      backBtn?.addEventListener('click', () => {
-        if (content) content.style.display = 'block';
-        if (speedMenu) speedMenu.style.display = 'none';
-      });
-
-      // Speed options
-      const speedOptions = this.settingsPanel.querySelectorAll('.plex-speed-option');
-      speedOptions.forEach(option => {
-        option.addEventListener('click', () => {
-          const speed = parseFloat(option.dataset.speed);
-          this.setPlaybackRate(speed);
-
-          // Update active state
-          speedOptions.forEach(o => o.classList.remove('active'));
-          option.classList.add('active');
-
-          // Update display
-          const speedValue = this.settingsPanel.querySelector('[data-setting="speed"] .plex-settings-value');
-          if (speedValue) speedValue.textContent = `${speed}x`;
-
-          // Go back to main menu
-          if (content) content.style.display = 'block';
-          if (speedMenu) speedMenu.style.display = 'none';
-        });
-      });
-
-      // Close settings when clicking outside
-      this.container.addEventListener('click', e => {
-        if (!this.settingsPanel.contains(e.target) && !this.els.settingsBtn?.contains(e.target) && this.settingsPanel.classList.contains('plex-settings-open')) {
-          this.closeSettings();
-        }
-      });
-    }
-    getState() {
-      return {
-        currentTime: this.video.currentTime,
-        duration: this.video.duration || 0,
-        volume: this.video.volume,
-        muted: this.video.muted,
-        isPlaying: !this.video.paused && !this.video.ended,
-        isPaused: this.video.paused,
-        isFullscreen: this._state.fullscreen,
-        isPiP: this._state.pip,
-        playbackRate: this.video.playbackRate,
-        currentTrack: this._currentIndex,
-        totalTracks: this._playlist.length
-      };
-    }
-    getVideo() {
-      return this.video;
-    }
-    destroy() {
-      // Clear timeouts
-      clearTimeout(this._controlsTimeout);
-
-      // Remove keyboard listener
-      if (this._keyHandler) {
-        document.removeEventListener('keydown', this._keyHandler);
-      }
-
-      // Remove event listeners
-      this._eventListeners.clear();
-
-      // Clear container
-      this.container.innerHTML = '';
-      this.container.classList.remove('plex-player');
-
-      // Emit destroy event
-      this._emit('destroy');
-    }
-  }
-
-  // Attach to window for UMD builds
-  if (typeof window !== 'undefined') {
-    window.PlexPlayer = PlexPlayer;
-  }
-
-  exports.PlexPlayer = PlexPlayer;
-  exports.Utils = Utils;
-  exports.default = PlexPlayer;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-}));
-//# sourceMappingURL=plex-player.js.map