myetv-player 1.6.2 → 1.6.4

package/dist/myetv-player.js

@@ -1253,13 +1253,34 @@ markPlayerReady() {
 
             // Autoplay
             if (this.options.autoplay) {
-                if (this.options.debug) console.log('🎬 Autoplay enabled');
+                if (this.options.debug) console.log('Autoplay enabled');
                 setTimeout(() => {
-                    this.video.play().catch(error => {
-                        if (this.options.debug) console.warn('⚠️ Autoplay blocked:', error);
-                    });
+                    this.video.play()
+                        .then(() => {
+                            // Autoplay succeeded
+                            if (this.options.debug) console.log('Autoplay started successfully');
+                        })
+                        .catch(error => {
+                            // Autoplay blocked by browser
+                            if (this.options.debug) console.warn('Autoplay blocked', error);
+
+                            // Start auto-hide timer even if autoplay is blocked
+                            // This ensures controls hide after delay when video is paused
+                            if (this.options.autoHide && this.autoHideInitialized) {
+                                // Show controls initially (user needs to see play button)
+                                this.showControlsNow();
+
+                                // Start timer to hide controls
+                                this.resetAutoHideTimer();
+
+                                if (this.options.debug) {
+                                    console.log('Auto-hide timer started (autoplay blocked - video paused)');
+                                }
+                            }
+                        });
                 }, 100);
             }
+
         }, 200);
 
     }, 100);
