myetv-player 1.1.3 → 1.1.5

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

@@ -271,42 +271,46 @@
          * Set auto caption language on player initialization
          */
         setAutoCaptionLanguage() {
-            if (!this.options.autoCaptionLanguage || !this.ytPlayer) {
-                return;
-            }
+            if (!this.options.autoCaptionLanguage || !this.ytPlayer) return;
 
             try {
                 if (this.api.player.options.debug) {
-                    console.log('[YT Plugin] Setting auto caption language to', this.options.autoCaptionLanguage);
+                    console.log('YT Plugin: Setting auto caption language to', this.options.autoCaptionLanguage);
                 }
 
                 this.ytPlayer.setOption('captions', 'reload', true);
                 this.ytPlayer.loadModule('captions');
-
                 this.ytPlayer.setOption('captions', 'track', {
-                    'translationLanguage': this.options.autoCaptionLanguage
+                    translationLanguage: { languageCode: this.options.autoCaptionLanguage }
                 });
 
                 this.captionsEnabled = true;
+                this.currentTranslation = this.options.autoCaptionLanguage;
 
                 const subtitlesBtn = this.api.container.querySelector('.subtitles-btn');
                 if (subtitlesBtn) {
                     subtitlesBtn.classList.add('active');
                 }
 
+                // update menu selection after a short delay
+                setTimeout(() => {
+                    this.updateMenuSelection(`translate-${this.options.autoCaptionLanguage}`);
+                }, 500);
+
                 if (this.api.player.options.debug) {
-                    console.log('[YT Plugin] Auto caption language set successfully');
+                    console.log('YT Plugin: Auto caption language set successfully');
                 }
-
             } catch (error) {
                 if (this.api.player.options.debug) {
-                    console.error('[YT Plugin] Error setting auto caption language', error);
+                    console.error('YT Plugin: Error setting auto caption language', error);
                 }
             }
         }
 
