myetv-player 1.0.8 → 1.1.0

package/plugins/vimeo/myetv-player-vimeo.js

@@ -32,14 +32,13 @@
                 background: options.background || false,
                 byline: options.byline !== false,
                 color: options.color || null,
-                controls: options.controls !== false,
-                dnt: options.dnt || false, // Do Not Track
+                controls: false, // Force controls off to use MYETV controls
+                dnt: options.dnt || false,
                 loop: options.loop || false,
                 muted: options.muted || false,
-                pip: options.pip !== false, // Picture-in-Picture
                 playsinline: options.playsinline !== false,
                 portrait: options.portrait !== false,
-                quality: options.quality || 'auto', // auto, 360p, 540p, 720p, 1080p, 2k, 4k
+                quality: options.quality || 'auto',
                 responsive: options.responsive !== false,
                 speed: options.speed || false,
                 texttrack: options.texttrack || null,
@@ -69,8 +68,12 @@
          * Setup plugin
          */
         setup() {
+            // Disable PIP for Vimeo (not supported)
+            this.disablePipButton();
+
             this.loadVimeoSDK().then(() => {
                 this.createVimeoPlayer();
+
                 if (this.options.replaceNativePlayer) {
                     this.hideNativePlayer();
                 }
@@ -83,6 +86,97 @@
             }
         }
 
+        /**
+         * Disable PIP button permanently (Vimeo doesn't support it)
+         */
+        disablePipButton() {
+            // Set option to false
+            if (this.player.options) {
+                this.player.options.showPictureInPicture = false;
+            }
+
+            // Hide PIP button immediately
+            this.hidePipFromSettingsMenuOnly();
+
+            // Setup responsive layout handler
+            this.handleResponsiveLayout();
+
+            if (this.options.debug) {
+                console.log('🎬 Vimeo: PIP disabled (not supported)');
+            }
+        }
+
+        /**
+         * Hide PIP from settings menu using MutationObserver
+         * Copied from YouTube plugin
+         */
+        hidePipFromSettingsMenuOnly() {
+            const hidePipOption = () => {
+                const settingsMenu = this.player.container.querySelector('.settings-menu');
+                if (settingsMenu) {
+                    const pipOption = settingsMenu.querySelector('[data-setting="pip"]');
+                    if (pipOption) {
+                        pipOption.style.display = 'none';
+                    }
+                }
+            };
+
+            // Hide immediately
+            hidePipOption();
+
+            // Setup observer for dynamic changes
+            const observer = new MutationObserver(() => {
+                hidePipOption();
+            });
+
+            if (this.player.container) {
+                observer.observe(this.player.container, {
+                    childList: true,
+                    subtree: true
+                });
+            }
+
+            // Store observer for cleanup
+            this.pipObserver = observer;
+        }
+
+        /**
+         * Handle responsive layout to hide PIP button
+         * Copied from YouTube plugin
+         */
+        handleResponsiveLayout() {
+            const hidePipButton = () => {
+                const pipBtn = this.player.container.querySelector('.pip-btn, [data-pip-btn]');
+                if (pipBtn) {
+                    pipBtn.style.display = 'none';
+                }
+
+                // Also hide from settings menu
+                const settingsMenu = this.player.container.querySelector('.settings-menu');
+                if (settingsMenu) {
+                    const pipOption = settingsMenu.querySelector('[data-setting="pip"]');
+                    if (pipOption) {
+                        pipOption.style.display = 'none';
+                    }
+                }
+            };
+
+            // Hide immediately
+            hidePipButton();
+
+            // Hide on window resize
+            window.addEventListener('resize', hidePipButton);
+
+            // Hide on orientation change
+            window.addEventListener('orientationchange', hidePipButton);
+
+            // Store cleanup function
+            this.pipCleanup = () => {
+                window.removeEventListener('resize', hidePipButton);
+                window.removeEventListener('orientationchange', hidePipButton);
+            };
+        }
+
         /**
          * Load Vimeo Player SDK
          */
@@ -116,17 +210,51 @@
             // Create container for Vimeo player
             this.vimeoContainer = document.createElement('div');
             this.vimeoContainer.className = 'vimeo-player-container';
-            this.vimeoContainer.style.cssText = `
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                z-index: 100;
+
+            // Add CSS to ensure iframe fills container properly
+            const style = document.createElement('style');
+            style.textContent = `
+                .vimeo-player-container {
+                    position: absolute !important;
+                    top: 0 !important;
+                    left: 0 !important;
+                    width: 100% !important;
+                    height: 100% !important;
+                    z-index: 1 !important;
+                }
+                .vimeo-player-container iframe {
+                    position: absolute !important;
+                    top: 0 !important;
+                    left: 0 !important;
+                    width: 100% !important;
+                    height: 100% !important;
+                    border: none !important;
+                }
             `;
+            if (!document.querySelector('#vimeo-plugin-styles')) {
+                style.id = 'vimeo-plugin-styles';
+                document.head.appendChild(style);
+            }
 
             this.player.container.appendChild(this.vimeoContainer);
 
+            // Prevent default Vimeo click behavior and sync with MYETV
+            this.vimeoContainer.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+
+                // Toggle play/pause through MYETV player
+                if (this.player.video) {
+                    this.vimeoPlayer.getPaused().then(paused => {
+                        if (paused) {
+                            this.player.video.play();
+                        } else {
+                            this.player.video.pause();
+                        }
+                    });
+                }
+            });
+
             // Prepare Vimeo options
             const vimeoOptions = this.prepareVimeoOptions();
 
@@ -139,10 +267,11 @@
             // Load available qualities
             this.loadQualities();
 
-            // Sync with native player controls if requested
-            if (this.options.syncControls) {
-                this.syncWithNativeControls();
-            }
+            // Override native methods
+            this.overrideNativeMethods();
+
+            // Sync with native controls
+            this.syncWithNativeControls();
 
             this.isVimeoLoaded = true;
 
@@ -168,17 +297,18 @@
             if (this.options.width) vimeoOptions.width = this.options.width;
             if (this.options.height) vimeoOptions.height = this.options.height;
 
-            // Set embed options
+            // Set embed options - FORCE controls to false
             if (this.options.autopause !== undefined) vimeoOptions.autopause = this.options.autopause;
             if (this.options.autoplay) vimeoOptions.autoplay = this.options.autoplay;
             if (this.options.background) vimeoOptions.background = this.options.background;
             if (this.options.byline !== undefined) vimeoOptions.byline = this.options.byline;
             if (this.options.color) vimeoOptions.color = this.options.color;
-            if (this.options.controls !== undefined) vimeoOptions.controls = this.options.controls;
+
+            vimeoOptions.controls = false; // ALWAYS FALSE - use MYETV controls
+
             if (this.options.dnt) vimeoOptions.dnt = this.options.dnt;
             if (this.options.loop) vimeoOptions.loop = this.options.loop;
             if (this.options.muted) vimeoOptions.muted = this.options.muted;
-            if (this.options.pip !== undefined) vimeoOptions.pip = this.options.pip;
             if (this.options.playsinline !== undefined) vimeoOptions.playsinline = this.options.playsinline;
             if (this.options.portrait !== undefined) vimeoOptions.portrait = this.options.portrait;
             if (this.options.quality && this.options.quality !== 'auto') vimeoOptions.quality = this.options.quality;
@@ -195,14 +325,11 @@
          * Extract Vimeo ID from various formats
          */
         extractVimeoId(input) {
-            // Already a number
             if (typeof input === 'number') return input;
 
-            // Extract from URL
             const match = input.match(/vimeo\.com\/(\d+)/);
             if (match) return parseInt(match[1]);
 
-            // Try parsing as number
             const parsed = parseInt(input);
             if (!isNaN(parsed)) return parsed;
 
@@ -213,10 +340,7 @@
          * Extract full Vimeo URL
          */
         extractVimeoUrl(input) {
-            // Already a full URL
             if (input.startsWith('http')) return input;
-
-            // Build URL from ID
             return `https://vimeo.com/${input}`;
         }
 
