@frameset/plex-player 1.0.0

package/src/core/index.js

@@ -0,0 +1,924 @@
+/**
+ * @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,
+    };
+
+    // 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');
+
+    // 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);
+  }
+
+  _getControlsHTML() {
+    const { i18n } = this.options;
+    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());
+
+    // 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;
+  }
+
+  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;
+}