+        /**
+         * Handle responsive layout for mobile settings
+         */
         handleResponsiveLayout() {
-
             const containerWidth = this.api.container.offsetWidth;
             const pipBtn = this.api.container.querySelector('.pip-btn');
             const subtitlesBtn = this.api.container.querySelector('.subtitles-btn');
@@ -319,11 +323,66 @@
 
             // Breakpoint at 600px
             if (containerWidth < 600) {
+                // Add max-height and scroll to settings menu on mobile
+                if (settingsMenu) {
+                    const playerHeight = this.api.container.offsetHeight;
+                    const maxMenuHeight = playerHeight - 100; // Leave 100px margin from top/bottom
+
+                    settingsMenu.style.maxHeight = `${maxMenuHeight}px`;
+                    settingsMenu.style.overflowY = 'auto';
+                    settingsMenu.style.overflowX = 'hidden';
+
+                    // Add scrollbar styling
+                    if (!document.getElementById('yt-settings-scrollbar-style')) {
+                        const scrollbarStyle = document.createElement('style');
+                        scrollbarStyle.id = 'yt-settings-scrollbar-style';
+                        scrollbarStyle.textContent = `
+                    .settings-menu::-webkit-scrollbar {
+                        width: 6px;
+                    }
+                    .settings-menu::-webkit-scrollbar-track {
+                        background: rgba(255,255,255,0.05);
+                        border-radius: 3px;
+                    }
+                    .settings-menu::-webkit-scrollbar-thumb {
+                        background: rgba(255,255,255,0.3);
+                        border-radius: 3px;
+                    }
+                    .settings-menu::-webkit-scrollbar-thumb:hover {
+                        background: rgba(255,255,255,0.5);
+                    }
+                `;
+                        document.head.appendChild(scrollbarStyle);
+                    }
+
+                    // Firefox scrollbar
+                    settingsMenu.style.scrollbarWidth = 'thin';
+                    settingsMenu.style.scrollbarColor = 'rgba(255,255,255,0.3) transparent';
+                }
+
                 // Hide subtitles button
                 if (subtitlesBtn) {
                     subtitlesBtn.style.display = 'none';
                 }
 
+                // Hide original speed menu option from settings (if exists)
+                if (settingsMenu) {
+                    // Hide old non-expandable speed option
+                    const originalSpeedOption = settingsMenu.querySelector('[data-action="speed"]');
+                    if (originalSpeedOption) {
+                        originalSpeedOption.style.display = 'none';
+                    }
+
+                    // Hide new expandable speed option
+                    const expandableSpeedWrapper = settingsMenu.querySelector('[data-action="speed-expand"]');
+                    if (expandableSpeedWrapper) {
+                        const wrapper = expandableSpeedWrapper.closest('.settings-expandable-wrapper');
+                        if (wrapper) {
+                            wrapper.style.display = 'none';
+                        }
+                    }
+                }
+
                 // Add subtitles option to settings menu
                 if (settingsMenu) {
                     let subtitlesWrapper = settingsMenu.querySelector('.yt-subtitles-wrapper');
@@ -345,121 +404,236 @@
                         // Create trigger
                         const trigger = document.createElement('div');
                         trigger.className = 'quality-option';
+                        trigger.style.fontSize = '10px';
                         trigger.textContent = subtitlesText;
 
-                        // Create submenu
-                        const submenu = document.createElement('div');
-                        submenu.className = 'yt-subtitles-submenu';
-                        submenu.style.cssText = `
+                        // Add arrow indicator
+                        const arrow = document.createElement('span');
+                        arrow.textContent = ' ▼';
+                        arrow.style.cssText = 'font-size: 8px; transition: transform 0.2s;';
+                        trigger.appendChild(arrow);
+
+                        // Container for expanded options
+                        const optionsContainer = document.createElement('div');
+                        optionsContainer.className = 'yt-subtitles-options';
+                        optionsContainer.style.cssText = `
                     display: none;
-                    position: absolute;
-                    right: 100%;
-                    top: 0;
-                    margin-right: 5px;
-                    background: #1c1c1c;
-                    border: 1px solid rgba(255,255,255,0.1);
-                    border-radius: 4px;
-                    padding: 8px 0;
-                    z-index: 999999;
-                    color: white;
-width: fit-content;
-                    max-width: 180px;
-                    max-height: 250px;
-                    overflow-y: auto;
-                    overflow-x: hidden;`;
-
-                        // Hover state tracking
-                        let isHoveringTrigger = false;
-                        let isHoveringSubmenu = false;
-                        let hideTimeout = null;
-
-                        const checkAndHide = () => {
-                            if (hideTimeout) clearTimeout(hideTimeout);
-                            hideTimeout = setTimeout(() => {
-                                if (!isHoveringTrigger && !isHoveringSubmenu) {
-                                    submenu.style.display = 'none';
+                    padding-left: 15px;
+                    margin-top: 4px;
+                `;
+
+                        // Function to rebuild options from main menu
+                        const rebuildOptions = () => {
+                            const mainSubtitlesMenu = this.api.container.querySelector('.subtitles-menu');
+                            if (!mainSubtitlesMenu) return;
+
+                            // Clone all options from main menu
+                            optionsContainer.innerHTML = '';
+                            const options = mainSubtitlesMenu.querySelectorAll('.subtitles-option');
+
+                            options.forEach(option => {
+                                const clonedOption = option.cloneNode(true);
+                                clonedOption.style.cssText = `
+                            padding: 6px 12px;
+                            cursor: pointer;
+                            color: white;
+                            font-size: 10px;
+                            white-space: normal;
+                            word-wrap: break-word;
+                            opacity: 0.8;
+                            transition: opacity 0.2s;
+                        `;
+
+                                // Highlight selected option
+                                if (option.classList.contains('selected')) {
+                                    clonedOption.style.opacity = '1';
+                                    clonedOption.style.fontWeight = 'bold';
                                 }
-                            }, 200);
+
+                                // Hover effect
+                                clonedOption.addEventListener('mouseenter', () => {
+                                    clonedOption.style.opacity = '1';
+                                });
+                                clonedOption.addEventListener('mouseleave', () => {
+                                    if (!option.classList.contains('selected')) {
+                                        clonedOption.style.opacity = '0.8';
+                                    }
+                                });
+
+                                // Add click handler
+                                clonedOption.addEventListener('click', (e) => {
+                                    e.stopPropagation();
+
+                                    // Trigger click on original option
+                                    option.click();
+
+                                    // Rebuild to update selection
+                                    setTimeout(() => {
+                                        rebuildOptions();
+                                    }, 50);
+                                });
+
+                                optionsContainer.appendChild(clonedOption);
+                            });
                         };
 
-                        // Add OFF option
-                        const offOption = document.createElement('div');
-                        offOption.className = 'quality-option';
-                        offOption.textContent = 'Off';
-                        offOption.style.cssText = 'padding: 8px 16px; cursor: pointer; color: white;';
-                        offOption.addEventListener('click', () => {
-                            if (this.disableCaptions) this.disableCaptions();
-                            submenu.style.display = 'none';
-                            settingsMenu.classList.remove('show');
+                        // Toggle expanded/collapsed state
+                        let isExpanded = false;
+                        trigger.addEventListener('click', (e) => {
+                            e.stopPropagation();
+
+                            isExpanded = !isExpanded;
+
+                            if (isExpanded) {
+                                rebuildOptions();
+                                optionsContainer.style.display = 'block';
+                                arrow.style.transform = 'rotate(180deg)';
+                            } else {
+                                optionsContainer.style.display = 'none';
+                                arrow.style.transform = 'rotate(0deg)';
+                            }
                         });
-                        submenu.appendChild(offOption);
 
-                        // Add caption options
-                        if (this.availableCaptions && this.availableCaptions.length > 0) {
-                            this.availableCaptions.forEach((caption, index) => {
+                        // Assemble
+                        subtitlesWrapper.appendChild(trigger);
+                        subtitlesWrapper.appendChild(optionsContainer);
+                        settingsMenu.insertBefore(subtitlesWrapper, settingsMenu.firstChild);
+                    }
+
+                    // Add speed option to settings menu
+                    let speedWrapper = settingsMenu.querySelector('.yt-speed-wrapper');
+
+                    if (!speedWrapper) {
+                        // Get i18n text - use 'playback_speed' key
+                        let speedText = 'Playback speed';
+                        if (this.api.player && this.api.player.t) {
+                            speedText = this.api.player.t('playback_speed');
+                        } else if (this.player && this.player.t) {
+                            speedText = this.player.t('playback_speed');
+                        }
+
+                        // Create wrapper
+                        speedWrapper = document.createElement('div');
+                        speedWrapper.className = 'yt-speed-wrapper';
+                        speedWrapper.style.cssText = 'position: relative; display: block;';
+
+                        // Create trigger
+                        const trigger = document.createElement('div');
+                        trigger.className = 'quality-option';
+                        trigger.style.fontSize = '10px';
+
+                        // Get current speed
+                        const getCurrentSpeed = () => {
+                            if (this.ytPlayer && this.ytPlayer.getPlaybackRate) {
+                                return this.ytPlayer.getPlaybackRate();
+                            }
+                            return 1;
+                        };
+
+                        trigger.textContent = `${speedText}: ${getCurrentSpeed()}x`;
+
+                        // Add arrow indicator
+                        const arrow = document.createElement('span');
+                        arrow.textContent = ' ▼';
+                        arrow.style.cssText = 'font-size: 8px; transition: transform 0.2s;';
+                        trigger.appendChild(arrow);
+
+                        // Container for expanded options
+                        const optionsContainer = document.createElement('div');
+                        optionsContainer.className = 'yt-speed-options';
+                        optionsContainer.style.cssText = `
+                    display: none;
+                    padding-left: 15px;
+                    margin-top: 4px;
+                `;
+
+                        // Available speeds
+                        const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+
+                        // Function to rebuild options
+                        const rebuildOptions = () => {
+                            optionsContainer.innerHTML = '';
+                            const currentSpeed = getCurrentSpeed();
+
+                            speeds.forEach(speed => {
                                 const option = document.createElement('div');
-                                option.className = 'quality-option';
-                                option.textContent = caption.label || caption.languageName;
-                                option.style.cssText = 'padding: 8px 16px; cursor: pointer; color: white;';
-                                option.addEventListener('click', () => {
-                                    if (this.setCaptions) this.setCaptions(index);
-                                    submenu.style.display = 'none';
-                                    settingsMenu.classList.remove('show');
+                                option.style.cssText = `
+                            padding: 6px 12px;
+                            cursor: pointer;
+                            color: white;
+                            font-size: 10px;
+                            white-space: normal;
+                            word-wrap: break-word;
+                            opacity: 0.8;
+                            transition: opacity 0.2s;
+                        `;
+                                option.textContent = `${speed}x`;
+
+                                // Highlight selected option
+                                if (Math.abs(speed - currentSpeed) < 0.01) {
+                                    option.style.opacity = '1';
+                                    option.style.fontWeight = 'bold';
+                                }
+
+                                // Hover effect
+                                option.addEventListener('mouseenter', () => {
+                                    option.style.opacity = '1';
+                                });
+                                option.addEventListener('mouseleave', () => {
+                                    if (Math.abs(speed - getCurrentSpeed()) >= 0.01) {
+                                        option.style.opacity = '0.8';
+                                    }
                                 });
-                                submenu.appendChild(option);
-                            });
-                        } else {
-                            // Add Auto option
-                            const autoOption = document.createElement('div');
-                            autoOption.className = 'quality-option';
-                            autoOption.textContent = 'On (Auto)';
-                            autoOption.style.cssText = 'padding: 8px 16px; cursor: pointer; color: white;';
-                            autoOption.addEventListener('click', () => {
-                                if (this.enableAutoCaptions) this.enableAutoCaptions();
-                                submenu.style.display = 'none';
-                                settingsMenu.classList.remove('show');
-                            });
-                            submenu.appendChild(autoOption);
-                        }
 
-                        // Trigger events
-                        trigger.addEventListener('mouseenter', () => {
-                            isHoveringTrigger = true;
-                            if (hideTimeout) clearTimeout(hideTimeout);
-                            submenu.style.display = 'block';
-                        });
+                                // Add click handler
+                                option.addEventListener('click', (e) => {
+                                    e.stopPropagation();
 
-                        trigger.addEventListener('mouseleave', () => {
-                            isHoveringTrigger = false;
-                            checkAndHide();
-                        });
+                                    if (this.ytPlayer && this.ytPlayer.setPlaybackRate) {
+                                        this.ytPlayer.setPlaybackRate(speed);
+                                    }
 
-                        // Submenu events
-                        submenu.addEventListener('mouseenter', () => {
-                            isHoveringSubmenu = true;
-                            if (hideTimeout) clearTimeout(hideTimeout);
-                            submenu.style.display = 'block';
-                        });
+                                    // Update trigger text
+                                    trigger.childNodes[0].textContent = `${speedText}: ${speed}x`;
 
-                        submenu.addEventListener('mouseleave', () => {
-                            isHoveringSubmenu = false;
-                            checkAndHide();
-                        });
+                                    // Rebuild to update selection
+                                    setTimeout(() => {
+                                        rebuildOptions();
+                                    }, 50);
+                                });
+
+                                optionsContainer.appendChild(option);
+                            });
+                        };
 
-                        // Click alternative
+                        // Toggle expanded/collapsed state
+                        let isExpanded = false;
                         trigger.addEventListener('click', (e) => {
                             e.stopPropagation();
-                            if (submenu.style.display === 'none' || !submenu.style.display) {
-                                submenu.style.display = 'block';
+
+                            isExpanded = !isExpanded;
+
+                            if (isExpanded) {
+                                rebuildOptions();
+                                optionsContainer.style.display = 'block';
+                                arrow.style.transform = 'rotate(180deg)';
                             } else {
-                                submenu.style.display = 'none';
+                                optionsContainer.style.display = 'none';
+                                arrow.style.transform = 'rotate(0deg)';
                             }
                         });
 
                         // Assemble
-                        subtitlesWrapper.appendChild(trigger);
-                        subtitlesWrapper.appendChild(submenu);
-                        settingsMenu.insertBefore(subtitlesWrapper, settingsMenu.firstChild);
+                        speedWrapper.appendChild(trigger);
+                        speedWrapper.appendChild(optionsContainer);
+
+                        // Insert after subtitles wrapper
+                        const subtitlesWrapper = settingsMenu.querySelector('.yt-subtitles-wrapper');
+                        if (subtitlesWrapper) {
+                            subtitlesWrapper.insertAdjacentElement('afterend', speedWrapper);
+                        } else {
+                            settingsMenu.insertBefore(speedWrapper, settingsMenu.firstChild);
+                        }
                     }
                 }
             } else {
@@ -468,12 +642,43 @@ width: fit-content;
                     subtitlesBtn.style.display = '';
                 }
 
+                // Reset settings menu styles
+                if (settingsMenu) {
+                    settingsMenu.style.maxHeight = '';
+                    settingsMenu.style.overflowY = '';
+                    settingsMenu.style.overflowX = '';
+                    settingsMenu.style.scrollbarWidth = '';
+                    settingsMenu.style.scrollbarColor = '';
+                }
+
+                // Show original speed option again
+                if (settingsMenu) {
+                    const originalSpeedOption = settingsMenu.querySelector('[data-action="speed"]');
+                    if (originalSpeedOption) {
+                        originalSpeedOption.style.display = '';
+                    }
+
+                    // Show expandable speed option again
+                    const expandableSpeedWrapper = settingsMenu.querySelector('[data-action="speed-expand"]');
+                    if (expandableSpeedWrapper) {
+                        const wrapper = expandableSpeedWrapper.closest('.settings-expandable-wrapper');
+                        if (wrapper) {
+                            wrapper.style.display = '';
+                        }
+                    }
+                }
+
                 // Remove from settings
                 if (settingsMenu) {
                     const subtitlesWrapper = settingsMenu.querySelector('.yt-subtitles-wrapper');
                     if (subtitlesWrapper) {
                         subtitlesWrapper.remove();
                     }
+
+                    const speedWrapper = settingsMenu.querySelector('.yt-speed-wrapper');
+                    if (speedWrapper) {
+                        speedWrapper.remove();
+                    }
                 }
             }
         }
@@ -1210,16 +1415,21 @@ startBufferMonitoring() {
                 setTimeout(() => this.setQuality(this.options.quality), 1000);
             }
 
-            // NEW: Update player watermark with channel data
+            // Update player watermark with channel data
             if (this.options.enableChannelWatermark) {
                 this.updatePlayerWatermark();
             }
 
-            // NEW: Set auto caption language
+            // Set auto caption language
             if (this.options.autoCaptionLanguage) {
                 setTimeout(() => this.setAutoCaptionLanguage(), 1500);
             }
 
+            // Check initial caption state AFTER captions are loaded and menu is built
+            setTimeout(() => {
+                this.checkInitialCaptionState();
+            }, 2500); // Dopo che tutto è stato inizializzato
+
             this.api.triggerEvent('youtubeplugin:playerready', {});
 
         }