@@ -227,24 +351,25 @@
             // Play event
             this.vimeoPlayer.on('play', (data) => {
                 this.player.triggerEvent('play', data);
-                if (this.options.debug) console.log('🎬 Vimeo: play', data);
-            });
-
-            // Playing event
-            this.vimeoPlayer.on('playing', (data) => {
-                this.player.triggerEvent('playing', data);
+                if (this.options.debug) {
+                    console.log('🎬 Vimeo: play', data);
+                }
             });
 
             // Pause event
             this.vimeoPlayer.on('pause', (data) => {
                 this.player.triggerEvent('pause', data);
-                if (this.options.debug) console.log('🎬 Vimeo: pause', data);
+                if (this.options.debug) {
+                    console.log('🎬 Vimeo: pause', data);
+                }
             });
 
             // Ended event
             this.vimeoPlayer.on('ended', (data) => {
                 this.player.triggerEvent('ended', data);
-                if (this.options.debug) console.log('🎬 Vimeo: ended', data);
+                if (this.options.debug) {
+                    console.log('🎬 Vimeo: ended', data);
+                }
             });
 
             // Time update event
@@ -256,21 +381,6 @@
                 });
             });
 
-            // Progress event (buffering)
-            this.vimeoPlayer.on('progress', (data) => {
-                this.player.triggerEvent('progress', data);
-            });
-
-            // Seeking event
-            this.vimeoPlayer.on('seeking', (data) => {
-                this.player.triggerEvent('seeking', data);
-            });
-
-            // Seeked event
-            this.vimeoPlayer.on('seeked', (data) => {
-                this.player.triggerEvent('seeked', data);
-            });
-
             // Volume change event
             this.vimeoPlayer.on('volumechange', (data) => {
                 this.player.triggerEvent('volumechange', data);
@@ -281,27 +391,35 @@
                 this.player.triggerEvent('playbackratechange', data);
             });
 
