myetv-player 1.1.4 → 1.1.6

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

@@ -4,10 +4,6 @@
  * Created by https://www.myetv.tv https://oskarcosimo.com
  */
 
-// ===================================================================
-// GLOBAL CODE - Will be placed OUTSIDE the class by build script
-// ===================================================================
-
 /* GLOBAL_START */
 (function () {
     'use strict';
@@ -46,6 +42,13 @@
                 transparent: options.transparent !== false,
 
                 // Plugin options
+                showNativeControlsButton: options.showNativeControlsButton !== undefined ? options.showNativeControlsButton : true,
+                controlBarOpacity: options.controlBarOpacity !== undefined
+                    ? options.controlBarOpacity
+                    : (player.options.controlBarOpacity !== undefined ? player.options.controlBarOpacity : 0.95),
+                titleOverlayOpacity: options.titleOverlayOpacity !== undefined
+                    ? options.titleOverlayOpacity
+                    : (player.options.titleOverlayOpacity !== undefined ? player.options.titleOverlayOpacity : 0.95),
                 debug: options.debug || false,
                 replaceNativePlayer: options.replaceNativePlayer !== false,
                 syncControls: options.syncControls !== false,
@@ -204,33 +207,58 @@
         }
 
         /**
-         * Create Vimeo player
-         */
+ * Create Vimeo player
+ */
         createVimeoPlayer() {
+            // Save original controls setting BEFORE modifying
+            this.originalControlsSetting = this.options.controls;
+
+            // If controls were originally false, force them to true (we'll hide via CSS)
+            if (!this.originalControlsSetting) {
+                this.options.controls = true;
+                if (this.options.debug) {
+                    console.log('[Vimeo Plugin] Controls forced to true, will hide via CSS');
+                }
+            }
+
             // Create container for Vimeo player
             this.vimeoContainer = document.createElement('div');
             this.vimeoContainer.className = 'vimeo-player-container';
 
+            // Add class if we need to hide controls via CSS
+            if (!this.originalControlsSetting) {
+                this.vimeoContainer.classList.add('vimeo-container-no-controls');
+            }
+
             // 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;
-                }
-            `;
+    .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;
+    }
+
+    .vimeo-container-no-controls iframe {
+        pointer-events: none !important;
+    }
+    
+    .vimeo-container-no-controls.vimeo-show-controls iframe {
+        pointer-events: auto !important;
+        z-index: 999999 !important;
+    }
+`;
             if (!document.querySelector('#vimeo-plugin-styles')) {
                 style.id = 'vimeo-plugin-styles';
                 document.head.appendChild(style);
@@ -240,18 +268,21 @@
 
             // 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();
-                        }
-                    });
+                // Only prevent default if controls are hidden
+                if (!this.originalControlsSetting && !this.vimeoContainer.classList.contains('show-vimeo-controls')) {
+                    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();
+                            }
+                        });
+                    }
                 }
             });
 
@@ -264,6 +295,15 @@
             // Setup event listeners
             this.setupEventListeners();
 
+            // inject controlbar gradient styles
+            this.injectControlbarGradientStyles();
+
+            //create overlay for mouse detection
+            this.createMouseMoveOverlay();
+
+            // Create Vimeo controls button (only if controls were originally false)
+            this.createVimeoControlsButton();
+
             // Load available qualities
             this.loadQualities();
 
@@ -276,7 +316,7 @@
             this.isVimeoLoaded = true;
 
             if (this.options.debug) {
-                console.log('🎬 Vimeo player created');
+                console.log('🎬 Vimeo player created with originalControlsSetting:', this.originalControlsSetting);
             }
         }
 
@@ -304,7 +344,8 @@
             if (this.options.byline !== undefined) vimeoOptions.byline = this.options.byline;
             if (this.options.color) vimeoOptions.color = this.options.color;
 
-            vimeoOptions.controls = false; // ALWAYS FALSE - use MYETV controls
+            // Use the modified controls value (which was set to true if originalControlsSetting was false)
+            vimeoOptions.controls = true;
 
             if (this.options.dnt) vimeoOptions.dnt = this.options.dnt;
             if (this.options.loop) vimeoOptions.loop = this.options.loop;