@@ -2177,13 +2387,13 @@ startBufferMonitoring() {
             if (this.api.player.options.debug) console.log('[YT Plugin] Subtitles control created');
             this.buildSubtitlesMenu();
             this.bindSubtitlesButton();
-            this.checkInitialCaptionState();
+            //this.checkInitialCaptionState();
             this.startCaptionStateMonitoring();
         }
 
         /**
-         * Build the subtitles menu
-         */
+ * Build the subtitles menu
+ */
         buildSubtitlesMenu() {
             const subtitlesMenu = this.api.container.querySelector('.subtitles-menu');
             if (!subtitlesMenu) return;
@@ -2219,22 +2429,22 @@ startBufferMonitoring() {
                     });
                     subtitlesMenu.appendChild(option);
                 });
-            } else {
-                // Auto-caption only (without tracklist)
-                const autoOption = document.createElement('div');
-                autoOption.className = 'subtitles-option';
-                autoOption.textContent = 'Auto-generated';
-                autoOption.dataset.id = 'auto';
-                autoOption.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    this.enableAutoCaptions();
-                    this.updateMenuSelection('auto');
-                    subtitlesMenu.classList.remove('show');
-                });
-                subtitlesMenu.appendChild(autoOption);
             }
 
-            // Always add "Auto-translate" (both with and without tracklist)
+            // SEMPRE aggiungi l'opzione Auto-generated (sia con che senza tracklist)
+            const autoOption = document.createElement('div');
+            autoOption.className = 'subtitles-option';
+            autoOption.textContent = 'Auto-generated';
+            autoOption.dataset.id = 'auto';
+            autoOption.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.enableAutoCaptions();
+                this.updateMenuSelection('auto');
+                subtitlesMenu.classList.remove('show');
+            });
+            subtitlesMenu.appendChild(autoOption);
+
+            // Always add Auto-translate (both with and without tracklist)
             const translateOption = document.createElement('div');
             translateOption.className = 'subtitles-option translate-option';
             translateOption.textContent = 'Auto-translate';
