myetv-player 1.1.0 → 1.1.2

package/dist/myetv-player.js

@@ -433,6 +433,7 @@ constructor(videoElement, options = {}) {
         brandLogoEnabled: false,  // Enable/disable brand logo
         brandLogoUrl: '',         // URL for brand logo image
         brandLogoLinkUrl: '',     // Optional URL to open when clicking the logo
+        brandLogoTooltipText: '', // Tooltip text for brand logo
         playlistEnabled: true,    // Enable/disable playlist detection
         playlistAutoPlay: true,   // Auto-play next video when current ends
         playlistLoop: false,      // Loop playlist when reaching the end
@@ -465,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;
@@ -508,18 +508,42 @@ constructor(videoElement, options = {}) {
 
     // Custom event system
     this.eventCallbacks = {
-        'played': [],
-        'paused': [],
-        'subtitlechange': [],
-        'chapterchange': [],
-        'pipchange': [],
-        'fullscreenchange': [],
-        'speedchange': [],
-        'timeupdate': [],
-        'volumechange': [],
-        'qualitychange': [],
-        'playlistchange': [],
-        'ended': []
+        // Core lifecycle events
+        'playerready': [],     // Fired when player is fully initialized and ready
+        'played': [],          // Fired when video starts playing
+        'paused': [],          // Fired when video is paused
+        'ended': [],           // Fired when video playback ends
+
+        // Playback state events
+        'playing': [],         // Fired when video is actually playing (after buffering)
+        'waiting': [],         // Fired when video is waiting for data (buffering)
+        'seeking': [],         // Fired when seek operation starts
+        'seeked': [],          // Fired when seek operation completes
+
+        // Loading events
+        'loadstart': [],       // Fired when browser starts looking for media
+        'loadedmetadata': [],  // Fired when metadata (duration, dimensions) is loaded
+        'loadeddata': [],      // Fired when data for current frame is loaded
+        'canplay': [],         // Fired when browser can start playing video
+        'progress': [],        // Fired periodically while downloading media
+        'durationchange': [],  // Fired when duration attribute changes
+
+        // Error events
+        'error': [],           // Fired when media loading or playback error occurs
+        'stalled': [],         // Fired when browser is trying to get data but it's not available
+
+        // Control events
+        'timeupdate': [],      // Fired when current playback position changes
+        'volumechange': [],    // Fired when volume or muted state changes
+        'speedchange': [],     // Fired when playback speed changes
+        'qualitychange': [],   // Fired when video quality changes
+
+        // Feature events
+        'subtitlechange': [],  // Fired when subtitle track changes
+        'chapterchange': [],   // Fired when video chapter changes
+        'pipchange': [],       // Fired when picture-in-picture mode changes
+        'fullscreenchange': [], // Fired when fullscreen mode changes
+        'playlistchange': []   // Fired when playlist item changes
     };
 
     // Playlist management
@@ -553,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) {
@@ -881,6 +906,14 @@ markPlayerReady() {
             this.container.classList.add('player-initialized');
         }
 
+        this.triggerEvent('playerready', {
+            playerState: this.getPlayerState(),
+            qualities: this.qualities,
+            subtitles: this.textTracks,
+            chapters: this.chapters,
+            playlist: this.getPlaylistInfo()
+        });
+
         if (this.video) {
             this.video.style.visibility = '';
             this.video.style.opacity = '';
@@ -1161,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() {
@@ -1539,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();
 
@@ -1553,6 +1598,7 @@ startSeeking(e) {
 }
 
 continueSeeking(e) {
+    if (e.cancelable) e.preventDefault();
     if (this.isUserSeeking && !this.isChangingQuality) {
         this.seek(e);
     }
@@ -1560,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();
@@ -1742,7 +1792,14 @@ createBrandLogo() {
     const logo = document.createElement('img');
     logo.className = 'brand-logo';
     logo.src = this.options.brandLogoUrl;
-    logo.alt = this.t('brand_logo');
+    logo.alt = 'Brand logo';
+
+    // Add tooltip ONLY if link URL is present
+    if (this.options.brandLogoLinkUrl) {
+        // Use custom tooltip text if provided, otherwise fallback to URL
+        logo.title = this.options.brandLogoTooltipText || this.options.brandLogoLinkUrl;
+        // NON usare data-tooltip per evitare che venga sovrascritto da updateTooltips()
+    }
 
     // Handle loading error
     logo.onerror = () => {
@@ -1758,7 +1815,7 @@ createBrandLogo() {
     if (this.options.brandLogoLinkUrl) {
         logo.style.cursor = 'pointer';
         logo.addEventListener('click', (e) => {
-            e.stopPropagation(); // Prevent video controls interference
+            e.stopPropagation();
             window.open(this.options.brandLogoLinkUrl, '_blank', 'noopener,noreferrer');
             if (this.options.debug) console.log('Brand logo clicked, opening:', this.options.brandLogoLinkUrl);
         });
@@ -1766,15 +1823,10 @@ createBrandLogo() {
         logo.style.cursor = 'default';
     }
 
-    // Position the brand logo at the right of the controlbar (at the left of the buttons)
     controlsRight.insertBefore(logo, controlsRight.firstChild);
 
     if (this.options.debug) {
-        if (this.options.brandLogoLinkUrl) {
-            console.log('Brand logo with click handler created for:', this.options.brandLogoLinkUrl);
-        } else {
-            console.log('Brand logo created (no link)');
-        }
+        console.log('Brand logo created with tooltip:', logo.title || 'no tooltip');
     }
 }
 
@@ -1981,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) {
@@ -2420,36 +2472,130 @@ addEventListener(eventType, callback) {
     }
 
     bindEvents() {
-        if (this.video) {
-            this.video.addEventListener('loadedmetadata', () => {
-                this.updateDuration();
-                setTimeout(() => {
-                    this.initializeSubtitles();
-                }, 100);
+    if (this.video) {
+
+        // Playback events
+        this.video.addEventListener('playing', () => {
+            this.hideLoading();
+            this.closeAllMenus();
+            // Trigger playing event - video is now actually playing
+            this.triggerEvent('playing', {
+                currentTime: this.getCurrentTime(),
+                duration: this.getDuration()
             });
-            this.video.addEventListener('timeupdate', () => this.updateProgress());
-            this.video.addEventListener('progress', () => this.updateBuffer());
-            this.video.addEventListener('waiting', () => {
-                if (!this.isChangingQuality) {
-                    this.showLoading();
-                }
+        });
+
+        this.video.addEventListener('waiting', () => {
+            if (!this.isChangingQuality) {
+                this.showLoading();
+                // Trigger waiting event - video is buffering
+                this.triggerEvent('waiting', {
+                    currentTime: this.getCurrentTime()
+                });
+            }
+        });
+
+        this.video.addEventListener('seeking', () => {
+            // Trigger seeking event - seek operation started
+            this.triggerEvent('seeking', {
+                currentTime: this.getCurrentTime(),
+                targetTime: this.video.currentTime
             });
-            this.video.addEventListener('canplay', () => {
-                if (!this.isChangingQuality) {
-                    this.hideLoading();
-                }
+        });
+
+        this.video.addEventListener('seeked', () => {
+            // Trigger seeked event - seek operation completed
+            this.triggerEvent('seeked', {
+                currentTime: this.getCurrentTime()
             });
-            this.video.addEventListener('ended', () => this.onVideoEnded());
-            this.video.addEventListener('loadstart', () => {
-                if (!this.isChangingQuality) {
-                    this.showLoading();
-                }
+        });
+
+        // Loading events
+        this.video.addEventListener('loadstart', () => {
+            if (!this.isChangingQuality) {
+                this.showLoading();
+            }
+            // Trigger loadstart event - browser started loading media
+            this.triggerEvent('loadstart');
+        });
+
+        this.video.addEventListener('loadedmetadata', () => {
+            this.updateDuration();
+
+            // Trigger loadedmetadata event - video metadata loaded
+            this.triggerEvent('loadedmetadata', {
+                duration: this.getDuration(),
+                videoWidth: this.video.videoWidth,
+                videoHeight: this.video.videoHeight
             });
-            this.video.addEventListener('loadeddata', () => {
-                if (!this.isChangingQuality) {
-                    this.hideLoading();
-                }
+
+            // Initialize subtitles after metadata is loaded
+            setTimeout(() => {
+                this.initializeSubtitles();
+            }, 100);
+        });
+
+        this.video.addEventListener('loadeddata', () => {
+            if (!this.isChangingQuality) {
+                this.hideLoading();
+            }
+            // Trigger loadeddata event - current frame data loaded
+            this.triggerEvent('loadeddata', {
+                currentTime: this.getCurrentTime()
+            });
+        });
+
+        this.video.addEventListener('canplay', () => {
+            if (!this.isChangingQuality) {
+                this.hideLoading();
+            }
+            // Trigger canplay event - video can start playing
+            this.triggerEvent('canplay', {
+                currentTime: this.getCurrentTime(),
+                duration: this.getDuration()
             });
+        });
+
+        this.video.addEventListener('progress', () => {
+            this.updateBuffer();
+            // Trigger progress event - browser is downloading media
+            this.triggerEvent('progress', {
+                buffered: this.getBufferedTime(),
+                duration: this.getDuration()
+            });
+        });
+
+        this.video.addEventListener('durationchange', () => {
+            this.updateDuration();
+            // Trigger durationchange event - video duration changed
+            this.triggerEvent('durationchange', {
+                duration: this.getDuration()
+            });
+        });
+
+        // Error events
+        this.video.addEventListener('error', (e) => {
+            this.onVideoError(e);
+            // Trigger error event - media loading/playback error occurred
+            this.triggerEvent('error', {
+                code: this.video.error?.code,
+                message: this.video.error?.message,
+                src: this.video.currentSrc || this.video.src
+            });
+        });
+
+        this.video.addEventListener('stalled', () => {
+            // Trigger stalled event - browser is trying to fetch data but it's not available
+            this.triggerEvent('stalled', {
+                currentTime: this.getCurrentTime()
+            });
+        });
+
+
+            this.video.addEventListener('timeupdate', () => this.updateProgress());
+
+            this.video.addEventListener('ended', () => this.onVideoEnded());
+
             // Complete video click logic with doubleTapPause support (DESKTOP)
             this.video.addEventListener('click', () => {
                 if (!this.options.pauseClick) return;
@@ -2556,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) => {
@@ -2978,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">
@@ -4979,11 +5129,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');
     }
 }
@@ -5019,14 +5169,6 @@ 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();
-        });
-    }
-
     var subtitlesMenu = this.controls && this.controls.querySelector('.subtitles-menu');
     if (subtitlesMenu) {
         subtitlesMenu.addEventListener('click', function (e) {
@@ -5035,6 +5177,7 @@ bindSubtitleEvents() {
     }
 }
 
+
 handleSubtitlesMenuClick(e) {
     if (!e.target.classList.contains('subtitles-option')) return;