myetv-player 1.7.0 → 1.7.2

package/dist/myetv-player.min.js

@@ -629,6 +629,9 @@ constructor(videoElement, options = {}) {
  showPictureInPicture: true, // Enable PiP button
  showSubtitles: true, // Enable subtitles button
  subtitlesEnabled: false, // Enable subtitles by default if available
+ externalSubtitleTracks: [],// external subtitles track from url
+ externalSubtitleLabel: 'Default Subtitles', //label for the subtitle track url
+ externalSubtitleLang: 'en', // language of the subtitles track url
  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)
@@ -655,6 +658,7 @@ constructor(videoElement, options = {}) {
  brandLogoUrl: '', // URL for brand logo image
  brandLogoLinkUrl: '', // Optional URL to open when clicking the logo
  brandLogoTooltipText: '', // Tooltip text for brand logo
+ loadingLogo: null, // URL image to show inside the loading circle
  playlistEnabled: true, // Enable/disable playlist detection
  playlistAutoPlay: true, // Auto-play next video when current ends
  playlistLoop: false, // Loop playlist when reaching the end
@@ -780,8 +784,31 @@ constructor(videoElement, options = {}) {
  VideoPlayerTranslations.setLanguage(this.options.language);
  }
 
- if (options.autoplay) {
- this.video.autoplay = true;
+ this.savedAutoplayIntent = options.autoplay || false;
+ this.options.autoplay = false;
+
+ if (this.video) {
+ if (this.video.hasAttribute('autoplay')) {
+ this.savedAutoplayIntent = true;
+ this.video.removeAttribute('autoplay');
+ }
+
+ this.video.pause();
+ this.video.preload = 'none';
+
+ if (this.video.hasAttribute('poster')) {
+ this.savedPoster = this.video.getAttribute('poster');
+ this.video.setAttribute('poster', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
+ }
+
+ this.video.pause();
+ this.video.preload = 'none';
+
+ this.video.removeAttribute('src');
+ this.video.load();
+
+ this.video.style.opacity = '0';
+ this.video.style.visibility = 'hidden';
  }
 
  try {
@@ -871,17 +898,8 @@ constructor(videoElement, options = {}) {
  this.updateVolumeSliderVisual();
  this.initVolumeTooltip();
  this.updateTooltips();
- this.markPlayerReady();
- this.initializePluginSystem();
- this.restoreSourcesAsync();
 
- this.initializeSubtitles();
- this.initializeQualityMonitoring();
-
- this.initializeResolution();
- this.initializeChapters();
- this.initializePoster();
- this.initializeWatermark();
+ this.initializePluginSystem();
 
  } catch (error) {
  if (this.options.debug) console.error('Video player initialization error:', error);
@@ -1004,6 +1022,8 @@ interceptAutoLoading() {
 
  this.hideNativePlayer();
 
+ this.video.load();
+
  if (this.options.debug) console.log('📁 Sources temporarily disabled to prevent blocking');
 }
 
@@ -1166,6 +1186,7 @@ markPlayerReady() {
  this.video.style.visibility = '';
  this.video.style.opacity = '';
  this.video.style.pointerEvents = '';
+ this.video.style.display = '';
  }
 
  if (typeof this.updateSettingsMenuVisibility === 'function') {
@@ -1251,24 +1272,40 @@ createPlayerStructure() {
 createInitialLoading() {
  const initialLoader = document.createElement('div');
  initialLoader.className = 'initial-loading';
- initialLoader.innerHTML = '<div class="loading-spinner"></div><div class="loading-text"></div>';
+ initialLoader.innerHTML = `
+ <div class="loading-spinner-wrap">
+ <div class="loading-spinner"></div>
+ ${this.options.loadingLogo
+ ? `<img class="loading-spinner-logo" src="${this.options.loadingLogo}" alt="" />`
+ : ''}
+ </div>
+ <div class="loading-text"></div>
+ `;
  this.container.appendChild(initialLoader);
  this.initialLoading = initialLoader;
 }
 
-collectVideoQualities() {
- if (this.options.debug) console.log('📁 Video qualities will be loaded with restored sources');
-}
-
 createLoadingOverlay() {
  const overlay = document.createElement('div');
  overlay.className = 'loading-overlay';
- overlay.id = 'loadingOverlay-' + this.getUniqueId();
- overlay.innerHTML = '<div class="loading-spinner"></div><div class="loading-text"></div>';
+ overlay.id = `loadingOverlay-${this.getUniqueId()}`;
+ overlay.innerHTML = `
+ <div class="loading-spinner-wrap">
+ <div class="loading-spinner"></div>
+ ${this.options.loadingLogo
+ ? `<img class="loading-spinner-logo" src="${this.options.loadingLogo}" alt="" />`
+ : ''}
+ </div>
+ <div class="loading-text"></div>
+ `;
  this.container.appendChild(overlay);
  this.loadingOverlay = overlay;
 }
 
+collectVideoQualities() {
+ if (this.options.debug) console.log('📁 Video qualities will be loaded with restored sources');
+}
+
 updateTooltips() {
  if (!this.controls) return;
 
@@ -1850,6 +1887,12 @@ updateSeekTooltip(e) {
 }
 
 play() {
+ if (!this.isPlayerReady) {
+ this.savedAutoplayIntent = true;
+ if (this.options.debug) console.log('🛑 Play requested but player is booting. Intent saved for later.');
+ return Promise ? Promise.resolve() : undefined;
+ }
+
  if (!this.video || this.isChangingQuality) return;
 
  this.video.play().catch(err => {
@@ -1866,6 +1909,11 @@ play() {
 }
 
 pause() {
+ if (!this.isPlayerReady) {
+ this.savedAutoplayIntent = false;
+ return;
+ }
+
  if (!this.video) return;
 
  this.video.pause();
@@ -3962,6 +4010,48 @@ populateSettingsMenu() {
  settingsMenu.innerHTML = menuHTML;
 }
 
+updateSettingsMenuUI() {
+ const settingsMenu = this.container?.querySelector('.settings-menu');
+ if (!settingsMenu) return;
+
+ if (this.options.showSubtitles) {
+ const subtitlesTrigger = settingsMenu.querySelector('[data-action="subtitles_expand"]');
+
+ if (subtitlesTrigger) {
+
+ const label = subtitlesTrigger.querySelector('.settings-option-label');
+ if (label) {
+ const subtitlesLabel = this.t('subtitles') || 'Subtitles';
+ const currentTrack = this.currentSubtitleTrack;
+
+ let currentLabelText = this.t('subtitlesoff') || 'Off';
+ if (this.subtitlesEnabled && currentTrack) {
+ currentLabelText = currentTrack.label || 'Unknown';
+ }
+
+ label.innerHTML = `${subtitlesLabel} <strong>${currentLabelText}</strong>`;
+ }
+
+ const submenuContent = subtitlesTrigger.nextElementSibling;
+ if (submenuContent && submenuContent.classList.contains('settings-expandable-content')) {
+ submenuContent.querySelectorAll('.settings-suboption').forEach(opt => {
+ const trackData = opt.getAttribute('data-track');
+ opt.classList.remove('active');
+
+ if (trackData === 'off' && !this.subtitlesEnabled) {
+ opt.classList.add('active');
+ } else if (this.subtitlesEnabled && trackData !== 'off') {
+ const trackIndex = parseInt(trackData);
+ if (this.textTracks[trackIndex] && this.textTracks[trackIndex].track === this.currentSubtitleTrack) {
+ opt.classList.add('active');
+ }
+ }
+ });
+ }
+ }
+ }
+}
+
 addSettingsMenuScrollbar() {
  const settingsMenu = this.controls?.querySelector('.settings-menu');
  if (!settingsMenu) return;
@@ -5517,6 +5607,31 @@ createCustomSubtitleOverlay() {
  if (this.options.debug) console.log('✅ Custom subtitle overlay created with responsive settings');
 }
 
+parseTimeToSecondsUniversal(timeString) {
+ if (!timeString) return 0;
+
+ let normalized = timeString.replace(',', '.');
+ let parts = normalized.split('.');
+
+ let timeParts = parts[0].split(':');
+ let ms = parts[1] ? parseInt(parts[1], 10) / 1000 : 0;
+
+ let hours = 0, minutes = 0, seconds = 0;
+
+ if (timeParts.length === 3) {
+
+ hours = parseInt(timeParts[0], 10);
+ minutes = parseInt(timeParts[1], 10);
+ seconds = parseInt(timeParts[2], 10);
+ } else if (timeParts.length === 2) {
+
+ minutes = parseInt(timeParts[0], 10);
+ seconds = parseInt(timeParts[1], 10);
+ }
+
+ return (hours * 3600) + (minutes * 60) + seconds + ms;
+}
+
 customTimeToSeconds(timeString) {
  if (!timeString) return 0;
 
@@ -5542,6 +5657,31 @@ customTimeToSeconds(timeString) {
  return hours * 3600 + minutes * 60 + seconds + milliseconds / 1000;
 }
 
+parseTimeToSecondsUniversal(timeString) {
+ if (!timeString) return 0;
+
+ const normalized = timeString.replace(',', '.');
+ const parts = normalized.split('.');
+
+ const timeParts = parts[0].split(':');
+ const ms = parts[1] ? parseInt(parts[1], 10) / 1000 : 0;
+
+ let hours = 0, minutes = 0, seconds = 0;
+
+ if (timeParts.length === 3) {
+
+ hours = parseInt(timeParts[0], 10);
+ minutes = parseInt(timeParts[1], 10);
+ seconds = parseInt(timeParts[2], 10);
+ } else if (timeParts.length === 2) {
+
+ minutes = parseInt(timeParts[0], 10);
+ seconds = parseInt(timeParts[1], 10);
+ }
+
+ return (hours * 3600) + (minutes * 60) + seconds + ms;
+}
+
 parseCustomSRT(srtText) {
  var subtitles = [];
  var normalizedText = srtText.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
@@ -5575,6 +5715,57 @@ parseCustomSRT(srtText) {
  return subtitles;
 }
 
+injectExternalSubtitleTracks(tracksArray) {
+
+ if (!this.video || !Array.isArray(tracksArray) || tracksArray.length === 0) return;
+
+ this.video.crossOrigin = "anonymous";
+ let loadedCount = 0;
+
+ tracksArray.forEach(trackData => {
+ const trackEl = document.createElement('track');
+ trackEl.kind = 'subtitles';
+ trackEl.label = trackData.label;
+ trackEl.srclang = trackData.lang;
+ trackEl.src = trackData.src;
+
+ if (trackData.default) {
+ trackEl.default = true;
+ trackEl.setAttribute('default', 'default');
+ trackEl.setAttribute('data-default', 'true');
+ }
+
+ trackEl.addEventListener('load', () => {
+ if (trackEl.track) {
+
+ trackEl.track.mode = trackData.default ? 'showing' : 'hidden';
+ }
+
+ loadedCount++;
+
+ if (loadedCount === tracksArray.length) {
+ console.log(`MYETV Player: ${loadedCount} external subtitle tracks loaded.`);
+
+ if (typeof this.initializeSubtitles === 'function') {
+ this.initializeSubtitles();
+ } else if (typeof this.initializeCustomSubtitles === 'function') {
+ this.initializeCustomSubtitles();
+ } else if (typeof this.loadCustomSubtitleTracks === 'function') {
+ this.loadCustomSubtitleTracks();
+ }
+ }
+ });
+
+ trackEl.addEventListener('error', () => {
+ console.warn(`MYETV Player: Failed to load track ${trackData.lang}`);
+
+ loadedCount++;
+ });
+
+ this.video.appendChild(trackEl);
+ });
+}
+
 loadCustomSubtitleTracks() {
  var self = this;
  var tracks = this.video.querySelectorAll('track[kind="subtitles"]');
@@ -5585,6 +5776,8 @@ loadCustomSubtitleTracks() {
  var label = track.getAttribute('label') || 'Unknown';
  var srclang = track.getAttribute('srclang') || '';
 
+ var isDefault = track.default || track.hasAttribute('default');
+
  var trackObj = {
  label: label,
  language: srclang,
@@ -5598,30 +5791,45 @@ loadCustomSubtitleTracks() {
  return response.text();
  })
  .then(function (srtText) {
+
  var normalizedText = srtText.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+
  var blocks = normalizedText.trim().split('\n\n');
 
  for (var i = 0; i < blocks.length; i++) {
  var block = blocks[i].trim();
- if (!block) continue;
+ if (!block || block.toUpperCase().startsWith('WEBVTT')) continue;
+
  var lines = block.split('\n');
+ var timeMatch = null;
+ var textLines = [];
 
- if (lines.length >= 3) {
- var timeLine = lines[1].trim();
- var timeMatch = timeLine.match(/(\d{2}:\d{2}:\d{2},\d{3})\s*-->\s*(\d{2}:\d{2}:\d{2},\d{3})/);
+ for (var j = 0; j < lines.length; j++) {
+ var line = lines[j].trim();
 
- if (timeMatch) {
- var startParts = timeMatch[1].split(',');
- var startTimeParts = startParts[0].split(':');
- var startTime = parseInt(startTimeParts[0], 10) * 3600 + parseInt(startTimeParts[1], 10) * 60 + parseInt(startTimeParts[2], 10) + parseInt(startParts[1], 10) / 1000;
+ if (!timeMatch) {
+ var match = line.match(/(\d{2,}:\d{2}:\d{2}[.,]\d{3}|\d{2}:\d{2}[.,]\d{3})\s*-->\s*(\d{2,}:\d{2}:\d{2}[.,]\d{3}|\d{2}:\d{2}[.,]\d{3})/);
+ if (match) {
+ timeMatch = match;
+ continue;
+ }
+ }
 
- var endParts = timeMatch[2].split(',');
- var endTimeParts = endParts[0].split(':');
- var endTime = parseInt(endTimeParts[0], 10) * 3600 + parseInt(endTimeParts[1], 10) * 60 + parseInt(endTimeParts[2], 10) + parseInt(endParts[1], 10) / 1000;
+ if (!timeMatch && /^\d+$/.test(line)) {
+ continue;
+ }
 
- var text = lines.slice(2).join('\n').trim().replace(/<[^>]*>/g, '');
+ if (timeMatch) {
+ textLines.push(line);
+ }
+ }
 
- if (text && text.length > 0 && !isNaN(startTime) && !isNaN(endTime) && startTime < endTime) {
+ if (timeMatch && textLines.length > 0) {
+ var startTime = self.parseTimeToSecondsUniversal(timeMatch[1]);
+ var endTime = self.parseTimeToSecondsUniversal(timeMatch[2]);
+ var text = textLines.join('\n').trim().replace(/<[^>]*>/g, '');
+
+ if (text && !isNaN(startTime) && !isNaN(endTime) && startTime < endTime) {
  trackObj.subtitles.push({
  start: startTime,
  end: endTime,
@@ -5630,11 +5838,26 @@ loadCustomSubtitleTracks() {
  }
  }
  }
+
+ if (self.options.debug) {
+ console.log('✅ Custom parser loaded ' + trackObj.subtitles.length + ' subtitles for ' + label);
  }
 
+ var isDefault = track.default || track.hasAttribute('default') || track.getAttribute('data-default') === 'true';
+
+ if (isDefault) {
+ if (self.options.debug) {
+ console.log('⏳ Waiting 500ms for UI alignment... track:', label);
+ }
+
+ setTimeout(function () {
  if (self.options.debug) {
- console.log('✅ Loaded ' + trackObj.subtitles.length + ' subtitles for ' + label);
+ console.log('🎯 Forced auto-enable triggered now!');
  }
+ self.enableSubtitleTrack(index);
+ }, 500); // 500 milliseconds of delay
+ }
+
  })
  .catch(function (error) {
  console.error('❌ Error loading ' + label + ':', error);
@@ -5758,14 +5981,18 @@ enableSubtitleTrack(trackIndex) {
  this.subtitlesEnabled = true;
 
  if (this.video.textTracks && this.video.textTracks[trackIndex]) {
- this.video.textTracks[trackIndex].mode = 'disabled'; // Keep native disabled
+ this.video.textTracks[trackIndex].mode = 'disabled';
  }
 
  this.updateSubtitlesButton();
  this.populateSubtitlesMenu();
 
+ if (typeof this.updateSettingsMenuUI === 'function') {
+ this.updateSettingsMenuUI();
+ }
+
  if (this.options.debug) {
- console.log('✅ Custom subtitles enabled:', this.textTracks[trackIndex].label);
+ console.log('✅ Custom UI subtitles strictly enforced for track', trackIndex);
  }
 
  this.triggerEvent('subtitlechange', {
@@ -5774,10 +6001,6 @@ enableSubtitleTrack(trackIndex) {
  trackLabel: this.textTracks[trackIndex].label,
  trackLanguage: this.textTracks[trackIndex].language
  });
- } else {
- if (this.options.debug) {
- console.error('❌ Failed to enable custom subtitles for track', trackIndex);
- }
  }
 }
 
@@ -5791,6 +6014,10 @@ disableSubtitles() {
  this.updateSubtitlesButton();
  this.populateSubtitlesMenu();
 
+ if (typeof this.updateSettingsMenuUI === 'function') {
+ this.updateSettingsMenuUI();
+ }
+
  if (this.options.debug) console.log('📝 Subtitles disabled');
 
  this.triggerEvent('subtitlechange', {
@@ -7693,35 +7920,86 @@ setDashQuality(qualityIndex) {
  return this;
  }
 
-initializePluginSystem() {
- this.plugins = {};
+ initializePluginSystem() {
+ this.plugins = {};
  this.pluginHooks = {
- 'beforeInit': [],
- 'afterInit': [],
- 'beforePlay': [],
- 'afterPlay': [],
- 'beforePause': [],
- 'afterPause': [],
- 'beforeQualityChange': [],
- 'afterQualityChange': [],
- 'beforeDestroy': [],
- 'afterDestroy': []
+ 'beforeInit': [], 'afterInit': [], 'beforePlay': [], 'afterPlay': [],
+ 'beforePause': [], 'afterPause': [], 'beforeQualityChange': [], 
+ 'afterQualityChange': [], 'beforeDestroy': [], 'afterDestroy': []
  };
 
- if (this.options.debug) {
- console.log('🔌 Plugin system initialized');
- }
+ if (this.options.debug) console.log('🔌 Plugin system initialized');
  if (this.options.plugins && typeof this.options.plugins === 'object') {
- this.loadPlugins(this.options.plugins);
+ this.loadPluginsSequentially(this.options.plugins);
+ } else {
+ this.finalizePlayerSetup();
+ }
+ }
+
+ async loadPluginsSequentially(pluginsConfig) {
+ const pluginList = Object.keys(pluginsConfig).map(pluginName => {
+ return {
+ name: pluginName,
+ config: pluginsConfig[pluginName],
+ order: pluginsConfig[pluginName] && pluginsConfig[pluginName].order !== undefined
+ ? pluginsConfig[pluginName].order : 99
+ };
+ }).sort((a, b) => a.order - b.order);
+ for (const pluginData of pluginList) {
+ if (this.options.debug) console.log(`🔌 Loading plugin: ${pluginData.name} (order: ${pluginData.order})`);
+ const pluginInstance = this.usePlugin(pluginData.name, pluginData.config);
+ if (pluginInstance && typeof pluginInstance.waitForCompletion === 'function') {
+ if (this.options.debug) console.log(`🔌 Pausing queue. Waiting for ${pluginData.name} to complete...`);
+ await pluginInstance.waitForCompletion();
+ if (this.options.debug) console.log(`🔌 ${pluginData.name} completed. Resuming queue.`);
  }
+ }
+ this.finalizePlayerSetup();
 }
 
-loadPlugins(pluginsConfig) {
- for (const pluginName in pluginsConfig) {
- if (pluginsConfig.hasOwnProperty(pluginName)) {
- const pluginOptions = pluginsConfig[pluginName];
- this.usePlugin(pluginName, pluginOptions);
+finalizePlayerSetup() {
+ if (this.options.debug) {
+ console.log('🚀 Finalizing main player setup...');
+ }
+ if (this.savedAutoplayIntent) {
+ this.options.autoplay = true;
+ }
+ this.markPlayerReady();
+
+ this.restoreSourcesAsync();
+ this.initializeSubtitles();
+ this.initializeQualityMonitoring();
+ this.initializeResolution();
+ this.initializeChapters();
+ const hasExternalIframe = this.options.plugins && (
+ this.options.plugins.youtube ||
+ this.options.plugins.vimeo ||
+ this.options.plugins.twitch
+ );
+
+ if (!hasExternalIframe) {
+ this.initializePoster();
+ }
+
+ this.initializeWatermark();
+ if (this.options.externalSubtitleTracks && this.options.externalSubtitleTracks.length > 0) {
+ this.injectExternalSubtitleTracks(this.options.externalSubtitleTracks);
+ }
+ if (this.savedAutoplayIntent) {
+ if (this.options.debug) console.log('🚀 Triggering delayed autoplay...');
+
+ if (this.video) {
+ this.video.setAttribute('autoplay', '');
+ this.video.style.opacity = '1';
+ this.video.style.visibility = '';
  }
+
+ setTimeout(() => {
+ this.play();
+ }, 300);
+ } else if (this.video) {
+ this.video.style.opacity = '1';
+ this.video.style.visibility = '';
  }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myetv-player",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "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": [
@@ -71,3 +71,4 @@
 
 
 
+