myetv-player 1.1.3 → 1.1.5

package/dist/myetv-player.min.js

@@ -372,22 +372,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.
@@ -417,8 +418,8 @@ constructor(videoElement, options = {}) {
 
  seekHandleShape: 'circle', // Available shape: none, circle, square, diamond, arrow, triangle, heart, star
 
- 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: "normal", // "normal", "4:3", "16:9", "stretched", "fit-to-screen", "scale-to-fit"
  ...options
@@ -2598,6 +2599,7 @@ initAutoHide() {
 
 onMouseMoveInPlayer(e) {
  this.showControlsNow();
+ this.showCursor();
  this.resetAutoHideTimer();
 }
 
@@ -2655,39 +2657,37 @@ resetAutoHideTimer() {
 showControlsNow() {
  if (this.controls) {
  this.controls.classList.add('show');
- }
 
  if (this.container) {
  this.container.classList.add('has-controls');
+ }
+
  this.updateControlbarHeight();
 
  if (this.updateWatermarkPosition) {
  this.updateWatermarkPosition();
  }
- }
 
  if (this.options.showTitleOverlay && !this.options.persistentTitle && this.options.videoTitle) {
  this.showTitleOverlay();
  }
 
+ this.showCursor();
+
  if (this.autoHideDebug && this.options.debug) console.log('✅ Controls shown');
+ }
 }
 
 hideControlsNow() {
 
  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;
  }
 
  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;
  }
 
@@ -2696,20 +2696,21 @@ hideControlsNow() {
 
  if (this.container) {
  this.container.classList.remove('has-controls');
+ }
+
  this.updateControlbarHeight();
 
  if (this.updateWatermarkPosition) {
  this.updateWatermarkPosition();
  }
- }
- }
 
  if (this.options.showTitleOverlay && !this.options.persistentTitle) {
  this.hideTitleOverlay();
  }
 
- if (this.autoHideDebug && this.options.debug) {
- console.log('👁️ Controls hidden');
+ this.hideCursor();
+
+ if (this.autoHideDebug && this.options.debug) console.log('✅ Controls hidden');
  }
 }
 
@@ -3107,46 +3108,87 @@ populateSettingsMenu() {
  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>
+
+ 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>`;
+ <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>`;
  }
 
  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;">`;
+
+ menuHTML += `<div class="settings-suboption ${!this.subtitlesEnabled ? 'active' : ''}" data-track="off">${this.t('subtitlesoff') || 'Off'}</div>`;
 
  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;
+
+ this.addSettingsMenuScrollbar();
+}
+
+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';
+
+ 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';
 }
 
 bindSettingsMenuEvents() {
@@ -3156,6 +3198,24 @@ bindSettingsMenuEvents() {
  settingsMenu.addEventListener('click', (e) => {
  e.stopPropagation();
 
+ 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;
+ }
+
  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');
@@ -3167,29 +3227,28 @@ bindSettingsMenuEvents() {
  }
 
  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;
 
- 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');
 
- const valueEl = parent.querySelector('.settings-option-value');
- if (valueEl) valueEl.textContent = speed + 'x';
+ const label = trigger.querySelector('.settings-option-label');
+ if (label) {
+ const speedLabel = this.t('playback_speed') || 'Playback Speed';
+ label.textContent = `${speedLabel}: ${speed}x`;
+ }
 
  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 {
@@ -3197,13 +3256,14 @@ bindSettingsMenuEvents() {
  this.enableSubtitleTrack(trackIndex);
  }
 
- 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');
 
- const valueEl = parent.querySelector('.settings-option-value');
- if (valueEl) valueEl.textContent = e.target.textContent;
+ const label = trigger.querySelector('.settings-option-label');
+ if (label) {
+ const subtitlesLabel = this.t('subtitles') || 'Subtitles';
+ label.textContent = `${subtitlesLabel}: ${e.target.textContent}`;
+ }
  }
  }
  });
@@ -3464,6 +3524,41 @@ isAutoHideInitialized() {
  return this.autoHideInitialized;
 }
 
