myetv-player 1.6.1 → 1.6.3

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);
@@ -1204,12 +1222,13 @@ createPlayerStructure() {
  if (this.options.showTitleOverlay) {
  this.createTitleOverlay();
  }
+ this.createTopBar();
 }
 
 createInitialLoading() {
  const initialLoader = document.createElement('div');
  initialLoader.className = 'initial-loading';
- initialLoader.innerHTML = '<div class="loading-spinner"></div>';
+ initialLoader.innerHTML = '<div class="loading-spinner"></div><div class="loading-text"></div>';
  this.container.appendChild(initialLoader);
  this.initialLoading = initialLoader;
 }
@@ -1222,7 +1241,7 @@ createLoadingOverlay() {
  const overlay = document.createElement('div');
  overlay.className = 'loading-overlay';
  overlay.id = 'loadingOverlay-' + this.getUniqueId();
- overlay.innerHTML = '<div class="loading-spinner"></div>';
+ overlay.innerHTML = '<div class="loading-spinner"></div><div class="loading-text"></div>';
  this.container.appendChild(overlay);
  this.loadingOverlay = overlay;
 }
@@ -1261,17 +1280,25 @@ 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);
  }
 }
 
@@ -1418,6 +1445,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 +1525,69 @@ setupMenuToggles() {
  }
 }
 
+createTopBar() {
+ if (!this.container) return;
+
+ const topBar = document.createElement('div');
+ topBar.className = 'player-top-bar';
+ 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);
+ 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);
+ }
+
+ topBar.appendChild(titleSection);
+ } else {
+
+ const spacer = document.createElement('div');
+ spacer.className = 'top-bar-spacer';
+ topBar.appendChild(spacer);
+ }
+
+ 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
+
+ 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);
+
+ 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');
+ }
+}
+
 restartVideo() {
  if (!this.video) return this;
 
@@ -1801,6 +1894,17 @@ updateProgress() {
  }
 }
 
+updateLoadingText(text) {
+ if (this.initialLoading) {
+ const textEl = this.initialLoading.querySelector('.loading-text');
+ if (textEl) textEl.textContent = text;
+ }
+ if (this.loadingOverlay) {
+ const textEl = this.loadingOverlay.querySelector('.loading-text');
+ if (textEl) textEl.textContent = text;
+ }
+}
+
 updateBuffer() {
  if (!this.video || !this.progressBuffer) return;
 
@@ -2595,12 +2699,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();
@@ -3050,31 +3172,33 @@ 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;
  }
 
- 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('Video paused but at start - allowing timer (autoplay blocked scenario)');
  }
+ }
+
+ this.autoHideTimer = setTimeout(() => {
+ 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)`);
 }
 
 showControlsNow() {
@@ -3097,7 +3221,7 @@ showControlsNow() {
 
  this.showCursor();
 
- if (this.autoHideDebug && this.options.debug) console.log('✅ Controls shown');
+ if (this.autoHideDebug && this.options.debug) console.log('Controls shown');
  }
 }
 
@@ -3133,7 +3257,7 @@ hideControlsNow() {
 
  this.hideCursor();
 
- if (this.autoHideDebug && this.options.debug) console.log('✅ Controls hidden');
+ if (this.autoHideDebug && this.options.debug) console.log('Controls hidden');
  }
 }
 
@@ -3377,10 +3501,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">
@@ -3391,13 +3514,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">
@@ -3508,7 +3624,9 @@ checkScreenSize() {
 }
 
 updateSettingsMenuVisibility() {
- const settingsControl = this.controls?.querySelector('.settings-control');
+
+ const settingsControl = this.container?.querySelector('.settings-control');
+
  if (!settingsControl) return;
 
  settingsControl.style.display = 'block';
@@ -3517,23 +3635,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;">`;
 
@@ -3542,22 +3665,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;
@@ -3620,8 +3747,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) => {
@@ -3629,27 +3758,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';
  }
  });
 
@@ -3689,7 +3821,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;
@@ -3700,12 +3832,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();
@@ -3720,7 +3852,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>`;
  }
  }
  }
@@ -7515,7 +7647,6 @@ skipTime(seconds) {
 }
 
 updateTimeDisplay() {
-
  if (this.currentTimeEl && this.video) {
  this.currentTimeEl.textContent = this.formatTime(this.video.currentTime || 0);
  }
@@ -7526,25 +7657,44 @@ updateTimeDisplay() {
  const currentTime = this.video.currentTime;
  const networkState = this.video.networkState;
 
- const isInitialBuffering = (readyState < 2 && currentTime === 0) ||
- (currentTime === 0 && (!duration || duration === 0) && networkState === 2);
+ const isInitialBuffering = (readyState < 2 && currentTime === 0) || (currentTime === 0 && !duration) || (duration === 0 && networkState === 2);
 
  const isDurationInvalid = !duration || isNaN(duration) || !isFinite(duration);
 
+ const t = (key) => {
+ if (this.isI18nAvailable()) {
+ try {
+ return VideoPlayerTranslations.t(key);
+ } catch (error) {
+ return key;
+ }
+ }
+ const fallback = {
+ 'loading': 'Loading...'
+ };
+ return fallback[key] || key;
+ };
+
  if (isInitialBuffering) {
 
- this.durationEl.textContent = t('loading');
+ this.updateLoadingText(t('loading'));
+ this.durationEl.textContent = this.formatTime(0); // Just show 00:00 or empty
  this.durationEl.classList.remove('encoding-state');
  this.durationEl.classList.add('loading-state');
  } else if (isDurationInvalid) {
 
- this.durationEl.textContent = t('encoding_in_progress');
+ this.updateLoadingText(t('loading'));
+
+ this.durationEl.textContent = "--:--";
+
  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', 'loading-state');
+
+ this.updateLoadingText('');
  }
  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myetv-player",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "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": [
@@ -62,3 +62,5 @@
 
 
 
+
+