myetv-player 1.1.4 → 1.1.5

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

@@ -367,10 +367,20 @@
 
                 // 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
@@ -647,6 +657,15 @@
                     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
@@ -3131,7 +3150,7 @@ startBufferMonitoring() {
                 }
             };
 
-            // Override pause method  
+            // Override pause method
             const originalPause = this.player.pause;
             this.player.pause = () => {
                 if (this.ytPlayer && this.ytPlayer.pauseVideo) {
@@ -3203,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) {
@@ -3225,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;
@@ -3330,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
@@ -3348,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);
@@ -3378,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));
@@ -3386,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';
                     }
                 });
@@ -3399,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) {
@@ -3423,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}%`;
@@ -3442,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);
         }

package/scss/_controls.scss

@@ -165,3 +165,24 @@
 .controls-right .brand-logo-link .brand-logo {
     margin-right: 0;
 }
+
+/* Hide cursor when controlbar is hidden */
+.video-wrapper.hide-cursor {
+    cursor: none !important;
+}
+
+/* Ensure cursor is visible on controls even when hide-cursor is active */
+.video-wrapper.hide-cursor .controls {
+    cursor: default !important;
+}
+
+/* Ensure cursor is visible on buttons */
+.video-wrapper.hide-cursor .control-btn {
+    cursor: pointer !important;
+}
+
+/* do not hide mouse on iframes */
+.video-wrapper.hide-cursor iframe {
+    cursor: auto !important;
+    pointer-events: auto !important;
+}

package/src/controls.js

@@ -85,6 +85,7 @@ initAutoHide() {
 
 onMouseMoveInPlayer(e) {
     this.showControlsNow();
+    this.showCursor();
     this.resetAutoHideTimer();
 }
 
@@ -142,66 +143,69 @@ resetAutoHideTimer() {
 showControlsNow() {
     if (this.controls) {
         this.controls.classList.add('show');
-    }
 
-    // Add has-controls class to container for watermark visibility
-    if (this.container) {
-        this.container.classList.add('has-controls');
+        // Add has-controls class to container (for watermark visibility)
+        if (this.container) {
+            this.container.classList.add('has-controls');
+        }
+
         this.updateControlbarHeight();
+
         // Update watermark position
         if (this.updateWatermarkPosition) {
             this.updateWatermarkPosition();
         }
-    }
 
-    // Show title overlay with controls if not persistent
-    if (this.options.showTitleOverlay && !this.options.persistentTitle && this.options.videoTitle) {
-        this.showTitleOverlay();
-    }
+        // Show title overlay with controls (if not persistent)
+        if (this.options.showTitleOverlay && !this.options.persistentTitle && this.options.videoTitle) {
+            this.showTitleOverlay();
+        }
 
-    if (this.autoHideDebug && this.options.debug) console.log('✅ Controls shown');
+        // *show cursor when controls are shown*
+        this.showCursor();
+
+        if (this.autoHideDebug && this.options.debug) console.log('✅ Controls shown');
+    }
 }
 
 hideControlsNow() {
-    // Don't hide if mouse is still over controls (allow hiding on touch devices)
+    // Dont hide if mouse is still over controls (allow hiding on touch devices)
     const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
-
     if (this.mouseOverControls && !isTouchDevice) {
-        if (this.autoHideDebug && this.options.debug) {
-            console.log('🚫 Not hiding - mouse still over controls');
-        }
+        if (this.autoHideDebug && this.options.debug) console.log('❌ Not hiding - mouse still over controls');
         return;
     }
 
-    // Don't hide if video is paused
+    // Dont hide if video is paused
     if (this.video && this.video.paused) {
-        if (this.autoHideDebug && this.options.debug) {
-            console.log('🚫 Not hiding - video is paused');
-        }
+        if (this.autoHideDebug && this.options.debug) console.log('❌ Not hiding - video is paused');
         return;
     }
 
     if (this.controls) {
         this.controls.classList.remove('show');
 
-        // Remove has-controls class from container for watermark visibility
+        // Remove has-controls class from container (for watermark visibility)
         if (this.container) {
             this.container.classList.remove('has-controls');
-            this.updateControlbarHeight();
-            // Update watermark position
-            if (this.updateWatermarkPosition) {
-                this.updateWatermarkPosition();
-            }
         }
-    }
 
-    // Hide title overlay with controls (if not persistent)
-    if (this.options.showTitleOverlay && !this.options.persistentTitle) {
-        this.hideTitleOverlay();
-    }
+        this.updateControlbarHeight();
 
-    if (this.autoHideDebug && this.options.debug) {
-        console.log('👁️ Controls hidden');
+        // Update watermark position
+        if (this.updateWatermarkPosition) {
+            this.updateWatermarkPosition();
+        }
+
+        // Hide title overlay with controls (if not persistent)
+        if (this.options.showTitleOverlay && !this.options.persistentTitle) {
+            this.hideTitleOverlay();
+        }
+
+        // *hide cursor after controls are hidden*
+        this.hideCursor();
+
+        if (this.autoHideDebug && this.options.debug) console.log('✅ Controls hidden');
     }
 }
 
@@ -1067,6 +1071,60 @@ isAutoHideInitialized() {
     return this.autoHideInitialized;
 }
 
+/**
+ * Hide mouse cursor in player container
+ * Only hides cursor in main container, not in plugin iframes
+ */
+hideCursor() {
+    if (!this.options.hideCursor) {
+        return; // Do not hide cursor if option is disabled
+    }
+
+    if (this.container) {
+        this.container.classList.add('hide-cursor');
+        if (this.options.debug) console.log('🖱️ Cursor hidden');
+    }
+}
+
+/**
+ * Show mouse cursor in player container
+ */
+showCursor() {
+    if (this.container) {
+        this.container.classList.remove('hide-cursor');
+        if (this.options.debug) console.log('🖱️ Cursor shown');
+    }
+}
+
+/**
+ * Enable cursor hiding when controlbar is hidden
+ * @returns {Object} this
+ */
+enableCursorHiding() {
+    this.options.hideCursor = true;
+    if (this.options.debug) console.log('Cursor hiding enabled');
+    return this;
+}
+
+/**
+ * Disable cursor hiding - cursor will always be visible
+ * @returns {Object} this
+ */
+disableCursorHiding() {
+    this.options.hideCursor = false;
+    this.showCursor(); // Ensure cursor is shown immediately
+    if (this.options.debug) console.log('Cursor hiding disabled');
+    return this;
+}
+
+/**
+ * Check if cursor hiding is enabled
+ * @returns {Boolean} True if cursor hiding is enabled
+ */
+isCursorHidingEnabled() {
+    return this.options.hideCursor;
+}
+
 /* PLAYLIST CONTROLS */
 showPlaylistControls() {
     if (!this.playlistPrevBtn || !this.playlistNextBtn) return;

package/src/core.js

@@ -12,22 +12,23 @@ constructor(videoElement, options = {}) {
     }
 
     this.options = {
-        showQualitySelector: true,
-        showSpeedControl: true,
-        showFullscreen: true,
-        showPictureInPicture: true,
-        showSubtitles: true,
-        subtitlesEnabled: false,
-        autoHide: true,
-        autoHideDelay: 3000,
+        showQualitySelector: true,   // Enable quality selector button
+        showSpeedControl: true,      // Enable speed control button
+        showFullscreen: true,        // Enable fullscreen button
+        showPictureInPicture: true,  // Enable PiP button
+        showSubtitles: true,         // Enable subtitles button
+        subtitlesEnabled: false,     // Enable subtitles by default if available
+        autoHide: true,              // auto-hide controls when idle
+        autoHideDelay: 3000,         // hide controls after ... seconds of inactivity (specificed in milliseconds)
+        hideCursor: true,            // hide mouse cursor when idle
         poster: null,                // URL of poster image
         showPosterOnEnd: false,      // Show poster again when video ends
-        keyboardControls: true,
-        showSeekTooltip: true,
-        showTitleOverlay: false,
-        videoTitle: '',
-        videoSubtitle: '',
-        persistentTitle: false,
+        keyboardControls: true,      // Enable keyboard controls
+        showSeekTooltip: true,       // Show tooltip on seek bar at mouse hover
+        showTitleOverlay: false,     // Show video title overlay
+        videoTitle: '',              // Title text to show in overlay
+        videoSubtitle: '',           // Subtitle text to show in overlay
+        persistentTitle: false,   // If true, title overlay stays visible
         debug: false,             // Enable/disable debug logging
         autoplay: false,          // if video should autoplay at start
         defaultQuality: 'auto',   // 'auto', '1080p', '720p', '480p', etc.
@@ -57,8 +58,8 @@ constructor(videoElement, options = {}) {
         //seek shape
         seekHandleShape: 'circle', // Available shape: none, circle, square, diamond, arrow, triangle, heart, star
         // AUDIO PLAYER
-        audiofile: false,
-        audiowave: false,
+        audiofile: false,       // if true, adapt player to audio file (hide video element)
+        audiowave: false,       // if true, show audio wave visualization (Web Audio API)
         // RESOLUTION CONTROL
         resolution: "normal", // "normal", "4:3", "16:9", "stretched", "fit-to-screen", "scale-to-fit"
         ...options