myetv-player 1.6.3 → 1.6.4

package/dist/myetv-player.min.js

@@ -1218,10 +1218,6 @@ createPlayerStructure() {
  this.createControls();
  this.createBrandLogo();
  this.detectPlaylist();
-
- if (this.options.showTitleOverlay) {
- this.createTitleOverlay();
- }
  this.createTopBar();
 }
 
@@ -1246,36 +1242,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);
-
- 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;
 
@@ -1317,26 +1283,37 @@ setLanguage(lang) {
 }
 
 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);
+
+ if (title && this.options.showTitleOverlay) {
+ const titleSection = this.topBar.querySelector('.top-bar-title');
+ if (titleSection) {
+ titleSection.style.display = '';
+ }
  }
+ } else if (this.topBar && title) {
 
- if (title) {
- this.showTitleOverlay();
+ const titleSection = this.topBar.querySelector('.top-bar-title');
+ if (!titleSection) {
+ const newTitleSection = document.createElement('div');
+ newTitleSection.className = 'top-bar-title';
 
- if (!this.options.persistentTitle) {
- this.clearTitleTimeout();
- this.titleTimeout = setTimeout(() => {
- this.hideTitleOverlay();
- }, 3000);
- }
+ const titleElement = document.createElement('h3');
+ titleElement.className = 'video-title';
+ titleElement.textContent = this.decodeHTMLEntities(title);
+ newTitleSection.appendChild(titleElement);
+
+ 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;
 }
 
@@ -1345,23 +1322,23 @@ getVideoTitle() {
 }
 
 setVideoSubtitle(subtitle) {
- this.options.videoSubtitle = subtitle || '';
+ this.options.videoSubtitle = subtitle;
 
- if (this.titleOverlay) {
- let subtitleElement = this.titleOverlay.querySelector('.subtitle-text');
+ if (this.topBarSubtitle) {
+ this.topBarSubtitle.textContent = subtitle;
+ } else if (subtitle && this.topBar) {
 
- if (subtitle) {
- if (!subtitleElement) {
- subtitleElement = document.createElement('p');
- subtitleElement.className = 'subtitle-text';
- this.titleOverlay.appendChild(subtitleElement);
- }
- subtitleElement.textContent = subtitle;
- } else if (subtitleElement) {
- subtitleElement.remove();
+ 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;
 }
 
@@ -1372,18 +1349,11 @@ getVideoSubtitle() {
 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');
  }
  }
 
@@ -1391,19 +1361,35 @@ setPersistentTitle(persistent) {
 }
 
 enableTitleOverlay() {
- if (!this.titleOverlay && !this.options.showTitleOverlay) {
+ if (!this.topBar) {
+ if (this.options.debug) console.warn('Top bar not available');
+ return this;
+ }
+
  this.options.showTitleOverlay = true;
- this.createTitleOverlay();
+
+ 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;
 }
 
 disableTitleOverlay() {
- if (this.titleOverlay) {
- this.titleOverlay.remove();
- this.titleOverlay = null;
- }
+ if (!this.topBar) return this;
+
  this.options.showTitleOverlay = false;
+
+ 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;
 }
 
@@ -1530,15 +1516,14 @@ createTopBar() {
 
  const topBar = document.createElement('div');
  topBar.className = 'player-top-bar';
- topBar.id = `topBar_${this.getUniqueId()}`;
+ topBar.id = `topBar${this.getUniqueId()}`;
 
- if (this.options.showTitleOverlay && this.options.videoTitle) {
  const titleSection = document.createElement('div');
  titleSection.className = 'top-bar-title';
 
  const titleElement = document.createElement('h3');
  titleElement.className = 'video-title';
- titleElement.textContent = this.decodeHTMLEntities(this.options.videoTitle);
+ titleElement.textContent = this.options.videoTitle ? this.decodeHTMLEntities(this.options.videoTitle) : '';
  titleSection.appendChild(titleElement);
 
  if (this.options.videoSubtitle) {
@@ -1548,26 +1533,22 @@ createTopBar() {
  titleSection.appendChild(subtitleElement);
  }
 
- topBar.appendChild(titleSection);
- } else {
-
- const spacer = document.createElement('div');
- spacer.className = 'top-bar-spacer';
- topBar.appendChild(spacer);
+ if (!this.options.showTitleOverlay || !this.options.videoTitle) {
+ titleSection.style.display = 'none';
  }
 
+ topBar.appendChild(titleSection);
+
  const settingsControl = document.createElement('div');
  settingsControl.className = 'settings-control settings-top-bar';
 
  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);
 
  const settingsMenu = document.createElement('div');
@@ -1577,6 +1558,10 @@ createTopBar() {
  settingsControl.appendChild(settingsMenu);
  topBar.appendChild(settingsControl);
 
+ if (this.options.persistentTitle) {
+ topBar.classList.add('persistent');
+ }
+
  this.container.insertBefore(topBar, this.container.firstChild);
 
  this.topBar = topBar;
@@ -1584,7 +1569,11 @@ 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,
+ persistent: this.options.persistentTitle,
+ opacity: this.options.titleOverlayOpacity
+ });
  }
 }
 
@@ -3180,7 +3169,6 @@ resetAutoHideTimer() {
  }
 
  if (this.video && this.video.paused) {
-
  const isInitialPause = this.video.currentTime === 0 && !this.video.ended;
 
  if (!isInitialPause) {
@@ -3189,16 +3177,20 @@ 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)');
  }
  }
 
  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() {
@@ -3282,9 +3274,7 @@ clearControlsTimeout() {
 }
 
 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));
@@ -3306,7 +3296,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,
@@ -3321,8 +3311,11 @@ injectDefaultControlbarStyles() {
  min-height: 80px;
  padding-top: 20px;
  }
- `;
 
+ .video-wrapper {
+ --player-topbar-opacity: ${titleOverlayOpacity};
+ }
+ `;
  document.head.appendChild(style);
 }
 
@@ -6024,28 +6017,22 @@ bindChapterEvents() {
 }
 
 updateChapterInTitleOverlay() {
- if (!this.video || !this.chapters || this.chapters.length === 0) return;
+ if (!this.video || !this.chapters || this.chapters.length === 0) return;
+ if (!this.topBar) return;
+ let subtitleElement = this.topBar.querySelector('.video-subtitle');
 
- const titleOverlay = this.container ? this.container.querySelector('.title-overlay') : null;
- if (!titleOverlay) return;
- 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);
+ if (!subtitleElement) {
+ const titleSection = this.topBar.querySelector('.top-bar-title');
+ if (!titleSection) return;
+
+ subtitleElement = document.createElement('span');
+ subtitleElement.className = 'video-subtitle';
+ titleSection.appendChild(subtitleElement);
+ this.topBarSubtitle = subtitleElement;
  }
  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];