@@ -2524,27 +2734,69 @@ startBufferMonitoring() {
         }
 
         /**
-         * Check initial caption state
-         */
+        * Check initial caption state
+        */
         checkInitialCaptionState() {
             setTimeout(() => {
                 try {
                     const currentTrack = this.ytPlayer.getOption('captions', 'track');
+
                     if (currentTrack && currentTrack.languageCode) {
                         this.captionsEnabled = true;
-                        this.updateMenuSelection('caption-0');
+
+                        // erify if translation is active
+                        if (currentTrack.translationLanguage) {
+                            this.currentTranslation = currentTrack.translationLanguage.languageCode;
+
+                            // when translation is active, set currentCaption to null
+                            this.updateMenuSelection('auto');
+
+                            // specify translation submenu selection after a short delay
+                            setTimeout(() => {
+                                const translationMenu = this.api.container.querySelector('.translation-menu');
+                                if (translationMenu) {
+                                    translationMenu.querySelectorAll('.subtitles-option').forEach(option => {
+                                        option.classList.remove('selected');
+                                    });
+
+                                    const selectedTranslation = translationMenu.querySelector(`[data-id="translate-${this.currentTranslation}"]`);
+                                    if (selectedTranslation) {
+                                        selectedTranslation.classList.add('selected');
+                                    }
+                                }
+                            }, 100);
+                        } else {
+                            // find current caption track index
+                            const captionIndex = this.availableCaptions.findIndex(
+                                cap => cap.languageCode === currentTrack.languageCode
+                            );
+
+                            if (captionIndex >= 0) {
+                                this.currentCaption = currentTrack.languageCode;
+                                this.updateMenuSelection(`caption-${captionIndex}`);
+                            } else {
+                                // Se non trovato nella lista, è auto-generated
+                                this.updateMenuSelection('auto');
+                            }
+                        }
+
+                        // activate button
+                        const subtitlesBtn = this.api.container.querySelector('.subtitles-btn');
+                        if (subtitlesBtn) {
+                            subtitlesBtn.classList.add('active');
+                        }
                     } else {
                         this.updateMenuSelection('off');
                     }
                 } catch (e) {
                     this.updateMenuSelection('off');
                 }
-            }, 1500);
+            }, 2000);
         }
 
