myetv-player 1.7.1 → 1.7.2

package/dist/myetv-player.js

@@ -674,6 +674,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)
@@ -841,9 +844,33 @@ constructor(videoElement, options = {}) {
     if (this.options.language && this.isI18nAvailable()) {
         VideoPlayerTranslations.setLanguage(this.options.language);
     }
-    // Apply autoplay if enabled
-    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');
+        }
+
+        // Physically stop the browser engine from pre-loading and playing
+        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 {
@@ -935,17 +962,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);
@@ -1078,6 +1096,8 @@ interceptAutoLoading() {
 
     this.hideNativePlayer();
 
+    this.video.load();
+
     if (this.options.debug) console.log('📁 Sources temporarily disabled to prevent blocking');
 }
 
@@ -1246,6 +1266,7 @@ markPlayerReady() {
             this.video.style.visibility = '';
             this.video.style.opacity = '';
             this.video.style.pointerEvents = '';
+            this.video.style.display = '';
         }
 
         // UPDATE SETTINGS MENU VISIBILITY IF APPLICABLE
@@ -2030,6 +2051,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 => {
@@ -2039,7 +2066,6 @@ play() {
     if (this.playIcon) this.playIcon.classList.add('hidden');
     if (this.pauseIcon) this.pauseIcon.classList.remove('hidden');
 
-    // Trigger event played
     this.triggerEvent('played', {
         currentTime: this.getCurrentTime(),
         duration: this.getDuration()
@@ -2047,6 +2073,11 @@ play() {
 }
 
 pause() {
+    if (!this.isPlayerReady) {
+        this.savedAutoplayIntent = false;
+        return;
+    }
+
     if (!this.video) return;
 
     this.video.pause();
@@ -4416,6 +4447,53 @@ populateSettingsMenu() {
     settingsMenu.innerHTML = menuHTML;
 }
 
+/**
+     * Updates specific UI elements inside the settings menu 
+     * without recreating the entire DOM (prevents accordions from closing)
+     */
+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) {
+            // 1. Update the label text (e.g. "Subtitles: English")
+            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>`;
+            }
+
+            // 2. Update the "active" classes in the dropdown list
+            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');
+                        }
+                    }
+                });
+            }
+        }
+    }
+}
+
 /**
  * Add scrollbar to settings menu on mobile
  */
@@ -6097,6 +6175,33 @@ createCustomSubtitleOverlay() {
     if (this.options.debug) console.log('✅ Custom subtitle overlay created with responsive settings');
 }
 
+// Universal time parser for both SRT (00:00:00,000) and VTT (00:00.000)
+parseTimeToSecondsUniversal(timeString) {
+    if (!timeString) return 0;
+
+    // Normalize comma to dot for consistency
+    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) {
+        // SRT Format: HH:MM:SS
+        hours = parseInt(timeParts[0], 10);
+        minutes = parseInt(timeParts[1], 10);
+        seconds = parseInt(timeParts[2], 10);
+    } else if (timeParts.length === 2) {
+        // VTT Short Format: MM:SS
+        minutes = parseInt(timeParts[0], 10);
+        seconds = parseInt(timeParts[1], 10);
+    }
+
+    return (hours * 3600) + (minutes * 60) + seconds + ms;
+}
+
 customTimeToSeconds(timeString) {
     if (!timeString) return 0;
 
@@ -6122,6 +6227,33 @@ customTimeToSeconds(timeString) {
     return hours * 3600 + minutes * 60 + seconds + milliseconds / 1000;
 }
 
+// Universal time parser for both SRT (00:00:00,000) and VTT (00:00.000)
+parseTimeToSecondsUniversal(timeString) {
+    if (!timeString) return 0;
+
+    // Normalize comma to dot for consistency
+    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) {
+        // Full format: HH:MM:SS
+        hours = parseInt(timeParts[0], 10);
+        minutes = parseInt(timeParts[1], 10);
+        seconds = parseInt(timeParts[2], 10);
+    } else if (timeParts.length === 2) {
+        // Short format (common in VTT): MM:SS
+        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');
@@ -6155,6 +6287,63 @@ parseCustomSRT(srtText) {
     return subtitles;
 }
 
+// Method to inject multiple external subtitle tracks
+injectExternalSubtitleTracks(tracksArray) {
+    // Check if video exists and if tracksArray is actually an array
+    if (!this.video || !Array.isArray(tracksArray) || tracksArray.length === 0) return;
+
+    this.video.crossOrigin = "anonymous";
+    let loadedCount = 0;
+
+    // Loop through each track object in the array
+    tracksArray.forEach(trackData => {
+        const trackEl = document.createElement('track');
+        trackEl.kind = 'subtitles';
+        trackEl.label = trackData.label;
+        trackEl.srclang = trackData.lang;
+        trackEl.src = trackData.src;
+
+        // Set default if specified in the JSON
+        if (trackData.default) {
+            trackEl.default = true;
+            trackEl.setAttribute('default', 'default');
+            trackEl.setAttribute('data-default', 'true');
+        }
+
+        // Listen for the load event on EACH track
+        trackEl.addEventListener('load', () => {
+            if (trackEl.track) {
+                // Only show the default one, keep others hidden but ready
+                trackEl.track.mode = trackData.default ? 'showing' : 'hidden';
+            }
+
+            loadedCount++;
+
+            // Re-initialize UI ONLY when ALL tracks have finished loading
+            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}`);
+            // Increment anyway so we don't block the UI initialization
+            loadedCount++;
+        });
+
+        // Append to DOM
+        this.video.appendChild(trackEl);
+    });
+}
+
 loadCustomSubtitleTracks() {
     var self = this;
     var tracks = this.video.querySelectorAll('track[kind="subtitles"]');
@@ -6165,7 +6354,8 @@ loadCustomSubtitleTracks() {
         var label = track.getAttribute('label') || 'Unknown';
         var srclang = track.getAttribute('srclang') || '';
 
-        // CREA L'OGGETTO PRIMA E AGGIUNGILO SUBITO
+        var isDefault = track.default || track.hasAttribute('default');
+
         var trackObj = {
             label: label,
             language: srclang,
@@ -6179,43 +6369,83 @@ loadCustomSubtitleTracks() {
                 return response.text();
             })
             .then(function (srtText) {
+                // Normalize newlines
                 var normalizedText = srtText.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+
+                // Split into blocks by double newline
                 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 = [];
+
+                    for (var j = 0; j < lines.length; j++) {
+                        var line = lines[j].trim();
+
+                        // Regex matches both SRT and VTT formats (with or without hours, dot or comma)
+                        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;
+                            }
+                        }
 
-                    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})/);
+                        // Skip numeric IDs common in SRT files
+                        if (!timeMatch && /^\d+$/.test(line)) {
+                            continue;
+                        }
 