@@ -6053,10 +6040,19 @@ updateChapterInTitleOverlay() {
  }
  }
  if (currentChapter) {
- chapterElement.textContent = currentChapter.title;
- chapterElement.style.display = 'block';
+ subtitleElement.textContent = currentChapter.title;
+ subtitleElement.style.display = 'block';
+ } else {
+ if (this.options.videoSubtitle) {
+ subtitleElement.textContent = this.options.videoSubtitle;
+ subtitleElement.style.display = 'block';
  } else {
- chapterElement.style.display = 'none';
+ subtitleElement.style.display = 'none';
+ }
+ }
+
+ if (this.options.debug) {
+ console.log('Chapter overlay updated:', currentChapter ? currentChapter.title : 'No chapter');
  }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myetv-player",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "description": "MYETV Video Player - Modular HTML5 video player with plugin support for YouTube, Vimeo, Twitch, Facebook, Cloudflare Stream and streaming protocols (HLS/DASH)",
   "main": "dist/myetv-player.js",
   "files": [
@@ -64,3 +64,4 @@
 
 
 
+

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

@@ -372,23 +372,29 @@
                     subtitlesBtn.style.display = 'none';
                 }
 
-                // Hide original speed menu option from settings (if exists)
-                if (settingsMenu) {
-                    // Hide old non-expandable speed option
-                    const originalSpeedOption = settingsMenu.querySelector('[data-action="speed"]');
-                    if (originalSpeedOption) {
-                        originalSpeedOption.style.display = 'none';
-                    }
-
-                    // Hide new expandable speed option
-                    const expandableSpeedWrapper = settingsMenu.querySelector('[data-action="speed-expand"]');
-                    if (expandableSpeedWrapper) {
-                        const wrapper = expandableSpeedWrapper.closest('.settings-expandable-wrapper');
+            // Remove ONLY the original player speed (not YouTube speed)
+            if (settingsMenu) {
+                // Find and remove ONLY options with data-action="speed" or "speed-expand"
+                // that are NOT inside .yt-speed-wrapper
+                const speedOptions = settingsMenu.querySelectorAll('[data-action="speed"], [data-action="speed_expand"]');
+
+                speedOptions.forEach(option => {
+                    // Check if this option is NOT inside YouTube speed wrapper
+                    if (!option.closest('.yt-speed-wrapper')) {
+                        // It's the original player speed - remove it
+                        const wrapper = option.closest('.settings-expandable-wrapper');
                         if (wrapper) {
-                            wrapper.style.display = 'none';
+                            wrapper.remove(); // Remove the whole wrapper
+                        } else {
+                            option.remove(); // Remove just the option
+                        }
+
+                        if (this.api.player.options.debug) {
+                            console.log('YT Plugin: Removed original player speed option');
                         }
                     }
-                }
+                });
+            }
 
                 // Add subtitles option to settings menu
                 if (settingsMenu) {
@@ -4681,42 +4687,36 @@
         }
 
         /**
- * Initialize chapter display in title overlay
- */
+        * Initialize chapter display in top bar subtitle (instead of title overlay)
+        */
         initChapterDisplayInOverlay() {
             if (!this.chapters || this.chapters.length === 0) return;
 
-            const titleOverlay = this.api.container.querySelector('.title-overlay');
-            if (!titleOverlay) return;
-
-            // Remove existing chapter element if present
-            let chapterElement = titleOverlay.querySelector('.chapter-name');
-            if (chapterElement) {
-                chapterElement.remove();
-            }
-
-            // Create chapter name element
-            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;
-    `;
+            // Use topBar instead of old title-overlay
+            const topBar = this.api.container.querySelector('.player-top-bar');
+            if (!topBar) return;
+
+            // Find or create subtitle element in top bar
+            let subtitleElement = topBar.querySelector('.video-subtitle');
+
+            if (!subtitleElement) {
+                // Create subtitle element if it doesn't exist
+                const titleSection = topBar.querySelector('.top-bar-title');
+                if (!titleSection) return;
 
-            // Append to title overlay
-            titleOverlay.appendChild(chapterElement);
+                subtitleElement = document.createElement('span');
+                subtitleElement.className = 'video-subtitle chapter-name';
+                titleSection.appendChild(subtitleElement);
+            } else {
+                // Add chapter-name class to existing subtitle
+                subtitleElement.classList.add('chapter-name');
+            }
 
             // Start monitoring playback to update chapter name
             this.startChapterNameMonitoring();
 
             if (this.api.player.options.debug) {
-                console.log('YT Plugin: Chapter name display initialized in title overlay');
+                console.log('YT Plugin: Chapter name display initialized in top bar');
             }
         }
 
@@ -4746,10 +4746,11 @@
         }
 
         /**
-         * Update chapter name in overlay based on current time
-         */
+        * Update chapter name in top bar subtitle based on current time
+        */
         updateChapterNameDisplay(currentTime) {
-            const chapterElement = this.api.container.querySelector('.title-overlay .chapter-name');
+            // Use topBar instead of title-overlay
+            const chapterElement = this.api.container.querySelector('.player-top-bar .video-subtitle.chapter-name');
             if (!chapterElement) return;
 
             // Find current chapter
@@ -4766,7 +4767,13 @@
                 chapterElement.textContent = currentChapter.title;
                 chapterElement.style.display = 'block';
             } else {
-                chapterElement.style.display = 'none';
+                // Show original subtitle if no chapter active
+                if (this.api.player.options.videoSubtitle) {
+                    chapterElement.textContent = this.api.player.options.videoSubtitle;
+                    chapterElement.style.display = 'block';
+                } else {
+                    chapterElement.style.display = 'none';
+                }
             }
         }