@@ -351,6 +392,23 @@
             // Play event
             this.vimeoPlayer.on('play', (data) => {
                 this.player.triggerEvent('play', data);
+
+                // remove class paused
+                if (this.player.container) {
+                    this.player.container.classList.remove('video-paused');
+                }
+
+                // reenable auto-hide
+                if (this.player.options.autoHide && this.player.autoHideInitialized) {
+                    if (this.player.resetAutoHideTimer) {
+                        this.player.resetAutoHideTimer();
+                    }
+
+                    if (this.options.debug) {
+                        console.log('🎬 Vimeo: Video playing - auto-hide reactivated');
+                    }
+                }
+
                 if (this.options.debug) {
                     console.log('🎬 Vimeo: play', data);
                 }
@@ -359,6 +417,42 @@
             // Pause event
             this.vimeoPlayer.on('pause', (data) => {
                 this.player.triggerEvent('pause', data);
+
+                // add class paused
+                if (this.player.container) {
+                    this.player.container.classList.add('video-paused');
+                }
+
+                // controlbar and title overlay stay visible when paused
+                if (this.player.options.autoHide && this.player.autoHideInitialized) {
+                    if (this.player.controls) {
+                        this.player.controls.classList.add('show');
+                    }
+
+                    // show title overlay if enabled
+                    if (this.player.options.showTitleOverlay &&
+                        !this.player.options.persistentTitle &&
+                        this.player.titleOverlay) {
+                        this.player.titleOverlay.classList.add('show');
+                    }
+
+                    // delete timer for auto-hide
+                    if (this.player.autoHideTimer) {
+                        clearTimeout(this.player.autoHideTimer);
+                        this.player.autoHideTimer = null;
+                    }
+
+                    // delete title timeout
+                    if (this.player.titleTimeout) {
+                        clearTimeout(this.player.titleTimeout);
+                        this.player.titleTimeout = null;
+                    }
+
+                    if (this.options.debug) {
+                        console.log('🎬 Vimeo: Video paused - controls and title locked visible');
+                    }
+                }
+
                 if (this.options.debug) {
                     console.log('🎬 Vimeo: pause', data);
                 }
@@ -429,6 +523,301 @@
             });
         }
 
+        /**
+ * Create transparent overlay for click detection
+ */
+        createMouseMoveOverlay() {
+            if (this.mouseMoveOverlay) return;
+
+            this.mouseMoveOverlay = document.createElement('div');
+            this.mouseMoveOverlay.className = 'vimeo-mousemove-overlay';
+            this.mouseMoveOverlay.style.cssText = `
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 2;
+        background: transparent;
+        pointer-events: auto;
+        cursor: default;
+    `;
+
+            // Insert before controls
+            this.player.container.insertBefore(this.mouseMoveOverlay, this.player.controls);
+
+            // Setup mouse detection
+            this.setupMouseMoveDetection();
+
+            // Click handler for play/pause
+            this.mouseMoveOverlay.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+
+                const doubleTap = this.player.options.doubleTapPause;
+                const pauseClick = this.player.options.pauseClick;
+
+                if (doubleTap) {
+                    // Check if controls are hidden
+                    let controlsHidden = false;
+                    if (this.player.controls) {
+                        controlsHidden = this.player.controls.classList.contains('hide');
+                    }
+
+                    if (!controlsHidden) {
+                        const controls = this.player.container.querySelector('.controls');
+                        if (controls) {
+                            controlsHidden = controls.classList.contains('hide');
+                        }
+                    }
+
+                    if (!controlsHidden && this.player.controls) {
+                        const style = window.getComputedStyle(this.player.controls);
+                        controlsHidden = (style.opacity === '0' || style.visibility === 'hidden');
+                    }
+
+                    if (controlsHidden) {
+                        // Show controls
+                        if (this.player.showControlsNow) {
+                            this.player.showControlsNow();
+                        }
+                        if (this.player.resetAutoHideTimer) {
+                            this.player.resetAutoHideTimer();
+                        }
+                        return;
+                    }
+
+                    this.togglePlayPause();
+                } else if (pauseClick) {
+                    this.togglePlayPause();
+                }
+            });
+
+            // Mouse move handler
+            this.mouseMoveOverlay.addEventListener('mousemove', (e) => {
+                if (this.player.onMouseMove) {
+                    this.player.onMouseMove(e);
+                }
+                if (this.player.resetAutoHideTimer) {
+                    this.player.resetAutoHideTimer();
+                }
+            });
+
+            if (this.options.debug) {
+                console.log('[Vimeo] Mouse overlay created');
+            }
+        }
+
+        /**
+         * Setup mouse move detection
+         */
+        setupMouseMoveDetection() {
+            // Track last mouse position
+            this.lastMouseX = null;
+            this.lastMouseY = null;
+            this.mouseCheckInterval = null;
+
+            // Mouse enter
+            this.player.container.addEventListener('mouseenter', () => {
+                if (this.options.debug) {
+                    console.log('[Vimeo] Mouse entered - show controls');
+                }
+                if (this.player.showControlsNow) {
+                    this.player.showControlsNow();
+                }
+                if (this.player.resetAutoHideTimer) {
+                    this.player.resetAutoHideTimer();
+                }
+                this.startMousePositionTracking();
+            });
+
+            // Mouse leave
+            this.player.container.addEventListener('mouseleave', () => {
+                if (this.options.debug) {
+                    console.log('[Vimeo] Mouse left');
+                }
+                this.stopMousePositionTracking();
+            });
+
+            // Mouse move
+            this.player.container.addEventListener('mousemove', (e) => {
+                this.lastMouseX = e.clientX;
+                this.lastMouseY = e.clientY;
+                if (this.player.onMouseMove) {
+                    this.player.onMouseMove(e);
+                }
+                if (this.player.resetAutoHideTimer) {
+                    this.player.resetAutoHideTimer();
+                }
+            });
+        }
+
+        /**
+         * Start mouse position tracking
+         */
+        startMousePositionTracking() {
+            if (this.mouseCheckInterval) return;
+
+            this.mouseCheckInterval = setInterval(() => {
+                // Track mouse position over iframe
+                const handleGlobalMove = (e) => {
+                    const newX = e.clientX;
+                    const newY = e.clientY;
+
+                    if (this.lastMouseX !== newX || this.lastMouseY !== newY) {
+                        this.lastMouseX = newX;
+                        this.lastMouseY = newY;
+
+                        const rect = this.player.container.getBoundingClientRect();
+                        const isInside = (
+                            newX >= rect.left &&
+                            newX <= rect.right &&
+                            newY >= rect.top &&
+                            newY <= rect.bottom
+                        );
+
+                        if (isInside) {
+                            if (this.player.showControlsNow) {
+                                this.player.showControlsNow();
+                            }
+                            if (this.player.resetAutoHideTimer) {
+                                this.player.resetAutoHideTimer();
+                            }
+                        }
+                    }
+                };
+
+                document.addEventListener('mousemove', handleGlobalMove, { once: true, passive: true });
+            }, 100);
+        }
+
+        /**
+         * Stop mouse position tracking
+         */
+        stopMousePositionTracking() {
+            if (this.mouseCheckInterval) {
+                clearInterval(this.mouseCheckInterval);
+                this.mouseCheckInterval = null;
+            }
+        }
+
+        /**
+        * Toggle play/pause
+        */
+        togglePlayPause() {
+            if (!this.vimeoPlayer) return;
+
+            this.vimeoPlayer.getPaused().then(paused => {
+                if (paused) {
+                    // Use player's play method to trigger UI update
+                    if (this.player.play) {
+                        this.player.play();
+                    } else if (this.player.video && this.player.video.play) {
+                        this.player.video.play();
+                    }
+                } else {
+                    // Use player's pause method to trigger UI update
+                    if (this.player.pause) {
+                        this.player.pause();
+                    } else if (this.player.video && this.player.video.pause) {
+                        this.player.video.pause();
+                    }
+                }
+            }).catch(err => {
+                if (this.options.debug) {
+                    console.error('[Vimeo] GetPaused error:', err);
+                }
+            });
+        }
+
+        /**
+         * Remove mouse overlay
+         */
+        removeMouseMoveOverlay() {
+            if (this.mouseMoveOverlay) {
+                this.mouseMoveOverlay.remove();
+                this.mouseMoveOverlay = null;
+            }
+            this.stopMousePositionTracking();
+        }
+
+        /**
+    * Inject CSS styles for controlbar and title overlay gradients
+    * Uses Vimeo-specific selectors to avoid conflicts with other plugins
+        */
+        injectControlbarGradientStyles() {
+            // Check if styles are already injected
+            if (document.getElementById('vimeo-controlbar-gradient-styles')) {
+                return;
+            }
+
+            // Validate opacity values (must be between 0 and 1)
+            const controlBarOpacity = Math.max(0, Math.min(1, this.options.controlBarOpacity));
+            const titleOverlayOpacity = Math.max(0, Math.min(1, this.options.titleOverlayOpacity));
+
+            // Create style element
+            const style = document.createElement('style');
+            style.id = 'vimeo-controlbar-gradient-styles';
+
+            // CSS with Vimeo-specific selectors to avoid conflicts
+            style.textContent = `
+        /* Controlbar gradient - dark opaque at bottom, semi-transparent at top */
+        /* ONLY applied when Vimeo plugin is active */
+        .video-wrapper.vimeo-active .controls {
+            background: linear-gradient(
+                to top,
+                rgba(0, 0, 0, ${controlBarOpacity}) 0%,           /* Maximum opacity at bottom */
+                rgba(0, 0, 0, ${controlBarOpacity * 0.89}) 20%,   /* 89% of max opacity */
+                rgba(0, 0, 0, ${controlBarOpacity * 0.74}) 40%,   /* 74% */
+                rgba(0, 0, 0, ${controlBarOpacity * 0.53}) 60%,   /* 53% */
+                rgba(0, 0, 0, ${controlBarOpacity * 0.32}) 80%,   /* 32% */
+                rgba(0, 0, 0, ${controlBarOpacity * 0.21}) 100%   /* 21% at top */
+            ) !important;
+            backdrop-filter: blur(3px);
+            min-height: 60px;
+            padding-bottom: 10px;
+        }
+        
+        /* Title overlay gradient - dark opaque at top, semi-transparent at bottom */
+        /* ONLY applied when Vimeo plugin is active */
+        .video-wrapper.vimeo-active .title-overlay {
+            background: linear-gradient(
+                to bottom,
+                rgba(0, 0, 0, ${titleOverlayOpacity}) 0%,           /* Maximum opacity at top */
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.89}) 20%,   /* 89% of max opacity */
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.74}) 40%,   /* 74% */
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.53}) 60%,   /* 53% */
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.32}) 80%,   /* 32% */
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.21}) 100%   /* 21% at bottom */
+            ) !important;
+            backdrop-filter: blur(3px);
+            min-height: 80px;
+            padding-top: 20px;
+        }
+        
+        /* Keep controlbar visible when video is paused */
+        .video-wrapper.vimeo-active.video-paused .controls.show {
+            opacity: 1 !important;
+            visibility: visible !important;
+        }
+        
+        /* Keep title overlay visible when video is paused */
+        .video-wrapper.vimeo-active.video-paused .title-overlay.show {
+            opacity: 1 !important;
+            visibility: visible !important;
+        }
+    `;
+
+            // Append style to document head
+            document.head.appendChild(style);
+
+            // Debug logging
+            if (this.options.debug) {
+                console.log('🎬 Vimeo Plugin: Controlbar and title overlay gradient styles injected');
+                console.log(`🎬 Vimeo Plugin: ControlBar opacity: ${controlBarOpacity}, TitleOverlay opacity: ${titleOverlayOpacity}`);
+            }
+        }
+
         /**
          * Load available qualities and sync with MYETV player
          */
