myetv-player 1.1.4 → 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');
  }
 }
 
@@ -3523,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.4",
+  "version": "1.1.5",
   "description": "MYETV Video Player - Modular JavaScript and SCSS Build System",
   "main": "dist/myetv-player.js",
   "scripts": {
@@ -37,3 +37,4 @@
 
 
 
+

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();