+                        // Everything after the timestamp is the actual subtitle text
                         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;
-
-                            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;
-
-                            var text = lines.slice(2).join('\n').trim().replace(/<[^>]*>/g, '');
-
-                            if (text && text.length > 0 && !isNaN(startTime) && !isNaN(endTime) && startTime < endTime) {
-                                trackObj.subtitles.push({
-                                    start: startTime,
-                                    end: endTime,
-                                    text: text
-                                });
-                            }
+                            textLines.push(line);
+                        }
+                    }
+
+                    // Store the parsed subtitle block
+                    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,
+                                text: text
+                            });
                         }
                     }
                 }
 
                 if (self.options.debug) {
-                    console.log('✅ Loaded ' + trackObj.subtitles.length + ' subtitles for ' + label);
+                    console.log('✅ Custom parser loaded ' + trackObj.subtitles.length + ' subtitles for ' + label);
+                }
+
+                // =========================================================
+                // AUTO-ENABLE SUBTITLES
+                // =========================================================
+                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);
+                    }
+
+                    // Delay execution to ensure the player has finished 
+                    // building the menu and populating this.textTracks array!
+                    setTimeout(function () {
+                        if (self.options.debug) {
+                            console.log('🎯 Forced auto-enable triggered now!');
+                        }
+                        self.enableSubtitleTrack(index);
+                    }, 500); // 500 milliseconds of delay
                 }
