myetv-player 1.3.0 → 1.5.0

package/dist/myetv-player.min.js

@@ -23,7 +23,9 @@ class VideoPlayerI18n {
  'prev_video': 'Video precedente (P)',
  'playlist_next': 'Avanti',
  'playlist_prev': 'Indietro',
- 'settings_menu': 'Impostazioni'
+ 'settings_menu': 'Impostazioni',
+ 'loading': 'Caricamento...',
+ 'encoding_in_progress': 'Encoding in corso'
  },
 
  'en': {
@@ -44,7 +46,9 @@ class VideoPlayerI18n {
  'prev_video': 'Previous video (P)',
  'playlist_next': 'Next',
  'playlist_prev': 'Previous',
- 'settings_menu': 'Settings'
+ 'settings_menu': 'Settings',
+ 'loading': 'Loading...',
+ 'encoding_in_progress': 'Encoding in progress'
  },
 
  'es': {
@@ -65,7 +69,9 @@ class VideoPlayerI18n {
  'prev_video': 'Vídeo anterior (P)',
  'playlist_next': 'Siguiente',
  'playlist_prev': 'Anterior',
- 'settings_menu': 'Configuración'
+ 'settings_menu': 'Configuración',
+ 'loading': 'Cargando...',
+ 'encoding_in_progress': 'Codificación en curso'
  },
 
  'fr': {
@@ -78,7 +84,7 @@ class VideoPlayerI18n {
  'volume': 'Volume',
  'playback_speed': 'Vitesse de lecture',
  'video_quality': 'Qualité vidéo',
- 'picture_in_picture': 'Image dans l’image (P)',
+ 'picture_in_picture': 'Image dans l\'image(P)',
  'fullscreen': 'Plein écran (F)',
  'auto': 'Auto',
  'brand_logo': 'Logo de marque',
@@ -86,7 +92,9 @@ class VideoPlayerI18n {
  'prev_video': 'Vidéo précédente (P)',
  'playlist_next': 'Suivant',
  'playlist_prev': 'Précédent',
- 'settings_menu': 'Paramètres'
+ 'settings_menu': 'Paramètres',
+ 'loading': 'Chargement...',
+ 'encoding_in_progress': 'Encodage en cours'
  },
 
  'de': {
@@ -107,7 +115,9 @@ class VideoPlayerI18n {
  'prev_video': 'Vorheriges Video (P)',
  'playlist_next': 'Weiter',
  'playlist_prev': 'Zurück',
- 'settings_menu': 'Einstellungen'
+ 'settings_menu': 'Einstellungen',
+ 'loading': 'Laden...',
+ 'encoding_in_progress': 'Kodierung läuft'
  },
 
  'pt': {
@@ -128,7 +138,9 @@ class VideoPlayerI18n {
  'prev_video': 'Vídeo anterior (P)',
  'playlist_next': 'Próximo',
  'playlist_prev': 'Anterior',
- 'settings_menu': 'Configurações'
+ 'settings_menu': 'Configurações',
+ 'loading': 'Carregando...',
+ 'encoding_in_progress': 'Codificação em andamento'
  },
 
  'zh': {
@@ -149,7 +161,9 @@ class VideoPlayerI18n {
  'prev_video': '上一个视频 (P)',
  'playlist_next': '下一个',
  'playlist_prev': '上一个',
- 'settings_menu': '设置'
+ 'settings_menu': '设置',
+ 'loading': '加载中...',
+ 'encoding_in_progress': '编码中'
  },
 
  'ja': {
@@ -170,7 +184,9 @@ class VideoPlayerI18n {
  'prev_video': '前の動画 (P)',
  'playlist_next': '次へ',
  'playlist_prev': '前へ',
- 'settings_menu': '設定'
+ 'settings_menu': '設定',
+ 'loading': '読み込み中...',
+ 'encoding_in_progress': 'エンコード中'
  },
 
  'ru': {
@@ -191,7 +207,9 @@ class VideoPlayerI18n {
  'prev_video': 'Предыдущее видео (P)',
  'playlist_next': 'Далее',
  'playlist_prev': 'Назад',
- 'settings_menu': 'Настройки'
+ 'settings_menu': 'Настройки',
+ 'loading': 'Загрузка...',
+ 'encoding_in_progress': 'Кодирование'
  },
 
  'ar': {
@@ -212,7 +230,9 @@ class VideoPlayerI18n {
  'prev_video': 'الفيديو السابق (P)',
  'playlist_next': 'التالي',
  'playlist_prev': 'السابق',
- 'settings_menu': 'الإعدادات'
+ 'settings_menu': 'الإعدادات',
+ 'loading': 'جاري التحميل...',
+ 'encoding_in_progress': 'الترميز جارٍ'
  },
 
  'ko': {
@@ -233,7 +253,9 @@ class VideoPlayerI18n {
  'prev_video': '이전 비디오 (P)',
  'playlist_next': '다음',
  'playlist_prev': '이전',
- 'settings_menu': '설정'
+ 'settings_menu': '설정',
+ 'loading': '로딩 중...',
+ 'encoding_in_progress': '인코딩 진행 중'
  },
 
  'pl': {
@@ -254,7 +276,9 @@ class VideoPlayerI18n {
  'prev_video': 'Poprzednie wideo (P)',
  'playlist_next': 'Dalej',
  'playlist_prev': 'Wstecz',
- 'settings_menu': 'Ustawienia'
+ 'settings_menu': 'Ustawienia',
+ 'loading': 'Ładowanie...',
+ 'encoding_in_progress': 'Kodowanie w toku'
  },
 
  'hu': {
@@ -275,7 +299,9 @@ class VideoPlayerI18n {
  'prev_video': 'Előző videó (P)',
  'playlist_next': 'Következő',
  'playlist_prev': 'Előző',
- 'settings_menu': 'Beállítások'
+ 'settings_menu': 'Beállítások',
+ 'loading': 'Betöltés...',
+ 'encoding_in_progress': 'Kódolás folyamatban'
  },
 
  'tr': {
@@ -296,7 +322,9 @@ class VideoPlayerI18n {
  'prev_video': 'Önceki video (P)',
  'playlist_next': 'Sonraki',
  'playlist_prev': 'Önceki',
- 'settings_menu': 'Ayarlar'
+ 'settings_menu': 'Ayarlar',
+ 'loading': 'Yükleniyor...',
+ 'encoding_in_progress': 'Kodlama devam ediyor'
  },
 
  'nl': {
@@ -317,7 +345,9 @@ class VideoPlayerI18n {
  'prev_video': 'Vorige video (P)',
  'playlist_next': 'Volgende',
  'playlist_prev': 'Vorige',
- 'settings_menu': 'Instellingen'
+ 'settings_menu': 'Instellingen',
+ 'loading': 'Laden...',
+ 'encoding_in_progress': 'Codering bezig'
  },
 
  'hi': {
@@ -338,7 +368,9 @@ class VideoPlayerI18n {
  'prev_video': 'पिछला वीडियो (P)',
  'playlist_next': 'अगला',
  'playlist_prev': 'पिछला',
- 'settings_menu': 'सेटिंग्स'
+ 'settings_menu': 'सेटिंग्स',
+ 'loading': 'लोड हो रहा है...',
+ 'encoding_in_progress': 'एन्कोडिंग प्रगति में'
  },
 
  'sv': {
@@ -359,7 +391,9 @@ class VideoPlayerI18n {
  'prev_video': 'Föregående video (P)',
  'playlist_next': 'Nästa',
  'playlist_prev': 'Föregående',
- 'settings_menu': 'Inställningar'
+ 'settings_menu': 'Inställningar',
+ 'loading': 'Laddar...',
+ 'encoding_in_progress': 'Kodning pågår'
  },
 
  'id': {
@@ -380,7 +414,9 @@ class VideoPlayerI18n {
  'prev_video': 'Video sebelumnya (P)',
  'playlist_next': 'Berikutnya',
  'playlist_prev': 'Sebelumnya',
- 'settings_menu': 'Pengaturan'
+ 'settings_menu': 'Pengaturan',
+ 'loading': 'Memuat...',
+ 'encoding_in_progress': 'Encoding sedang berlangsung'
  }
  };
 
@@ -493,7 +529,9 @@ try {
  'fullscreen': 'Fullscreen (F)',
  'auto': 'Auto',
  'brand_logo': 'Brand logo',
- 'settings_menu': 'Settings'
+ 'settings_menu': 'Settings',
+ 'loading': 'Loading...',
+ 'encoding_in_progress': 'Encoding in progress'
  };
  return fallback[key] || key;
  },
@@ -802,6 +840,49 @@ constructor(videoElement, options = {}) {
  }
 }
 
+decodeHTMLEntities(text) {
+ if (!text) return '';
+ const textarea = document.createElement('textarea');
+ textarea.innerHTML = text;
+ return textarea.value;
+}
+
+isFireTV() {
+ const ua = navigator.userAgent.toLowerCase();
+ return ua.includes('aftm') ||
+ ua.includes('aftb') ||
+ ua.includes('afts') ||
+ ua.includes('aftmm') ||
+ ua.includes('aftt');
+}
+
+optimizeVideoForFireTV() {
+ if (!this.isFireTV() || !this.video) return;
+
+ if (this.options.debug) {
+ console.log('Fire TV detected - applying optimizations');
+ }
+
+ this.video.setAttribute('playsinline', '');
+ this.video.setAttribute('webkit-playsinline', '');
+
+ this.video.style.transform = 'translateZ(0)';
+ this.video.style.webkitTransform = 'translateZ(0)';
+ this.video.style.backfaceVisibility = 'hidden';
+ this.video.style.webkitBackfaceVisibility = 'hidden';
+ this.video.style.willChange = 'transform';
+
+ this.video.addEventListener('loadeddata', () => {
+ if (this.options.debug) {
+ console.log('Fire TV: Video loaded, forcing repaint');
+ }
+ this.video.style.display = 'none';
+ setTimeout(() => {
+ this.video.style.display = 'block';
+ }, 10);
+ }, { once: true });
+}
+
 getPlayerState() {
  return {
  isPlaying: !this.isPaused(),
@@ -1039,6 +1120,10 @@ markPlayerReady() {
  this.video.style.pointerEvents = '';
  }
 
+ if (typeof this.updateSettingsMenuVisibility === 'function') {
+ this.updateSettingsMenuVisibility();
+ }
+
  setTimeout(() => {
  if (this.options.autoHide && !this.autoHideInitialized) {
  this.initAutoHide();
@@ -1087,6 +1172,7 @@ createPlayerStructure() {
 
  this.container = wrapper;
 
+ this.optimizeVideoForFireTV();
  this.createInitialLoading();
  this.createLoadingOverlay();
  this.collectVideoQualities();
@@ -1127,13 +1213,13 @@ createTitleOverlay() {
 
  const titleText = document.createElement('h2');
  titleText.className = 'title-text';
- titleText.textContent = this.options.videoTitle || '';
+ 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.options.videoSubtitle;
+ subtitleText.textContent = this.decodeHTMLEntities(this.options.videoSubtitle);
  overlay.appendChild(subtitleText);
  }
 
@@ -1188,7 +1274,7 @@ setVideoTitle(title) {
  if (this.titleOverlay) {
  const titleElement = this.titleOverlay.querySelector('.title-text');
  if (titleElement) {
- titleElement.textContent = this.options.videoTitle;
+ titleElement.textContent = this.decodeHTMLEntities(this.options.videoTitle);
  }
 
  if (title) {
@@ -1723,6 +1809,8 @@ updateDuration() {
  if (this.durationEl && this.video && this.video.duration && !isNaN(this.video.duration)) {
  this.durationEl.textContent = this.formatTime(this.video.duration);
  }
+
+ this.updateTimeDisplay();
 }
 
 changeSpeed(e) {
@@ -1988,7 +2076,7 @@ switchToVideo(newVideoElement, shouldPlay = false) {
  if (newTitle && this.options.showTitleOverlay) {
  this.options.videoTitle = newTitle;
  if (this.titleText) {
- this.titleText.textContent = newTitle;
+ this.titleText.textContent = this.decodeHTMLEntities(newTitle);
  }
  }
 
@@ -2478,12 +2566,16 @@ addEventListener(eventType, callback) {
  this.showLoading();
  }
 
+ this.updateTimeDisplay();
+
  this.triggerEvent('loadstart');
  });
 
  this.video.addEventListener('loadedmetadata', () => {
  this.updateDuration();
 
+ this.updateTimeDisplay();
+
  this.triggerEvent('loadedmetadata', {
  duration: this.getDuration(),
  videoWidth: this.video.videoWidth,
@@ -2500,6 +2592,8 @@ addEventListener(eventType, callback) {
  this.hideLoading();
  }
 
+ this.updateTimeDisplay();
+
  this.triggerEvent('loadeddata', {
  currentTime: this.getCurrentTime()
  });
@@ -2510,12 +2604,26 @@ addEventListener(eventType, callback) {
  this.hideLoading();
  }
 
+ this.updateTimeDisplay();
+
  this.triggerEvent('canplay', {
  currentTime: this.getCurrentTime(),
  duration: this.getDuration()
  });
  });
 
+ this.video.addEventListener('waiting', () => {
+ if (!this.isChangingQuality) {
+ this.showLoading();
+
+ this.updateTimeDisplay();
+
+ this.triggerEvent('waiting', {
+ currentTime: this.getCurrentTime()
+ });
+ }
+ });
+
  this.video.addEventListener('progress', () => {
  this.updateBuffer();
 
@@ -3208,30 +3316,12 @@ 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>
 
- ${this.options.showSubtitles ? `
- <div class="subtitles-control" style="display: none;">
- <button class="control-btn subtitles-btn" data-tooltip="subtitles">
- <span class="icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1z"/><path d="M6.096 4.972c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152m4.915 0c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152M6.096 9.972c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152m4.915 0c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152"/></svg></span>
+ <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="subtitles-menu">
- <div class="subtitles-option active" data-track="off">Off</div>
- </div>
- </div>
- ` : ''}
-
- ${this.options.showSpeedControl ? `
- <div class="speed-control">
- <button class="control-btn speed-btn" data-tooltip="playback_speed">1x</button>
- <div class="speed-menu">
- <div class="speed-option" data-speed="0.5">0.5x</div>
- <div class="speed-option" data-speed="0.75">0.75x</div>
- <div class="speed-option active" data-speed="1">1x</div>
- <div class="speed-option" data-speed="1.25">1.25x</div>
- <div class="speed-option" data-speed="1.5">1.5x</div>
- <div class="speed-option" data-speed="2">2x</div>
- </div>
+ <div class="settings-menu"></div>
  </div>
- ` : ''}
 
  ${this.options.showQualitySelector && this.originalSources && this.originalSources.length > 1 ? `
  <div class="quality-control">
@@ -3257,13 +3347,6 @@ createControls() {
  </button>
  ` : ''}
 
- <div class="settings-control">
- <button class="control-btn settings-btn" data-tooltip="settings_menu">
- <span class="icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"/><path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52z"/></svg></span>
- </button>
- <div class="settings-menu"></div>
- </div>
-
  ${this.options.showFullscreen ? `
  <button class="control-btn fullscreen-btn" data-tooltip="fullscreen">
  <span class="icon fullscreen-icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5"/></svg></span>
@@ -3353,37 +3436,14 @@ updateSettingsMenuVisibility() {
  const settingsControl = this.controls?.querySelector('.settings-control');
  if (!settingsControl) return;
 
- if (this.isSmallScreen) {
-
  settingsControl.style.display = 'block';
 
- const pipBtn = this.controls.querySelector('.pip-btn');
- const speedControl = this.controls.querySelector('.speed-control');
- const subtitlesControl = this.controls.querySelector('.subtitles-control');
-
- if (pipBtn) pipBtn.style.display = 'none';
- if (speedControl) speedControl.style.display = 'none';
- if (subtitlesControl) subtitlesControl.style.display = 'none';
-
  this.populateSettingsMenu();
- } else {
 
- settingsControl.style.display = 'none';
-
- const pipBtn = this.controls.querySelector('.pip-btn');
  const speedControl = this.controls.querySelector('.speed-control');
  const subtitlesControl = this.controls.querySelector('.subtitles-control');
-
- if (pipBtn && this.options.showPictureInPicture && this.isPiPSupported) {
- pipBtn.style.display = 'flex';
- }
- if (speedControl && this.options.showSpeedControl) {
- speedControl.style.display = 'block';
- }
- if (subtitlesControl && this.options.showSubtitles && this.textTracks.length > 0) {
- subtitlesControl.style.display = 'block';
- }
- }
+ if (speedControl) speedControl.style.display = 'none';
+ if (subtitlesControl) subtitlesControl.style.display = 'none';
 }
 
 populateSettingsMenu() {
@@ -3392,22 +3452,13 @@ populateSettingsMenu() {
 
  let menuHTML = '';
 
- if (this.options.showPictureInPicture && this.isPiPSupported) {
- const pipLabel = this.t('picture_in_picture') || 'Picture-in-Picture';
- menuHTML += `<div class="settings-option" data-action="pip">
- <span class="settings-option-label">${pipLabel}</span>
- </div>`;
- }
-
  if (this.options.showSpeedControl) {
  const speedLabel = this.t('playback_speed') || 'Playback Speed';
  const currentSpeed = this.video ? this.video.playbackRate : 1;
-
- menuHTML += `
- <div class="settings-expandable-wrapper">
+ menuHTML += `<div class="settings-expandable-wrapper">
  <div class="settings-option expandable-trigger" data-action="speed-expand">
- <span class="settings-option-label">${speedLabel}: ${currentSpeed}x</span>
- <span class="expand-arrow">▼</span>
+ <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;">`;
 
@@ -3416,20 +3467,18 @@ 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 currentTrack = this.currentSubtitleTrack;
- const currentLabel = this.subtitlesEnabled && currentTrack ? currentTrack.label : (this.t('subtitlesoff') || 'Off');
+ const currentLabel = this.subtitlesEnabled ? (currentTrack ? currentTrack.label : 'Unknown') : (this.t('subtitlesoff') || 'Off');
 
- menuHTML += `
- <div class="settings-expandable-wrapper">
+ menuHTML += `<div class="settings-expandable-wrapper">
  <div class="settings-option expandable-trigger" data-action="subtitles-expand">
- <span class="settings-option-label">${subtitlesLabel}: ${currentLabel}</span>
- <span class="expand-arrow">▼</span>
+ <span class="settings-option-label">${subtitlesLabel} <strong>${currentLabel}</strong></span>
+ <span class="expand-arrow">▶</span>
  </div>
  <div class="settings-expandable-content" style="display: none;">`;
 
@@ -3444,20 +3493,30 @@ populateSettingsMenu() {
  }
 
  settingsMenu.innerHTML = menuHTML;
-
- this.addSettingsMenuScrollbar();
 }
 
 addSettingsMenuScrollbar() {
  const settingsMenu = this.controls?.querySelector('.settings-menu');
  if (!settingsMenu) return;
 
- const playerHeight = this.container.offsetHeight;
- const maxMenuHeight = playerHeight - 100;
+ const settingsBtn = document.querySelector('.settings-btn');
+ if (!settingsBtn) return;
 
+ const updateMenuHeight = () => {
+ if (settingsMenu.classList.contains('active')) {
+ const containerRect = settingsMenu.parentElement.parentElement.getBoundingClientRect();
+ const btnRect = settingsBtn.getBoundingClientRect();
+ const spaceBelow = containerRect.bottom - btnRect.bottom;
+ const maxMenuHeight = Math.max(100, Math.min(250, spaceBelow - 20));
  settingsMenu.style.maxHeight = `${maxMenuHeight}px`;
  settingsMenu.style.overflowY = 'auto';
  settingsMenu.style.overflowX = 'hidden';
+ }
+ };
+
+ updateMenuHeight();
+
+ window.addEventListener('resize', updateMenuHeight);
 
  if (!document.getElementById('player-settings-scrollbar-style')) {
  const scrollbarStyle = document.createElement('style');
@@ -3486,8 +3545,38 @@ addSettingsMenuScrollbar() {
 }
 
 bindSettingsMenuEvents() {
+ const settingsBtn = this.controls?.querySelector('.settings-btn');
  const settingsMenu = this.controls?.querySelector('.settings-menu');
- if (!settingsMenu) return;
+ if (!settingsMenu || !settingsBtn) return;
+
+ settingsBtn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ settingsMenu.classList.toggle('active');
+
+ if (settingsMenu.classList.contains('active')) {
+ const settingsBtn = document.querySelector('.settings-btn');
+ const containerRect = settingsMenu.parentElement.parentElement.getBoundingClientRect();
+ const btnRect = settingsBtn.getBoundingClientRect();
+ const spaceBelow = containerRect.bottom - btnRect.bottom;
+ const maxMenuHeight = Math.max(100, Math.min(250, spaceBelow - 20));
+
+ settingsMenu.style.maxHeight = `${maxMenuHeight}px`;
+ settingsMenu.style.overflowY = 'auto';
+ settingsMenu.style.overflowX = 'hidden';
+ } else {
+ settingsMenu.style.maxHeight = 'none';
+ settingsMenu.style.overflowY = 'visible';
+ }
+
+ });
+
+ 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';
+ }
+ });
 
  settingsMenu.addEventListener('click', (e) => {
  e.stopPropagation();
@@ -6916,20 +7005,20 @@ getBufferedTime() {
  } catch (error) {
  return 0;
  }
- }
+}
 
- clearTitleTimeout() {
+clearTitleTimeout() {
  if (this.titleTimeout) {
  clearTimeout(this.titleTimeout);
  this.titleTimeout = null;
  }
- }
+}
 
- skipTime(seconds) {
+skipTime(seconds) {
  if (!this.video || !this.video.duration || this.isChangingQuality) return;
 
  this.video.currentTime = Math.max(0, Math.min(this.video.duration, this.video.currentTime + seconds));
- }
+}
 
 updateTimeDisplay() {
 
@@ -6939,20 +7028,34 @@ updateTimeDisplay() {
 
  if (this.durationEl && this.video) {
  const duration = this.video.duration;
+ const readyState = this.video.readyState;
+ const currentTime = this.video.currentTime;
+ const networkState = this.video.networkState;
 
- if (!duration || isNaN(duration) || !isFinite(duration)) {
+ const isInitialBuffering = (readyState < 2 && currentTime === 0) ||
+ (currentTime === 0 && (!duration || duration === 0) && networkState === 2);
 
- this.durationEl.innerHTML = '<span class="encoding-badge">Encoding in progress</span>';
+ const isDurationInvalid = !duration || isNaN(duration) || !isFinite(duration);
+
+ if (isInitialBuffering) {
+
+ this.durationEl.textContent = t('loading');
+ this.durationEl.classList.remove('encoding-state');
+ this.durationEl.classList.add('loading-state');
+ } else if (isDurationInvalid) {
+
+ this.durationEl.textContent = t('encoding_in_progress');
+ this.durationEl.classList.remove('loading-state');
  this.durationEl.classList.add('encoding-state');
  } else {
 
  this.durationEl.textContent = this.formatTime(duration);
- this.durationEl.classList.remove('encoding-state');
+ this.durationEl.classList.remove('encoding-state', 'loading-state');
  }
  }
 }
 
- formatTime(seconds) {
+formatTime(seconds) {
  if (isNaN(seconds) || seconds < 0) return '0:00';
 
  const hours = Math.floor(seconds / 3600);
@@ -6963,7 +7066,7 @@ updateTimeDisplay() {
  return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  }
  return `${minutes}:${secs.toString().padStart(2, '0')}`;
- }
+}
 
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myetv-player",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "MYETV Video Player - Modular HTML5 video player with plugin support for YouTube, Vimeo, Twitch, Facebook, and streaming protocols (HLS/DASH)",
   "main": "dist/myetv-player.js",
   "files": [
@@ -58,3 +58,5 @@
   "homepage": "https://oskarcosimo.com/myetv-video-player/myetv-player-demo.html"
 }
 
+
+