vidply 1.0.0

package/src/renderers/HTML5Renderer.js

@@ -0,0 +1,298 @@
+/**
+ * HTML5 Media Renderer
+ */
+
+export class HTML5Renderer {
+  constructor(player) {
+    this.player = player;
+    this.media = player.element;
+  }
+
+  async init() {
+    // Hide native controls
+    this.media.controls = false;
+    this.media.removeAttribute('controls');
+    
+    this.attachEvents();
+    
+    // Set preload
+    this.media.preload = this.player.options.preload;
+    
+    // Load media
+    this.media.load();
+  }
+
+  attachEvents() {
+    // Playback events
+    this.media.addEventListener('loadedmetadata', () => {
+      this.player.state.duration = this.media.duration;
+      this.player.emit('loadedmetadata');
+    });
+
+    this.media.addEventListener('play', () => {
+      this.player.state.playing = true;
+      this.player.state.paused = false;
+      this.player.state.ended = false;
+      this.player.emit('play');
+      
+      if (this.player.options.onPlay) {
+        this.player.options.onPlay.call(this.player);
+      }
+      
+      // Pause other players if enabled
+      if (this.player.options.pauseOthersOnPlay) {
+        this.pauseOtherPlayers();
+      }
+    });
+
+    this.media.addEventListener('pause', () => {
+      this.player.state.playing = false;
+      this.player.state.paused = true;
+      this.player.emit('pause');
+      
+      if (this.player.options.onPause) {
+        this.player.options.onPause.call(this.player);
+      }
+    });
+
+    this.media.addEventListener('ended', () => {
+      this.player.state.playing = false;
+      this.player.state.paused = true;
+      this.player.state.ended = true;
+      this.player.emit('ended');
+      
+      if (this.player.options.onEnded) {
+        this.player.options.onEnded.call(this.player);
+      }
+      
+      // Handle loop
+      if (this.player.options.loop) {
+        this.player.seek(0);
+        this.player.play();
+      }
+    });
+
+    this.media.addEventListener('timeupdate', () => {
+      this.player.state.currentTime = this.media.currentTime;
+      this.player.emit('timeupdate', this.media.currentTime);
+      
+      if (this.player.options.onTimeUpdate) {
+        this.player.options.onTimeUpdate.call(this.player, this.media.currentTime);
+      }
+    });
+
+    this.media.addEventListener('volumechange', () => {
+      this.player.state.volume = this.media.volume;
+      this.player.state.muted = this.media.muted;
+      this.player.emit('volumechange', this.media.volume);
+      
+      if (this.player.options.onVolumeChange) {
+        this.player.options.onVolumeChange.call(this.player, this.media.volume);
+      }
+    });
+
+    this.media.addEventListener('seeking', () => {
+      this.player.state.seeking = true;
+      this.player.emit('seeking');
+    });
+
+    this.media.addEventListener('seeked', () => {
+      this.player.state.seeking = false;
+      this.player.emit('seeked');
+    });
+
+    this.media.addEventListener('waiting', () => {
+      this.player.state.buffering = true;
+      this.player.emit('waiting');
+    });
+
+    this.media.addEventListener('canplay', () => {
+      this.player.state.buffering = false;
+      this.player.emit('canplay');
+    });
+
+    this.media.addEventListener('progress', () => {
+      if (this.media.buffered.length > 0) {
+        const buffered = this.media.buffered.end(this.media.buffered.length - 1);
+        this.player.emit('progress', buffered);
+      }
+    });
+
+    this.media.addEventListener('error', (e) => {
+      this.player.handleError(this.media.error);
+    });
+
+    this.media.addEventListener('ratechange', () => {
+      this.player.state.playbackSpeed = this.media.playbackRate;
+      this.player.emit('ratechange', this.media.playbackRate);
+    });
+  }
+
+  pauseOtherPlayers() {
+    // Pause other VidPly instances
+    const allPlayers = document.querySelectorAll('.vidply-player');
+    allPlayers.forEach(playerEl => {
+      if (playerEl !== this.player.container) {
+        const video = playerEl.querySelector('video, audio');
+        if (video && !video.paused) {
+          video.pause();
+        }
+      }
+    });
+  }
+
+  play() {
+    const promise = this.media.play();
+    
+    if (promise !== undefined) {
+      promise.catch(error => {
+        this.player.log('Play failed:', error, 'warn');
+        
+        // If autoplay failed, try muted autoplay
+        if (this.player.options.autoplay && !this.player.state.muted) {
+          this.player.log('Retrying play with muted audio', 'info');
+          this.media.muted = true;
+          this.media.play().catch(err => {
+            this.player.handleError(err);
+          });
+        }
+      });
+    }
+  }
+
+  pause() {
+    this.media.pause();
+  }
+
+  seek(time) {
+    this.media.currentTime = time;
+  }
+
+  setVolume(volume) {
+    this.media.volume = volume;
+  }
+
+  setMuted(muted) {
+    this.media.muted = muted;
+  }
+
+  setPlaybackSpeed(speed) {
+    this.media.playbackRate = speed;
+  }
+
+  /**
+   * Get available quality levels from source elements
+   * @returns {Array} Array of quality objects with index, height, width, and src
+   */
+  getQualities() {
+    const sources = Array.from(this.media.querySelectorAll('source'));
+    
+    if (sources.length <= 1) {
+      return [];
+    }
+
+    return sources.map((source, index) => {
+      // Try to extract quality from data attributes or label
+      const label = source.getAttribute('data-quality') || source.getAttribute('label') || '';
+      const height = source.getAttribute('data-height') || this.extractHeightFromLabel(label);
+      const width = source.getAttribute('data-width') || '';
+      
+      return {
+        index,
+        height: height ? parseInt(height) : 0,
+        width: width ? parseInt(width) : 0,
+        src: source.src,
+        type: source.type,
+        name: label || (height ? `${height}p` : `Quality ${index + 1}`)
+      };
+    }).filter(q => q.height > 0); // Only return qualities with valid height
+  }
+
+  /**
+   * Extract height from quality label (e.g., "1080p" -> 1080)
+   * @param {string} label 
+   * @returns {number}
+   */
+  extractHeightFromLabel(label) {
+    const match = label.match(/(\d+)p/i);
+    return match ? parseInt(match[1]) : 0;
+  }
+
+  /**
+   * Switch to a specific quality level
+   * @param {number} qualityIndex - Index of the quality level (-1 for auto, not applicable for HTML5)
+   */
+  switchQuality(qualityIndex) {
+    const qualities = this.getQualities();
+    
+    if (qualityIndex < 0 || qualityIndex >= qualities.length) {
+      this.player.log('Invalid quality index', 'warn');
+      return;
+    }
+
+    const quality = qualities[qualityIndex];
+    const currentTime = this.media.currentTime;
+    const wasPlaying = !this.media.paused;
+
+    // Store the current source for comparison
+    const currentSrc = this.media.currentSrc;
+    
+    // Don't switch if already at this quality
+    if (currentSrc === quality.src) {
+      this.player.log('Already at this quality level', 'info');
+      return;
+    }
+
+    this.player.log(`Switching to quality: ${quality.name}`, 'info');
+
+    // Update the src
+    this.media.src = quality.src;
+    
+    // Wait for the new source to load, then restore playback state
+    const onLoadedMetadata = () => {
+      this.media.removeEventListener('loadedmetadata', onLoadedMetadata);
+      
+      // Restore playback position
+      this.media.currentTime = currentTime;
+      
+      // Resume playback if it was playing
+      if (wasPlaying) {
+        this.media.play().catch(err => {
+          this.player.log('Failed to resume playback after quality switch', 'warn');
+        });
+      }
+      
+      // Emit quality change event
+      this.player.emit('qualitychange', { quality: quality.name, index: qualityIndex });
+    };
+
+    this.media.addEventListener('loadedmetadata', onLoadedMetadata);
+    this.media.load();
+  }
+
+  /**
+   * Get current quality index
+   * @returns {number}
+   */
+  getCurrentQuality() {
+    const qualities = this.getQualities();
+    const currentSrc = this.media.currentSrc;
+    
+    for (let i = 0; i < qualities.length; i++) {
+      if (qualities[i].src === currentSrc) {
+        return i;
+      }
+    }
+    
+    return 0; // Default to first quality if not found
+  }
+
+  destroy() {
+    // Remove event listeners
+    this.media.removeEventListener('loadedmetadata', () => {});
+    this.media.removeEventListener('play', () => {});
+    this.media.removeEventListener('pause', () => {});
+    // ... (other listeners would be removed in a real implementation)
+  }
+}
+

