@frameset/plex-player 1.0.6 → 2.0.0

package/src/core/index.js

@@ -1,1082 +0,0 @@
-/**
- * @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');
-  }
-}
-
-// Export
-export { PlexPlayer, Utils };
-export default PlexPlayer;
-
-// Attach to window for UMD builds
-if (typeof window !== 'undefined') {
-  window.PlexPlayer = PlexPlayer;
-}