myetv-player 1.1.1 → 1.1.2

package/dist/myetv-player.js

@@ -466,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;
@@ -578,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) {
@@ -1194,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() {
@@ -1572,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();
 
@@ -1586,6 +1598,7 @@ startSeeking(e) {
 }
 
 continueSeeking(e) {
+    if (e.cancelable) e.preventDefault();
     if (this.isUserSeeking && !this.isChangingQuality) {
         this.seek(e);
     }
@@ -1593,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();
@@ -2016,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) {
@@ -2460,6 +2477,7 @@ addEventListener(eventType, callback) {
         // Playback events
         this.video.addEventListener('playing', () => {
             this.hideLoading();
+            this.closeAllMenus();
             // Trigger playing event - video is now actually playing
             this.triggerEvent('playing', {
                 currentTime: this.getCurrentTime(),
@@ -2684,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) => {
@@ -3106,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">
@@ -5107,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');
     }
 }
@@ -5147,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) {
@@ -5163,6 +5177,7 @@ bindSubtitleEvents() {
     }
 }
 
+
 handleSubtitlesMenuClick(e) {
     if (!e.target.classList.contains('subtitles-option')) return;
 

package/dist/myetv-player.min.js

@@ -452,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;
@@ -564,6 +563,7 @@ constructor(videoElement, options = {}) {
         this.interceptAutoLoading();
         this.createPlayerStructure();
         this.initializeElements();
+        this.setupMenuToggles();
        
         this.adaptToAudioFile = function () {
             if (this.options.audiofile) {
@@ -1180,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() {
@@ -1549,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();
 
@@ -1563,6 +1575,7 @@ startSeeking(e) {
 }
 
 continueSeeking(e) {
+    if (e.cancelable) e.preventDefault();
     if (this.isUserSeeking && !this.isChangingQuality) {
         this.seek(e);
     }
@@ -1570,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();
@@ -1982,7 +1999,7 @@ bindPosterEvents() {
    
     this.video.addEventListener('playing', () => {
         this.hidePoster();
-    });
+        });
 
    
     if (!this.options.autoplay) {
@@ -2375,6 +2392,7 @@ addEventListener(eventType, callback) {
        
         this.video.addEventListener('playing', () => {
             this.hideLoading();
+            this.closeAllMenus();
            
             this.triggerEvent('playing', {
                 currentTime: this.getCurrentTime(),
@@ -2599,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) => {
@@ -3017,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">
@@ -5012,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');
     }
 }
@@ -5052,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) {
@@ -5068,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.1",
+  "version": "1.1.2",
   "description": "MYETV Video Player - Modular JavaScript and SCSS Build System",
   "main": "dist/myetv-player.js",
   "scripts": {
@@ -34,3 +34,4 @@
 
 
 
+

package/plugins/youtube/myetv-player-youtube-plugin.js

@@ -54,6 +54,7 @@
             this.mouseMoveOverlay = null;
             this.qualityCheckAttempts = 0;
             this.captionCheckAttempts = 0;
+            this.liveStreamChecked = false;
             this.captionStateCheckInterval = null;
             this.qualityMonitorInterval = null;
             this.resizeListenerAdded = false;
@@ -77,6 +78,7 @@
                 { code: 'ar', name: 'Arabic' },
                 { code: 'pt', name: 'Portuguese' },
                 { code: 'ru', name: 'Russian' },
+                { code: 'zh', name: 'Chinese' },
                 { code: 'ja', name: 'Japanese' },
                 { code: 'de', name: 'German' },
                 { code: 'fr', name: 'French' },
@@ -1179,10 +1181,11 @@ startBufferMonitoring() {
             // Handle responsive layout for PiP and subtitles buttons
             this.handleResponsiveLayout();
 
+            this.playAttemptTimeout = null;
+
             // Hide PiP from settings menu (separate function, called after responsive layout)
             setTimeout(() => this.hidePipFromSettingsMenuOnly(), 500);
-            setTimeout(() => this.hidePipFromSettingsMenuOnly(), 1500);
-            setTimeout(() => this.hidePipFromSettingsMenuOnly(), 3000);
+
             // Check if this is a live stream
             setTimeout(() => this.checkIfLiveStream(), 2000);
             setTimeout(() => this.checkIfLiveStream(), 5000);
@@ -1199,13 +1202,9 @@ startBufferMonitoring() {
 
             // Load qualities with multiple attempts
             setTimeout(() => this.loadAvailableQualities(), 500);
-            setTimeout(() => this.loadAvailableQualities(), 1000);
-            setTimeout(() => this.loadAvailableQualities(), 2000);
 
             // Load captions with multiple attempts
             setTimeout(() => this.loadAvailableCaptions(), 500);
-            setTimeout(() => this.loadAvailableCaptions(), 1000);
-            setTimeout(() => this.loadAvailableCaptions(), 2000);
 
             if (this.options.quality && this.options.quality !== 'default') {
                 setTimeout(() => this.setQuality(this.options.quality), 1000);
@@ -2701,6 +2700,49 @@ startBufferMonitoring() {
             };
             if (this.api.player.options.debug) console.log('[YT Plugin] State:', states[event.data], event.data);
 
+            // Know if video have some problems to start
+            if (event.data === YT.PlayerState.UNSTARTED || event.data === -1) {
+                // start timeout when video is unstarted
+                if (this.playAttemptTimeout) {
+                    clearTimeout(this.playAttemptTimeout);
+                }
+
+                this.playAttemptTimeout = setTimeout(() => {
+                    if (!this.ytPlayer) return;
+
+                    const currentState = this.ytPlayer.getPlayerState();
+
+                    // If video is unstrated after timeout, consider it restricted
+                    if (currentState === YT.PlayerState.UNSTARTED || currentState === -1) {
+                        if (this.api.player.options.debug) {
+                            console.log('YT Plugin: Video stuck in UNSTARTED - possibly members-only or restricted');
+                        }
+
+                        // Trigger ended event
+                        this.api.triggerEvent('ended', {
+                            reason: 'video_restricted_or_membership',
+                            state: currentState
+                        });
+
+                        // Show poster overlay if present
+                        this.showPosterOverlay();
+
+                        // Trigger custom event
+                        this.api.triggerEvent('youtubeplugin:membershiprestricted', {
+                            videoId: this.videoId
+                        });
+                    }
+                }, 15000); // 15 seconds of timeout
+
+            } else if (event.data === YT.PlayerState.PLAYING ||
+                event.data === YT.PlayerState.BUFFERING) {
+                // Clear the timeout if video starts correctly
+                if (this.playAttemptTimeout) {
+                    clearTimeout(this.playAttemptTimeout);
+                    this.playAttemptTimeout = null;
+                }
+            }
+
             // Get play/pause icons
             const playIcon = this.api.container.querySelector('.play-icon');
             const pauseIcon = this.api.container.querySelector('.pause-icon');
@@ -3286,6 +3328,12 @@ startBufferMonitoring() {
         dispose() {
             if (this.api.player.options.debug) console.log('[YT Plugin] Disposing');
 
+            // Cleanup timeout
+            if (this.playAttemptTimeout) {
+                clearTimeout(this.playAttemptTimeout);
+                this.playAttemptTimeout = null;
+            }
+
             if (this.timeUpdateInterval) {
                 clearInterval(this.timeUpdateInterval);
                 this.timeUpdateInterval = null;