myetv-player 1.1.1 → 1.1.3

package/dist/myetv-player.js

@@ -466,7 +466,6 @@ constructor(videoElement, options = {}) {
     this.currentQualityIndex = 0;
     this.qualities = [];
     this.originalSources = [];
-        this.setupMenuToggles(); // Initialize menu toggle system
     this.isPiPSupported = this.checkPiPSupport();
     this.seekTooltip = null;
     this.titleOverlay = null;
@@ -578,6 +577,7 @@ constructor(videoElement, options = {}) {
         this.interceptAutoLoading();
         this.createPlayerStructure();
         this.initializeElements();
+        this.setupMenuToggles(); // Initialize menu toggle system
         // audio player adaptation
         this.adaptToAudioFile = function () {
             if (this.options.audiofile) {
@@ -1194,74 +1194,84 @@ initializeElements() {
     this.speedMenu = this.controls?.querySelector('.speed-menu');
     this.qualityMenu = this.controls?.querySelector('.quality-menu');
     this.subtitlesMenu = this.controls?.querySelector('.subtitles-menu');
+    // Apply seek handle shape from options
+    if (this.progressHandle && this.options.seekHandleShape) {
+        this.setSeekHandleShape(this.options.seekHandleShape);
+    }
 }
 
 // Generic method to close all active menus (works with plugins too)
 closeAllMenus() {
-    // Find all elements with class ending in '-menu' that have 'active' class
-    const allMenus = this.controls?.querySelectorAll('[class*="-menu"].active');
-    allMenus?.forEach(menu => {
-        menu.classList.remove('active');
-    });
+    if (!this.controls) return;
 
-    // Remove active state from all control buttons
-    const allButtons = this.controls?.querySelectorAll('.control-btn.active');
-    allButtons?.forEach(btn => {
-        btn.classList.remove('active');
-    });
+    const menus = this.controls.querySelectorAll('.speed-menu, .quality-menu, .subtitles-menu, .settings-menu');
+    const buttons = this.controls.querySelectorAll('.control-btn');
+
+    menus.forEach(menu => menu.classList.remove('active'));
+    buttons.forEach(btn => btn.classList.remove('active'));
+
+    this.currentOpenMenu = null;
+
+    if (this.options.debug) {
+        console.log('All menus closed');
+    }
 }
 
 // Generic menu toggle setup (works with core menus and plugin menus)
 setupMenuToggles() {
-    // Delegate click events to control bar for any button with associated menu
-    if (this.controls) {
-        this.controls.addEventListener('click', (e) => {
-            // Find if clicked element is a control button or inside one
-            const button = e.target.closest('.control-btn');
-
-            if (!button) return;
-
-            // Get button classes to find associated menu
-            const buttonClasses = button.className.split(' ');
-            let menuClass = null;
-
-            // Find if this button has an associated menu (e.g., speed-btn -> speed-menu)
-            for (const cls of buttonClasses) {
-                if (cls.endsWith('-btn')) {
-                    const menuName = cls.replace('-btn', '-menu');
-                    const menu = this.controls.querySelector('.' + menuName);
-                    if (menu) {
-                        menuClass = menuName;
-                        break;
-                    }
-                }
+    if (!this.controls) return;
+
+    this.currentOpenMenu = null;
+
+    this.controls.addEventListener('click', (e) => {
+        const button = e.target.closest('.control-btn');
+        if (!button) return;
+
+        const buttonClasses = Array.from(button.classList);
+        let menuElement = null;
+
+        for (const cls of buttonClasses) {
+            if (cls.endsWith('-btn')) {
+                const menuClass = cls.replace('-btn', '-menu');
+                menuElement = this.controls.querySelector(`.${menuClass}`);
+                if (menuElement) break;
             }
+        }
 
-            if (!menuClass) return;
+        if (!menuElement) return;
 
-            e.stopPropagation();
+        e.stopPropagation();
+        e.preventDefault();
 
-            // Get the menu element
-            const menu = this.controls.querySelector('.' + menuClass);
-            const isOpen = menu.classList.contains('active');
+        const isOpen = menuElement.classList.contains('active');
 
-            // Close all menus first
-            this.closeAllMenus();
+        this.closeAllMenus();
 
-            // If menu was closed, open it
-            if (!isOpen) {
-                menu.classList.add('active');
-                button.classList.add('active');
+        if (!isOpen) {
+            menuElement.classList.add('active');
+            button.classList.add('active');
+            this.currentOpenMenu = menuElement;
+            if (this.options.debug) {
+                console.log('Menu opened:', menuElement.className);
             }
-        });
-    }
+        } else {
+            this.currentOpenMenu = null;
+            if (this.options.debug) {
+                console.log('Menu closed:', menuElement.className);
+            }
+        }
+    });
 
-    // Close menus when clicking outside controls
     document.addEventListener('click', (e) => {
-        if (!this.controls?.contains(e.target)) {
+        if (!this.controls) return;
+        if (!this.controls.contains(e.target)) {
             this.closeAllMenus();
         }
     });
+
+    if (this.options.debug) {
+        console.log('✅ Menu toggle system initialized (click-based, auto-close)');
+    }
 }
 
 updateVolumeSliderVisual() {
@@ -1572,9 +1582,11 @@ updateBuffer() {
 }
 
 startSeeking(e) {
+    if (e.cancelable) e.preventDefault();
     if (this.isChangingQuality) return;
 
     this.isUserSeeking = true;
+    this.progressContainer.classList.add('seeking');
     this.seek(e);
     e.preventDefault();
 
@@ -1586,6 +1598,7 @@ startSeeking(e) {
 }
 
 continueSeeking(e) {
+    if (e.cancelable) e.preventDefault();
     if (this.isUserSeeking && !this.isChangingQuality) {
         this.seek(e);
     }
@@ -1593,9 +1606,13 @@ continueSeeking(e) {
 
 endSeeking() {
     this.isUserSeeking = false;
+    this.progressContainer.classList.remove('seeking');
 }
 
 seek(e) {
+    if (e.cancelable) {
+        e.preventDefault();
+    }
     if (!this.video || !this.progressContainer || !this.progressFilled || !this.progressHandle || this.isChangingQuality) return;
 
     const rect = this.progressContainer.getBoundingClientRect();
@@ -2016,7 +2033,7 @@ bindPosterEvents() {
     // Hide poster when video is loading/playing
     this.video.addEventListener('playing', () => {
         this.hidePoster();
-    });
+        });
 
     // Show poster on load if not autoplay
     if (!this.options.autoplay) {
@@ -2460,6 +2477,7 @@ addEventListener(eventType, callback) {
         // Playback events
         this.video.addEventListener('playing', () => {
             this.hideLoading();
+            this.closeAllMenus();
             // Trigger playing event - video is now actually playing
             this.triggerEvent('playing', {
                 currentTime: this.getCurrentTime(),
@@ -2684,6 +2702,10 @@ addEventListener(eventType, callback) {
         // Mouse events (desktop)
         this.progressContainer.addEventListener('click', (e) => this.seek(e));
         this.progressContainer.addEventListener('mousedown', (e) => this.startSeeking(e));
+        if (this.progressHandle) {
+            this.progressHandle.addEventListener('mousedown', this.startSeeking.bind(this));
+            this.progressHandle.addEventListener('touchstart', this.startSeeking.bind(this), { passive: false });
+        }
 
         // Touch events (mobile)
         this.progressContainer.addEventListener('touchstart', (e) => {
@@ -3106,13 +3128,13 @@ createControls() {
     const controlsHTML = `
         <div class="controls" id="${controlsId}">
             <div class="progress-container">
-                <div class="progress-bar">
-                    <div class="progress-buffer"></div>
-                    <div class="progress-filled"></div>
-                    <div class="progress-handle progress-handle-${this.options.seekHandleShape}"></div>
-                </div>
-                ${this.options.showSeekTooltip ? '<div class="seek-tooltip">0:00</div>' : ''}
-            </div>
+    <div class="progress-bar">
+        <div class="progress-buffer"></div>
+        <div class="progress-filled"></div>
+    </div>
+    <div class="progress-handle progress-handle-${this.options.seekHandleShape}"></div>  <!-- ✅ Fuori da progress-bar -->
+    ${this.options.showSeekTooltip ? '<div class="seek-tooltip">0:00</div>' : ''}
+</div>
 
             <div class="controls-main">
                 <div class="controls-left">
@@ -4805,10 +4827,10 @@ createCustomSubtitleOverlay() {
         'bottom: 80px;' +
         'left: 50%;' +
         'transform: translateX(-50%);' +
-        'z-index: 5;' +
+        'z-index: 999;' +
         'color: white;' +
         'font-family: Arial, sans-serif;' +
-        'font-size: clamp(12px, 4vw, 18px);' +  // RESPONSIVE font-size
+        'font-size: clamp(12px, 4vw, 18px);' +
         'font-weight: bold;' +
         'text-align: center;' +
         'text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);' +
@@ -4835,52 +4857,29 @@ createCustomSubtitleOverlay() {
     if (this.options.debug) console.log('✅ Custom subtitle overlay created with responsive settings');
 }
 
-loadCustomSubtitleTracks() {
-    var self = this;
-    var trackElements = document.querySelectorAll('track[kind="subtitles"], track[kind="captions"]');
-    var loadPromises = [];
-
-    if (this.options.debug) console.log('📥 Loading ' + trackElements.length + ' subtitle files...');
-
-    for (var i = 0; i < trackElements.length; i++) {
-        var track = trackElements[i];
-
-        (function (trackElement, index) {
-            var promise = fetch(trackElement.src)
-                .then(function (response) {
-                    return response.text();
-                })
-                .then(function (srtText) {
-                    var subtitles = self.parseCustomSRT(srtText);
-                    self.customSubtitles.push({
-                        label: trackElement.label || 'Track ' + (index + 1),
-                        language: trackElement.srclang || 'unknown',
-                        subtitles: subtitles
-                    });
+customTimeToSeconds(timeString) {
+    if (!timeString) return 0;
 
-                    if (self.options.debug) {
-                        console.log('✅ Loaded: ' + trackElement.label + ' (' + subtitles.length + ' subtitles)');
-                    }
-                })
-                .catch(function (error) {
-                    if (self.options.debug) {
-                        console.error('❌ Error loading ' + trackElement.src + ':', error);
-                    }
-                });
+    var parts = timeString.split(',');
+    if (parts.length !== 2) return 0;
 
-            loadPromises.push(promise);
-        })(track, i);
-    }
+    var time = parts[0];
+    var millis = parts[1];
 
-    Promise.all(loadPromises).then(function () {
-        if (self.options.debug && self.customSubtitles.length > 0) {
-            console.log('✅ All custom subtitle tracks loaded');
-        }
+    var timeParts = time.split(':');
+    if (timeParts.length !== 3) return 0;
 
-        if (self.options.debug) {
-            console.log('📝 Subtitles loaded but NOT auto-enabled - user must activate manually');
-        }
-    });
+    var hours = parseInt(timeParts[0], 10);
+    var minutes = parseInt(timeParts[1], 10);
+    var seconds = parseInt(timeParts[2], 10);
+    var milliseconds = parseInt(millis, 10);
+
+    if (isNaN(hours) || isNaN(minutes) || isNaN(seconds) || isNaN(milliseconds)) {
+        console.error('❌ customTimeToSeconds failed for:', timeString);
+        return 0;
+    }
+
+    return hours * 3600 + minutes * 60 + seconds + milliseconds / 1000;
 }
 
 parseCustomSRT(srtText) {
@@ -4899,9 +4898,9 @@ parseCustomSRT(srtText) {
             if (timeMatch) {
                 var startTime = this.customTimeToSeconds(timeMatch[1]);
                 var endTime = this.customTimeToSeconds(timeMatch[2]);
-                var text = this.sanitizeSubtitleText(lines.slice(2).join('\n').trim());
+                var text = lines.slice(2).join('\n').trim().replace(/<[^>]*>/g, '');
 
-                if (text.length > 0 && startTime < endTime) {
+                if (text && text.length > 0 && startTime < endTime) {
                     subtitles.push({
                         start: startTime,
                         end: endTime,
@@ -4912,20 +4911,97 @@ parseCustomSRT(srtText) {
         }
     }
 
+    if (this.options.debug) console.log('✅ Parsed ' + subtitles.length + ' subtitles');
     return subtitles;
 }
 
-customTimeToSeconds(timeString) {
-    var parts = timeString.split(',');
-    var time = parts[0];
-    var millis = parts[1];
-    var timeParts = time.split(':');
-    var hours = parseInt(timeParts[0], 10);
-    var minutes = parseInt(timeParts[1], 10);
-    var seconds = parseInt(timeParts[2], 10);
-    var milliseconds = parseInt(millis, 10);
+loadCustomSubtitleTracks() {
+    var self = this;
+    var tracks = this.video.querySelectorAll('track[kind="subtitles"]');
+    if (tracks.length === 0) return;
+
+    tracks.forEach(function (track, index) {
+        var src = track.getAttribute('src');
+        var label = track.getAttribute('label') || 'Unknown';
+        var srclang = track.getAttribute('srclang') || '';
+
+        // CREA L'OGGETTO PRIMA E AGGIUNGILO SUBITO
+        var trackObj = {
+            label: label,
+            language: srclang,
+            subtitles: [],
+            trackIndex: index
+        };
+        self.customSubtitles.push(trackObj);
+
+        fetch(src)
+            .then(function (response) {
+                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;
+                    var lines = block.split('\n');
+
+                    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})/);
+
+                        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
+                                });
+                            }
+                        }
+                    }
+                }
 
-    return hours * 3600 + minutes * 60 + seconds + milliseconds / 1000;
+                if (self.options.debug) {
+                    console.log('✅ Loaded ' + trackObj.subtitles.length + ' subtitles for ' + label);
+                }
+            })
+            .catch(function (error) {
+                console.error('❌ Error loading ' + label + ':', error);
+            });
+    });
+}
+
+sanitizeSubtitleText(text) {
+    if (!text) return '';
+
+    // Remove HTML tags
+    var sanitized = text.replace(/<[^>]*>/g, '');
+
+    // Remove styling tags common in SRT files
+    sanitized = sanitized.replace(/{\\.*?}/g, '');
+    sanitized = sanitized.replace(/\\N/g, '\n');
+
+    // Clean up multiple spaces
+    sanitized = sanitized.replace(/\s+/g, ' ').trim();
+
+    // Decode HTML entities if present
+    var tempDiv = document.createElement('div');
+    tempDiv.innerHTML = sanitized;
+    sanitized = tempDiv.textContent || tempDiv.innerText || sanitized;
+
+    return sanitized;
 }
 
 enableCustomSubtitleTrack(trackIndex) {
@@ -5018,28 +5094,39 @@ detectTextTracks() {
 enableSubtitleTrack(trackIndex) {
     if (trackIndex < 0 || trackIndex >= this.textTracks.length) return;
 
+    // Disable all tracks first
     this.disableAllTracks();
 
+    // Enable ONLY the custom subtitle system (not native browser)
     var success = this.enableCustomSubtitleTrack(trackIndex);
 
     if (success) {
         this.currentSubtitleTrack = this.textTracks[trackIndex].track;
         this.subtitlesEnabled = true;
 
+        // Make sure native tracks stay DISABLED
+        if (this.video.textTracks && this.video.textTracks[trackIndex]) {
+            this.video.textTracks[trackIndex].mode = 'disabled'; // Keep native disabled
+        }
+
         this.updateSubtitlesButton();
         this.populateSubtitlesMenu();
 
         if (this.options.debug) {
-            console.log('✅ Subtitles enabled: ' + this.textTracks[trackIndex].label);
+            console.log('✅ Custom subtitles enabled:', this.textTracks[trackIndex].label);
         }
 
-        // Trigger evento
+        // 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);
+        }
     }
 }
 
@@ -5062,11 +5149,15 @@ disableSubtitles() {
 }
 
 disableAllTracks() {
-    if (this.video.textTracks) {
-        for (var i = 0; i < this.video.textTracks.length; i++) {
-            this.video.textTracks[i].mode = 'hidden';
-        }
+    if (!this.video || !this.video.textTracks) return;
+
+    // Disable all native tracks
+    for (var i = 0; i < this.video.textTracks.length; i++) {
+        this.video.textTracks[i].mode = 'hidden';
     }
+
+    // Also disable custom subtitles
+    this.disableCustomSubtitles();
 }
 
 getAvailableSubtitles() {
@@ -5107,11 +5198,11 @@ updateSubtitlesButton() {
     var subtitlesBtn = this.controls && this.controls.querySelector('.subtitles-btn');
     if (!subtitlesBtn) return;
 
+    subtitlesBtn.classList.remove('active');
+
     if (this.subtitlesEnabled) {
-        subtitlesBtn.classList.add('active');
         subtitlesBtn.title = this.t('subtitlesdisable');
     } else {
-        subtitlesBtn.classList.remove('active');
         subtitlesBtn.title = this.t('subtitlesenable');
     }
 }
@@ -5147,32 +5238,61 @@ updateSubtitlesUI() {
 bindSubtitleEvents() {
     var self = this;
 
-    var subtitlesBtn = this.controls && this.controls.querySelector('.subtitles-btn');
-    if (subtitlesBtn) {
-        subtitlesBtn.addEventListener('click', function (e) {
-            e.stopPropagation();
-            self.toggleSubtitles();
+    if (this.video.textTracks) {
+        this.isChangingSubtitles = false; // flag to prevent loops
+
+        this.video.textTracks.addEventListener('change', function () {
+            // ignore changes initiated by the player itself
+            if (self.isChangingSubtitles) {
+                return;
+            }
+
+            // only update ui
+            self.updateSubtitlesUI();
         });
     }
 
+    // Add timeupdate listener for custom subtitle display
+    this.video.addEventListener('timeupdate', () => {
+        if (this.customSubtitlesEnabled) {
+            this.updateCustomSubtitleDisplay();
+        }
+    });
+
+    // Menu click events
     var subtitlesMenu = this.controls && this.controls.querySelector('.subtitles-menu');
     if (subtitlesMenu) {
         subtitlesMenu.addEventListener('click', function (e) {
-            self.handleSubtitlesMenuClick(e);
+            var option = e.target.closest('.subtitles-option');
+            if (!option) return;
+
+            self.isChangingSubtitles = true; // active flag
+
+            var trackIndex = option.getAttribute('data-track');
+            if (trackIndex === 'off') {
+                self.disableSubtitles();
+            } else {
+                self.enableSubtitleTrack(parseInt(trackIndex));
+            }
+
+            setTimeout(function () {
+                self.isChangingSubtitles = false; // disable flag
+            }, 100);
         });
     }
 }
 
 handleSubtitlesMenuClick(e) {
-    if (!e.target.classList.contains('subtitles-option')) return;
+    var option = e.target.closest('.subtitles-option');
+    if (!option) return; // This prevents button clicks from toggling
 
-    var trackData = e.target.getAttribute('data-track');
+    var trackIndex = option.getAttribute('data-track');
 
-    if (trackData === 'off') {
+    if (trackIndex === 'off') {
         this.disableSubtitles();
     } else {
-        var trackIndex = parseInt(trackData, 10);
-        this.enableSubtitleTrack(trackIndex);
+        // Don't check for 'toggle' - just enable the track
+        this.enableSubtitleTrack(parseInt(trackIndex));
     }
 
     this.updateSubtitlesButton();