-            // Buffer start event
+            // Buffer events
             this.vimeoPlayer.on('bufferstart', () => {
                 this.player.triggerEvent('waiting');
-                if (this.options.debug) console.log('🎬 Vimeo: bufferstart');
+                if (this.options.debug) {
+                    console.log('🎬 Vimeo: bufferstart');
+                }
             });
 
-            // Buffer end event
             this.vimeoPlayer.on('bufferend', () => {
                 this.player.triggerEvent('canplay');
-                if (this.options.debug) console.log('🎬 Vimeo: bufferend');
+                if (this.options.debug) {
+                    console.log('🎬 Vimeo: bufferend');
+                }
             });
 
             // Quality change event
             this.vimeoPlayer.on('qualitychange', (data) => {
                 this.player.triggerEvent('qualitychange', data);
-                if (this.options.debug) console.log('🎬 Vimeo: quality changed to', data.quality);
+                if (this.options.debug) {
+                    console.log('🎬 Vimeo: quality changed to', data.quality);
+                }
             });
 
-            // Fullscreen change event
-            this.vimeoPlayer.on('fullscreenchange', (data) => {
-                this.player.triggerEvent('fullscreenchange', data);
+            // Loaded event
+            this.vimeoPlayer.on('loaded', (data) => {
+                this.player.triggerEvent('loadedmetadata', data);
+                if (this.options.debug) {
+                    console.log('🎬 Vimeo: loaded', data);
+                }
             });
 
             // Error event
@@ -309,51 +427,65 @@
                 console.error('🎬 Vimeo error:', data);
                 this.player.triggerEvent('error', data);
             });
