myetv-player 1.6.3 → 1.6.5

package/dist/myetv-player.js

@@ -655,6 +655,7 @@ constructor(videoElement, options = {}) {
         showPictureInPicture: true,  // Enable PiP button
         showSubtitles: true,         // Enable subtitles button
         subtitlesEnabled: false,     // Enable subtitles by default if available
+        showSettingsMenu: true,      // Show settings menu in top bar
         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
@@ -1304,10 +1305,6 @@ createPlayerStructure() {
     this.createControls();
     this.createBrandLogo();
     this.detectPlaylist();
-
-    if (this.options.showTitleOverlay) {
-        this.createTitleOverlay();
-    }
     this.createTopBar();
 }
 
@@ -1332,37 +1329,6 @@ 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;
 
@@ -1405,27 +1371,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;
 }
 
@@ -1434,23 +1417,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;
 }
 
@@ -1458,41 +1441,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;
 }
 
@@ -1619,8 +1626,7 @@ setupMenuToggles() {
 
 /**
  * Create integrated top bar with settings menu
- * Netflix/Prime Video style top bar with title and settings on opposite sides
- * This does NOT replace the existing title-overlay system
+ * Respects showTitleOverlay, videoTitle, videoSubtitle, persistentTitle options
  * @returns {void}
  */
 createTopBar() {
@@ -1629,49 +1635,56 @@ createTopBar() {
     // Create top bar element
     const topBar = document.createElement('div');
     topBar.className = 'player-top-bar';
-    topBar.id = `topBar_${this.getUniqueId()}`;
+    topBar.id = `topBar${this.getUniqueId()}`;
 
-    // Left section: Title (if enabled)
-    if (this.options.showTitleOverlay && this.options.videoTitle) {
-        const titleSection = document.createElement('div');
-        titleSection.className = 'top-bar-title';
+    // Apply background class based on showTitleOverlay option
+    if (!this.options.showTitleOverlay) {
+        topBar.classList.add('no-title-background');
+    }
 
-        // Main title
-        const titleElement = document.createElement('h3');
-        titleElement.className = 'video-title';
-        titleElement.textContent = this.decodeHTMLEntities(this.options.videoTitle);
-        titleSection.appendChild(titleElement);
+    // Left section - Title (ALWAYS create structure)
+    const titleSection = document.createElement('div');
+    titleSection.className = 'top-bar-title';
 
-        // Optional subtitle
-        if (this.options.videoSubtitle) {
-            const subtitleElement = document.createElement('span');
-            subtitleElement.className = 'video-subtitle';
-            subtitleElement.textContent = this.decodeHTMLEntities(this.options.videoSubtitle);
-            titleSection.appendChild(subtitleElement);
-        }
+    // Main title
+    const titleElement = document.createElement('h3');
+    titleElement.className = 'video-title';
+    titleElement.textContent = this.options.videoTitle ? this.decodeHTMLEntities(this.options.videoTitle) : '';
+    titleSection.appendChild(titleElement);
 
-        topBar.appendChild(titleSection);
-    } else {
-        // Spacer if no title
-        const spacer = document.createElement('div');
-        spacer.className = 'top-bar-spacer';
-        topBar.appendChild(spacer);
+    // 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';
     }
 
-    // Right section: Settings control
+    topBar.appendChild(titleSection);
+
+    // spacer element
+    const spacer = document.createElement('div');
+    spacer.className = 'top-bar-spacer';
+    spacer.style.flex = '1';
+    topBar.appendChild(spacer);
+
+    // 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', 'settings_menu'); // ✅ Correct: underscore
+    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>`;
+    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
@@ -1680,8 +1693,19 @@ createTopBar() {
 
     settingsControl.appendChild(settingsBtn);
     settingsControl.appendChild(settingsMenu);
+
+    // hide settings control if showSettingsMenu is false
+    if (this.options.showSettingsMenu === false) {
+        settingsControl.style.display = 'none';
+    }
+
     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);
 
@@ -1691,7 +1715,13 @@ createTopBar() {
     this.topBarSubtitle = topBar.querySelector('.video-subtitle');
 
     if (this.options.debug) {
-        console.log('✅ Top bar created with integrated settings');
+        console.log('Top bar created with integrated settings', {
+            showTitle: this.options.showTitleOverlay,
+            showSettings: this.options.showSettingsMenu, // ✅ AGGIUNGI nel log
+            persistent: this.options.persistentTitle,
+            opacity: this.options.titleOverlayOpacity,
+            hasBackground: !topBar.classList.contains('no-title-background') // ✅ AGGIUNGI nel log
+        });
     }
 }
 
@@ -3501,10 +3531,8 @@ resetAutoHideTimer() {
         return;
     }
 
-    // Only block timer if video is paused AND user explicitly paused it
-    // Don't block if paused due to autoplay blocked (currentTime === 0 and no interaction yet)
+    // Allow timer if video is paused at start (autoplay blocked)
     if (this.video && this.video.paused) {
-        // Allow timer if this is initial pause (autoplay blocked scenario)
         const isInitialPause = this.video.currentTime === 0 && !this.video.ended;
 
         if (!isInitialPause) {
@@ -3513,17 +3541,21 @@ resetAutoHideTimer() {
         }
 
         if (this.autoHideDebug && this.options.debug) {
-            console.log('Video paused but at start - allowing timer (autoplay blocked scenario)');
+            console.log('Video paused but at start - allowing timer (autoplay blocked)');
         }
     }
 
-    // Start timer...
+    // Start timer
     this.autoHideTimer = setTimeout(() => {
-        if (this.autoHideDebug && this.options.debug) console.log(`Timer expired after ${this.options.autoHideDelay}ms - hiding controls`);
+        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 && 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)`);
+    }
 }
 
 showControlsNow() {
@@ -3617,9 +3649,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));
@@ -3641,7 +3671,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,
@@ -3656,8 +3686,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);
 }
 
