@frameset/plex-player 1.0.0

package/dist/plex-player.js

@@ -0,0 +1,885 @@
+/*!
+ * @frameset/plex-player v1.0.0
+ * 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
+      };
+
+      // 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');
+    }
+  }
+
+  // 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