-        /**
-         * Monitor caption state
-         */
+/**
+ * Monitor caption state
+ */
         startCaptionStateMonitoring() {
             if (this.captionStateCheckInterval) {
                 clearInterval(this.captionStateCheckInterval);
@@ -2554,7 +2806,6 @@ startBufferMonitoring() {
                 try {
                     const currentTrack = this.ytPlayer.getOption('captions', 'track');
                     const wasEnabled = this.captionsEnabled;
-
                     this.captionsEnabled = !!(currentTrack && currentTrack.languageCode);
 
                     if (wasEnabled !== this.captionsEnabled) {
@@ -2562,8 +2813,24 @@ startBufferMonitoring() {
                         if (subtitlesBtn) {
                             if (this.captionsEnabled) {
                                 subtitlesBtn.classList.add('active');
+
+                                // update current caption/translation
+                                if (currentTrack.translationLanguage) {
+                                    this.currentTranslation = currentTrack.translationLanguage.languageCode;
+                                    this.updateMenuSelection(`translate-${this.currentTranslation}`);
+                                } else {
+                                    const captionIndex = this.availableCaptions.findIndex(
+                                        cap => cap.languageCode === currentTrack.languageCode
+                                    );
+                                    if (captionIndex >= 0) {
+                                        this.updateMenuSelection(`caption-${captionIndex}`);
+                                    } else {
+                                        this.updateMenuSelection('auto');
+                                    }
+                                }
                             } else {
                                 subtitlesBtn.classList.remove('active');
+                                this.updateMenuSelection('off');
                             }
                         }
                     }
@@ -2883,7 +3150,7 @@ startBufferMonitoring() {
                 }
             };
 
-            // Override pause method  
+            // Override pause method
             const originalPause = this.player.pause;
             this.player.pause = () => {
                 if (this.ytPlayer && this.ytPlayer.pauseVideo) {
@@ -2955,15 +3222,13 @@ startBufferMonitoring() {
             // Override mute toggle
             const originalToggleMute = this.player.toggleMute;
             this.player.toggleMute = () => {
-                if (this.ytPlayer && this.ytPlayer.isMuted && this.ytPlayer.mute && this.ytPlayer.unMute) {
+                if (this.ytPlayer && this.ytPlayer.isMuted) {
                     const isMuted = this.ytPlayer.isMuted();
-
                     if (isMuted) {
                         this.ytPlayer.unMute();
                     } else {
                         this.ytPlayer.mute();
                     }
-
                     this.updateMuteButtonState(!isMuted);
 
                     if (!isMuted) {
@@ -2977,97 +3242,6 @@ startBufferMonitoring() {
                 }
             };
 
-            // Volume tooltip events for YouTube
-            if (this.api.player.volumeSlider) {
-                const volumeSlider = this.api.player.volumeSlider;
-                const volumeContainer = this.api.container.querySelector('.volume-container');
-
-                // Remove existing listeners to avoid duplicates
-                const newVolumeSlider = volumeSlider.cloneNode(true);
-                volumeSlider.parentNode.replaceChild(newVolumeSlider, volumeSlider);
-                this.api.player.volumeSlider = newVolumeSlider;
-
-                // Update tooltip on input (slider drag)
-                newVolumeSlider.addEventListener('input', (e) => {
-                    const value = parseFloat(e.target.value);
-                    this.player.updateVolume(value);
-
-                    // Update tooltip position and text during drag
-                    if (this.api.player.updateVolumeTooltipPosition) {
-                        this.api.player.updateVolumeTooltipPosition(value / 100);
-                    }
-                    if (this.api.player.updateVolumeTooltip) {
-                        this.api.player.updateVolumeTooltip();
-                    }
-                });
-
-                // Update tooltip position on mousemove over slider
-                newVolumeSlider.addEventListener('mousemove', (e) => {
-                    const rect = newVolumeSlider.getBoundingClientRect();
-                    const mouseX = e.clientX - rect.left;
-                    const percentage = Math.max(0, Math.min(1, mouseX / rect.width));
-
-                    // Update tooltip position as mouse moves
-                    if (this.api.player.updateVolumeTooltipPosition) {
-                        this.api.player.updateVolumeTooltipPosition(percentage);
-                    }
-
-                    // Update tooltip text to show value under mouse
-                    const volumeTooltip = this.api.container.querySelector('.volume-tooltip');
-                    if (volumeTooltip) {
-                        volumeTooltip.textContent = Math.round(percentage * 100) + '%';
-                    }
-                });
-
-                // Show/hide tooltip on hover
-                if (volumeContainer) {
-                    volumeContainer.addEventListener('mouseenter', () => {
-                        const volumeTooltip = this.api.container.querySelector('.volume-tooltip');
-                        if (volumeTooltip) {
-                            volumeTooltip.classList.add('visible');
-                        }
-                    });
-
-                    volumeContainer.addEventListener('mouseleave', () => {
-                        const volumeTooltip = this.api.container.querySelector('.volume-tooltip');
-                        if (volumeTooltip) {
-                            volumeTooltip.classList.remove('visible');
-                        }
-                    });
-                }
-
-                if (this.api.player.options.debug) {
-                    console.log('[YT Plugin] Volume tooltip events bound');
-                }
-            }
-
-            // Override playback speed
-            const originalChangeSpeed = this.player.changeSpeed;
-            if (originalChangeSpeed) {
-                this.player.changeSpeed = (e) => {
-                    if (!e.target.classList.contains('speed-option')) return;
-
-                    const speed = parseFloat(e.target.getAttribute('data-speed'));
-
-                    if (this.ytPlayer && this.ytPlayer.setPlaybackRate && speed > 0) {
-                        this.ytPlayer.setPlaybackRate(speed);
-
-                        const speedBtn = this.api.container.querySelector('.speed-btn');
-                        if (speedBtn) speedBtn.textContent = `${speed}x`;
-
-                        const speedMenu = this.api.container.querySelector('.speed-menu');
-                        if (speedMenu) {
-                            speedMenu.querySelectorAll('.speed-option').forEach(option => {
-                                option.classList.remove('active');
-                            });
-                            e.target.classList.add('active');
-                        }
-                    } else {
-                        originalChangeSpeed.call(this.player, e);
-                    }
-                };
-            }
-
             // Override progress bar seeking
             if (this.api.player.progressContainer) {
                 const progressContainer = this.api.player.progressContainer;
@@ -3082,7 +3256,22 @@ startBufferMonitoring() {
                 // Create tooltip for seek preview
                 const seekTooltip = document.createElement('div');
                 seekTooltip.className = 'yt-seek-tooltip';
-                seekTooltip.style.cssText = 'position:absolute;bottom:calc(100% + 10px);left:0;background:rgba(28,28,28,0.95);color:#fff;padding:6px 10px;border-radius:3px;font-size:13px;font-weight:500;white-space:nowrap;pointer-events:none;visibility:hidden;z-index:99999;box-shadow:0 2px 8px rgba(0,0,0,0.3);';
+                seekTooltip.style.cssText = `
+            position: absolute;
+            bottom: calc(100% + 10px);
+            left: 0;
+            background: rgba(28,28,28,0.95);
+            color: #fff;
+            padding: 6px 10px;
+            border-radius: 3px;
+            font-size: 13px;
+            font-weight: 500;
+            white-space: nowrap;
+            pointer-events: none;
+            visibility: hidden;
+            z-index: 99999;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+        `;
                 newProgressContainer.appendChild(seekTooltip);
 
                 // Format time function for tooltip
@@ -3100,25 +3289,32 @@ startBufferMonitoring() {
                 let isSeeking = false;
 
                 const handleSeek = (e) => {
-                    if (!this.ytPlayer || !this.ytPlayer.getDuration) return;
+                    if (!this.ytPlayer || !this.ytPlayer.getDuration()) return;
 
                     const rect = newProgressContainer.getBoundingClientRect();
-                    const clickX = e.clientX - rect.left;
+
+                    // Support both mouse and touch events
+                    const clientX = e.clientX !== undefined ? e.clientX :
+                        (e.touches && e.touches[0] ? e.touches[0].clientX :
+                            (e.changedTouches && e.changedTouches[0] ? e.changedTouches[0].clientX : 0));
+
+                    const clickX = clientX - rect.left;
                     const percentage = Math.max(0, Math.min(1, clickX / rect.width));
                     const duration = this.ytPlayer.getDuration();
                     const targetTime = percentage * duration;
 
                     this.ytPlayer.seekTo(targetTime, true);
 
-                    const progress = percentage * 100 + '%';
+                    const progress = percentage * 100;
                     if (this.api.player.progressFilled) {
-                        this.api.player.progressFilled.style.width = progress;
+                        this.api.player.progressFilled.style.width = `${progress}%`;
                     }
                     if (this.api.player.progressHandle) {
-                        this.api.player.progressHandle.style.left = progress;
+                        this.api.player.progressHandle.style.left = `${progress}%`;
                     }
                 };
 
+                // MOUSE EVENTS
                 newProgressContainer.addEventListener('mousedown', (e) => {
                     isSeeking = true;
                     handleSeek(e);
@@ -3130,7 +3326,7 @@ startBufferMonitoring() {
                     }
 
                     // Show tooltip with timestamp
-                    if (!isSeeking && this.ytPlayer && this.ytPlayer.getDuration) {
+                    if (!isSeeking && this.ytPlayer && this.ytPlayer.getDuration()) {
                         const rect = newProgressContainer.getBoundingClientRect();
                         const mouseX = e.clientX - rect.left;
                         const percentage = Math.max(0, Math.min(1, mouseX / rect.width));
@@ -3138,7 +3334,7 @@ startBufferMonitoring() {
                         const time = percentage * duration;
 
                         seekTooltip.textContent = formatTimeForTooltip(time);
-                        seekTooltip.style.left = mouseX + 'px';
+                        seekTooltip.style.left = `${mouseX}px`;
                         seekTooltip.style.visibility = 'visible';
                     }
                 });
@@ -3151,10 +3347,50 @@ startBufferMonitoring() {
                     isSeeking = false;
                 });
 
+                // TOUCH EVENTS - AGGIUNTI QUI!
+                newProgressContainer.addEventListener('touchstart', (e) => {
+                    e.preventDefault(); // scroll prevention during drag
+                    isSeeking = true;
+                    handleSeek(e);
+                }, { passive: false });
+
+                newProgressContainer.addEventListener('touchmove', (e) => {
+                    e.preventDefault(); // scroll prevention during drag
+
+                    if (isSeeking) {
+                        handleSeek(e);
+                    }
+
+                    // Show tooltip with timestamp during touch
+                    if (!isSeeking && this.ytPlayer && this.ytPlayer.getDuration()) {
+                        const rect = newProgressContainer.getBoundingClientRect();
+                        const touch = e.touches[0];
+                        const touchX = touch.clientX - rect.left;
+                        const percentage = Math.max(0, Math.min(1, touchX / rect.width));
+                        const duration = this.ytPlayer.getDuration();
+                        const time = percentage * duration;
+
+                        seekTooltip.textContent = formatTimeForTooltip(time);
+                        seekTooltip.style.left = `${touchX}px`;
+                        seekTooltip.style.visibility = 'visible';
+                    }
+                }, { passive: false });
+
+                newProgressContainer.addEventListener('touchend', () => {
+                    isSeeking = false;
+                    seekTooltip.style.visibility = 'hidden';
+                });
+
+                newProgressContainer.addEventListener('touchcancel', () => {
+                    isSeeking = false;
+                    seekTooltip.style.visibility = 'hidden';
+                });
+
+                // CLICK EVENT
                 newProgressContainer.addEventListener('click', handleSeek);
-            }
 
-            this.bindVolumeSlider();
+                this.bindVolumeSlider();
+            }
 
             // Time update interval
             if (this.timeUpdateInterval) {
@@ -3175,14 +3411,13 @@ startBufferMonitoring() {
                         } else {
                             // For regular videos, calculate normally
                             progress = (currentTime / duration) * 100;
-                        }
 
-                        // Check if live badge exists = it's a live stream
-                        const liveBadge = this.api.container.querySelector('.live-badge');
-
-                        if (liveBadge) {
-                            // Force 100% for live streams
-                            progress = 100;
+                            // Check if live badge exists = it's a live stream
+                            const liveBadge = this.api.container.querySelector('.live-badge');
+                            if (liveBadge) {
+                                // Force 100% for live streams
+                                progress = 100;
+                            }
                         }
 
                         this.api.player.progressFilled.style.width = `${progress}%`;
@@ -3194,8 +3429,13 @@ startBufferMonitoring() {
                     const currentTimeEl = this.api.container.querySelector('.current-time');
                     const durationEl = this.api.container.querySelector('.duration');
 
-                    if (currentTimeEl) currentTimeEl.textContent = this.formatTime(currentTime);
-                    if (durationEl && duration) durationEl.textContent = this.formatTime(duration);
+                    if (currentTimeEl) {
+                        currentTimeEl.textContent = this.formatTime(currentTime);
+                    }
+
+                    if (durationEl && duration) {
+                        durationEl.textContent = this.formatTime(duration);
+                    }
                 }
             }, 250);
         }