vidply 1.2.0 → 1.2.3

package/src/renderers/VimeoRenderer.ts

@@ -1,298 +1,298 @@
-import type { Renderer } from '../types/renderer.js';
-import type { Player } from '../core/Player.js';
-import { loadScriptOnce } from '../utils/ScriptLoader.js';
-
-export class VimeoRenderer implements Renderer {
-  player: Player;
-  media: HTMLMediaElement;
-  vimeo: VimeoPlayer | null;
-  videoId: string | null;
-  isReady: boolean;
-  iframe: HTMLDivElement | null;
-
-  constructor(player: Player) {
-    this.player = player;
-    this.media = player.element;
-    this.vimeo = null;
-    this.videoId = null;
-    this.isReady = false;
-    this.iframe = null;
-  }
-
-  async init() {
-    // Extract video ID from URL - use currentSource which works for external renderers
-    const src = this.player.currentSource || this.player.element.src;
-    this.videoId = this.extractVideoId(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: string) {
-    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 loadScriptOnce('https://player.vimeo.com/api/player.js', {
-      isReady: () => !!(window.Vimeo && window.Vimeo.Player)
-    });
-  }
-
-  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.maxHeight = '100%';
-    
-    this.player.element.parentNode?.insertBefore(this.iframe, this.player.element);
-  }
-
-  async initializePlayer() {
-    const options: Record<string, unknown> = {
-      id: this.videoId,
-      width: '100%',
-      height: '100%',
-      controls: true,
-      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;
-    }
-
-    if (!window.Vimeo || !this.iframe) {
-      // The SDK never became available (or the iframe container is missing).
-      // Reject so Player.init() surfaces a real failure instead of treating a
-      // non-functional embed as a successful initialization.
-      throw new Error('Vimeo Player API is not available');
-    }
-    this.vimeo = new window.Vimeo.Player(this.iframe.id, options as VimeoPlayerOptions);
-
-    // Wait for player to be ready
-    await this.vimeo.ready();
-    this.isReady = true;
-    
-    // Ensure the iframe has 100% width and height
-    const vimeoIframe = this.iframe?.querySelector('iframe');
-    if (vimeoIframe) {
-      vimeoIframe.style.width = '100%';
-      vimeoIframe.style.height = '100%';
-      vimeoIframe.setAttribute('width', '100%');
-      vimeoIframe.setAttribute('height', '100%');
-    }
-    
-    // Hide VidPly controls - Vimeo has its own
-    if (this.player.container) {
-      this.player.container.classList.add('vidply-external-controls');
-    }
-
-    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() {
-    const vimeo = this.vimeo;
-    if (!vimeo) return;
-
-    // Vimeo's on() callback signature is (...args: unknown[]) => void, so
-    // each handler narrows its own payload before reading fields.
-    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);
-      }
-    });
-
-    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);
-      }
-    });
-
-    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);
-      }
-    });
-
-    vimeo.on('timeupdate', (...args: unknown[]) => {
-      const data = args[0] as { seconds: number; duration: number };
-      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);
-      }
-    });
-
-    vimeo.on('volumechange', (...args: unknown[]) => {
-      const data = args[0] as { volume: number };
-      this.player.state.volume = data.volume;
-      this.player.emit('volumechange', data.volume);
-    });
-
-    vimeo.on('bufferstart', () => {
-      this.player.state.buffering = true;
-      this.player.emit('waiting');
-    });
-
-    vimeo.on('bufferend', () => {
-      this.player.state.buffering = false;
-      this.player.emit('canplay');
-    });
-
-    vimeo.on('seeking', () => {
-      this.player.state.seeking = true;
-      this.player.emit('seeking');
-    });
-
-    vimeo.on('seeked', () => {
-      this.player.state.seeking = false;
-      this.player.emit('seeked');
-    });
-
-    vimeo.on('playbackratechange', (...args: unknown[]) => {
-      const data = args[0] as { playbackRate: number };
-      this.player.state.playbackSpeed = data.playbackRate;
-      this.player.emit('ratechange', data.playbackRate);
-    });
-
-    vimeo.on('error', (...args: unknown[]) => {
-      const error = args[0] as { message?: string } | undefined;
-      this.player.handleError(new Error(`Vimeo error: ${error?.message ?? 'unknown'}`));
-    });
-  }
-
-  play() {
-    if (this.isReady && this.vimeo) {
-      // Save scroll position to prevent browser from scrolling to video
-      const scrollX = window.scrollX;
-      const scrollY = window.scrollY;
-      
-      this.vimeo.play().catch((error: unknown) => {
-        this.player.log('Play error:', error, 'warn');
-      });
-      
-      // Restore scroll position immediately to prevent auto-scroll
-      window.scrollTo(scrollX, scrollY);
-    }
-  }
-
-  pause() {
-    if (this.isReady && this.vimeo) {
-      this.vimeo.pause().catch((error: unknown) => {
-        this.player.log('Pause error:', error, 'warn');
-      });
-    }
-  }
-
-  seek(time: number) {
-    if (this.isReady && this.vimeo) {
-      this.vimeo.setCurrentTime(time).catch((error: unknown) => {
-        this.player.log('Seek error:', error, 'warn');
-      });
-    }
-  }
-
-  setVolume(volume: number) {
-    if (this.isReady && this.vimeo) {
-      this.vimeo.setVolume(volume).catch((error: unknown) => {
-        this.player.log('Volume error:', error, 'warn');
-      });
-      this.player.state.volume = volume;
-    }
-  }
-
-  setMuted(muted: boolean) {
-    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: number) {
-    if (this.isReady && this.vimeo) {
-      this.vimeo.setPlaybackRate(speed).catch((error: unknown) => {
-        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 = '';
-    }
-  }
-}
-
+import type { Renderer } from '../types/renderer.js';
+import type { Player } from '../core/Player.js';
+import { loadScriptOnce } from '../utils/ScriptLoader.js';
+
+export class VimeoRenderer implements Renderer {
+  player: Player;
+  media: HTMLMediaElement;
+  vimeo: VimeoPlayer | null;
+  videoId: string | null;
+  isReady: boolean;
+  iframe: HTMLDivElement | null;
+
+  constructor(player: Player) {
+    this.player = player;
+    this.media = player.element;
+    this.vimeo = null;
+    this.videoId = null;
+    this.isReady = false;
+    this.iframe = null;
+  }
+
+  async init() {
+    // Extract video ID from URL - use currentSource which works for external renderers
+    const src = this.player.currentSource || this.player.element.src;
+    this.videoId = this.extractVideoId(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: string) {
+    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 loadScriptOnce('https://player.vimeo.com/api/player.js', {
+      isReady: () => !!(window.Vimeo && window.Vimeo.Player)
+    });
+  }
+
+  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.maxHeight = '100%';
+    
+    this.player.element.parentNode?.insertBefore(this.iframe, this.player.element);
+  }
+
+  async initializePlayer() {
+    const options: Record<string, unknown> = {
+      id: this.videoId,
+      width: '100%',
+      height: '100%',
+      controls: true,
+      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;
+    }
+
+    if (!window.Vimeo || !this.iframe) {
+      // The SDK never became available (or the iframe container is missing).
+      // Reject so Player.init() surfaces a real failure instead of treating a
+      // non-functional embed as a successful initialization.
+      throw new Error('Vimeo Player API is not available');
+    }
+    this.vimeo = new window.Vimeo.Player(this.iframe.id, options as VimeoPlayerOptions);
+
+    // Wait for player to be ready
+    await this.vimeo.ready();
+    this.isReady = true;
+    
+    // Ensure the iframe has 100% width and height
+    const vimeoIframe = this.iframe?.querySelector('iframe');
+    if (vimeoIframe) {
+      vimeoIframe.style.width = '100%';
+      vimeoIframe.style.height = '100%';
+      vimeoIframe.setAttribute('width', '100%');
+      vimeoIframe.setAttribute('height', '100%');
+    }
+    
+    // Hide VidPly controls - Vimeo has its own
+    if (this.player.container) {
+      this.player.container.classList.add('vidply-external-controls');
+    }
+
+    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() {
+    const vimeo = this.vimeo;
+    if (!vimeo) return;
+
+    // Vimeo's on() callback signature is (...args: unknown[]) => void, so
+    // each handler narrows its own payload before reading fields.
+    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);
+      }
+    });
+
+    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);
+      }
+    });
+
+    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);
+      }
+    });
+
+    vimeo.on('timeupdate', (...args: unknown[]) => {
+      const data = args[0] as { seconds: number; duration: number };
+      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);
+      }
+    });
+
+    vimeo.on('volumechange', (...args: unknown[]) => {
+      const data = args[0] as { volume: number };
+      this.player.state.volume = data.volume;
+      this.player.emit('volumechange', data.volume);
+    });
+
+    vimeo.on('bufferstart', () => {
+      this.player.state.buffering = true;
+      this.player.emit('waiting');
+    });
+
+    vimeo.on('bufferend', () => {
+      this.player.state.buffering = false;
+      this.player.emit('canplay');
+    });
+
+    vimeo.on('seeking', () => {
+      this.player.state.seeking = true;
+      this.player.emit('seeking');
+    });
+
+    vimeo.on('seeked', () => {
+      this.player.state.seeking = false;
+      this.player.emit('seeked');
+    });
+
+    vimeo.on('playbackratechange', (...args: unknown[]) => {
+      const data = args[0] as { playbackRate: number };
+      this.player.state.playbackSpeed = data.playbackRate;
+      this.player.emit('ratechange', data.playbackRate);
+    });
+
+    vimeo.on('error', (...args: unknown[]) => {
+      const error = args[0] as { message?: string } | undefined;
+      this.player.handleError(new Error(`Vimeo error: ${error?.message ?? 'unknown'}`));
+    });
+  }
+
+  play() {
+    if (this.isReady && this.vimeo) {
+      // Save scroll position to prevent browser from scrolling to video
+      const scrollX = window.scrollX;
+      const scrollY = window.scrollY;
+      
+      this.vimeo.play().catch((error: unknown) => {
+        this.player.log('Play error:', error, 'warn');
+      });
+      
+      // Restore scroll position immediately to prevent auto-scroll
+      window.scrollTo(scrollX, scrollY);
+    }
+  }
+
+  pause() {
+    if (this.isReady && this.vimeo) {
+      this.vimeo.pause().catch((error: unknown) => {
+        this.player.log('Pause error:', error, 'warn');
+      });
+    }
+  }
+
+  seek(time: number) {
+    if (this.isReady && this.vimeo) {
+      this.vimeo.setCurrentTime(time).catch((error: unknown) => {
+        this.player.log('Seek error:', error, 'warn');
+      });
+    }
+  }
+
+  setVolume(volume: number) {
+    if (this.isReady && this.vimeo) {
+      this.vimeo.setVolume(volume).catch((error: unknown) => {
+        this.player.log('Volume error:', error, 'warn');
+      });
+      this.player.state.volume = volume;
+    }
+  }
+
+  setMuted(muted: boolean) {
+    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: number) {
+    if (this.isReady && this.vimeo) {
+      this.vimeo.setPlaybackRate(speed).catch((error: unknown) => {
+        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 = '';
+    }
+  }
+}
+