myetv-player 1.1.4 → 1.1.6

package/dist/myetv-player.min.js

@@ -372,22 +372,25 @@ constructor(videoElement, options = {}) {
  }
 
  this.options = {
- showQualitySelector: true,
- showSpeedControl: true,
- showFullscreen: true,
- showPictureInPicture: true,
- showSubtitles: true,
- subtitlesEnabled: false,
- autoHide: true,
- autoHideDelay: 3000,
+ showQualitySelector: true, // Enable quality selector button
+ showSpeedControl: true, // Enable speed control button
+ showFullscreen: true, // Enable fullscreen button
+ showPictureInPicture: true, // Enable PiP button
+ showSubtitles: true, // Enable subtitles button
+ subtitlesEnabled: false, // Enable subtitles by default if available
+ autoHide: true, // auto-hide controls when idle
+ autoHideDelay: 3000, // hide controls after ... seconds of inactivity (specificed in milliseconds)
+ hideCursor: true, // hide mouse cursor when idle
  poster: null, // URL of poster image
  showPosterOnEnd: false, // Show poster again when video ends
- keyboardControls: true,
- showSeekTooltip: true,
- showTitleOverlay: false,
- videoTitle: '',
- videoSubtitle: '',
- persistentTitle: false,
+ keyboardControls: true, // Enable keyboard controls
+ showSeekTooltip: true, // Show tooltip on seek bar at mouse hover
+ showTitleOverlay: false, // Show video title overlay
+ 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.
@@ -417,8 +420,8 @@ constructor(videoElement, options = {}) {
 
  seekHandleShape: 'circle', // Available shape: none, circle, square, diamond, arrow, triangle, heart, star
 
- audiofile: false,
- audiowave: false,
+ audiofile: false, // if true, adapt player to audio file (hide video element)
+ audiowave: false, // if true, show audio wave visualization (Web Audio API)
 
  resolution: "normal", // "normal", "4:3", "16:9", "stretched", "fit-to-screen", "scale-to-fit"
  ...options
@@ -513,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);
  }
@@ -2598,6 +2603,7 @@ initAutoHide() {
 
 onMouseMoveInPlayer(e) {
  this.showControlsNow();
+ this.showCursor();
  this.resetAutoHideTimer();
 }
 
@@ -2655,39 +2661,37 @@ resetAutoHideTimer() {
 showControlsNow() {
  if (this.controls) {
  this.controls.classList.add('show');
- }
 
  if (this.container) {
  this.container.classList.add('has-controls');
+ }
+
  this.updateControlbarHeight();
 
  if (this.updateWatermarkPosition) {
  this.updateWatermarkPosition();
  }
- }
 
  if (this.options.showTitleOverlay && !this.options.persistentTitle && this.options.videoTitle) {
  this.showTitleOverlay();
  }
 
+ this.showCursor();
+
  if (this.autoHideDebug && this.options.debug) console.log('✅ Controls shown');
+ }
 }
 
 hideControlsNow() {
 
  const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
-
  if (this.mouseOverControls && !isTouchDevice) {
- if (this.autoHideDebug && this.options.debug) {
- console.log('🚫 Not hiding - mouse still over controls');
- }
+ if (this.autoHideDebug && this.options.debug) console.log('❌ Not hiding - mouse still over controls');
  return;
  }
 
  if (this.video && this.video.paused) {
- if (this.autoHideDebug && this.options.debug) {
- console.log('🚫 Not hiding - video is paused');
- }
+ if (this.autoHideDebug && this.options.debug) console.log('❌ Not hiding - video is paused');
  return;
  }
 
@@ -2696,20 +2700,21 @@ hideControlsNow() {
 
  if (this.container) {
  this.container.classList.remove('has-controls');
+ }
+
  this.updateControlbarHeight();
 
  if (this.updateWatermarkPosition) {
  this.updateWatermarkPosition();
  }
- }
- }
 
  if (this.options.showTitleOverlay && !this.options.persistentTitle) {
  this.hideTitleOverlay();
  }
 
- if (this.autoHideDebug && this.options.debug) {
- console.log('👁️ Controls hidden');
+ this.hideCursor();
+
+ if (this.autoHideDebug && this.options.debug) console.log('✅ Controls hidden');
  }
 }
 
@@ -2733,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');
@@ -3523,6 +3573,41 @@ isAutoHideInitialized() {
  return this.autoHideInitialized;
 }
 
+hideCursor() {
+ if (!this.options.hideCursor) {
+ return; // Do not hide cursor if option is disabled
+ }
+
+ if (this.container) {
+ this.container.classList.add('hide-cursor');
+ if (this.options.debug) console.log('🖱️ Cursor hidden');
+ }
+}
+
+showCursor() {
+ if (this.container) {
+ this.container.classList.remove('hide-cursor');
+ if (this.options.debug) console.log('🖱️ Cursor shown');
+ }
+}
+
+enableCursorHiding() {
+ this.options.hideCursor = true;
+ if (this.options.debug) console.log('Cursor hiding enabled');
+ return this;
+}
+
+disableCursorHiding() {
+ this.options.hideCursor = false;
+ this.showCursor(); // Ensure cursor is shown immediately
+ if (this.options.debug) console.log('Cursor hiding disabled');
+ return this;
+}
+
+isCursorHidingEnabled() {
+ return this.options.hideCursor;
+}
+
 showPlaylistControls() {
  if (!this.playlistPrevBtn || !this.playlistNextBtn) return;
 

package/package.json

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

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;
             }