myetv-player 1.1.0 → 1.1.2

package/dist/myetv-player.min.js

@@ -419,6 +419,7 @@ constructor(videoElement, options = {}) {
         brandLogoEnabled: false, 
         brandLogoUrl: '',        
         brandLogoLinkUrl: '',    
+        brandLogoTooltipText: '',
         playlistEnabled: true,   
         playlistAutoPlay: true,  
         playlistLoop: false,     
@@ -451,7 +452,6 @@ constructor(videoElement, options = {}) {
     this.currentQualityIndex = 0;
     this.qualities = [];
     this.originalSources = [];
-        this.setupMenuToggles();
     this.isPiPSupported = this.checkPiPSupport();
     this.seekTooltip = null;
     this.titleOverlay = null;
@@ -494,18 +494,42 @@ constructor(videoElement, options = {}) {
 
    
     this.eventCallbacks = {
-        'played': [],
-        'paused': [],
-        'subtitlechange': [],
-        'chapterchange': [],
-        'pipchange': [],
+       
+        'playerready': [],    
+        'played': [],         
+        'paused': [],         
+        'ended': [],          
+
+       
+        'playing': [],        
+        'waiting': [],        
+        'seeking': [],        
+        'seeked': [],         
+
+       
+        'loadstart': [],      
+        'loadedmetadata': [], 
+        'loadeddata': [],     
+        'canplay': [],        
+        'progress': [],       
+        'durationchange': [], 
+
+       
+        'error': [],          
+        'stalled': [],        
+
+       
+        'timeupdate': [],     
+        'volumechange': [],   
+        'speedchange': [],    
+        'qualitychange': [],  
+
+       
+        'subtitlechange': [], 
+        'chapterchange': [],  
+        'pipchange': [],      
         'fullscreenchange': [],
-        'speedchange': [],
-        'timeupdate': [],
-        'volumechange': [],
-        'qualitychange': [],
-        'playlistchange': [],
-        'ended': []
+        'playlistchange': []  
     };
 
    
@@ -539,6 +563,7 @@ constructor(videoElement, options = {}) {
         this.interceptAutoLoading();
         this.createPlayerStructure();
         this.initializeElements();
+        this.setupMenuToggles();
        
         this.adaptToAudioFile = function () {
             if (this.options.audiofile) {
@@ -867,6 +892,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 = '';
@@ -1147,72 +1180,82 @@ initializeElements() {
     this.speedMenu = this.controls?.querySelector('.speed-menu');
     this.qualityMenu = this.controls?.querySelector('.quality-menu');
     this.subtitlesMenu = this.controls?.querySelector('.subtitles-menu');
+   
+    if (this.progressHandle && this.options.seekHandleShape) {
+        this.setSeekHandleShape(this.options.seekHandleShape);
+    }
 }
 
 closeAllMenus() {
-   
-    const allMenus = this.controls?.querySelectorAll('[class*="-menu"].active');
-    allMenus?.forEach(menu => {
-        menu.classList.remove('active');
-    });
+    if (!this.controls) return;
 
-   
-    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');
+    }
 }
 
 setupMenuToggles() {
-   
-    if (this.controls) {
-        this.controls.addEventListener('click', (e) => {
-           
-            const button = e.target.closest('.control-btn');
+    if (!this.controls) return;
 
-            if (!button) return;
+    this.currentOpenMenu = null;
 
-           
-            const buttonClasses = button.className.split(' ');
-            let menuClass = null;
+    this.controls.addEventListener('click', (e) => {
+        const button = e.target.closest('.control-btn');
+        if (!button) return;
 
-           
-            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;
-                    }
-                }
+        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();
 
-           
-            const menu = this.controls.querySelector('.' + menuClass);
-            const isOpen = menu.classList.contains('active');
+        const isOpen = menuElement.classList.contains('active');
 
-           
-            this.closeAllMenus();
+        this.closeAllMenus();
 
-           
-            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);
+            }
+        }
+    });
 
-   
     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() {
@@ -1516,9 +1559,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();
 
@@ -1530,6 +1575,7 @@ startSeeking(e) {
 }
 
 continueSeeking(e) {
+    if (e.cancelable) e.preventDefault();
     if (this.isUserSeeking && !this.isChangingQuality) {
         this.seek(e);
     }
@@ -1537,9 +1583,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();
@@ -1716,7 +1766,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';
+
+   
+    if (this.options.brandLogoLinkUrl) {
+       
+        logo.title = this.options.brandLogoTooltipText || this.options.brandLogoLinkUrl;
+       
+    }
 
    
     logo.onerror = () => {
@@ -1740,15 +1797,10 @@ createBrandLogo() {
         logo.style.cursor = 'default';
     }
 
-   
     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');
     }
 }
 
@@ -1947,7 +1999,7 @@ bindPosterEvents() {
    
     this.video.addEventListener('playing', () => {
         this.hidePoster();
-    });
+        });
 
    
     if (!this.options.autoplay) {
@@ -2335,36 +2387,130 @@ addEventListener(eventType, callback) {
     }
 
     bindEvents() {
-        if (this.video) {
-            this.video.addEventListener('loadedmetadata', () => {
-                this.updateDuration();
-                setTimeout(() => {
-                    this.initializeSubtitles();
-                }, 100);
+    if (this.video) {
+
+       
+        this.video.addEventListener('playing', () => {
+            this.hideLoading();
+            this.closeAllMenus();
+           
+            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();
+               
+                this.triggerEvent('waiting', {
+                    currentTime: this.getCurrentTime()
+                });
+            }
+        });
+
+        this.video.addEventListener('seeking', () => {
+           
+            this.triggerEvent('seeking', {
+                currentTime: this.getCurrentTime(),
+                targetTime: this.video.currentTime
             });
-            this.video.addEventListener('canplay', () => {
-                if (!this.isChangingQuality) {
-                    this.hideLoading();
-                }
+        });
+
+        this.video.addEventListener('seeked', () => {
+           
+            this.triggerEvent('seeked', {
+                currentTime: this.getCurrentTime()
             });
-            this.video.addEventListener('ended', () => this.onVideoEnded());
-            this.video.addEventListener('loadstart', () => {
-                if (!this.isChangingQuality) {
-                    this.showLoading();
-                }
+        });
+
+       
+        this.video.addEventListener('loadstart', () => {
+            if (!this.isChangingQuality) {
+                this.showLoading();
+            }
+           
+            this.triggerEvent('loadstart');
+        });
+
+        this.video.addEventListener('loadedmetadata', () => {
+            this.updateDuration();
+
+           
+            this.triggerEvent('loadedmetadata', {
+                duration: this.getDuration(),
+                videoWidth: this.video.videoWidth,
+                videoHeight: this.video.videoHeight
             });
-            this.video.addEventListener('loadeddata', () => {
-                if (!this.isChangingQuality) {
-                    this.hideLoading();
-                }
+
+           
+            setTimeout(() => {
+                this.initializeSubtitles();
+            }, 100);
+        });
+
+        this.video.addEventListener('loadeddata', () => {
+            if (!this.isChangingQuality) {
+                this.hideLoading();
+            }
+           
+            this.triggerEvent('loadeddata', {
+                currentTime: this.getCurrentTime()
+            });
+        });
+
+        this.video.addEventListener('canplay', () => {
+            if (!this.isChangingQuality) {
+                this.hideLoading();
+            }
+           
+            this.triggerEvent('canplay', {
+                currentTime: this.getCurrentTime(),
+                duration: this.getDuration()
             });
+        });
+
+        this.video.addEventListener('progress', () => {
+            this.updateBuffer();
+           
+            this.triggerEvent('progress', {
+                buffered: this.getBufferedTime(),
+                duration: this.getDuration()
+            });
+        });
+
+        this.video.addEventListener('durationchange', () => {
+            this.updateDuration();
+           
+            this.triggerEvent('durationchange', {
+                duration: this.getDuration()
+            });
+        });
+
+       
+        this.video.addEventListener('error', (e) => {
+            this.onVideoError(e);
+           
+            this.triggerEvent('error', {
+                code: this.video.error?.code,
+                message: this.video.error?.message,
+                src: this.video.currentSrc || this.video.src
+            });
+        });
+
+        this.video.addEventListener('stalled', () => {
+           
+            this.triggerEvent('stalled', {
+                currentTime: this.getCurrentTime()
+            });
+        });
+
+
+            this.video.addEventListener('timeupdate', () => this.updateProgress());
+
+            this.video.addEventListener('ended', () => this.onVideoEnded());
+
            
             this.video.addEventListener('click', () => {
                 if (!this.options.pauseClick) return;
@@ -2471,6 +2617,10 @@ addEventListener(eventType, callback) {
        
         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 });
+        }
 
        
         this.progressContainer.addEventListener('touchstart', (e) => {
@@ -2889,13 +3039,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">
@@ -4884,11 +5034,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');
     }
 }
@@ -4924,14 +5074,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) {
@@ -4940,6 +5082,7 @@ bindSubtitleEvents() {
     }
 }
 
+
 handleSubtitlesMenuClick(e) {
     if (!e.target.classList.contains('subtitles-option')) return;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myetv-player",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "MYETV Video Player - Modular JavaScript and SCSS Build System",
   "main": "dist/myetv-player.js",
   "scripts": {
@@ -33,3 +33,5 @@
 
 
 
+
+