myetv-player 1.5.0 → 1.6.0

package/README.md

@@ -1,13 +1,24 @@
-[![CodeQL Advanced](https://github.com/OskarCosimo/myetv-video-player-opensource/actions/workflows/codeql.yml/badge.svg)](https://github.com/OskarCosimo/myetv-video-player-opensource/actions/workflows/codeql.yml) [![Node.js Package](https://github.com/OskarCosimo/myetv-video-player-opensource/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/OskarCosimo/myetv-video-player-opensource/actions/workflows/npm-publish.yml) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+<div align="center">
 
 # MYETV Audio/Video Player Open Source
 
+[![CodeQL Advanced](https://github.com/OskarCosimo/myetv-video-player-opensource/actions/workflows/codeql.yml/badge.svg)](https://github.com/OskarCosimo/myetv-video-player-opensource/actions/workflows/codeql.yml) [![Node.js Package](https://github.com/OskarCosimo/myetv-video-player-opensource/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/OskarCosimo/myetv-video-player-opensource/actions/workflows/npm-publish.yml) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+![JavaScript](https://img.shields.io/badge/JavaScript-ES6-F7DF1E?logo=javascript)
+
 A modern and complete HTML5 + JavaScript + css video player with custom controls, multiple quality support, subtitles, Picture-in-Picture and much more.
 
+[Features](#features) • [Installation](#installation) • [Documentation](#documentation) • [Demo](#demo-page) • [NPM Download](https://www.npmjs.com/package/myetv-player) • [License](#license)
+
+</div>
+
+---
+# Documentation
+
 ## Table of Contents
 
 - [Features](#features)
 - [Demo Page](#demo-page)
+- [Screenshot](#screenshot)
 - [Installation](#installation)
 - [Basic Usage](#basic-usage)
 - [Initialization Options](#initialization-options)
@@ -46,6 +57,11 @@ A modern and complete HTML5 + JavaScript + css video player with custom controls
 ## Demo page
 [MYETV Video Player Demo Page: https://oskarcosimo.com/myetv-video-player/myetv-player-demo.html](https://oskarcosimo.com/myetv-video-player/myetv-player-demo.html)
 
+## Screenshot
+
+<img width="1360" height="769" alt="MYETV Video Player Opensource - mouse over" src="https://github.com/user-attachments/assets/71cb5d77-171f-4e14-817c-583df1e137f9" />
+<img width="1360" height="769" alt="MYETV Video Player Opensource - chapters" src="https://github.com/user-attachments/assets/569c3b59-8d5e-4d97-8b9b-67a222e73e06" />
+
 ## Installation
 
 ### Include Required Files
@@ -962,6 +978,54 @@ The playlist detection will work through HTML attributes on your video elements:
 </video>
 ```
 ## Adaptive streaming (HLS/DASH)
+(Dash)
+Ecco un esempio per il tuo README.md:​
+
+text
+## Adaptive Streaming (DASH/HLS)
+
+MyeTV Player supports adaptive bitrate streaming using DASH (Dynamic Adaptive Streaming over HTTP) and HLS (HTTP Live Streaming) protocols. This enables automatic quality switching based on network conditions for optimal playback experience.
+
+### Features
+
+- **Automatic Quality Selection**: The player automatically adjusts video quality based on available bandwidth
+- **Manual Quality Control**: Users can manually select specific resolutions (240p, 360p, 480p, 720p, 1080p, 4K)
+- **Seamless Switching**: Quality changes occur smoothly without interrupting playback
+- **Real-time Monitoring**: Displays current playing quality in the control bar
+
+### Basic Usage
+
+#### Method 1: Using HTML Video Tag
+```
+<video id="my-player" controls> <source src="https://example.com/video/manifest.mpd" type="application/dash+xml"> <!-- Fallback for browsers without DASH support --> <source src="https://example.com/video/fallback.mp4" type="video/mp4"> </video>
+<script>const player = new MYETVvideoplayer({ container: '#my-player', autoplay: false, adaptiveStreaming: true, adaptiveQualityControl: true, debug: true });</script>
+```
+#### Method 2: Using JavaScript Load
+```
+const player = new MYETVvideoplayer({
+container: '#player-container',
+autoplay: true,
+debug: true
+});
+
+// Load DASH stream
+player.load({
+src: 'https://example.com/video/manifest.mpd',
+type: 'application/dash+xml'
+});
+
+// Or load HLS stream
+player.load({
+src: 'https://example.com/video/playlist.m3u8',
+type: 'application/x-mpegURL'
+});
+```
+The player automatically loads the required libraries:
+
+- **dash.js** (v5.x) for DASH streams
+- **hls.js** (latest) for HLS streams
+
+No additional configuration needed - libraries are loaded on-demand when adaptive streaming is detected.
 ### Adaptive Streaming APIs
 ```
 // Info adaptive streaming

package/dist/myetv-player.js

@@ -3623,7 +3623,7 @@ createControls() {
                         <div class="settings-menu"></div>
                     </div>
 
-                    ${this.options.showQualitySelector && this.originalSources && this.originalSources.length > 1 ? `
+${(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">
                             <div class="quality-btn-text">
@@ -4494,6 +4494,11 @@ updateQualityDisplay() {
 }
 
 updateQualityButton() {
+    if (this.isAdaptiveStream) {
+        if (this.options.debug) console.log('🔒 Adaptive streaming active - quality button managed by streaming.js');
+        return;
+    }
+
     const qualityBtn = this.controls?.querySelector('.quality-btn');
     if (!qualityBtn) return;
 
@@ -4545,6 +4550,11 @@ updateQualityMenu() {
     const qualityMenu = this.controls?.querySelector('.quality-menu');
     if (!qualityMenu) return;
 
+    if (this.isAdaptiveStream) {
+        if (this.options.debug) console.log('🔒 Adaptive streaming active - quality menu managed by streaming.js');
+        return;
+    }
+
     let menuHTML = '';
 
     // Check if adaptive streaming is active (HLS/DASH)
@@ -7220,6 +7230,16 @@ async loadAdaptiveLibraries() {
     }
 
     try {
+        // Initialize quality selection to Auto BEFORE creating player
+
+        // FORCE Auto mode - always reset at initialization
+        this.selectedQuality = 'auto';
+        this.qualityEventsInitialized = false;
+
+        if (this.options.debug) {
+            console.log('🔍 initializeDash - FORCED selectedQuality to:', this.selectedQuality);
+        }
+
         // Destroy existing DASH player
         if (this.dashPlayer) {
             this.dashPlayer.destroy();
@@ -7384,35 +7404,464 @@ disableDashTextTracks() {
         }
     }
 
-    updateAdaptiveQualities() {
-        this.adaptiveQualities = [];
+updateAdaptiveQualities() {
+    this.adaptiveQualities = [];
+
+    if (this.adaptiveStreamingType === 'dash' && this.dashPlayer) {
+        try {
+            // dash.js 5.x - Get ALL video tracks
+            const videoTracks = this.dashPlayer.getTracksFor('video');
+
+            if (this.options.debug) {
+                console.log('✅ DASH getTracksFor result:', videoTracks);
+            }
+
+            if (videoTracks && videoTracks.length > 0) {
+                // Collect qualities from ALL video tracks
+                const allQualities = [];
+
+                videoTracks.forEach((track, trackIndex) => {
+                    const bitrateList = track.bitrateList || [];
+
+                    if (this.options.debug) {
+                        console.log(`✅ Track ${trackIndex} (${track.codec}):`, bitrateList);
+                    }
+
+                    bitrateList.forEach((bitrate, index) => {
+                        allQualities.push({
+                            trackIndex: trackIndex,
+                            bitrateIndex: index,
+                            label: `${bitrate.height}p`,
+                            height: bitrate.height,
+                            width: bitrate.width,
+                            bandwidth: bitrate.bandwidth,
+                            codec: track.codec
+                        });
+                    });
+                });
+
+                // Sort by height (descending) and remove duplicates
+                const uniqueHeights = [...new Set(allQualities.map(q => q.height))];
+                uniqueHeights.sort((a, b) => b - a);
+
+                this.adaptiveQualities = uniqueHeights.map((height, index) => {
+                    const quality = allQualities.find(q => q.height === height);
+                    return {
+                        index: index,
+                        label: `${height}p`,
+                        height: height,
+                        trackIndex: quality.trackIndex,
+                        bitrateIndex: quality.bitrateIndex,
+                        bandwidth: quality.bandwidth,
+                        codec: quality.codec
+                    };
+                });
+
+                if (this.options.debug) {
+                    console.log('✅ All DASH qualities merged:', this.adaptiveQualities);
+                }
+            }
+        } catch (error) {
+            if (this.options.debug) {
+                console.error('❌ Error getting DASH qualities:', error);
+            }
+        }
+    } else if (this.adaptiveStreamingType === 'hls' && this.hlsPlayer) {
+        const levels = this.hlsPlayer.levels;
+        this.adaptiveQualities = levels.map((level, index) => ({
+            index: index,
+            label: this.getQualityLabel(level.height, level.width),
+            height: level.height,
+            bandwidth: level.bitrate
+        }));
+    }
+
+    if (this.options.adaptiveQualityControl) {
+        this.updateAdaptiveQualityMenu();
+    }
+
+    if (this.options.debug) {
+        console.log('📡 Adaptive qualities available:', this.adaptiveQualities);
+        console.log('📡 Selected quality mode:', this.selectedQuality);
+    }
+}
+
+updateAdaptiveQualityMenu() {
+    const qualityMenu = this.controls?.querySelector('.quality-menu');
+    if (!qualityMenu) {
+        if (this.options.debug) console.log('❌ Quality menu not found in DOM');
+        return;
+    }
+
+    if (this.adaptiveQualities.length === 0) {
+        if (this.options.debug) console.log('❌ No adaptive qualities to display');
+        return;
+    }
+
+    // Generate menu HTML with "Auto" option
+    const isAutoActive = this.selectedQuality === 'auto';
+    let menuHTML = `<div class="quality-option ${isAutoActive ? 'active' : ''}" data-quality="auto">Auto</div>`;
+
+    // Add all quality options
+    this.adaptiveQualities.forEach((quality) => {
+        const isActive = this.selectedQuality === quality.height;
+
+        if (this.options.debug) {
+            console.log('🔍 Quality item:', quality.label, 'height:', quality.height, 'active:', isActive);
+        }
+
+        menuHTML += `<div class="quality-option ${isActive ? 'active' : ''}" data-quality="${quality.height}">
+            ${quality.label}
+            <span class="quality-playing" style="display: none; color: #4CAF50; margin-left: 8px; font-size: 0.85em;">● Playing</span>
+        </div>`;
+    });
+
+    qualityMenu.innerHTML = menuHTML;
+
+    if (this.options.debug) {
+        console.log('✅ Quality menu populated with', this.adaptiveQualities.length, 'options');
+    }
+
+    // Bind events ONCE
+    if (!this.qualityEventsInitialized) {
+        this.bindAdaptiveQualityEvents();
+        this.qualityEventsInitialized = true;
+    }
 
+    // Update display
+    this.updateAdaptiveQualityDisplay();
+}
+
+updateAdaptiveQualityDisplay() {
+    if (!this.dashPlayer && !this.hlsPlayer) return;
+
+    let currentHeight = null;
+
+    try {
         if (this.adaptiveStreamingType === 'dash' && this.dashPlayer) {
-            const bitrates = this.dashPlayer.getBitrateInfoListFor('video');
-            this.adaptiveQualities = bitrates.map((bitrate, index) => ({
-                index: index,
-                label: this.getQualityLabel(bitrate.height, bitrate.width),
-                height: bitrate.height,
-                bandwidth: bitrate.bandwidth
-            }));
+            // Get video element to check actual resolution
+            if (this.video && this.video.videoHeight) {
+                currentHeight = this.video.videoHeight;
+            }
+
+            if (this.options.debug) {
+                console.log('📊 Current video height:', currentHeight, 'Selected mode:', this.selectedQuality);
+            }
         } else if (this.adaptiveStreamingType === 'hls' && this.hlsPlayer) {
-            const levels = this.hlsPlayer.levels;
-            this.adaptiveQualities = levels.map((level, index) => ({
-                index: index,
-                label: this.getQualityLabel(level.height, level.width),
-                height: level.height,
-                bandwidth: level.bitrate
-            }));
+            const currentLevel = this.hlsPlayer.currentLevel;
+            if (currentLevel >= 0 && this.hlsPlayer.levels[currentLevel]) {
+                currentHeight = this.hlsPlayer.levels[currentLevel].height;
+            }
+        }
+
+        // Update button text (top text)
+        const qualityBtnText = this.controls?.querySelector('.quality-btn .selected-quality');
+        if (qualityBtnText) {
+            if (this.selectedQuality === 'auto') {
+                qualityBtnText.textContent = 'Auto';
+            } else {
+                qualityBtnText.textContent = `${this.selectedQuality}p`;
+            }
+        }
+
+        // Update current quality display (bottom text) - ONLY in Auto mode
+        const currentQualityText = this.controls?.querySelector('.quality-btn .current-quality');
+        if (currentQualityText) {
+            if (this.selectedQuality === 'auto' && currentHeight) {
+                currentQualityText.textContent = `${currentHeight}p`;
+                currentQualityText.style.display = 'block';
+            } else {
+                currentQualityText.textContent = '';
+                currentQualityText.style.display = 'none';
+            }
+        }
+
+        // Update menu active states
+        const qualityMenu = this.controls?.querySelector('.quality-menu');
+        if (qualityMenu) {
+            // Remove all active states
+            qualityMenu.querySelectorAll('.quality-option').forEach(opt => {
+                opt.classList.remove('active');
+            });
+
+            // Set active based on selection
+            if (this.selectedQuality === 'auto') {
+                const autoOption = qualityMenu.querySelector('[data-quality="auto"]');
+                if (autoOption) autoOption.classList.add('active');
+            } else {
+                const selectedOption = qualityMenu.querySelector(`[data-quality="${this.selectedQuality}"]`);
+                if (selectedOption) selectedOption.classList.add('active');
+            }
+
+            // Hide all playing indicators
+            qualityMenu.querySelectorAll('.quality-playing').forEach(el => {
+                el.style.display = 'none';
+            });
+
+            // Show playing indicator only in Auto mode
+            if (this.selectedQuality === 'auto' && currentHeight) {
+                const playingOption = qualityMenu.querySelector(`[data-quality="${currentHeight}"] .quality-playing`);
+                if (playingOption) {
+                    playingOption.style.display = 'inline';
+                }
+            }
+        }
+
+    } catch (error) {
+        if (this.options.debug) console.error('❌ Error updating quality display:', error);
+    }
+}
+
+updateQualityButtonText() {
+    const qualityBtn = this.controls?.querySelector('.quality-btn .selected-quality');
+    if (!qualityBtn) return;
+
+    if (this.selectedQuality === 'auto' || !this.selectedQuality) {
+        qualityBtn.textContent = this.t('auto');
+    } else {
+        const quality = this.adaptiveQualities.find(q => q.index === parseInt(this.selectedQuality));
+        qualityBtn.textContent = quality ? quality.label : 'Auto';
+    }
+}
+
+bindAdaptiveQualityEvents() {
+    const qualityMenu = this.controls?.querySelector('.quality-menu');
+    const qualityBtn = this.controls?.querySelector('.quality-btn');
+
+    if (!qualityMenu || !qualityBtn) return;
+
+    // Toggle menu
+    qualityBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        qualityMenu.classList.toggle('active');
+
+        // Update display when opening
+        if (qualityMenu.classList.contains('active')) {
+            this.updateAdaptiveQualityDisplay();
         }
+    });
 
-        if (this.options.adaptiveQualityControl) {
-            this.updateAdaptiveQualityMenu();
+    // Close menu on outside click
+    const closeMenuHandler = (e) => {
+        if (!qualityBtn.contains(e.target) && !qualityMenu.contains(e.target)) {
+            qualityMenu.classList.remove('active');
         }
+    };
+    document.addEventListener('click', closeMenuHandler);
+
+    // Handle quality selection
+    qualityMenu.addEventListener('click', (e) => {
+        const option = e.target.closest('.quality-option');
+        if (!option) return;
+
+        e.stopPropagation();
+
+        const qualityData = option.getAttribute('data-quality');
 
         if (this.options.debug) {
-            console.log('📡 Adaptive qualities available:', this.adaptiveQualities);
+            console.log('🎬 Quality clicked - raw data:', qualityData, 'type:', typeof qualityData);
+        }
+
+        if (qualityData === 'auto') {
+            // Enable auto mode
+            this.selectedQuality = 'auto';
+
+            if (this.adaptiveStreamingType === 'dash' && this.dashPlayer) {
+                this.dashPlayer.updateSettings({
+                    streaming: {
+                        abr: {
+                            autoSwitchBitrate: { video: true }
+                        }
+                    }
+                });
+                if (this.options.debug) console.log('✅ Auto quality enabled');
+            } else if (this.adaptiveStreamingType === 'hls' && this.hlsPlayer) {
+                this.hlsPlayer.currentLevel = -1;
+            }
+
+        } else {
+            // Manual quality selection
+            const selectedHeight = parseInt(qualityData, 10);
+
+            if (isNaN(selectedHeight)) {
+                if (this.options.debug) console.error('❌ Invalid quality data:', qualityData);
+                return;
+            }
+
+            if (this.options.debug) {
+                console.log('🎬 Setting manual quality to height:', selectedHeight);
+            }
+
+            this.selectedQuality = selectedHeight;
+
+            if (this.adaptiveStreamingType === 'dash') {
+                this.setDashQualityByHeight(selectedHeight);
+            } else if (this.adaptiveStreamingType === 'hls') {
+                const levelIndex = this.hlsPlayer.levels.findIndex(l => l.height === selectedHeight);
+                if (levelIndex >= 0) {
+                    this.hlsPlayer.currentLevel = levelIndex;
+                }
+            }
         }
+
+        // Update display immediately
+        this.updateAdaptiveQualityDisplay();
+
+        // Close menu
+        qualityMenu.classList.remove('active');
+    });
+
+    if (this.options.debug) {
+        console.log('✅ Quality events bound');
     }
+}
+
+setDashQualityByHeight(targetHeight) {
+    if (!this.dashPlayer) return;
+
+    try {
+        const targetQuality = this.adaptiveQualities.find(q => q.height === targetHeight);
+        if (!targetQuality) {
+            if (this.options.debug) console.error('❌ Quality not found for height:', targetHeight);
+            return;
+        }
+
+        if (this.options.debug) {
+            console.log('🎬 Setting quality:', targetQuality);
+        }
+
+        // Disable auto quality
+        this.dashPlayer.updateSettings({
+            streaming: {
+                abr: {
+                    autoSwitchBitrate: { video: false }
+                }
+            }
+        });
+
+        // Get current video track
+        const currentTrack = this.dashPlayer.getCurrentTrackFor('video');
+
+        if (!currentTrack) {
+            if (this.options.debug) console.error('❌ No current video track');
+            return;
+        }
+
+        // Find the correct track for this quality
+        const allTracks = this.dashPlayer.getTracksFor('video');
+        let targetTrack = null;
+
+        for (const track of allTracks) {
+            if (track.bitrateList && track.bitrateList[targetQuality.bitrateIndex]) {
+                const bitrate = track.bitrateList[targetQuality.bitrateIndex];
+                if (bitrate.height === targetHeight) {
+                    targetTrack = track;
+                    break;
+                }
+            }
+        }
+
+        if (!targetTrack) {
+            if (this.options.debug) console.error('❌ Target track not found');
+            return;
+        }
+
+        // Switch track if different
+        if (currentTrack.index !== targetTrack.index) {
+            this.dashPlayer.setCurrentTrack(targetTrack);
+            if (this.options.debug) {
+                console.log('✅ Switched to track:', targetTrack.index);
+            }
+        }
+
+        // Force quality on current track
+        setTimeout(() => {
+            try {
+                // Use the MediaPlayer API to set quality
+                this.dashPlayer.updateSettings({
+                    streaming: {
+                        abr: {
+                            initialBitrate: { video: targetQuality.bandwidth / 1000 },
+                            maxBitrate: { video: targetQuality.bandwidth / 1000 },
+                            minBitrate: { video: targetQuality.bandwidth / 1000 }
+                        }
+                    }
+                });
+
+                if (this.options.debug) {
+                    console.log('✅ Quality locked to:', targetHeight + 'p', 'bandwidth:', targetQuality.bandwidth);
+                }
+
+                // Update button text immediately
+                const qualityBtnText = this.controls?.querySelector('.quality-btn .selected-quality');
+                if (qualityBtnText) {
+                    qualityBtnText.textContent = `${targetHeight}p`;
+                }
+
+                // Force reload of segments at new quality
+                const currentTime = this.video.currentTime;
+                this.dashPlayer.seek(currentTime + 0.1);
+                setTimeout(() => {
+                    this.dashPlayer.seek(currentTime);
+                }, 100);
+
+            } catch (innerError) {
+                if (this.options.debug) console.error('❌ Error setting quality:', innerError);
+            }
+        }, 100);
+
+    } catch (error) {
+        if (this.options.debug) console.error('❌ Error in setDashQualityByHeight:', error);
+    }
+}
+
+setDashQuality(qualityIndex) {
+    if (!this.dashPlayer) return;
+
+    try {
+        const selectedQuality = this.adaptiveQualities[qualityIndex];
+        if (!selectedQuality) {
+            if (this.options.debug) console.error('❌ Quality not found at index:', qualityIndex);
+            return;
+        }
+
+        if (this.options.debug) {
+            console.log('🎬 Setting DASH quality:', selectedQuality);
+        }
+
+        // Disable auto quality
+        this.dashPlayer.updateSettings({
+            streaming: {
+                abr: {
+                    autoSwitchBitrate: { video: false }
+                }
+            }
+        });
+
+        // Set the specific quality using bitrateIndex
+        setTimeout(() => {
+            try {
+                this.dashPlayer.setQualityFor('video', selectedQuality.bitrateIndex);
+
+                if (this.options.debug) {
+                    console.log('✅ DASH quality set to bitrateIndex:', selectedQuality.bitrateIndex, 'height:', selectedQuality.height);
+                }
+
+                // Update button text immediately
+                const qualityBtnText = this.controls?.querySelector('.quality-btn .selected-quality');
+                if (qualityBtnText) {
+                    qualityBtnText.textContent = selectedQuality.label;
+                }
+
+            } catch (innerError) {
+                if (this.options.debug) console.error('❌ Error setting quality:', innerError);
+            }
+        }, 100);
+
+    } catch (error) {
+        if (this.options.debug) console.error('❌ Error in setDashQuality:', error);
+    }
+}
 
     handleAdaptiveError(data) {
         if (this.options.debug) console.error('📡 Fatal adaptive streaming error:', data);