myetv-player 1.1.1 → 1.1.2

package/src/controls.js

@@ -368,13 +368,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">

package/src/core.js

@@ -70,7 +70,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;
@@ -182,6 +181,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) {
@@ -798,74 +798,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() {
@@ -1176,9 +1186,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();
 
@@ -1190,6 +1202,7 @@ startSeeking(e) {
 }
 
 continueSeeking(e) {
+    if (e.cancelable) e.preventDefault();
     if (this.isUserSeeking && !this.isChangingQuality) {
         this.seek(e);
     }
@@ -1197,9 +1210,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();
@@ -1620,7 +1637,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) {

package/src/events.js

@@ -170,6 +170,7 @@
         // Playback events
         this.video.addEventListener('playing', () => {
             this.hideLoading();
+            this.closeAllMenus();
             // Trigger playing event - video is now actually playing
             this.triggerEvent('playing', {
                 currentTime: this.getCurrentTime(),
@@ -394,6 +395,10 @@
         // 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) => {

package/src/subtitles.js

@@ -343,11 +343,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');
     }
 }
@@ -383,14 +383,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) {
@@ -399,6 +391,7 @@ bindSubtitleEvents() {
     }
 }
 
+
 handleSubtitlesMenuClick(e) {
     if (!e.target.classList.contains('subtitles-option')) return;