myetv-player 1.6.2 → 1.6.4

package/dist/myetv-player.min.js

@@ -1170,13 +1170,31 @@ markPlayerReady() {
  }
 
  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(() => {
+
+ if (this.options.debug) console.log('Autoplay started successfully');
+ })
+ .catch(error => {
+
+ if (this.options.debug) console.warn('Autoplay blocked', error);
+
+ if (this.options.autoHide && this.autoHideInitialized) {
+
+ this.showControlsNow();
+
+ this.resetAutoHideTimer();
+
+ if (this.options.debug) {
+ console.log('Auto-hide timer started (autoplay blocked - video paused)');
+ }
+ }
  });
  }, 100);
  }
+
  }, 200);
 
  }, 100);
@@ -1200,10 +1218,7 @@ createPlayerStructure() {
  this.createControls();
  this.createBrandLogo();
  this.detectPlaylist();
-
- if (this.options.showTitleOverlay) {
- this.createTitleOverlay();
- }
+ this.createTopBar();
 }
 
 createInitialLoading() {
@@ -1227,51 +1242,29 @@ 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;
 
  try {
+
  this.controls.querySelectorAll('[data-tooltip]').forEach(element => {
  const key = element.getAttribute('data-tooltip');
  element.title = this.t(key);
  });
 
+ if (this.topBar) {
+ this.topBar.querySelectorAll('[data-tooltip]').forEach(element => {
+ const key = element.getAttribute('data-tooltip');
+ element.title = this.t(key);
+ });
+ }
+
  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);
  }
 }
 
@@ -1290,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;
 }
 
@@ -1318,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;
 }
 
@@ -1345,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');
  }
  }
 
@@ -1364,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;
 }
 
@@ -1418,6 +1431,9 @@ initializeElements() {
  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');
+
  if (this.progressHandle && this.options.seekHandleShape) {
  this.setSeekHandleShape(this.options.seekHandleShape);
  }
@@ -1495,6 +1511,72 @@ setupMenuToggles() {
  }
 }
 
+createTopBar() {
+ if (!this.container) return;
+
+ const topBar = document.createElement('div');
+ topBar.className = 'player-top-bar';
+ topBar.id = `topBar${this.getUniqueId()}`;
+
+ const titleSection = document.createElement('div');
+ titleSection.className = 'top-bar-title';
+
+ const titleElement = document.createElement('h3');
+ titleElement.className = 'video-title';
+ titleElement.textContent = this.options.videoTitle ? this.decodeHTMLEntities(this.options.videoTitle) : '';
+ titleSection.appendChild(titleElement);
+
+ if (this.options.videoSubtitle) {
+ const subtitleElement = document.createElement('span');
+ subtitleElement.className = 'video-subtitle';
+ subtitleElement.textContent = this.decodeHTMLEntities(this.options.videoSubtitle);
+ titleSection.appendChild(subtitleElement);
+ }
+
+ 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', '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);
+
+ const settingsMenu = document.createElement('div');
+ settingsMenu.className = 'settings-menu';
+
+ settingsControl.appendChild(settingsBtn);
+ settingsControl.appendChild(settingsMenu);
+ topBar.appendChild(settingsControl);
+
+ if (this.options.persistentTitle) {
+ topBar.classList.add('persistent');
+ }
+
+ this.container.insertBefore(topBar, this.container.firstChild);
+
+ 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
+ });
+ }
+}
+
 restartVideo() {
  if (!this.video) return this;
 
@@ -2606,12 +2688,30 @@ addEventListener(eventType, callback) {
  this.pauseIcon.classList.remove('hidden');
  }
 
+ if (this.options.autoHide && this.autoHideInitialized) {
+ if (this.options.debug) console.log('Video playing - reset auto-hide timer');
+ this.showControlsNow();
+ this.resetAutoHideTimer();
+ }
+
  this.triggerEvent('playing', {
  currentTime: this.getCurrentTime(),
  duration: this.getDuration()
  });
  });
 
