myetv-player 1.1.5 → 1.1.6

package/README.md

@@ -116,6 +116,8 @@ const player = new MYETVvideoplayer('my-video', {
 | `videoTitle` | string | `''` | Title to show in overlay |
 | `videoSubtitle` | string | `''` | Sub-Title to show in overlay |
 | `persistentTitle` | boolean | `false` | Keep title always visible |
+| `titleOverlayOpacity` | number | `'0.95'` | Overlay title opacity, values are from 0.00 to 1.00 |
+| `controlBarOpacity ` | number | `'0.95'` | Controlbar opacity, values are from 0.00 to 1.00 |
 | `language` | string | `en` | Interface language code |
 | `brandLogoEnabled` | boolean | `false` | Show/hide the brand logo in the controlbar |
 | `brandLogoUrl` | string | `''` | Brand logo url in the controlbar (png, jpg, gif) - image height 44px - image width 120px |

package/dist/myetv-player.js

@@ -425,6 +425,8 @@ constructor(videoElement, options = {}) {
         videoTitle: '',              // Title text to show in overlay
         videoSubtitle: '',           // Subtitle text to show in overlay
         persistentTitle: false,   // If true, title overlay stays visible
+        controlBarOpacity: options.controlBarOpacity !== undefined ? options.controlBarOpacity : 0.95, // Opacity of control bar (0.0 to 1.0)
+        titleOverlayOpacity: options.titleOverlayOpacity !== undefined ? options.titleOverlayOpacity : 0.95, // Opacity of title overlay (0.0 to 1.0)
         debug: false,             // Enable/disable debug logging
         autoplay: false,          // if video should autoplay at start
         defaultQuality: 'auto',   // 'auto', '1080p', '720p', '480p', etc.
@@ -565,7 +567,9 @@ constructor(videoElement, options = {}) {
     };
 
     this.lastTimeUpdate = 0; // For throttling timeupdate events
-
+    // Inject default styles
+    this.injectDefaultControlbarStyles();
+    // Set language if specified
     if (this.options.language && this.isI18nAvailable()) {
         VideoPlayerTranslations.setLanguage(this.options.language);
     }
@@ -2990,6 +2994,52 @@ clearControlsTimeout() {
     }
 }
 
+// Default controlbar styles injection
+injectDefaultControlbarStyles() {
+    if (document.getElementById('default-controlbar-styles')) {
+        return;
+    }
+
+    const controlBarOpacity = Math.max(0, Math.min(1, this.options.controlBarOpacity));
+    const titleOverlayOpacity = Math.max(0, Math.min(1, this.options.titleOverlayOpacity));
+
+    const style = document.createElement('style');
+    style.id = 'default-controlbar-styles';
+    style.textContent = `
+        .video-wrapper:not(.youtube-active):not(.vimeo-active):not(.facebook-active) .controls {
+            background: linear-gradient(
+                to top,
+                rgba(0, 0, 0, ${controlBarOpacity}) 0%,
+                rgba(0, 0, 0, ${controlBarOpacity * 0.89}) 20%,
+                rgba(0, 0, 0, ${controlBarOpacity * 0.74}) 40%,
+                rgba(0, 0, 0, ${controlBarOpacity * 0.53}) 60%,
+                rgba(0, 0, 0, ${controlBarOpacity * 0.32}) 80%,
+                rgba(0, 0, 0, ${controlBarOpacity * 0.21}) 100%
+            );
+            backdrop-filter: blur(3px);
+            min-height: 60px;
+            padding-bottom: 10px;
+        }
+        
+        .video-wrapper:not(.youtube-active):not(.vimeo-active):not(.facebook-active) .title-overlay {
+            background: linear-gradient(
+                to bottom,
+                rgba(0, 0, 0, ${titleOverlayOpacity}) 0%,
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.89}) 20%,
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.74}) 40%,
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.53}) 60%,
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.32}) 80%,
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.21}) 100%
+            );
+            backdrop-filter: blur(3px);
+            min-height: 80px;
+            padding-top: 20px;
+        }
+    `;
+
+    document.head.appendChild(style);
+}
+
 // Debug methods
 enableAutoHideDebug() {
     this.autoHideDebug = true;

package/dist/myetv-player.min.js

@@ -389,6 +389,8 @@ constructor(videoElement, options = {}) {
  videoTitle: '', // Title text to show in overlay
  videoSubtitle: '', // Subtitle text to show in overlay
  persistentTitle: false, // If true, title overlay stays visible
+ controlBarOpacity: options.controlBarOpacity !== undefined ? options.controlBarOpacity : 0.95, // Opacity of control bar (0.0 to 1.0)
+ titleOverlayOpacity: options.titleOverlayOpacity !== undefined ? options.titleOverlayOpacity : 0.95, // Opacity of title overlay (0.0 to 1.0)
  debug: false, // Enable/disable debug logging
  autoplay: false, // if video should autoplay at start
  defaultQuality: 'auto', // 'auto', '1080p', '720p', '480p', etc.
@@ -514,6 +516,8 @@ constructor(videoElement, options = {}) {
 
  this.lastTimeUpdate = 0; // For throttling timeupdate events
 
+ this.injectDefaultControlbarStyles();
+
  if (this.options.language && this.isI18nAvailable()) {
  VideoPlayerTranslations.setLanguage(this.options.language);
  }
@@ -2734,6 +2738,51 @@ clearControlsTimeout() {
  }
 }
 
+injectDefaultControlbarStyles() {
+ if (document.getElementById('default-controlbar-styles')) {
+ return;
+ }
+
+ const controlBarOpacity = Math.max(0, Math.min(1, this.options.controlBarOpacity));
+ const titleOverlayOpacity = Math.max(0, Math.min(1, this.options.titleOverlayOpacity));
+
+ const style = document.createElement('style');
+ style.id = 'default-controlbar-styles';
+ style.textContent = `
+ .video-wrapper:not(.youtube-active):not(.vimeo-active):not(.facebook-active) .controls {
+ background: linear-gradient(
+ to top,
+ rgba(0, 0, 0, ${controlBarOpacity}) 0%,
+ rgba(0, 0, 0, ${controlBarOpacity * 0.89}) 20%,
+ rgba(0, 0, 0, ${controlBarOpacity * 0.74}) 40%,
+ rgba(0, 0, 0, ${controlBarOpacity * 0.53}) 60%,
+ rgba(0, 0, 0, ${controlBarOpacity * 0.32}) 80%,
+ rgba(0, 0, 0, ${controlBarOpacity * 0.21}) 100%
+ );
+ backdrop-filter: blur(3px);
+ min-height: 60px;
+ padding-bottom: 10px;
+ }
+ 
+ .video-wrapper:not(.youtube-active):not(.vimeo-active):not(.facebook-active) .title-overlay {
+ background: linear-gradient(
+ to bottom,
+ rgba(0, 0, 0, ${titleOverlayOpacity}) 0%,
+ rgba(0, 0, 0, ${titleOverlayOpacity * 0.89}) 20%,
+ rgba(0, 0, 0, ${titleOverlayOpacity * 0.74}) 40%,
+ rgba(0, 0, 0, ${titleOverlayOpacity * 0.53}) 60%,
+ rgba(0, 0, 0, ${titleOverlayOpacity * 0.32}) 80%,
+ rgba(0, 0, 0, ${titleOverlayOpacity * 0.21}) 100%
+ );
+ backdrop-filter: blur(3px);
+ min-height: 80px;
+ padding-top: 20px;
+ }
+ `;
+
+ document.head.appendChild(style);
+}
+
 enableAutoHideDebug() {
  this.autoHideDebug = true;
  if (this.options.debug) console.log('AUTO-HIDE DEBUG ENABLED');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myetv-player",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "MYETV Video Player - Modular JavaScript and SCSS Build System",
   "main": "dist/myetv-player.js",
   "scripts": {
@@ -38,3 +38,4 @@
 
 
 
+

package/plugins/facebook/README.md

@@ -119,6 +119,9 @@ const player = new MYETVPlayer('myVideo', {
             showCaptions: true,            // Show captions if available
 
             // ========== Plugin Options ==========
+            showNativeControlsButton: true, // Show the button on the controlbar to enable the Facebook native controls temporarily
+            controlBarOpacity: 0.95,     // The controlbar opacity or semi-transparency or transparency - values: from 0 to 1
+            titleOverlayOpacity: 0.95,    // The overlay title opacity or semi-transparency or transparency - values: from 0 to 1
             debug: false,                  // Enable debug logging
             replaceNativePlayer: true,     // Replace native video element
             autoLoadFromData: true         // Auto-detect from data attributes

package/plugins/facebook/myetv-player-facebook-plugin.js

@@ -24,6 +24,13 @@
                 showText: options.showText !== false,
                 showCaptions: options.showCaptions !== 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,
                 autoLoadFromData: options.autoLoadFromData !== false,
@@ -456,9 +463,15 @@
                 }
             }
 
+            // Create Facebook controls button
+            this.createFacebookControlsButton();
+
             // Setup event listeners
             this.setupEventListeners();
 
+            // inject controlbar gradient styles
+            this.injectControlbarGradientStyles();
+
             // Start time update
             this.startTimeUpdate();
 
@@ -724,12 +737,29 @@
             // Started playing - marks successful user interaction
             this.fbPlayer.subscribe('startedPlaying', () => {
                 if (this.api.player.options.debug) {
-                    console.log('FB Plugin: Video started playing');
+                    console.log('🎬 FB Plugin: Video started playing');
                 }
+
                 this.isPlaying = true;
                 this.userHasInteracted = true; // Video playing = user clicked FB player
                 this.waitingForUserClick = false;
 
+                // Rimuovi classe paused
+                if (this.player.container) {
+                    this.player.container.classList.remove('video-paused');
+                }
+
+                // Riattiva l'auto-hide quando riprende la riproduzione
+                if (this.player.options.autoHide && this.player.autoHideInitialized) {
+                    if (this.player.resetAutoHideTimer) {
+                        this.player.resetAutoHideTimer();
+                    }
+
+                    if (this.options.debug) {
+                        console.log('🎬 FB Plugin: Video playing - auto-hide reactivated');
+                    }
+                }
+
                 // Update play/pause icons
                 const playIcon = this.api.container.querySelector('.play-icon');
                 const pauseIcon = this.api.container.querySelector('.pause-icon');
@@ -740,7 +770,6 @@
                     currentTime: this.getCurrentTime(),
                     duration: this.getDuration()
                 });
-
                 this.api.triggerEvent('play', {});
                 this.api.triggerEvent('playing', {});
                 this.hideLoadingOverlay();
@@ -749,10 +778,47 @@
             // Paused
             this.fbPlayer.subscribe('paused', () => {
                 if (this.api.player.options.debug) {
-                    console.log('FB Plugin: Video paused');
+                    console.log('🎬 FB Plugin: Video paused');
                 }
+
                 this.isPlaying = false;
 
+                // Aggiungi classe per identificare lo stato di pausa
+                if (this.player.container) {
+                    this.player.container.classList.add('video-paused');
+                }
+
+                // Mantieni la controlbar visibile SOLO se autoHide è abilitato
+                if (this.player.options.autoHide && this.player.autoHideInitialized) {
+                    // Mostra controlli
+                    if (this.player.controls) {
+                        this.player.controls.classList.add('show');
+                    }
+
+                    // Mostra anche il title overlay se è abilitato e non è persistent
+                    if (this.player.options.showTitleOverlay &&
+                        !this.player.options.persistentTitle &&
+                        this.player.titleOverlay) {
+                        this.player.titleOverlay.classList.add('show');
+                    }
+
+                    // Cancella il timer di auto-hide
+                    if (this.player.autoHideTimer) {
+                        clearTimeout(this.player.autoHideTimer);
+                        this.player.autoHideTimer = null;
+                    }
+
+                    // Cancella anche il timer del title overlay
+                    if (this.player.titleTimeout) {
+                        clearTimeout(this.player.titleTimeout);
+                        this.player.titleTimeout = null;
+                    }
+
+                    if (this.options.debug) {
+                        console.log('🎬 FB Plugin: Video paused - controls and title locked visible');
+                    }
+                }
+
                 // Update play/pause icons
                 const playIcon = this.api.container.querySelector('.play-icon');
                 const pauseIcon = this.api.container.querySelector('.pause-icon');
@@ -763,15 +829,15 @@
                     currentTime: this.getCurrentTime(),
                     duration: this.getDuration()
                 });
-
                 this.api.triggerEvent('pause', {});
             });
 
             // Finished playing
             this.fbPlayer.subscribe('finishedPlaying', () => {
                 if (this.api.player.options.debug) {
-                    console.log('FB Plugin: Video finished');
+                    console.log('🎬 FB Plugin: Video finished');
                 }
+
                 this.isPlaying = false;
 
                 // Update play/pause icons
@@ -789,7 +855,7 @@
             // Started buffering
             this.fbPlayer.subscribe('startedBuffering', () => {
                 if (this.api.player.options.debug) {
-                    console.log('FB Plugin: Video buffering started');
+                    console.log('🎬 FB Plugin: Video buffering started');
                 }
                 this.api.triggerEvent('waiting', {});
                 this.showLoadingOverlay();
@@ -798,7 +864,7 @@
             // Finished buffering
             this.fbPlayer.subscribe('finishedBuffering', () => {
                 if (this.api.player.options.debug) {
-                    console.log('FB Plugin: Video buffering finished');
+                    console.log('🎬 FB Plugin: Video buffering finished');
                 }
                 this.api.triggerEvent('canplay', {});
                 this.hideLoadingOverlay();
@@ -806,13 +872,13 @@
 
             // Error
             this.fbPlayer.subscribe('error', (error) => {
-                console.error('FB Plugin: Facebook player error:', error);
+                console.error('🎬 FB Plugin: Facebook player error:', error);
                 this.api.triggerEvent('error', error);
                 this.api.triggerEvent('facebookplugin:error', error);
             });
 
             if (this.api.player.options.debug) {
-                console.log('FB Plugin: Event listeners setup completed');
+                console.log('🎬 FB Plugin: Event listeners setup completed');
             }
         }
 
@@ -824,7 +890,6 @@
             this.timeUpdateInterval = setInterval(() => {
                 if (this.fbPlayer && this.fbPlayer.getCurrentPosition !== undefined && this.fbPlayer.getDuration !== undefined) {
                     try {
-                        // CRITICAL FIX: These are properties, not methods
                         const currentTime = this.fbPlayer.getCurrentPosition();
                         const duration = this.fbPlayer.getDuration();
 
@@ -852,13 +917,10 @@
                             // Create tooltip if it doesn't exist
                             this.createProgressTooltip();
 
-                            // CRITICAL: Update progress bar tooltip with current duration
+                            // Update progress bar tooltip with current duration
                             this.updateProgressTooltip(duration);
                         }
 
-                        // REMOVED: Volume monitoring - Facebook API doesn't have volume events
-                        // Volume is only updated via setupVolumeSlider() when user changes it
-
                     } catch (error) {
                         // Ignore timing errors
                     }
@@ -867,7 +929,84 @@
         }
 
         /**
-         * CRITICAL: Update progress bar tooltip with correct time
+    * Inject CSS styles for controlbar and title overlay gradients
+    * Uses Facebook-specific selectors to avoid conflicts with other plugins
+        */
+        injectControlbarGradientStyles() {
+            // Check if styles are already injected
+            if (document.getElementById('facebook-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 = 'facebook-controlbar-gradient-styles';
+
+            // CSS with Facebook-specific selectors to avoid conflicts
+            style.textContent = `
+        /* Controlbar gradient - dark opaque at bottom, semi-transparent at top */
+        /* ONLY applied when Facebook plugin is active */
+        .video-wrapper.facebook-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 Facebook plugin is active */
+        .video-wrapper.facebook-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.facebook-active.video-paused .controls.show {
+            opacity: 1 !important;
+            visibility: visible !important;
+        }
+        
+        /* Keep title overlay visible when video is paused */
+        .video-wrapper.facebook-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('🎬 Facebook Plugin: Controlbar and title overlay gradient styles injected');
+                console.log(`🎬 Facebook Plugin: ControlBar opacity: ${controlBarOpacity}, TitleOverlay opacity: ${titleOverlayOpacity}`);
+            }
+        }
+
+        /**
+         * Update progress bar tooltip with correct time
          */
         updateProgressTooltip() {
             const progContainer = this.api.container.querySelector('.progress-container');
@@ -908,8 +1047,8 @@
         }
 
         /**
- * Create progress tooltip element if it doesn't exist
- */
+    * Create progress tooltip element if it doesn't exist
+        */
         createProgressTooltip() {
             const progContainer = this.api.container.querySelector('.progress-container');
             if (!progContainer) return;
@@ -1259,6 +1398,127 @@
 
         }
 
+        // Create button to show Facebook native controls
+        createFacebookControlsButton() {
+            // Verify option enabled
+            if (!this.options.showNativeControlsButton) {
+                if (this.options.debug) {
+                    console.log('🎬 FB Plugin: Native controls button disabled by option');
+                }
+                return;
+            }
+
+            // Check if button already exists
+            if (this.player.container.querySelector('.facebook-controls-btn')) {
+                return;
+            }
+
+            const controlsRight = this.player.container.querySelector('.controls-right');
+            if (!controlsRight) return;
+
+            const buttonHTML = `
+        <button class="control-btn facebook-controls-btn" title="Show Facebook Controls">
+            <svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
+                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+            </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('.facebook-controls-btn');
+            if (btn) {
+                btn.addEventListener('click', () => {
+                    if (this.options.debug) {
+                        console.log('🎬 FB Plugin: Native controls button clicked');
+                    }
+                    this.showFacebookControls();
+                });
+
+                // Add custom styling (Facebook blue color)
+                btn.style.color = '#1877f2';
+
+                if (this.options.debug) {
+                    console.log('🎬 FB Plugin: Native controls button created');
+                }
+            }
+        }
+
+        // Show Facebook native controls
+        showFacebookControls() {
+            if (this.options.debug) {
+                console.log('🎬 FB Plugin: Showing Facebook 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.facebookControlsTimeout = setTimeout(() => {
+                    if (this.options.debug) {
+                        console.log('🎬 FB Plugin: Restoring custom controls after 10 seconds');
+                    }
+                    this.hideFacebookControls();
+                }, 10000);
+            }
+        }
+
+        // Hide Facebook native controls
+        hideFacebookControls() {
+            if (this.options.debug) {
+                console.log('🎬 FB Plugin: Hiding Facebook native controls');
+            }
+
+            // Clear timeout if exists
+            if (this.facebookControlsTimeout) {
+                clearTimeout(this.facebookControlsTimeout);
+                this.facebookControlsTimeout = 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 Facebook 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('🎬 FB Plugin: Custom controls restored');
+                }
+            }
+        }
+
         /**
          * CRITICAL: Setup volume slider event listeners
          */
@@ -1537,6 +1797,12 @@
                 this.styleObserver = null;
             }
 
+            // Clear Facebook controls timeout
+            if (this.facebookControlsTimeout) {
+                clearTimeout(this.facebookControlsTimeout);
+                this.facebookControlsTimeout = null;
+            }
+
             if (this.fbPlayer) {
                 this.fbPlayer = null;
             }

package/plugins/vimeo/README.md

@@ -135,6 +135,9 @@ const player = new MYETVPlayer('myVideo', {
             transparent: true,  // Transparent background
 
             // ========== Plugin Options ==========
+            showNativeControlsButton: true, // Show the button on the controlbar to enable the Vimeo native controls temporarily
+            controlBarOpacity: 0.95,     // The controlbar opacity or semi-transparency or transparency - values: from 0 to 1
+            titleOverlayOpacity: 0.95,    // The overlay title opacity or semi-transparency or transparency - values: from 0 to 1
             debug: false,               // Enable debug logging
             replaceNativePlayer: true,  // Replace native video element
             syncControls: true         // Sync with custom controls