package/src/renderers/VimeoRenderer.js

@@ -0,0 +1,257 @@
+/**
+ * Vimeo Renderer
+ */
+
+export class VimeoRenderer {
+  constructor(player) {
+    this.player = player;
+    this.vimeo = null;
+    this.videoId = null;
+    this.isReady = false;
+    this.iframe = null;
+  }
+
+  async init() {
+    // Extract video ID from URL
+    this.videoId = this.extractVideoId(this.player.element.src);
+    
+    if (!this.videoId) {
+      throw new Error('Invalid Vimeo URL');
+    }
+
+    // Load Vimeo Player API
+    await this.loadVimeoAPI();
+
+    // Create iframe
+    this.createIframe();
+
+    // Initialize player
+    await this.initializePlayer();
+  }
+
+  extractVideoId(url) {
+    const patterns = [
+      /vimeo\.com\/(\d+)/,
+      /vimeo\.com\/video\/(\d+)/,
+      /player\.vimeo\.com\/video\/(\d+)/
+    ];
+
+    for (const pattern of patterns) {
+      const match = url.match(pattern);
+      if (match && match[1]) {
+        return match[1];
+      }
+    }
+
+    return null;
+  }
+
+  async loadVimeoAPI() {
+    // Check if API is already loaded
+    if (window.Vimeo && window.Vimeo.Player) {
+      return Promise.resolve();
+    }
+
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = 'https://player.vimeo.com/api/player.js';
+      script.onload = () => resolve();
+      script.onerror = () => reject(new Error('Failed to load Vimeo API'));
+      document.head.appendChild(script);
+    });
+  }
+
+  createIframe() {
+    // Hide original element
+    this.player.element.style.display = 'none';
+
+    // Create container for iframe
+    this.iframe = document.createElement('div');
+    this.iframe.id = `vimeo-player-${Math.random().toString(36).substr(2, 9)}`;
+    this.iframe.style.width = '100%';
+    this.iframe.style.height = '100%';
+    
+    this.player.element.parentNode.insertBefore(this.iframe, this.player.element);
+  }
+
+  async initializePlayer() {
+    const options = {
+      id: this.videoId,
+      width: '100%',
+      height: '100%',
+      controls: false,
+      autoplay: this.player.options.autoplay,
+      muted: this.player.options.muted,
+      loop: this.player.options.loop,
+      keyboard: false
+    };
+
+    if (this.player.options.startTime > 0) {
+      options.startTime = this.player.options.startTime;
+    }
+
+    this.vimeo = new window.Vimeo.Player(this.iframe.id, options);
+
+    // Wait for player to be ready
+    await this.vimeo.ready();
+    this.isReady = true;
+
+    this.attachEvents();
+
+    // Get initial duration
+    try {
+      const duration = await this.vimeo.getDuration();
+      this.player.state.duration = duration;
+      this.player.emit('loadedmetadata');
+    } catch (error) {
+      this.player.log('Error getting duration:', error, 'warn');
+    }
+  }
+
+  attachEvents() {
+    this.vimeo.on('play', () => {
+      this.player.state.playing = true;
+      this.player.state.paused = false;
+      this.player.state.ended = false;
+      this.player.emit('play');
+      
+      if (this.player.options.onPlay) {
+        this.player.options.onPlay.call(this.player);
+      }
+    });
+
+    this.vimeo.on('pause', () => {
+      this.player.state.playing = false;
+      this.player.state.paused = true;
+      this.player.emit('pause');
+      
+      if (this.player.options.onPause) {
+        this.player.options.onPause.call(this.player);
+      }
+    });
+
+    this.vimeo.on('ended', () => {
+      this.player.state.playing = false;
+      this.player.state.paused = true;
+      this.player.state.ended = true;
+      this.player.emit('ended');
+      
+      if (this.player.options.onEnded) {
+        this.player.options.onEnded.call(this.player);
+      }
+    });
+
+    this.vimeo.on('timeupdate', (data) => {
+      this.player.state.currentTime = data.seconds;
+      this.player.state.duration = data.duration;
+      this.player.emit('timeupdate', data.seconds);
+      
+      if (this.player.options.onTimeUpdate) {
+        this.player.options.onTimeUpdate.call(this.player, data.seconds);
+      }
+    });
+
+    this.vimeo.on('volumechange', (data) => {
+      this.player.state.volume = data.volume;
+      this.player.emit('volumechange', data.volume);
+    });
+
+    this.vimeo.on('bufferstart', () => {
+      this.player.state.buffering = true;
+      this.player.emit('waiting');
+    });
+
+    this.vimeo.on('bufferend', () => {
+      this.player.state.buffering = false;
+      this.player.emit('canplay');
+    });
+
+    this.vimeo.on('seeking', () => {
+      this.player.state.seeking = true;
+      this.player.emit('seeking');
+    });
+
+    this.vimeo.on('seeked', () => {
+      this.player.state.seeking = false;
+      this.player.emit('seeked');
+    });
+
+    this.vimeo.on('playbackratechange', (data) => {
+      this.player.state.playbackSpeed = data.playbackRate;
+      this.player.emit('ratechange', data.playbackRate);
+    });
+
+    this.vimeo.on('error', (error) => {
+      this.player.handleError(new Error(`Vimeo error: ${error.message}`));
+    });
+  }
+
+  play() {
+    if (this.isReady && this.vimeo) {
+      this.vimeo.play().catch(error => {
+        this.player.log('Play error:', error, 'warn');
+      });
+    }
+  }
+
+  pause() {
+    if (this.isReady && this.vimeo) {
+      this.vimeo.pause().catch(error => {
+        this.player.log('Pause error:', error, 'warn');
+      });
+    }
+  }
+
+  seek(time) {
+    if (this.isReady && this.vimeo) {
+      this.vimeo.setCurrentTime(time).catch(error => {
+        this.player.log('Seek error:', error, 'warn');
+      });
+    }
+  }
+
+  setVolume(volume) {
+    if (this.isReady && this.vimeo) {
+      this.vimeo.setVolume(volume).catch(error => {
+        this.player.log('Volume error:', error, 'warn');
+      });
+      this.player.state.volume = volume;
+    }
+  }
+
+  setMuted(muted) {
+    if (this.isReady && this.vimeo) {
+      if (muted) {
+        this.vimeo.setVolume(0);
+      } else {
+        this.vimeo.setVolume(this.player.state.volume);
+      }
+      this.player.state.muted = muted;
+    }
+  }
+
+  setPlaybackSpeed(speed) {
+    if (this.isReady && this.vimeo) {
+      this.vimeo.setPlaybackRate(speed).catch(error => {
+        this.player.log('Playback rate error:', error, 'warn');
+      });
+      this.player.state.playbackSpeed = speed;
+    }
+  }
+
+  destroy() {
+    if (this.vimeo && this.vimeo.destroy) {
+      this.vimeo.destroy();
+    }
+
+    if (this.iframe && this.iframe.parentNode) {
+      this.iframe.parentNode.removeChild(this.iframe);
+    }
+
+    // Show original element
+    if (this.player.element) {
+      this.player.element.style.display = '';
+    }
+  }
+}
+