+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');
+ }
+}
+
+showCursor() {
+ if (this.container) {
+ this.container.classList.remove('hide-cursor');
+ if (this.options.debug) console.log('🖱️ Cursor shown');
+ }
+}
+
+enableCursorHiding() {
+ this.options.hideCursor = true;
+ if (this.options.debug) console.log('Cursor hiding enabled');
+ return this;
+}
+
+disableCursorHiding() {
+ this.options.hideCursor = false;
+ this.showCursor(); // Ensure cursor is shown immediately
+ if (this.options.debug) console.log('Cursor hiding disabled');
+ return this;
+}
+
+isCursorHidingEnabled() {
+ return this.options.hideCursor;
+}
+
 showPlaylistControls() {
  if (!this.playlistPrevBtn || !this.playlistNextBtn) return;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myetv-player",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "MYETV Video Player - Modular JavaScript and SCSS Build System",
   "main": "dist/myetv-player.js",
   "scripts": {
@@ -36,3 +36,5 @@
 
 
 
+
+

package/plugins/vimeo/myetv-player-vimeo.js

@@ -264,6 +264,9 @@
             // Setup event listeners
             this.setupEventListeners();
 
+            //create overlay for mouse detection
+            this.createMouseMoveOverlay();
+
             // Load available qualities
             this.loadQualities();
 
@@ -429,6 +432,224 @@
             });
         }
 