+ 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();
+
+ if (this.autoHideTimer) {
+ clearTimeout(this.autoHideTimer);
+ this.autoHideTimer = null;
+ }
+ }
+ });
+
  this.video.addEventListener('waiting', () => {
  if (!this.isChangingQuality) {
  this.showLoading();
@@ -3061,30 +3161,35 @@ 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;
  }
 
  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)');
+ }
+ }
+
  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)`);
  }
 }
 
@@ -3108,7 +3213,7 @@ showControlsNow() {
 
  this.showCursor();
 
- if (this.autoHideDebug && this.options.debug) console.log('✅ Controls shown');
+ if (this.autoHideDebug && this.options.debug) console.log('Controls shown');
  }
 }
 
@@ -3144,7 +3249,7 @@ hideControlsNow() {
 
  this.hideCursor();
 
- if (this.autoHideDebug && this.options.debug) console.log('✅ Controls hidden');
+ if (this.autoHideDebug && this.options.debug) console.log('Controls hidden');
  }
 }
 
@@ -3169,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));
@@ -3193,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,
@@ -3208,8 +3311,11 @@ injectDefaultControlbarStyles() {
  min-height: 80px;
  padding-top: 20px;
  }
- `;
 
+ .video-wrapper {
+ --player-topbar-opacity: ${titleOverlayOpacity};
+ }
+ `;
  document.head.appendChild(style);
 }
 
@@ -3388,10 +3494,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">
@@ -3402,13 +3507,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">
@@ -3519,7 +3617,9 @@ checkScreenSize() {
 }
 
 updateSettingsMenuVisibility() {
- const settingsControl = this.controls?.querySelector('.settings-control');
+
+ const settingsControl = this.container?.querySelector('.settings-control');
+
  if (!settingsControl) return;
 
  settingsControl.style.display = 'block';
@@ -3528,23 +3628,28 @@ updateSettingsMenuVisibility() {
 
  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';
 }
 
 populateSettingsMenu() {
- const settingsMenu = this.controls?.querySelector('.settings-menu');
+
+ const settingsMenu = this.container?.querySelector('.settings-menu');
+
  if (!settingsMenu) return;
 
  let menuHTML = '';
 
  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">
+
+ 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>
+ <span class="expand-arrow">▼</span>
  </div>
  <div class="settings-expandable-content" style="display: none;">`;
 
@@ -3553,22 +3658,26 @@ populateSettingsMenu() {
  const isActive = Math.abs(speed - currentSpeed) < 0.01;
  menuHTML += `<div class="settings-suboption ${isActive ? 'active' : ''}" data-speed="${speed}">${speed}x</div>`;
  });
+
  menuHTML += `</div></div>`;
  }
 
  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');
+ 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">
+ 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>
+ <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;
@@ -3631,8 +3740,10 @@ addSettingsMenuScrollbar() {
 }
 
 bindSettingsMenuEvents() {
- const settingsBtn = this.controls?.querySelector('.settings-btn');
- const settingsMenu = this.controls?.querySelector('.settings-menu');
+
+ const settingsBtn = this.container?.querySelector('.settings-btn');
+ const settingsMenu = this.container?.querySelector('.settings-menu');
+
  if (!settingsMenu || !settingsBtn) return;
 
  settingsBtn.addEventListener('click', (e) => {
@@ -3640,27 +3751,30 @@ bindSettingsMenuEvents() {
  settingsMenu.classList.toggle('active');
 
  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));
+
+ const spaceBelow = containerRect.bottom - btnRect.bottom - 30; // 30px margin
+
+ const maxMenuHeight = Math.max(300, Math.min(600, spaceBelow));
 
  settingsMenu.style.maxHeight = `${maxMenuHeight}px`;
  settingsMenu.style.overflowY = 'auto';
  settingsMenu.style.overflowX = 'hidden';
- } else {
- settingsMenu.style.maxHeight = 'none';
- settingsMenu.style.overflowY = 'visible';
+
+ if (this.options.debug) {
+ console.log(`Settings menu opened: height=${maxMenuHeight}px (available=${spaceBelow}px)`);
  }
+ } else {
 
+ settingsMenu.style.maxHeight = '600px'; // Default max height
+ settingsMenu.style.overflowY = 'auto';
+ }
  });
 
  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';
  }
  });
 
@@ -3700,7 +3814,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;
@@ -3711,12 +3825,12 @@ 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>`;
  }
 
  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();
@@ -3731,7 +3845,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>`;
  }
  }
  }
@@ -5903,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];
@@ -5932,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');
  }
 }
 
@@ -7549,8 +7666,7 @@ updateTimeDisplay() {
  }
  }
  const fallback = {
- 'loading': 'Loading...',
- 'encodinginprogress': 'Encoding in progress...'
+ 'loading': 'Loading...'
  };
  return fallback[key] || key;
  };
@@ -7563,7 +7679,7 @@ updateTimeDisplay() {
  this.durationEl.classList.add('loading-state');
  } else if (isDurationInvalid) {
 
- this.updateLoadingText(t('encodinginprogress'));
+ this.updateLoadingText(t('loading'));
 
  this.durationEl.textContent = "--:--";