+
             })
             .catch(function (error) {
                 console.error('❌ Error loading ' + label + ':', error);
@@ -6334,39 +6564,38 @@ detectTextTracks() {
 enableSubtitleTrack(trackIndex) {
     if (trackIndex < 0 || trackIndex >= this.textTracks.length) return;
 
-    // Disable all tracks first
+    // 1. Disable all tracks first to prevent overlapping
     this.disableAllTracks();
 
-    // Enable ONLY the custom subtitle system (not native browser)
+    // 2. Enable ONLY the custom WebView-safe subtitle system
     var success = this.enableCustomSubtitleTrack(trackIndex);
 
     if (success) {
         this.currentSubtitleTrack = this.textTracks[trackIndex].track;
         this.subtitlesEnabled = true;
 
-        // Make sure native tracks stay DISABLED
+        // 3. Kill the native browser track to avoid double rendering or crashes
         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);
         }
 
-        // Trigger subtitle change event
         this.triggerEvent('subtitlechange', {
             enabled: true,
             trackIndex: 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);
-        }
     }
 }
 
@@ -6380,6 +6609,11 @@ disableSubtitles() {
     this.updateSubtitlesButton();
     this.populateSubtitlesMenu();
 
+    // 👉 L'AGGIUNTA FONDAMENTALE: Sincronizza il menu Settings!
+    if (typeof this.updateSettingsMenuUI === 'function') {
+        this.updateSettingsMenuUI();
+    }
+
     if (this.options.debug) console.log('📝 Subtitles disabled');
 
     this.triggerEvent('subtitlechange', {
@@ -8634,48 +8868,123 @@ setDashQuality(qualityIndex) {
 // CLASS METHODS - Will be placed INSIDE the class
 // ===================================================================
 
-/**
- * Initialize plugin system for player instance
- * This method should be called in the player constructor
- */
-initializePluginSystem() {
-    // Plugin instances storage
-    this.plugins = {};
-
-    // Plugin hooks for lifecycle events
-    this.pluginHooks = {
-        'beforeInit': [],
-        'afterInit': [],
-        'beforePlay': [],
-        'afterPlay': [],
-        'beforePause': [],
-        'afterPause': [],
-        'beforeQualityChange': [],
-        'afterQualityChange': [],
-        'beforeDestroy': [],
-        'afterDestroy': []
-    };
+    /**
+     * Initialize plugin system for player instance
+     */
+    initializePluginSystem() {
+        this.plugins = {};
+        this.pluginHooks = {
+            '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');
+
+        // Load plugins sequentially if present, otherwise finalize player immediately
+        if (this.options.plugins && typeof this.options.plugins === 'object') {
+            this.loadPluginsSequentially(this.options.plugins);
+        } else {
+            this.finalizePlayerSetup();
+        }
     }
 
-    // Load plugins specified in options
-    if (this.options.plugins && typeof this.options.plugins === 'object') {
-        this.loadPlugins(this.options.plugins);
+    /**
+     * Loads plugins one by one based on their 'order' option.
+     * Prevents any plugin from loading until the previous blocking plugin finishes.
+     * @param {Object} pluginsConfig 
+     */
+    async loadPluginsSequentially(pluginsConfig) {
+    // 1. Sort plugins by order (default 99 means load last)
+    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);
+
+    // 2. Process each plugin sequentially
+    for (const pluginData of pluginList) {
+        if (this.options.debug) console.log(`🔌 Loading plugin: ${pluginData.name} (order: ${pluginData.order})`);
+
+        // Instantiate the plugin NOW (plugins with higher order do not exist yet)
+        const pluginInstance = this.usePlugin(pluginData.name, pluginData.config);
+
+        // If the plugin has an async barrier, pause the ENTIRE loop
+        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.`);
+        }
     }
+
+    // 3. All plugins processed. Now we can safely boot the main HTML5 player
+    this.finalizePlayerSetup();
 }
 
-/**
- * Load multiple plugins from options
- * @param {Object} pluginsConfig - Object with plugin names as keys and options as values
- */
-loadPlugins(pluginsConfig) {
-    for (const pluginName in pluginsConfig) {
-        if (pluginsConfig.hasOwnProperty(pluginName)) {
-            const pluginOptions = pluginsConfig[pluginName];
-            this.usePlugin(pluginName, pluginOptions);
+    /**
+     * Boots up the core HTML5 player features after all blocking plugins have finished.
+     * This function ensures that the main player components (like poster, sources, and watermark)
+     * are initialized only after the plugin queue (including the loader) is fully resolved.
+     */
+finalizePlayerSetup() {
+    if (this.options.debug) {
+        console.log('🚀 Finalizing main player setup...');
+    }
+
+    // Restore the autoplay intent BEFORE initializing the poster.
+    // This ensures initializePoster() knows we are autoplaying and won't flash the image.
+    if (this.savedAutoplayIntent) {
+        this.options.autoplay = true;
+    }
+
+    // Trigger the global 'playerready' event.
+    // Firing it ONLY NOW guarantees that third-party plugins (like YouTube) 
+    // safely instantiate their iframes only after the loader has finished its countdown.
+    this.markPlayerReady();
+
+    this.restoreSourcesAsync();
+    this.initializeSubtitles();
+    this.initializeQualityMonitoring();
+    this.initializeResolution();
+    this.initializeChapters();
+
+    // Prevent the final poster flash if a third-party iframe (YouTube/Vimeo/Twitch) is active.
+    const hasExternalIframe = this.options.plugins && (
+        this.options.plugins.youtube ||
+        this.options.plugins.vimeo ||
+        this.options.plugins.twitch
+    );
+
+    if (!hasExternalIframe) {
+        this.initializePoster();
+    }
+
+    this.initializeWatermark();
+
+    // Check if external subtitle tracks were provided and the array is not empty
+    if (this.options.externalSubtitleTracks && this.options.externalSubtitleTracks.length > 0) {
+        this.injectExternalSubtitleTracks(this.options.externalSubtitleTracks);
+    }
+
+    // 🚀 Restore Autoplay ONLY AFTER everything is fully loaded and the queue is unlocked
+    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 = '';
     }
 }