+        /**
+ * Create transparent overlay for click detection
+ */
+        createMouseMoveOverlay() {
+            if (this.mouseMoveOverlay) return;
+
+            this.mouseMoveOverlay = document.createElement('div');
+            this.mouseMoveOverlay.className = 'vimeo-mousemove-overlay';
+            this.mouseMoveOverlay.style.cssText = `
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 2;
+        background: transparent;
+        pointer-events: auto;
+        cursor: default;
+    `;
+
+            // Insert before controls
+            this.player.container.insertBefore(this.mouseMoveOverlay, this.player.controls);
+
+            // Setup mouse detection
+            this.setupMouseMoveDetection();
+
+            // Click handler for play/pause
+            this.mouseMoveOverlay.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+
+                const doubleTap = this.player.options.doubleTapPause;
+                const pauseClick = this.player.options.pauseClick;
+
+                if (doubleTap) {
+                    // Check if controls are hidden
+                    let controlsHidden = false;
+                    if (this.player.controls) {
+                        controlsHidden = this.player.controls.classList.contains('hide');
+                    }
+
+                    if (!controlsHidden) {
+                        const controls = this.player.container.querySelector('.controls');
+                        if (controls) {
+                            controlsHidden = controls.classList.contains('hide');
+                        }
+                    }
+
+                    if (!controlsHidden && this.player.controls) {
+                        const style = window.getComputedStyle(this.player.controls);
+                        controlsHidden = (style.opacity === '0' || style.visibility === 'hidden');
+                    }
+
+                    if (controlsHidden) {
+                        // Show controls
+                        if (this.player.showControlsNow) {
+                            this.player.showControlsNow();
+                        }
+                        if (this.player.resetAutoHideTimer) {
+                            this.player.resetAutoHideTimer();
+                        }
+                        return;
+                    }
+
+                    this.togglePlayPause();
+                } else if (pauseClick) {
+                    this.togglePlayPause();
+                }
+            });
+
+            // Mouse move handler
+            this.mouseMoveOverlay.addEventListener('mousemove', (e) => {
+                if (this.player.onMouseMove) {
+                    this.player.onMouseMove(e);
+                }
+                if (this.player.resetAutoHideTimer) {
+                    this.player.resetAutoHideTimer();
+                }
+            });
+
+            if (this.options.debug) {
+                console.log('[Vimeo] Mouse overlay created');
+            }
+        }
+
+        /**
+         * Setup mouse move detection
+         */
+        setupMouseMoveDetection() {
+            // Track last mouse position
+            this.lastMouseX = null;
+            this.lastMouseY = null;
+            this.mouseCheckInterval = null;
+
+            // Mouse enter
+            this.player.container.addEventListener('mouseenter', () => {
+                if (this.options.debug) {
+                    console.log('[Vimeo] Mouse entered - show controls');
+                }
+                if (this.player.showControlsNow) {
+                    this.player.showControlsNow();
+                }
+                if (this.player.resetAutoHideTimer) {
+                    this.player.resetAutoHideTimer();
+                }
+                this.startMousePositionTracking();
+            });
+
+            // Mouse leave
+            this.player.container.addEventListener('mouseleave', () => {
+                if (this.options.debug) {
+                    console.log('[Vimeo] Mouse left');
+                }
+                this.stopMousePositionTracking();
+            });
+
+            // Mouse move
+            this.player.container.addEventListener('mousemove', (e) => {
+                this.lastMouseX = e.clientX;
+                this.lastMouseY = e.clientY;
+                if (this.player.onMouseMove) {
+                    this.player.onMouseMove(e);
+                }
+                if (this.player.resetAutoHideTimer) {
+                    this.player.resetAutoHideTimer();
+                }
+            });
+        }
+
+        /**
+         * Start mouse position tracking
+         */
+        startMousePositionTracking() {
+            if (this.mouseCheckInterval) return;
+
+            this.mouseCheckInterval = setInterval(() => {
+                // Track mouse position over iframe
+                const handleGlobalMove = (e) => {
+                    const newX = e.clientX;
+                    const newY = e.clientY;
+
+                    if (this.lastMouseX !== newX || this.lastMouseY !== newY) {
+                        this.lastMouseX = newX;
+                        this.lastMouseY = newY;
+
+                        const rect = this.player.container.getBoundingClientRect();
+                        const isInside = (
+                            newX >= rect.left &&
+                            newX <= rect.right &&
+                            newY >= rect.top &&
+                            newY <= rect.bottom
+                        );
+
+                        if (isInside) {
+                            if (this.player.showControlsNow) {
+                                this.player.showControlsNow();
+                            }
+                            if (this.player.resetAutoHideTimer) {
+                                this.player.resetAutoHideTimer();
+                            }
+                        }
+                    }
+                };
+
+                document.addEventListener('mousemove', handleGlobalMove, { once: true, passive: true });
+            }, 100);
+        }
+
+        /**
+         * Stop mouse position tracking
+         */
+        stopMousePositionTracking() {
+            if (this.mouseCheckInterval) {
+                clearInterval(this.mouseCheckInterval);
+                this.mouseCheckInterval = null;
+            }
+        }
+
+        /**
+        * Toggle play/pause
+        */
+        togglePlayPause() {
+            if (!this.vimeoPlayer) return;
+
+            this.vimeoPlayer.getPaused().then(paused => {
+                if (paused) {
+                    // Use player's play method to trigger UI update
+                    if (this.player.play) {
+                        this.player.play();
+                    } else if (this.player.video && this.player.video.play) {
+                        this.player.video.play();
+                    }
+                } else {
+                    // Use player's pause method to trigger UI update
+                    if (this.player.pause) {
+                        this.player.pause();
+                    } else if (this.player.video && this.player.video.pause) {
+                        this.player.video.pause();
+                    }
+                }
+            }).catch(err => {
+                if (this.options.debug) {
+                    console.error('[Vimeo] GetPaused error:', err);
+                }
+            });
+        }
+
+        /**
+         * Remove mouse overlay
+         */
+        removeMouseMoveOverlay() {
+            if (this.mouseMoveOverlay) {
+                this.mouseMoveOverlay.remove();
+                this.mouseMoveOverlay = null;
+            }
+            this.stopMousePositionTracking();
+        }
+
         /**
          * Load available qualities and sync with MYETV player
          */
@@ -912,6 +1133,8 @@
          * Dispose plugin
          */
         dispose() {
+            this.removeMouseMoveOverlay();
+
             // Cleanup PIP observers and listeners
             if (this.pipObserver) {
                 this.pipObserver.disconnect();