myetv-player 1.1.3 → 1.1.5

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/scss/_menus.scss

@@ -381,3 +381,52 @@
         display: none !important;
     }
 }
+// Expandable settings menu styles
+.settings-expandable-wrapper {
+    position: relative;
+    display: block;
+}
+
+.settings-option.expandable-trigger {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    font-size: 10px !important;
+
+    .settings-option-label {
+        font-size: 10px !important;
+    }
+
+    .expand-arrow {
+        font-size: 8px;
+        transition: transform 0.2s ease;
+        margin-left: 8px;
+    }
+}
+
+.settings-expandable-content {
+    padding-left: 15px;
+    margin-top: 4px;
+
+    .settings-suboption {
+        padding: 6px 12px;
+        cursor: pointer;
+        color: white;
+        font-size: 10px;
+        white-space: normal;
+        word-wrap: break-word;
+        opacity: 0.8;
+        transition: opacity 0.2s;
+
+        &.active {
+            opacity: 1;
+            font-weight: bold;
+        }
+
+        &:hover {
+            opacity: 1;
+            background: rgba(255, 255, 255, 0.1);
+        }
+    }
+}

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');
     }
 }
 
@@ -600,7 +604,9 @@ updateSettingsMenuVisibility() {
     }
 }
 
-/* Populate settings menu with controls */
+/**
+ * Populate settings menu with controls
+ */
 populateSettingsMenu() {
     const settingsMenu = this.controls?.querySelector('.settings-menu');
     if (!settingsMenu) return;
@@ -615,54 +621,104 @@ populateSettingsMenu() {
         </div>`;
     }
 
-    // Speed Control submenu
+    // Speed Control - expandable
     if (this.options.showSpeedControl) {
         const speedLabel = this.t('playback_speed') || 'Playback Speed';
         const currentSpeed = this.video ? this.video.playbackRate : 1;
-        menuHTML += `<div class="settings-option" data-action="speed">
-            <span class="settings-option-label">${speedLabel}</span>
-            <span class="settings-option-value">${currentSpeed}x</span>
-            <div class="settings-submenu speed-submenu">
-                <div class="settings-suboption ${currentSpeed === 0.5 ? 'active' : ''}" data-speed="0.5">0.5x</div>
-                <div class="settings-suboption ${currentSpeed === 0.75 ? 'active' : ''}" data-speed="0.75">0.75x</div>
-                <div class="settings-suboption ${currentSpeed === 1 ? 'active' : ''}" data-speed="1">1x</div>
-                <div class="settings-suboption ${currentSpeed === 1.25 ? 'active' : ''}" data-speed="1.25">1.25x</div>
-                <div class="settings-suboption ${currentSpeed === 1.5 ? 'active' : ''}" data-speed="1.5">1.5x</div>
-                <div class="settings-suboption ${currentSpeed === 2 ? 'active' : ''}" data-speed="2">2x</div>
-            </div>
-        </div>`;
+
+        menuHTML += `
+            <div class="settings-expandable-wrapper">
+                <div class="settings-option expandable-trigger" data-action="speed-expand">
+                    <span class="settings-option-label">${speedLabel}: ${currentSpeed}x</span>
+                    <span class="expand-arrow">▼</span>
+                </div>
+                <div class="settings-expandable-content" style="display: none;">`;
+
+        const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+        speeds.forEach(speed => {
+            const isActive = Math.abs(speed - currentSpeed) < 0.01;
+            menuHTML += `<div class="settings-suboption ${isActive ? 'active' : ''}" data-speed="${speed}">${speed}x</div>`;
+        });
+
+        menuHTML += `</div></div>`;
     }
 
-    // Subtitles submenu
+    // Subtitles - expandable
     if (this.options.showSubtitles && this.textTracks && this.textTracks.length > 0) {
         const subtitlesLabel = this.t('subtitles') || 'Subtitles';
         const currentTrack = this.currentSubtitleTrack;
-        const currentLabel = this.subtitlesEnabled && currentTrack
-            ? (currentTrack.label || 'Track')
-            : (this.t('subtitlesoff') || 'Off');
-
-        menuHTML += `<div class="settings-option" data-action="subtitles">
-            <span class="settings-option-label">${subtitlesLabel}</span>
-            <span class="settings-option-value">${currentLabel}</span>
-            <div class="settings-submenu subtitles-submenu">
-                <div class="settings-suboption ${!this.subtitlesEnabled ? 'active' : ''}" data-track="off">
-                    ${this.t('subtitlesoff') || 'Off'}
-                </div>`;
+        const currentLabel = this.subtitlesEnabled && currentTrack ? currentTrack.label : (this.t('subtitlesoff') || 'Off');
+
+        menuHTML += `
+            <div class="settings-expandable-wrapper">
+                <div class="settings-option expandable-trigger" data-action="subtitles-expand">
+                    <span class="settings-option-label">${subtitlesLabel}: ${currentLabel}</span>
+                    <span class="expand-arrow">▼</span>
+                </div>
+                <div class="settings-expandable-content" style="display: none;">`;
 
+        // Off option
+        menuHTML += `<div class="settings-suboption ${!this.subtitlesEnabled ? 'active' : ''}" data-track="off">${this.t('subtitlesoff') || 'Off'}</div>`;
+
+        // Subtitle tracks
         this.textTracks.forEach((trackData, index) => {
             const isActive = this.currentSubtitleTrack === trackData.track;
-            menuHTML += `<div class="settings-suboption ${isActive ? 'active' : ''}" data-track="${index}">
-                ${trackData.label}
-            </div>`;
+            menuHTML += `<div class="settings-suboption ${isActive ? 'active' : ''}" data-track="${index}">${trackData.label}</div>`;
         });
 
-        menuHTML += '</div></div>';
+        menuHTML += `</div></div>`;
     }
 
     settingsMenu.innerHTML = menuHTML;
+
+    // Add scrollbar if needed
+    this.addSettingsMenuScrollbar();
+}
+
+/**
+ * Add scrollbar to settings menu on mobile
+ */
+addSettingsMenuScrollbar() {
+    const settingsMenu = this.controls?.querySelector('.settings-menu');
+    if (!settingsMenu) return;
+
+    const playerHeight = this.container.offsetHeight;
+    const maxMenuHeight = playerHeight - 100;
+
+    settingsMenu.style.maxHeight = `${maxMenuHeight}px`;
+    settingsMenu.style.overflowY = 'auto';
+    settingsMenu.style.overflowX = 'hidden';
+
+    // Add scrollbar styling
+    if (!document.getElementById('player-settings-scrollbar-style')) {
+        const scrollbarStyle = document.createElement('style');
+        scrollbarStyle.id = 'player-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);
+    }
+
+    settingsMenu.style.scrollbarWidth = 'thin';
+    settingsMenu.style.scrollbarColor = 'rgba(255,255,255,0.3) transparent';
 }
 
-/* Bind settings menu events */
+/**
+ * Bind settings menu events
+ */
 bindSettingsMenuEvents() {
     const settingsMenu = this.controls?.querySelector('.settings-menu');
     if (!settingsMenu) return;
@@ -670,7 +726,26 @@ bindSettingsMenuEvents() {
     settingsMenu.addEventListener('click', (e) => {
         e.stopPropagation();
 
-        // Handle direct actions
+        // Handle expandable triggers
+        if (e.target.classList.contains('expandable-trigger') || e.target.closest('.expandable-trigger')) {
+            const trigger = e.target.classList.contains('expandable-trigger') ? e.target : e.target.closest('.expandable-trigger');
+            const wrapper = trigger.closest('.settings-expandable-wrapper');
+            const content = wrapper.querySelector('.settings-expandable-content');
+            const arrow = trigger.querySelector('.expand-arrow');
+
+            const isExpanded = content.style.display !== 'none';
+
+            if (isExpanded) {
+                content.style.display = 'none';
+                arrow.style.transform = 'rotate(0deg)';
+            } else {
+                content.style.display = 'block';
+                arrow.style.transform = 'rotate(180deg)';
+            }
+            return;
+        }
+
+        // Handle direct actions (like PiP)
         if (e.target.classList.contains('settings-option') || e.target.closest('.settings-option')) {
             const option = e.target.classList.contains('settings-option') ? e.target : e.target.closest('.settings-option');
             const action = option.getAttribute('data-action');
@@ -683,32 +758,31 @@ bindSettingsMenuEvents() {
 
         // Handle submenu actions
         if (e.target.classList.contains('settings-suboption')) {
-            const parent = e.target.closest('.settings-option');
-            const action = parent?.getAttribute('data-action');
+            const wrapper = e.target.closest('.settings-expandable-wrapper');
+            const trigger = wrapper.querySelector('.expandable-trigger');
+            const action = trigger.getAttribute('data-action');
 
-            if (action === 'speed') {
+            if (action === 'speed-expand') {
                 const speed = parseFloat(e.target.getAttribute('data-speed'));
                 if (speed && speed > 0 && this.video && !this.isChangingQuality) {
                     this.video.playbackRate = speed;
 
                     // Update active states
-                    parent.querySelectorAll('.settings-suboption').forEach(opt => {
-                        opt.classList.remove('active');
-                    });
+                    wrapper.querySelectorAll('.settings-suboption').forEach(opt => opt.classList.remove('active'));
                     e.target.classList.add('active');
 
-                    // Update value display
-                    const valueEl = parent.querySelector('.settings-option-value');
-                    if (valueEl) valueEl.textContent = speed + 'x';
+                    // Update trigger text
+                    const label = trigger.querySelector('.settings-option-label');
+                    if (label) {
+                        const speedLabel = this.t('playback_speed') || 'Playback Speed';
+                        label.textContent = `${speedLabel}: ${speed}x`;
+                    }
 
                     // Trigger event
                     this.triggerEvent('speedchange', { speed, previousSpeed: this.video.playbackRate });
                 }
-            }
-
-            else if (action === 'subtitles') {
+            } else if (action === 'subtitles-expand') {
                 const trackData = e.target.getAttribute('data-track');
-
                 if (trackData === 'off') {
                     this.disableSubtitles();
                 } else {
@@ -717,14 +791,15 @@ bindSettingsMenuEvents() {
                 }
 
                 // Update active states
-                parent.querySelectorAll('.settings-suboption').forEach(opt => {
-                    opt.classList.remove('active');
-                });
+                wrapper.querySelectorAll('.settings-suboption').forEach(opt => opt.classList.remove('active'));
                 e.target.classList.add('active');
 
-                // Update value display
-                const valueEl = parent.querySelector('.settings-option-value');
-                if (valueEl) valueEl.textContent = e.target.textContent;
+                // Update trigger text
+                const label = trigger.querySelector('.settings-option-label');
+                if (label) {
+                    const subtitlesLabel = this.t('subtitles') || 'Subtitles';
+                    label.textContent = `${subtitlesLabel}: ${e.target.textContent}`;
+                }
             }
         }
     });
@@ -996,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