-
-            // Loaded event
-            this.vimeoPlayer.on('loaded', (data) => {
-                this.player.triggerEvent('loadedmetadata', data);
-                if (this.options.debug) console.log('🎬 Vimeo: loaded', data);
-            });
-
-            // Text track change
-            this.vimeoPlayer.on('texttrackchange', (data) => {
-                this.player.triggerEvent('texttrackchange', data);
-            });
-
-            // Chapter change
-            this.vimeoPlayer.on('chapterchange', (data) => {
-                this.player.triggerEvent('chapterchange', data);
-            });
-
-            // Picture-in-Picture events
-            this.vimeoPlayer.on('enterpictureinpicture', () => {
-                this.player.triggerEvent('enterpictureinpicture');
-            });
-
-            this.vimeoPlayer.on('leavepictureinpicture', () => {
-                this.player.triggerEvent('leavepictureinpicture');
-            });
         }
 
         /**
-         * Load available qualities
+         * Load available qualities and sync with MYETV player
          */
         loadQualities() {
             this.vimeoPlayer.getQualities().then(qualities => {
                 this.availableQualities = qualities;
 
-                // Trigger custom event with qualities
-                this.player.triggerEvent('qualitiesloaded', { qualities });
+                if (this.options.debug) {
+                    console.log('🎬 Vimeo: Raw qualities from API:', qualities);
+                }
+
+                // Inject fake qualities into player.qualities array
+                this.player.qualities = qualities.map(q => ({
+                    src: '',
+                    quality: q,
+                    height: this.parseQualityHeight(q),
+                    type: 'video/vimeo'
+                }));
+
+                // Add AUTO at the beginning
+                this.player.qualities.unshift({
+                    src: '',
+                    quality: 'auto',
+                    height: 9999,
+                    type: 'video/vimeo'
+                });
+
+                // Set selected quality
+                this.player.selectedQuality = 'auto';
 
                 if (this.options.debug) {
-                    console.log('🎬 Vimeo: Available qualities', qualities);
+                    console.log('🎬 Vimeo: player.qualities set:', this.player.qualities);
+                    console.log('🎬 Vimeo: qualities length:', this.player.qualities.length);
+                }
+
+                // Force update quality button and menu using native methods
+                if (typeof this.player.updateQualityButton === 'function') {
+                    this.player.updateQualityButton();
+                }
+
+                if (typeof this.player.updateQualityMenu === 'function') {
+                    this.player.updateQualityMenu();
                 }
 
-                // Set initial quality if specified
+                // Wait a bit then populate with Vimeo-specific options
+                setTimeout(() => {
+                    this.updatePlayerQualityMenu();
+                }, 300);
+
+                // Trigger event
+                this.player.triggerEvent('qualitiesloaded', { qualities });
+
+                // Set initial quality
                 if (this.options.quality && this.options.quality !== 'auto') {
                     this.setQuality(this.options.quality);
                 }
+
             }).catch(error => {
                 if (this.options.debug) {
                     console.warn('🎬 Vimeo: Could not load qualities', error);
@@ -362,17 +494,129 @@
         }
 
         /**
-         * Get available qualities
+ * Update native player quality menu with Vimeo-specific handlers
+ */
+        updatePlayerQualityMenu() {
+            const qualityMenu = this.player.container.querySelector('.quality-menu');
+            if (!qualityMenu) {
+                if (this.options.debug) {
+                    console.warn('🎬 Vimeo: Quality menu not found');
+                }
+                return;
+            }
+
+            // Clear and repopulate with Vimeo click handlers
+            qualityMenu.innerHTML = '';
+
+            // Add Auto option
+            const autoOption = document.createElement('div');
+            autoOption.className = 'quality-option active';
+            autoOption.setAttribute('data-quality', 'auto');
+            autoOption.textContent = 'Auto';
+            autoOption.addEventListener('click', () => {
+                this.handleQualityClick('auto');
+            });
+            qualityMenu.appendChild(autoOption);
+
+            // Add Vimeo qualities
+            this.availableQualities.forEach(quality => {
+                const option = document.createElement('div');
+                option.className = 'quality-option';
+                option.setAttribute('data-quality', quality);
+                option.textContent = quality;
+                option.addEventListener('click', () => {
+                    this.handleQualityClick(quality);
+                });
+                qualityMenu.appendChild(option);
+            });
+
+            if (this.options.debug) {
+                console.log('🎬 Vimeo: Quality menu updated');
+            }
+        }
+
+        /**
+         * Update native player quality menu with Vimeo qualities
          */
-        getQualities() {
-            return this.availableQualities;
+        updatePlayerQualityMenu() {
+            setTimeout(() => {
+                const qualityMenu = this.player.container.querySelector('.quality-menu');
+                if (!qualityMenu) {
+                    if (this.options.debug) {
+                        console.warn('🎬 Vimeo: Quality menu not found in DOM');
+                    }
+                    return;
+                }
+
+                // Clear existing
+                qualityMenu.innerHTML = '';
+
+                // Add Auto option
+                const autoOption = document.createElement('div');
+                autoOption.className = 'quality-option active';
+                autoOption.setAttribute('data-quality', 'auto');
+                autoOption.textContent = 'Auto';
+                autoOption.addEventListener('click', () => {
+                    this.handleQualityClick('auto');
+                });
+                qualityMenu.appendChild(autoOption);
+
+                // Add Vimeo qualities
+                this.availableQualities.forEach(quality => {
+                    const option = document.createElement('div');
+                    option.className = 'quality-option';
+                    option.setAttribute('data-quality', quality);
+                    option.textContent = quality;
+                    option.addEventListener('click', () => {
+                        this.handleQualityClick(quality);
+                    });
+                    qualityMenu.appendChild(option);
+                });
+
+                if (this.options.debug) {
+                    console.log('🎬 Vimeo: Quality menu populated');
+                }
+            }, 300);
         }
 
         /**
-         * Get current quality
+         * Handle quality menu click
          */
-        getCurrentQuality() {
-            return this.vimeoPlayer.getQuality();
+        handleQualityClick(quality) {
+            // Update active class
+            const qualityMenu = this.player.container.querySelector('.quality-menu');
+            if (qualityMenu) {
+                qualityMenu.querySelectorAll('.quality-option').forEach(opt => {
+                    opt.classList.remove('active');
+                });
+                const selected = qualityMenu.querySelector(`[data-quality="${quality}"]`);
+                if (selected) {
+                    selected.classList.add('active');
+                }
+            }
+
+            // Update button label
+            const qualityBtn = this.player.container.querySelector('.quality-btn span');
+            if (qualityBtn) {
+                qualityBtn.textContent = quality === 'auto' ? 'Auto' : quality;
+            }
+
+            // Set quality
+            this.setQuality(quality).then(() => {
+                // Close menu
+                if (qualityMenu) {
+                    qualityMenu.classList.remove('show');
+                }
+            });
+        }
+
+        /**
+         * Parse quality string to height number
+         */
+        parseQualityHeight(quality) {
+            if (!quality) return 0;
+            const match = quality.match(/(\d+)p/);
+            return match ? parseInt(match[1]) : 0;
         }
 
         /**
@@ -392,6 +636,20 @@
             });
         }
 
+        /**
+         * Get available qualities
+         */
+        getQualities() {
+            return this.availableQualities;
+        }
+
+        /**
+         * Get current quality
+         */
+        getCurrentQuality() {
+            return this.vimeoPlayer.getQuality();
+        }
+
         /**
          * Hide native player
          */
@@ -403,210 +661,266 @@
         }
 
         /**
-         * Sync with native player controls
+         * Override native video element methods to control Vimeo player
          */
-        syncWithNativeControls() {
-            // This would integrate with your custom player controls
-            // Example: sync play/pause buttons
-            const playButton = this.player.container.querySelector('.play-button');
-            if (playButton) {
-                playButton.addEventListener('click', () => {
-                    this.vimeoPlayer.getPaused().then(paused => {
-                        if (paused) {
-                            this.vimeoPlayer.play();
-                        } else {
-                            this.vimeoPlayer.pause();
-                        }
-                    });
+        overrideNativeMethods() {
+            if (!this.player.video) return;
+
+            const video = this.player.video;
+            const vimeoPlayer = this.vimeoPlayer;
+            const self = this;
+
+            // Override play method
+            video._originalPlay = video.play;
+            video.play = function () {
+                vimeoPlayer.play().catch(err => {
+                    if (self.options.debug) {
+                        console.error('Play error:', err);
+                    }
                 });
+                return Promise.resolve();
+            };
+
+            // Override pause method
+            video._originalPause = video.pause;
+            video.pause = function () {
+                vimeoPlayer.pause().catch(err => {
+                    if (self.options.debug) {
+                        console.error('Pause error:', err);
+                    }
+                });
+            };
+
+            // Initialize cached values
+            video._cachedCurrentTime = 0;
+            video._cachedVolume = 1;
+            video._cachedMuted = false;
+            video._cachedPlaybackRate = 1;
+            video._cachedDuration = 0;
+            video._cachedPaused = true;
+
+            // Override properties
+            Object.defineProperties(video, {
+                currentTime: {
+                    get: function () {
+                        return this._cachedCurrentTime || 0;
+                    },
+                    set: function (time) {
+                        vimeoPlayer.setCurrentTime(time).catch(err => {
+                            if (self.options.debug) {
+                                console.error('Seek error:', err);
+                            }
+                        });
+                    },
+                    configurable: true
+                },
+                volume: {
+                    get: function () {
+                        return this._cachedVolume || 1;
+                    },
+                    set: function (volume) {
+                        vimeoPlayer.setVolume(volume).catch(err => {
+                            if (self.options.debug) {
+                                console.error('Volume error:', err);
+                            }
+                        });
+                    },
+                    configurable: true
+                },
+                muted: {
+                    get: function () {
+                        return this._cachedMuted || false;
+                    },
+                    set: function (muted) {
+                        vimeoPlayer.setMuted(muted).catch(err => {
+                            if (self.options.debug) {
+                                console.error('Mute error:', err);
+                            }
+                        });
+                    },
+                    configurable: true
+                },
+                playbackRate: {
+                    get: function () {
+                        return this._cachedPlaybackRate || 1;
+                    },
+                    set: function (rate) {
+                        vimeoPlayer.setPlaybackRate(rate).catch(err => {
+                            if (self.options.debug) {
+                                console.error('Speed error:', err);
+                            }
+                        });
+                    },
+                    configurable: true
+                },
+                duration: {
+                    get: function () {
+                        return this._cachedDuration || 0;
+                    },
+                    configurable: true
+                },
+                paused: {
+                    get: function () {
+                        return this._cachedPaused !== false;
+                    },
+                    configurable: true
+                }
+            });
+
+            if (this.options.debug) {
+                console.log('🎬 Vimeo: Native methods overridden');
             }
         }
 
         /**
-         * Load new video
+         * Sync with native player controls
          */
-        loadVideo(videoIdOrUrl) {
-            if (!this.vimeoPlayer) return Promise.reject('Player not initialized');
+        syncWithNativeControls() {
+            if (!this.player.video) return;
 
-            const videoId = this.extractVimeoId(videoIdOrUrl);
+            const video = this.player.video;
 
-            return this.vimeoPlayer.loadVideo(videoId).then(id => {
-                if (this.options.debug) {
-                    console.log('🎬 Vimeo: Video loaded', id);
-                }
-                this.loadQualities();
-                return id;
-            }).catch(error => {
-                console.error('🎬 Vimeo: Failed to load video', error);
-                throw error;
+            // Update cached properties from Vimeo events
+            this.vimeoPlayer.on('timeupdate', (data) => {
+                video._cachedCurrentTime = data.seconds;
+                video._cachedDuration = data.duration;
+
+                const event = new Event('timeupdate');
+                video.dispatchEvent(event);
             });
-        }
 
-        /**
-         * Get video metadata via oEmbed API
-         */
-        async getVideoMetadata(videoIdOrUrl) {
-            const videoUrl = this.extractVimeoUrl(videoIdOrUrl);
-            const oembedUrl = `https://vimeo.com/api/oembed.json?url=${encodeURIComponent(videoUrl)}`;
+            this.vimeoPlayer.on('play', () => {
+                video._cachedPaused = false;
 
-            try {
-                const response = await fetch(oembedUrl);
-                const data = await response.json();
+                if (this.player.elements && this.player.elements.loading) {
+                    this.player.elements.loading.style.display = 'none';
+                }
 
-                if (this.options.debug) {
-                    console.log('🎬 Vimeo: Video metadata', data);
+                const event = new Event('play');
+                video.dispatchEvent(event);
+            });
+
+            this.vimeoPlayer.on('playing', () => {
+                video._cachedPaused = false;
+
+                if (this.player.elements && this.player.elements.loading) {
+                    this.player.elements.loading.style.display = 'none';
                 }
 
-                return {
-                    title: data.title,
-                    description: data.description,
-                    thumbnail: data.thumbnail_url,
-                    thumbnailLarge: data.thumbnail_url.replace(/_\d+x\d+/, '_1280x720'),
-                    duration: data.duration,
-                    author: data.author_name,
-                    authorUrl: data.author_url,
-                    width: data.width,
-                    height: data.height,
-                    html: data.html
-                };
-            } catch (error) {
-                console.error('🎬 Vimeo: Failed to fetch metadata', error);
-                throw error;
-            }
-        }
+                const event = new Event('playing');
+                video.dispatchEvent(event);
+            });
 
-        /**
-         * Play video
-         */
-        play() {
-            if (!this.vimeoPlayer) return Promise.reject('Player not initialized');
-            return this.vimeoPlayer.play();
-        }
+            this.vimeoPlayer.on('pause', () => {
+                video._cachedPaused = true;
 
-        /**
-         * Pause video
-         */
-        pause() {
-            if (!this.vimeoPlayer) return Promise.reject('Player not initialized');
-            return this.vimeoPlayer.pause();
-        }
+                const event = new Event('pause');
+                video.dispatchEvent(event);
+            });
 
-        /**
-         * Get current time
-         */
-        getCurrentTime() {
-            if (!this.vimeoPlayer) return Promise.reject('Player not initialized');
-            return this.vimeoPlayer.getCurrentTime();
-        }
+            this.vimeoPlayer.on('volumechange', (data) => {
+                video._cachedVolume = data.volume;
 
-        /**
-         * Set current time
-         */
-        setCurrentTime(seconds) {
-            if (!this.vimeoPlayer) return Promise.reject('Player not initialized');
-            return this.vimeoPlayer.setCurrentTime(seconds);
-        }
+                const event = new Event('volumechange');
+                video.dispatchEvent(event);
+            });
 
-        /**
-         * Get duration
-         */
-        getDuration() {
-            if (!this.vimeoPlayer) return Promise.reject('Player not initialized');
-            return this.vimeoPlayer.getDuration();
-        }
+            this.vimeoPlayer.on('playbackratechange', (data) => {
+                video._cachedPlaybackRate = data.playbackRate;
 
-        /**
-         * Get volume
-         */
-        getVolume() {
-            if (!this.vimeoPlayer) return Promise.reject('Player not initialized');
-            return this.vimeoPlayer.getVolume();
-        }
+                const event = new Event('ratechange');
+                video.dispatchEvent(event);
+            });
 
-        /**
-         * Set volume
-         */
-        setVolume(volume) {
-            if (!this.vimeoPlayer) return Promise.reject('Player not initialized');
-            return this.vimeoPlayer.setVolume(volume);
-        }
+            this.vimeoPlayer.on('loaded', (data) => {
+                video._cachedDuration = data.duration;
 
-        /**
-         * Get muted state
-         */
-        getMuted() {
-            if (!this.vimeoPlayer) return Promise.reject('Player not initialized');
-            return this.vimeoPlayer.getMuted();
-        }
+                if (this.player.elements && this.player.elements.loading) {
+                    this.player.elements.loading.style.display = 'none';
+                }
 
-        /**
-         * Set muted state
-         */
-        setMuted(muted) {
-            if (!this.vimeoPlayer) return Promise.reject('Player not initialized');
-            return this.vimeoPlayer.setMuted(muted);
-        }
+                const event = new Event('loadedmetadata');
+                video.dispatchEvent(event);
+            });
 
-        /**
-         * Get playback rate
-         */
-        getPlaybackRate() {
-            if (!this.vimeoPlayer) return Promise.reject('Player not initialized');
-            return this.vimeoPlayer.getPlaybackRate();
-        }
+            this.vimeoPlayer.on('ended', () => {
+                video._cachedPaused = true;
 
-        /**
-         * Set playback rate
-         */
-        setPlaybackRate(rate) {
-            if (!this.vimeoPlayer) return Promise.reject('Player not initialized');
-            return this.vimeoPlayer.setPlaybackRate(rate);
-        }
+                const event = new Event('ended');
+                video.dispatchEvent(event);
+            });
 
-        /**
-         * Request fullscreen
-         */
-        requestFullscreen() {
-            if (!this.vimeoPlayer) return Promise.reject('Player not initialized');
-            return this.vimeoPlayer.requestFullscreen();
-        }
+            // Get initial values
+            this.vimeoPlayer.getDuration().then(duration => {
+                video._cachedDuration = duration;
+            });
 
-        /**
-         * Exit fullscreen
-         */
-        exitFullscreen() {
-            if (!this.vimeoPlayer) return Promise.reject('Player not initialized');
-            return this.vimeoPlayer.exitFullscreen();
+            this.vimeoPlayer.getVolume().then(volume => {
+                video._cachedVolume = volume;
+            });
+
+            this.vimeoPlayer.getPlaybackRate().then(rate => {
+                video._cachedPlaybackRate = rate;
+            });
+
+            this.vimeoPlayer.getPaused().then(paused => {
+                video._cachedPaused = paused;
+            });
+
+            if (this.options.debug) {
+                console.log('🎬 Vimeo: Synced with native controls');
+            }
         }
 
         /**
-         * Get text tracks
+         * Play video
          */
-        getTextTracks() {
+        play() {
             if (!this.vimeoPlayer) return Promise.reject('Player not initialized');
-            return this.vimeoPlayer.getTextTracks();
+            return this.vimeoPlayer.play();
         }
 
         /**
-         * Enable text track
+         * Pause video
          */
-        enableTextTrack(language, kind) {
+        pause() {
             if (!this.vimeoPlayer) return Promise.reject('Player not initialized');
-            return this.vimeoPlayer.enableTextTrack(language, kind);
+            return this.vimeoPlayer.pause();
         }
 
         /**
-         * Disable text track
+         * Load new video
          */
-        disableTextTrack() {
+        loadVideo(videoIdOrUrl) {
             if (!this.vimeoPlayer) return Promise.reject('Player not initialized');
-            return this.vimeoPlayer.disableTextTrack();
+
+            const videoId = this.extractVimeoId(videoIdOrUrl);
+
+            return this.vimeoPlayer.loadVideo(videoId).then(id => {
+                if (this.options.debug) {
+                    console.log('🎬 Vimeo: Video loaded', id);
+                }
+                this.loadQualities();
+                return id;
+            }).catch(error => {
+                console.error('🎬 Vimeo: Failed to load video', error);
+                throw error;
+            });
         }
 
         /**
          * Dispose plugin
          */
         dispose() {
+            // Cleanup PIP observers and listeners
+            if (this.pipObserver) {
+                this.pipObserver.disconnect();
+            }
+
+            if (this.pipCleanup) {
+                this.pipCleanup();
+            }
+
             if (this.vimeoPlayer) {
                 this.vimeoPlayer.destroy().then(() => {
                     if (this.options.debug) {
@@ -635,6 +949,5 @@
     if (typeof window.registerMYETVPlugin === 'function') {
         window.registerMYETVPlugin('vimeo', VimeoPlugin);
     }
-
 })();
 /* GLOBAL_END */