@@ -493,9 +882,129 @@
             });
         }
 
+        createVimeoControlsButton() {
+            // verify option enabled
+            if (!this.options.showNativeControlsButton) {
+                if (this.options.debug) {
+                    console.log('🎬 Vimeo Plugin: Native controls button disabled by option');
+                }
+                return;
+            }
+
+            // Check if button already exists
+            if (this.player.container.querySelector('.vimeo-controls-btn')) {
+                return;
+            }
+
+            const controlsRight = this.player.container.querySelector('.controls-right');
+            if (!controlsRight) return;
+
+            const buttonHTML = `
+        <button class="control-btn vimeo-controls-btn" title="Show Vimeo Controls">
+            <svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
+                <path d="M23.977 6.416c-.105 2.338-1.739 5.543-4.894 9.609-3.268 4.247-6.026 6.37-8.29 6.37-1.409 0-2.578-1.294-3.553-3.881L5.322 11.4C4.603 8.816 3.834 7.522 3.01 7.522c-.179 0-.806.378-1.881 1.132L0 7.197c1.185-1.044 2.351-2.084 3.501-3.128C5.08 2.701 6.266 1.984 7.055 1.91c1.867-.18 3.016 1.1 3.447 3.838.465 2.953.789 4.789.971 5.507.539 2.45 1.131 3.674 1.776 3.674.502 0 1.256-.796 2.265-2.385 1.004-1.589 1.54-2.797 1.612-3.628.144-1.371-.395-2.061-1.614-2.061-.574 0-1.167.121-1.777.391 1.186-3.868 3.434-5.757 6.762-5.637 2.473.06 3.628 1.664 3.493 4.797l-.013.01z"/>
+            </svg>
+        </button>
+    `;
+
+            // Insert before quality control
+            const qualityControl = controlsRight.querySelector('.quality-control');
+            if (qualityControl) {
+                qualityControl.insertAdjacentHTML('beforebegin', buttonHTML);
+            } else {
+                const fullscreenBtn = controlsRight.querySelector('.fullscreen-btn');
+                if (fullscreenBtn) {
+                    fullscreenBtn.insertAdjacentHTML('beforebegin', buttonHTML);
+                } else {
+                    controlsRight.insertAdjacentHTML('beforeend', buttonHTML);
+                }
+            }
+
+            // Add click listener
+            const btn = this.player.container.querySelector('.vimeo-controls-btn');
+            if (btn) {
+                btn.addEventListener('click', () => {
+                    if (this.options.debug) {
+                        console.log('🎬 Vimeo Plugin: Native controls button clicked');
+                    }
+                    this.showVimeoControls();
+                });
+
+                // Add custom styling (Vimeo blue color)
+                btn.style.color = '#1ab7ea';
+
+                if (this.options.debug) {
+                    console.log('🎬 Vimeo Plugin: Native controls button created');
+                }
+            }
+        }
+
+        // Show Vimeo native controls
+        showVimeoControls() {
+            if (this.options.debug) {
+                console.log('🎬 Vimeo Plugin: Showing Vimeo native controls');
+            }
+
+            const iframe = this.player.container.querySelector('iframe');
+            const controlbar = this.player.container.querySelector('.controls');
+            const titleOverlay = this.player.container.querySelector('.title-overlay');
+
+            if (iframe) {
+                // Bring iframe to front
+                iframe.style.pointerEvents = 'auto';
+                iframe.style.zIndex = '9999';
+
+                // Hide controlbar and title
+                if (controlbar) controlbar.style.display = 'none';
+                if (titleOverlay) titleOverlay.style.display = 'none';
+
+                // Auto-restore after 10 seconds
+                this.vimeoControlsTimeout = setTimeout(() => {
+                    if (this.options.debug) {
+                        console.log('🎬 Vimeo Plugin: Restoring custom controls after 10 seconds');
+                    }
+                    this.hideVimeoControls();
+                }, 10000);
+            }
+        }
+
+        // Hide Vimeo native controls
+        hideVimeoControls() {
+            if (this.options.debug) {
+                console.log('🎬 Vimeo Plugin: Hiding Vimeo native controls');
+            }
+
+            // Clear timeout if exists
+            if (this.vimeoControlsTimeout) {
+                clearTimeout(this.vimeoControlsTimeout);
+                this.vimeoControlsTimeout = null;
+            }
+
+            const iframe = this.player.container.querySelector('iframe');
+            const controlbar = this.player.container.querySelector('.controls');
+            const titleOverlay = this.player.container.querySelector('.title-overlay');
+
+            if (iframe) {
+                // Disable clicks on Vimeo controls
+                iframe.style.pointerEvents = 'none';
+                iframe.style.zIndex = '1';
+
+                // Restore controlbar and title
+                if (controlbar) {
+                    controlbar.style.display = '';
+                    controlbar.style.zIndex = '10';
+                }
+                if (titleOverlay) titleOverlay.style.display = '';
+
+                if (this.options.debug) {
+                    console.log('🎬 Vimeo Plugin: Custom controls restored');
+                }
+            }
+        }
+
         /**
- * Update native player quality menu with Vimeo-specific handlers
- */
+    * Update native player quality menu with Vimeo-specific handlers
+        */
         updatePlayerQualityMenu() {
             const qualityMenu = this.player.container.querySelector('.quality-menu');
             if (!qualityMenu) {
@@ -912,6 +1421,8 @@
          * Dispose plugin
          */
         dispose() {
+            this.removeMouseMoveOverlay();
+
             // Cleanup PIP observers and listeners
             if (this.pipObserver) {
                 this.pipObserver.disconnect();
@@ -921,6 +1432,12 @@
                 this.pipCleanup();
             }
 
+            // Clear Vimeo controls timeout
+            if (this.vimeoControlsTimeout) {
+                clearTimeout(this.vimeoControlsTimeout);
+                this.vimeoControlsTimeout = null;
+            }
+
             if (this.vimeoPlayer) {
                 this.vimeoPlayer.destroy().then(() => {
                     if (this.options.debug) {