myetv-player 1.1.2 → 1.1.4

package/scss/_menus.scss

@@ -381,3 +381,52 @@
         display: none !important;
     }
 }
+// Expandable settings menu styles
+.settings-expandable-wrapper {
+    position: relative;
+    display: block;
+}
+
+.settings-option.expandable-trigger {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    font-size: 10px !important;
+
+    .settings-option-label {
+        font-size: 10px !important;
+    }
+
+    .expand-arrow {
+        font-size: 8px;
+        transition: transform 0.2s ease;
+        margin-left: 8px;
+    }
+}
+
+.settings-expandable-content {
+    padding-left: 15px;
+    margin-top: 4px;
+
+    .settings-suboption {
+        padding: 6px 12px;
+        cursor: pointer;
+        color: white;
+        font-size: 10px;
+        white-space: normal;
+        word-wrap: break-word;
+        opacity: 0.8;
+        transition: opacity 0.2s;
+
+        &.active {
+            opacity: 1;
+            font-weight: bold;
+        }
+
+        &:hover {
+            opacity: 1;
+            background: rgba(255, 255, 255, 0.1);
+        }
+    }
+}

package/src/controls.js

@@ -600,7 +600,9 @@ updateSettingsMenuVisibility() {
     }
 }
 
-/* Populate settings menu with controls */
+/**
+ * Populate settings menu with controls
+ */
 populateSettingsMenu() {
     const settingsMenu = this.controls?.querySelector('.settings-menu');
     if (!settingsMenu) return;
@@ -615,54 +617,104 @@ populateSettingsMenu() {
         </div>`;
     }
 
-    // Speed Control submenu
+    // Speed Control - expandable
     if (this.options.showSpeedControl) {
         const speedLabel = this.t('playback_speed') || 'Playback Speed';
         const currentSpeed = this.video ? this.video.playbackRate : 1;
-        menuHTML += `<div class="settings-option" data-action="speed">
-            <span class="settings-option-label">${speedLabel}</span>
-            <span class="settings-option-value">${currentSpeed}x</span>
-            <div class="settings-submenu speed-submenu">
-                <div class="settings-suboption ${currentSpeed === 0.5 ? 'active' : ''}" data-speed="0.5">0.5x</div>
-                <div class="settings-suboption ${currentSpeed === 0.75 ? 'active' : ''}" data-speed="0.75">0.75x</div>
-                <div class="settings-suboption ${currentSpeed === 1 ? 'active' : ''}" data-speed="1">1x</div>
-                <div class="settings-suboption ${currentSpeed === 1.25 ? 'active' : ''}" data-speed="1.25">1.25x</div>
-                <div class="settings-suboption ${currentSpeed === 1.5 ? 'active' : ''}" data-speed="1.5">1.5x</div>
-                <div class="settings-suboption ${currentSpeed === 2 ? 'active' : ''}" data-speed="2">2x</div>
-            </div>
-        </div>`;
+
+        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>
+                </div>
+                <div class="settings-expandable-content" style="display: none;">`;
+
+        const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+        speeds.forEach(speed => {
+            const isActive = Math.abs(speed - currentSpeed) < 0.01;
+            menuHTML += `<div class="settings-suboption ${isActive ? 'active' : ''}" data-speed="${speed}">${speed}x</div>`;
+        });
+
+        menuHTML += `</div></div>`;
     }
 
-    // Subtitles submenu
+    // Subtitles - expandable
     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 || 'Track')