@@ -1283,10 +1304,7 @@ createPlayerStructure() {
     this.createControls();
     this.createBrandLogo();
     this.detectPlaylist();
-
-    if (this.options.showTitleOverlay) {
-        this.createTitleOverlay();
-    }
+    this.createTopBar();
 }
 
 createInitialLoading() {
@@ -1310,52 +1328,31 @@ createLoadingOverlay() {
     this.loadingOverlay = overlay;
 }
 
-createTitleOverlay() {
-    const overlay = document.createElement('div');
-    overlay.className = 'title-overlay';
-    overlay.id = 'titleOverlay-' + this.getUniqueId();
-
-    const titleText = document.createElement('h2');
-    titleText.className = 'title-text';
-    titleText.textContent = this.decodeHTMLEntities(this.options.videoTitle) || '';
-    overlay.appendChild(titleText);
-
-    // add subtitles
-    if (this.options.videoSubtitle) {
-        const subtitleText = document.createElement('p');
-        subtitleText.className = 'subtitle-text';
-        subtitleText.textContent = this.decodeHTMLEntities(this.options.videoSubtitle);
-        overlay.appendChild(subtitleText);
-    }
-
-    if (this.controls) {
-        this.container.insertBefore(overlay, this.controls);
-    } else {
-        this.container.appendChild(overlay);
-    }
-
-    this.titleOverlay = overlay;
-
-    if (this.options.persistentTitle && this.options.videoTitle) {
-        this.showTitleOverlay();
-    }
-}
-
 updateTooltips() {
     if (!this.controls) return;
 
     try {
+        // Update tooltips in controls
         this.controls.querySelectorAll('[data-tooltip]').forEach(element => {
             const key = element.getAttribute('data-tooltip');
             element.title = this.t(key);
         });
 
+        // Update tooltips in top bar
+        if (this.topBar) {
+            this.topBar.querySelectorAll('[data-tooltip]').forEach(element => {
+                const key = element.getAttribute('data-tooltip');
+                element.title = this.t(key);
+            });
+        }
+
+        // Update "Auto" option in quality menu
         const autoOption = this.controls.querySelector('.quality-option[data-quality="auto"]');
         if (autoOption) {
             autoOption.textContent = this.t('auto');
         }
     } catch (error) {
-        if (this.options.debug) console.warn('Errore aggiornamento tooltip:', error);
+        if (this.options.debug) console.warn('Tooltip update error', error);
     }
 }
 
@@ -1373,27 +1370,44 @@ setLanguage(lang) {
     return false;
 }
 
+/**
+ * Set video title
+ * @param {string} title - Video title
+ * @returns {Object} this
+ */
 setVideoTitle(title) {
-    this.options.videoTitle = title || '';
+    this.options.videoTitle = title;
 
-    if (this.titleOverlay) {
-        const titleElement = this.titleOverlay.querySelector('.title-text');
-        if (titleElement) {
-            titleElement.textContent = this.decodeHTMLEntities(this.options.videoTitle);
+    if (this.topBarTitle) {
+        this.topBarTitle.textContent = this.decodeHTMLEntities(title);
+
+        // show top bar if title overlay is enabled
+        if (title && this.options.showTitleOverlay) {
+            const titleSection = this.topBar.querySelector('.top-bar-title');
+            if (titleSection) {
+                titleSection.style.display = '';
+            }
         }
+    } else if (this.topBar && title) {
+        // create title section
+        const titleSection = this.topBar.querySelector('.top-bar-title');
+        if (!titleSection) {
+            const newTitleSection = document.createElement('div');
+            newTitleSection.className = 'top-bar-title';
 
-        if (title) {
-            this.showTitleOverlay();
+            const titleElement = document.createElement('h3');
+            titleElement.className = 'video-title';
+            titleElement.textContent = this.decodeHTMLEntities(title);
+            newTitleSection.appendChild(titleElement);
 
-            if (!this.options.persistentTitle) {
-                this.clearTitleTimeout();
-                this.titleTimeout = setTimeout(() => {
-                    this.hideTitleOverlay();
-                }, 3000);
-            }
+            const settingsControl = this.topBar.querySelector('.settings-control');
+            this.topBar.insertBefore(newTitleSection, settingsControl);
+
+            this.topBarTitle = titleElement;
         }
     }
 
+    if (this.options.debug) console.log('Video title set:', title);
     return this;
 }
 
@@ -1402,23 +1416,23 @@ getVideoTitle() {
 }
 
 setVideoSubtitle(subtitle) {
-    this.options.videoSubtitle = subtitle || '';
+    this.options.videoSubtitle = subtitle;
 
-    if (this.titleOverlay) {
-        let subtitleElement = this.titleOverlay.querySelector('.subtitle-text');
-
-        if (subtitle) {
-            if (!subtitleElement) {
-                subtitleElement = document.createElement('p');
-                subtitleElement.className = 'subtitle-text';
-                this.titleOverlay.appendChild(subtitleElement);
-            }
-            subtitleElement.textContent = subtitle;
-        } else if (subtitleElement) {
-            subtitleElement.remove();
+    if (this.topBarSubtitle) {
+        this.topBarSubtitle.textContent = subtitle;
+    } else if (subtitle && this.topBar) {
+        // Create subtitle element
+        const titleSection = this.topBar.querySelector('.top-bar-title');
+        if (titleSection) {
+            const subtitleEl = document.createElement('span');
+            subtitleEl.className = 'video-subtitle';
+            subtitleEl.textContent = subtitle;
+            titleSection.appendChild(subtitleEl);
+            this.topBarSubtitle = subtitleEl;
         }
     }
 
+    if (this.options.debug) console.log('Video subtitle set:', subtitle);
     return this;
 }
 
@@ -1426,41 +1440,65 @@ getVideoSubtitle() {
     return this.options.videoSubtitle;
 }
 
+/**
+ * Set persistent title (always visible)
+ * @param {boolean} persistent - If true, title stays visible
+ * @returns {Object} this
+ */
 setPersistentTitle(persistent) {
     this.options.persistentTitle = persistent;
 
-    if (this.titleOverlay && this.options.videoTitle) {
+    if (this.topBar) {
         if (persistent) {
-            this.showTitleOverlay();
-            this.clearTitleTimeout();
+            this.topBar.classList.add('persistent');
         } else {
-            this.titleOverlay.classList.remove('persistent');
-            if (this.titleOverlay.classList.contains('show')) {
-                this.clearTitleTimeout();
-                this.titleTimeout = setTimeout(() => {
-                    this.hideTitleOverlay();
-                }, 3000);
-            }
+            this.topBar.classList.remove('persistent');
         }
     }
 
     return this;
 }
 
+/**
+ * Enable title overlay (shows top bar with title)
+ * @returns {Object} this
+ */
 enableTitleOverlay() {
-    if (!this.titleOverlay && !this.options.showTitleOverlay) {
-        this.options.showTitleOverlay = true;
-        this.createTitleOverlay();
+    if (!this.topBar) {
+        if (this.options.debug) console.warn('Top bar not available');
+        return this;
+    }
+
+    this.options.showTitleOverlay = true;
+
+    // show top bar
+    if (this.options.videoTitle) {
+        const titleSection = this.topBar.querySelector('.top-bar-title');
+        if (titleSection) {
+            titleSection.style.display = '';
+        }
     }
+
+    if (this.options.debug) console.log('Title overlay enabled');
     return this;
 }
 
+/**
+ * Disable title overlay (hides top bar)
+ * @returns {Object} this
+ */
 disableTitleOverlay() {
-    if (this.titleOverlay) {
-        this.titleOverlay.remove();
-        this.titleOverlay = null;
-    }
+    if (!this.topBar) return this;
+
     this.options.showTitleOverlay = false;
+
+    // hide top bar
+    const titleSection = this.topBar.querySelector('.top-bar-title');
+    if (titleSection) {
+        titleSection.style.display = 'none';
+    }
+
+    if (this.options.debug) console.log('Title overlay disabled');
     return this;
 }
 
@@ -1501,6 +1539,10 @@ initializeElements() {
     this.speedMenu = this.controls?.querySelector('.speed-menu');
     this.qualityMenu = this.controls?.querySelector('.quality-menu');
     this.subtitlesMenu = this.controls?.querySelector('.subtitles-menu');
+
+    this.settingsBtn = this.container?.querySelector('.settings-btn');
+    this.settingsMenu = this.container?.querySelector('.settings-menu');
+
     // Apply seek handle shape from options
     if (this.progressHandle && this.options.seekHandleShape) {
         this.setSeekHandleShape(this.options.seekHandleShape);
@@ -1581,6 +1623,88 @@ setupMenuToggles() {
     }
 }
 
+/**
+ * Create integrated top bar with settings menu
+ * Respects showTitleOverlay, videoTitle, videoSubtitle, persistentTitle options
+ * @returns {void}
+ */
+createTopBar() {
+    if (!this.container) return;
+
+    // Create top bar element
+    const topBar = document.createElement('div');
+    topBar.className = 'player-top-bar';
+    topBar.id = `topBar${this.getUniqueId()}`;
+
+    // Left section - Title (ALWAYS create structure)
+    const titleSection = document.createElement('div');
+    titleSection.className = 'top-bar-title';
+
+    // Main title
+    const titleElement = document.createElement('h3');
+    titleElement.className = 'video-title';
+    titleElement.textContent = this.options.videoTitle ? this.decodeHTMLEntities(this.options.videoTitle) : '';
+    titleSection.appendChild(titleElement);
+
+    // Optional subtitle (if present)
+    if (this.options.videoSubtitle) {
+        const subtitleElement = document.createElement('span');
+        subtitleElement.className = 'video-subtitle';
+        subtitleElement.textContent = this.decodeHTMLEntities(this.options.videoSubtitle);
+        titleSection.appendChild(subtitleElement);
+    }
+
+    // Hide title section if showTitleOverlay is false
+    if (!this.options.showTitleOverlay || !this.options.videoTitle) {
+        titleSection.style.display = 'none';
+    }
+
+    topBar.appendChild(titleSection);
+
+    // Right section - Settings control
+    const settingsControl = document.createElement('div');
+    settingsControl.className = 'settings-control settings-top-bar';
+
+    // Settings button
+    const settingsBtn = document.createElement('button');
+    settingsBtn.className = 'control-btn settings-btn';
+    settingsBtn.setAttribute('data-tooltip', 'settingsmenu');
+
+    const icon = document.createElement('span');
+    icon.className = 'icon';
+    icon.innerHTML = `<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></svg>`;
+    settingsBtn.appendChild(icon);
+
+    // Settings menu
+    const settingsMenu = document.createElement('div');
+    settingsMenu.className = 'settings-menu';
+
+    settingsControl.appendChild(settingsBtn);
+    settingsControl.appendChild(settingsMenu);
+    topBar.appendChild(settingsControl);
+
+    // Add persistent class if persistentTitle is enabled
+    if (this.options.persistentTitle) {
+        topBar.classList.add('persistent');
+    }
+
+    // Insert top bar as first child in container
+    this.container.insertBefore(topBar, this.container.firstChild);
+
+    // Save references
+    this.topBar = topBar;
+    this.topBarTitle = topBar.querySelector('.video-title');
+    this.topBarSubtitle = topBar.querySelector('.video-subtitle');
+
+    if (this.options.debug) {
+        console.log('Top bar created with integrated settings', {
+            showTitle: this.options.showTitleOverlay,
+            persistent: this.options.persistentTitle,
+            opacity: this.options.titleOverlayOpacity
+        });
+    }
+}
+
 /**
  * Restart video from beginning - Works with HTML5 video and ALL plugins
  * @returns {this} Returns this for method chaining
@@ -2165,7 +2289,7 @@ createBrandLogo() {
     if (this.options.brandLogoLinkUrl) {
         // Use custom tooltip text if provided, otherwise fallback to URL
         logo.title = this.options.brandLogoTooltipText || this.options.brandLogoLinkUrl;
-        // NON usare data-tooltip per evitare che venga sovrascritto da updateTooltips()
+        // do not use data-tooltip to not be overwritten
     }
 
     // Handle loading error
@@ -2860,6 +2984,13 @@ addEventListener(eventType, callback) {
                 this.pauseIcon.classList.remove('hidden');
             }
 
+            // Reset auto-hide timer when video starts playing
+            if (this.options.autoHide && this.autoHideInitialized) {
+                if (this.options.debug) console.log('Video playing - reset auto-hide timer');
+                this.showControlsNow();
+                this.resetAutoHideTimer();
+            }
+
             // Trigger playing event - video is now actually playing
             this.triggerEvent('playing', {
                 currentTime: this.getCurrentTime(),
@@ -2867,6 +2998,20 @@ addEventListener(eventType, callback) {
             });
         });
 
+        // Show controls and cancel timer when video is paused
+        this.video.addEventListener('pause', () => {
+            if (this.options.autoHide && this.autoHideInitialized) {
+                if (this.options.debug) console.log('Video paused - show controls and cancel timer');
+                this.showControlsNow();
+
+                // Cancel timer so controls stay visible while paused
+                if (this.autoHideTimer) {
+                    clearTimeout(this.autoHideTimer);
+                    this.autoHideTimer = null;
+                }
+            }
+        });
+
         this.video.addEventListener('waiting', () => {
             if (!this.isChangingQuality) {
                 this.showLoading();
@@ -3359,30 +3504,37 @@ resetAutoHideTimer() {
         this.autoHideTimer = null;
     }
 
-    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+    const isTouchDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
+
     if (this.mouseOverControls && !isTouchDevice) {
-        if (this.autoHideDebug) {
-            if (this.options.debug) console.log('Not starting timer - mouse on controls');
-        }
+        if (this.autoHideDebug && this.options.debug) console.log('Not starting timer - mouse on controls');
         return;
     }
 
+    // Allow timer if video is paused at start (autoplay blocked)
     if (this.video && this.video.paused) {
-        if (this.autoHideDebug) {
-            if (this.options.debug) console.log('Not starting timer - video paused');
+        const isInitialPause = this.video.currentTime === 0 && !this.video.ended;
+
+        if (!isInitialPause) {
+            if (this.autoHideDebug && this.options.debug) console.log('Not starting timer - video paused by user');
+            return;
+        }
+
+        if (this.autoHideDebug && this.options.debug) {
+            console.log('Video paused but at start - allowing timer (autoplay blocked)');
         }
-        return;
     }
 
+    // Start timer
     this.autoHideTimer = setTimeout(() => {
-        if (this.autoHideDebug) {
-            if (this.options.debug) console.log(`Timer expired after ${this.options.autoHideDelay}ms - nascondo controlli`);
+        if (this.autoHideDebug && this.options.debug) {
+            console.log(`Timer expired after ${this.options.autoHideDelay}ms - hiding controls`);
         }
         this.hideControlsNow();
     }, this.options.autoHideDelay);
 
-    if (this.autoHideDebug) {
-        if (this.options.debug) console.log(`Auto-hide timer started: ${this.options.autoHideDelay}ms`);
+    if (this.autoHideDebug && this.options.debug) {
+        console.log(`Auto-hide timer started (${this.options.autoHideDelay}ms)`);
     }
 }
 
@@ -3410,7 +3562,7 @@ showControlsNow() {
         // *show cursor when controls are shown*
         this.showCursor();
 
-        if (this.autoHideDebug && this.options.debug) console.log('✅ Controls shown');
+        if (this.autoHideDebug && this.options.debug) console.log('Controls shown');
     }
 }
 
@@ -3451,7 +3603,7 @@ hideControlsNow() {
         // *hide cursor after controls are hidden*
         this.hideCursor();
 
-        if (this.autoHideDebug && this.options.debug) console.log('✅ Controls hidden');
+        if (this.autoHideDebug && this.options.debug) console.log('Controls hidden');
     }
 }
 
@@ -3477,9 +3629,7 @@ clearControlsTimeout() {
 
 // Default controlbar styles injection
 injectDefaultControlbarStyles() {
-    if (document.getElementById('default-controlbar-styles')) {
-        return;
-    }
+    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));
@@ -3501,7 +3651,7 @@ injectDefaultControlbarStyles() {
             min-height: 60px;
             padding-bottom: 10px;
         }
-        
+
         .video-wrapper:not(.youtube-active):not(.vimeo-active):not(.facebook-active) .title-overlay {
             background: linear-gradient(
                 to bottom,
@@ -3516,8 +3666,12 @@ injectDefaultControlbarStyles() {
             min-height: 80px;
             padding-top: 20px;
         }
+        
+        /* ✅ NEW: Set CSS custom property for top bar opacity */
+        .video-wrapper {
+            --player-topbar-opacity: ${titleOverlayOpacity};
+        }
     `;
-
     document.head.appendChild(style);
 }
 
@@ -3699,10 +3853,9 @@ createControls() {
     </div>
 
     <div class="time-display">
-        <span class="current-time">0:00</span>
-        <span>/</span>
-        <span class="duration">0:00</span>
-    </div>
+    <span class="current-time">00:00</span>
+    <span class="duration">00:00</span>
+</div>
 </div>
 
                 <div class="controls-right">
@@ -3713,13 +3866,6 @@ createControls() {
     <span class="icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M12.5 4v8l-7-4zm-8 0v8l7-4z"/></svg></span>
 </button>
 
-                    <div class="settings-control">
-                        <button class="control-btn settings-btn" data-tooltip="settings_menu">
-                            <span class="icon"><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></svg></span>
-                        </button>
-                        <div class="settings-menu"></div>
-                    </div>
-
 ${(this.options.showQualitySelector && this.originalSources && this.originalSources.length > 1) || this.options.adaptiveQualityControl ? `
                     <div class="quality-control">
                         <button class="control-btn quality-btn" data-tooltip="video_quality">
@@ -3842,18 +3988,21 @@ checkScreenSize() {
 
 /* Update settings menu visibility */
 updateSettingsMenuVisibility() {
-    const settingsControl = this.controls?.querySelector('.settings-control');
+    // SEARCH IN CONTAINER
+    const settingsControl = this.container?.querySelector('.settings-control');
+
     if (!settingsControl) return;
 
-    // always show settings
+    // Always show settings
     settingsControl.style.display = 'block';
 
     // Populate settings menu
     this.populateSettingsMenu();
 
-    // hide speed and subtitles controls
+    // Hide speed and subtitles controls in bottom bar
     const speedControl = this.controls.querySelector('.speed-control');
     const subtitlesControl = this.controls.querySelector('.subtitles-control');
+
     if (speedControl) speedControl.style.display = 'none';
     if (subtitlesControl) subtitlesControl.style.display = 'none';
 }
@@ -3862,44 +4011,52 @@ updateSettingsMenuVisibility() {
  * Populate settings menu with controls
  */
 populateSettingsMenu() {
-    const settingsMenu = this.controls?.querySelector('.settings-menu');
+    // SEARCH IN CONTAINER
+    const settingsMenu = this.container?.querySelector('.settings-menu');
+
     if (!settingsMenu) return;
 
     let menuHTML = '';
 
     // SPEED - always included
     if (this.options.showSpeedControl) {
-        const speedLabel = this.t('playback_speed') || 'Playback Speed';
+        const speedLabel = this.t('playback_speed');
         const currentSpeed = this.video ? this.video.playbackRate : 1;
-        menuHTML += `<div class="settings-expandable-wrapper">
-            <div class="settings-option expandable-trigger" data-action="speed-expand">
-                <span class="settings-option-label">${speedLabel} <strong>${currentSpeed}x</strong></span>
-                <span class="expand-arrow">▶</span>
-            </div>
-            <div class="settings-expandable-content" style="display: none;">`;
+
+        menuHTML += `
+            <div class="settings-expandable-wrapper">
+                <div class="settings-option expandable-trigger" data-action="speed_expand">
+                    <span class="settings-option-label">${speedLabel} <strong>${currentSpeed}x</strong></span>
+                    <span class="expand-arrow">▼</span>
+                </div>
+                <div class="settings-expandable-content" style="display: none;">`;
 
         const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
         speeds.forEach(speed => {
             const isActive = Math.abs(speed - currentSpeed) < 0.01;
             menuHTML += `<div class="settings-suboption ${isActive ? 'active' : ''}" data-speed="${speed}">${speed}x</div>`;
         });
+
         menuHTML += `</div></div>`;
     }
 
     // SUBTITLES - always included
     if (this.options.showSubtitles && this.textTracks && this.textTracks.length > 0) {
-        const subtitlesLabel = this.t('subtitles') || 'Subtitles';
+        const subtitlesLabel = this.t('subtitles');
         const currentTrack = this.currentSubtitleTrack;
-        const currentLabel = this.subtitlesEnabled ? (currentTrack ? currentTrack.label : 'Unknown') : (this.t('subtitlesoff') || 'Off');
-
-        menuHTML += `<div class="settings-expandable-wrapper">
-            <div class="settings-option expandable-trigger" data-action="subtitles-expand">
-                <span class="settings-option-label">${subtitlesLabel} <strong>${currentLabel}</strong></span>
-                <span class="expand-arrow">▶</span>
-            </div>
-            <div class="settings-expandable-content" style="display: none;">`;
+        const currentLabel = this.subtitlesEnabled ?
+            (currentTrack ? currentTrack.label : 'Unknown') :
+            this.t('subtitles_off'); //
+
+        menuHTML += `
+            <div class="settings-expandable-wrapper">
+                <div class="settings-option expandable-trigger" data-action="subtitles_expand">
+                    <span class="settings-option-label">${subtitlesLabel} <strong>${currentLabel}</strong></span>
+                    <span class="expand-arrow">▼</span>
+                </div>
+                <div class="settings-expandable-content" style="display: none;">`;
 
-        menuHTML += `<div class="settings-suboption ${!this.subtitlesEnabled ? 'active' : ''}" data-track="off">${this.t('subtitlesoff') || 'Off'}</div>`;
+        menuHTML += `<div class="settings-suboption ${!this.subtitlesEnabled ? 'active' : ''}" data-track="off">${this.t('subtitles_off')}</div>`;
 
         this.textTracks.forEach((trackData, index) => {
             const isActive = this.currentSubtitleTrack === trackData.track;
@@ -3972,43 +4129,50 @@ addSettingsMenuScrollbar() {
  * Bind settings menu events
  */
 bindSettingsMenuEvents() {
-    const settingsBtn = this.controls?.querySelector('.settings-btn');
-    const settingsMenu = this.controls?.querySelector('.settings-menu');
+    // Search in container instead of controls (for top bar)
+    const settingsBtn = this.container?.querySelector('.settings-btn');
+    const settingsMenu = this.container?.querySelector('.settings-menu');
+
     if (!settingsMenu || !settingsBtn) return;
 
-    // toggle menu on button click
+    // Toggle menu on button click
     settingsBtn.addEventListener('click', (e) => {
         e.stopPropagation();
         settingsMenu.classList.toggle('active');
 
-        // when menu is opened, set max height and overflow
+        // When menu is opened, set max height and overflow
         if (settingsMenu.classList.contains('active')) {
-            const settingsBtn = document.querySelector('.settings-btn');
-            const containerRect = settingsMenu.parentElement.parentElement.getBoundingClientRect();
+            const containerRect = this.container.getBoundingClientRect();
             const btnRect = settingsBtn.getBoundingClientRect();
-            const spaceBelow = containerRect.bottom - btnRect.bottom;
-            const maxMenuHeight = Math.max(100, Math.min(250, spaceBelow - 20));
+
+            // Calculate available space below the button
+            const spaceBelow = containerRect.bottom - btnRect.bottom - 30; // 30px margin
+
+            // Minimum 300px, maximum 600px or available space
+            const maxMenuHeight = Math.max(300, Math.min(600, spaceBelow));
 
             settingsMenu.style.maxHeight = `${maxMenuHeight}px`;
             settingsMenu.style.overflowY = 'auto';
             settingsMenu.style.overflowX = 'hidden';
+
+            if (this.options.debug) {
+                console.log(`Settings menu opened: height=${maxMenuHeight}px (available=${spaceBelow}px)`);
+            }
         } else {
-            settingsMenu.style.maxHeight = 'none';
-            settingsMenu.style.overflowY = 'visible';
+            // Reset when closing
+            settingsMenu.style.maxHeight = '600px'; // Default max height
+            settingsMenu.style.overflowY = 'auto';
         }
-
     });
 
-    // close menu when clicking outside
+    // Close menu when clicking outside
     document.addEventListener('click', (e) => {
         if (!settingsBtn?.contains(e.target) && !settingsMenu?.contains(e.target)) {
             settingsMenu?.classList.remove('active');
-            settingsMenu.style.maxHeight = 'none';
-            settingsMenu.style.overflowY = 'visible';
         }
     });
 
-    // manage clicks inside the menu
+    // Manage clicks inside the menu
     settingsMenu.addEventListener('click', (e) => {
         e.stopPropagation();
 
@@ -4048,7 +4212,7 @@ bindSettingsMenuEvents() {
             const trigger = wrapper.querySelector('.expandable-trigger');
             const action = trigger.getAttribute('data-action');
 
-            if (action === 'speed-expand') {
+            if (action === 'speed_expand') {
                 const speed = parseFloat(e.target.getAttribute('data-speed'));
                 if (speed && speed > 0 && this.video && !this.isChangingQuality) {
                     this.video.playbackRate = speed;
@@ -4061,13 +4225,13 @@ bindSettingsMenuEvents() {
                     const label = trigger.querySelector('.settings-option-label');
                     if (label) {
                         const speedLabel = this.t('playback_speed') || 'Playback Speed';
-                        label.textContent = `${speedLabel}: ${speed}x`;
+                        label.innerHTML = `${speedLabel} <strong>${speed}x</strong>`;
                     }
 
                     // Trigger event
                     this.triggerEvent('speedchange', { speed, previousSpeed: this.video.playbackRate });
                 }
-            } else if (action === 'subtitles-expand') {
+            } else if (action === 'subtitles_expand') {
                 const trackData = e.target.getAttribute('data-track');
                 if (trackData === 'off') {
                     this.disableSubtitles();
@@ -4084,7 +4248,7 @@ bindSettingsMenuEvents() {
                 const label = trigger.querySelector('.settings-option-label');
                 if (label) {
                     const subtitlesLabel = this.t('subtitles') || 'Subtitles';
-                    label.textContent = `${subtitlesLabel}: ${e.target.textContent}`;
+                    label.innerHTML = `${subtitlesLabel} <strong>${e.target.textContent}</strong>`;
                 }
             }
         }
@@ -6470,35 +6634,35 @@ bindChapterEvents() {
 }
 
 /**
- * Update chapter name in title overlay dynamically
+ * Update chapter name in top bar subtitle dynamically
+ * Shows current chapter title as subtitle in the top bar
  */
 updateChapterInTitleOverlay() {
     if (!this.video || !this.chapters || this.chapters.length === 0) return;
 
-    const titleOverlay = this.container ? this.container.querySelector('.title-overlay') : null;
-    if (!titleOverlay) return;
-
-    // Find or create chapter name element
-    let chapterElement = titleOverlay.querySelector('.chapter-name');
-    if (!chapterElement) {
-        chapterElement = document.createElement('div');
-        chapterElement.className = 'chapter-name';
-        chapterElement.style.cssText = `
-            font-size: 13px;
-            font-weight: 500;
-            color: rgba(255, 255, 255, 0.9);
-            margin-top: 6px;
-            max-width: 400px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        `;
-        titleOverlay.appendChild(chapterElement);
+    // Use topBar instead of old titleOverlay
+    if (!this.topBar) return;
+
+    // Find or create subtitle element in top bar
+    let subtitleElement = this.topBar.querySelector('.video-subtitle');
+
+    if (!subtitleElement) {
+        // Create subtitle element if it doesn't exist
+        const titleSection = this.topBar.querySelector('.top-bar-title');
+        if (!titleSection) return;
+
+        subtitleElement = document.createElement('span');
+        subtitleElement.className = 'video-subtitle';
+        titleSection.appendChild(subtitleElement);
+
+        // Save reference
+        this.topBarSubtitle = subtitleElement;
     }
 
     // Find current chapter
     const currentTime = this.video.currentTime;
     let currentChapter = null;
+
     for (let i = this.chapters.length - 1; i >= 0; i--) {
         if (currentTime >= this.chapters[i].time) {
             currentChapter = this.chapters[i];
@@ -6506,12 +6670,22 @@ updateChapterInTitleOverlay() {
         }
     }
 
-    // Update or hide chapter name
+    // Update subtitle with chapter title or hide if no chapter
     if (currentChapter) {
-        chapterElement.textContent = currentChapter.title;
-        chapterElement.style.display = 'block';
+        subtitleElement.textContent = currentChapter.title;
+        subtitleElement.style.display = 'block';
     } else {
-        chapterElement.style.display = 'none';
+        // Se non c'è un capitolo attivo, mostra il sottotitolo originale o nascondi
+        if (this.options.videoSubtitle) {
+            subtitleElement.textContent = this.options.videoSubtitle;
+            subtitleElement.style.display = 'block';
+        } else {
+            subtitleElement.style.display = 'none';
+        }
+    }
+
+    if (this.options.debug) {
+        console.log('Chapter overlay updated:', currentChapter ? currentChapter.title : 'No chapter');
     }
 }
 
@@ -8439,8 +8613,7 @@ updateTimeDisplay() {
                 }
             }
             const fallback = {
-                'loading': 'Loading...',
-                'encodinginprogress': 'Encoding in progress...'
+                'loading': 'Loading...'
             };
             return fallback[key] || key;
         };
@@ -8453,7 +8626,7 @@ updateTimeDisplay() {
             this.durationEl.classList.add('loading-state');
         } else if (isDurationInvalid) {
             // CHANGED: Move text to center overlay
-            this.updateLoadingText(t('encodinginprogress'));
+            this.updateLoadingText(t('loading'));
             // Optional: you might want to keep encoding text in bar OR move it too. 
             // If you want it ONLY in center:
             this.durationEl.textContent = "--:--";