@@ -4032,7 +4066,7 @@ populateSettingsMenu() {
         const currentTrack = this.currentSubtitleTrack;
         const currentLabel = this.subtitlesEnabled ?
             (currentTrack ? currentTrack.label : 'Unknown') :
-            this.t('subtitles_off'); //
+            this.t('subtitlesoff');
 
         menuHTML += `
             <div class="settings-expandable-wrapper">
@@ -4042,7 +4076,7 @@ populateSettingsMenu() {
                 </div>
                 <div class="settings-expandable-content" style="display: none;">`;
 
-        menuHTML += `<div class="settings-suboption ${!this.subtitlesEnabled ? 'active' : ''}" data-track="off">${this.t('subtitles_off')}</div>`;
+        menuHTML += `<div class="settings-suboption ${!this.subtitlesEnabled ? 'active' : ''}" data-track="off">${this.t('subtitlesoff')}</div>`;
 
         this.textTracks.forEach((trackData, index) => {
             const isActive = this.currentSubtitleTrack === trackData.track;
@@ -4630,7 +4664,74 @@ optimizeButtonsForSmallHeight() {
     }
 }
 
-/* Controls methods for main class - All original functionality preserved exactly */
+/**
+ * Update CSS opacity variables dynamically
+ * @returns {Object} this
+ */
+updateOpacityVariables() {
+    if (!this.controls) return this;
+
+    // Update control bar opacity
+    if (this.controls) {
+        this.controls.style.setProperty('--control-bar-opacity', this.options.controlBarOpacity || 0.95);
+    }
+
+    // Update title overlay opacity
+    if (this.topBar) {
+        this.topBar.style.setProperty('--title-overlay-opacity', this.options.titleOverlayOpacity || 0.95);
+    }
+
+    if (this.options.debug) {
+        console.log('Opacity variables updated:', {
+            controlBar: this.options.controlBarOpacity,
+            titleOverlay: this.options.titleOverlayOpacity
+        });
+    }
+
+    return this;
+}
+
+/**
+ * Show settings menu button
+ * @returns {Object} this
+ */
+showSettingsMenu() {
+    if (!this.topBar) return this;
+
+    const settingsControl = this.topBar.querySelector('.settings-control');
+    if (settingsControl) {
+        settingsControl.style.display = '';
+        this.options.showSettingsMenu = true;
+
+        if (this.options.debug) {
+            console.log('Settings menu enabled');
+        }
+    }
+
+    return this;
+}
+
+/**
+ * Hide settings menu button
+ * @returns {Object} this
+ */
+hideSettingsMenu() {
+    if (!this.topBar) return this;
+
+    const settingsControl = this.topBar.querySelector('.settings-control');
+    if (settingsControl) {
+        settingsControl.style.display = 'none';
+        this.options.showSettingsMenu = false;
+
+        if (this.options.debug) {
+            console.log('Settings menu disabled');
+        }
+    }
+
+    return this;
+}
+
+/* Controls methods for main class */
 
 initializeQualityMonitoring() {
     this.qualityMonitorInterval = setInterval(() => {
@@ -6620,35 +6721,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];
@@ -6656,12 +6757,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');
     }
 }