-            : (this.t('subtitlesoff') || 'Off');
-
-        menuHTML += `<div class="settings-option" data-action="subtitles">
-            <span class="settings-option-label">${subtitlesLabel}</span>
-            <span class="settings-option-value">${currentLabel}</span>
-            <div class="settings-submenu subtitles-submenu">
-                <div class="settings-suboption ${!this.subtitlesEnabled ? 'active' : ''}" data-track="off">
-                    ${this.t('subtitlesoff') || 'Off'}
-                </div>`;
+        const currentLabel = this.subtitlesEnabled && currentTrack ? currentTrack.label : (this.t('subtitlesoff') || 'Off');
+
+        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>
+                </div>
+                <div class="settings-expandable-content" style="display: none;">`;
 
+        // Off option
+        menuHTML += `<div class="settings-suboption ${!this.subtitlesEnabled ? 'active' : ''}" data-track="off">${this.t('subtitlesoff') || 'Off'}</div>`;
+
+        // Subtitle tracks
         this.textTracks.forEach((trackData, index) => {
             const isActive = this.currentSubtitleTrack === trackData.track;
-            menuHTML += `<div class="settings-suboption ${isActive ? 'active' : ''}" data-track="${index}">
-                ${trackData.label}
-            </div>`;
+            menuHTML += `<div class="settings-suboption ${isActive ? 'active' : ''}" data-track="${index}">${trackData.label}</div>`;
         });
 
-        menuHTML += '</div></div>';
+        menuHTML += `</div></div>`;
     }
 
     settingsMenu.innerHTML = menuHTML;
+
+    // Add scrollbar if needed
+    this.addSettingsMenuScrollbar();
 }
 
-/* Bind settings menu events */
+/**
+ * Add scrollbar to settings menu on mobile
+ */
+addSettingsMenuScrollbar() {
+    const settingsMenu = this.controls?.querySelector('.settings-menu');
+    if (!settingsMenu) return;
+
+    const playerHeight = this.container.offsetHeight;
+    const maxMenuHeight = playerHeight - 100;
+
+    settingsMenu.style.maxHeight = `${maxMenuHeight}px`;
+    settingsMenu.style.overflowY = 'auto';
+    settingsMenu.style.overflowX = 'hidden';
+
+    // Add scrollbar styling
+    if (!document.getElementById('player-settings-scrollbar-style')) {
+        const scrollbarStyle = document.createElement('style');
+        scrollbarStyle.id = 'player-settings-scrollbar-style';
+        scrollbarStyle.textContent = `
+            .settings-menu::-webkit-scrollbar {
+                width: 6px;
+            }
+            .settings-menu::-webkit-scrollbar-track {
+                background: rgba(255,255,255,0.05);
+                border-radius: 3px;
+            }
+            .settings-menu::-webkit-scrollbar-thumb {
+                background: rgba(255,255,255,0.3);
+                border-radius: 3px;
+            }
+            .settings-menu::-webkit-scrollbar-thumb:hover {
+                background: rgba(255,255,255,0.5);
+            }
+        `;
+        document.head.appendChild(scrollbarStyle);
+    }
+
+    settingsMenu.style.scrollbarWidth = 'thin';
+    settingsMenu.style.scrollbarColor = 'rgba(255,255,255,0.3) transparent';
+}
+
+/**
+ * Bind settings menu events
+ */
 bindSettingsMenuEvents() {
     const settingsMenu = this.controls?.querySelector('.settings-menu');
     if (!settingsMenu) return;
@@ -670,7 +722,26 @@ bindSettingsMenuEvents() {
     settingsMenu.addEventListener('click', (e) => {
         e.stopPropagation();
 
-        // Handle direct actions
+        // Handle expandable triggers
+        if (e.target.classList.contains('expandable-trigger') || e.target.closest('.expandable-trigger')) {
+            const trigger = e.target.classList.contains('expandable-trigger') ? e.target : e.target.closest('.expandable-trigger');
+            const wrapper = trigger.closest('.settings-expandable-wrapper');
+            const content = wrapper.querySelector('.settings-expandable-content');
+            const arrow = trigger.querySelector('.expand-arrow');
+
+            const isExpanded = content.style.display !== 'none';
+
+            if (isExpanded) {
+                content.style.display = 'none';
+                arrow.style.transform = 'rotate(0deg)';
+            } else {
+                content.style.display = 'block';
+                arrow.style.transform = 'rotate(180deg)';
+            }
+            return;
+        }
+
+        // Handle direct actions (like PiP)
         if (e.target.classList.contains('settings-option') || e.target.closest('.settings-option')) {
             const option = e.target.classList.contains('settings-option') ? e.target : e.target.closest('.settings-option');
             const action = option.getAttribute('data-action');
@@ -683,32 +754,31 @@ bindSettingsMenuEvents() {
 
         // Handle submenu actions
         if (e.target.classList.contains('settings-suboption')) {
-            const parent = e.target.closest('.settings-option');
-            const action = parent?.getAttribute('data-action');
+            const wrapper = e.target.closest('.settings-expandable-wrapper');
+            const trigger = wrapper.querySelector('.expandable-trigger');
+            const action = trigger.getAttribute('data-action');
 
-            if (action === 'speed') {
+            if (action === 'speed-expand') {
                 const speed = parseFloat(e.target.getAttribute('data-speed'));
                 if (speed && speed > 0 && this.video && !this.isChangingQuality) {
                     this.video.playbackRate = speed;
 
                     // Update active states
-                    parent.querySelectorAll('.settings-suboption').forEach(opt => {
-                        opt.classList.remove('active');
-                    });
+                    wrapper.querySelectorAll('.settings-suboption').forEach(opt => opt.classList.remove('active'));
                     e.target.classList.add('active');
 
-                    // Update value display
-                    const valueEl = parent.querySelector('.settings-option-value');
-                    if (valueEl) valueEl.textContent = speed + 'x';
+                    // Update trigger text
+                    const label = trigger.querySelector('.settings-option-label');
+                    if (label) {
+                        const speedLabel = this.t('playback_speed') || 'Playback Speed';
+                        label.textContent = `${speedLabel}: ${speed}x`;
+                    }
 
                     // Trigger event
                     this.triggerEvent('speedchange', { speed, previousSpeed: this.video.playbackRate });
                 }
-            }
-
-            else if (action === 'subtitles') {
+            } else if (action === 'subtitles-expand') {
                 const trackData = e.target.getAttribute('data-track');
-
                 if (trackData === 'off') {
                     this.disableSubtitles();
                 } else {
@@ -717,14 +787,15 @@ bindSettingsMenuEvents() {
                 }
 
                 // Update active states
-                parent.querySelectorAll('.settings-suboption').forEach(opt => {
-                    opt.classList.remove('active');
-                });
+                wrapper.querySelectorAll('.settings-suboption').forEach(opt => opt.classList.remove('active'));
                 e.target.classList.add('active');
 
-                // Update value display
-                const valueEl = parent.querySelector('.settings-option-value');
-                if (valueEl) valueEl.textContent = e.target.textContent;
+                // Update trigger text
+                const label = trigger.querySelector('.settings-option-label');
+                if (label) {
+                    const subtitlesLabel = this.t('subtitles') || 'Subtitles';
+                    label.textContent = `${subtitlesLabel}: ${e.target.textContent}`;
+                }
             }
         }
     });

package/src/subtitles.js

@@ -41,10 +41,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);' +
@@ -71,52 +71,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) {
@@ -135,9 +112,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,
@@ -148,20 +125,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) {
@@ -254,28 +308,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);
+        }
     }
 }
 
@@ -298,11 +363,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() {
@@ -383,25 +452,61 @@ updateSubtitlesUI() {
 bindSubtitleEvents() {
     var self = this;
 
+    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();