myetv-player 1.1.4 → 1.1.6

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();
+        }
+
+        // *show cursor when controls are shown*
+        this.showCursor();
 
-    if (this.autoHideDebug && this.options.debug) console.log('✅ Controls shown');
+        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();
+
+        // 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');
+        if (this.autoHideDebug && this.options.debug) console.log('✅ Controls hidden');
     }
 }
 
@@ -225,6 +229,52 @@ clearControlsTimeout() {
     }
 }
 
+// Default controlbar styles injection
+injectDefaultControlbarStyles() {
+    if (document.getElementById('default-controlbar-styles')) {
+        return;
+    }
+
+    const controlBarOpacity = Math.max(0, Math.min(1, this.options.controlBarOpacity));
+    const titleOverlayOpacity = Math.max(0, Math.min(1, this.options.titleOverlayOpacity));
+
+    const style = document.createElement('style');
+    style.id = 'default-controlbar-styles';
+    style.textContent = `
+        .video-wrapper:not(.youtube-active):not(.vimeo-active):not(.facebook-active) .controls {
+            background: linear-gradient(
+                to top,
+                rgba(0, 0, 0, ${controlBarOpacity}) 0%,
+                rgba(0, 0, 0, ${controlBarOpacity * 0.89}) 20%,
+                rgba(0, 0, 0, ${controlBarOpacity * 0.74}) 40%,
+                rgba(0, 0, 0, ${controlBarOpacity * 0.53}) 60%,
+                rgba(0, 0, 0, ${controlBarOpacity * 0.32}) 80%,
+                rgba(0, 0, 0, ${controlBarOpacity * 0.21}) 100%
+            );
+            backdrop-filter: blur(3px);
+            min-height: 60px;
+            padding-bottom: 10px;
+        }
+        
+        .video-wrapper:not(.youtube-active):not(.vimeo-active):not(.facebook-active) .title-overlay {
+            background: linear-gradient(
+                to bottom,
+                rgba(0, 0, 0, ${titleOverlayOpacity}) 0%,
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.89}) 20%,
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.74}) 40%,
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.53}) 60%,
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.32}) 80%,
+                rgba(0, 0, 0, ${titleOverlayOpacity * 0.21}) 100%
+            );
+            backdrop-filter: blur(3px);
+            min-height: 80px;
+            padding-top: 20px;
+        }
+    `;
+
+    document.head.appendChild(style);
+}
+
 // Debug methods
 enableAutoHideDebug() {
     this.autoHideDebug = true;
@@ -1067,6 +1117,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,25 @@ 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
+        controlBarOpacity: options.controlBarOpacity !== undefined ? options.controlBarOpacity : 0.95, // Opacity of control bar (0.0 to 1.0)
+        titleOverlayOpacity: options.titleOverlayOpacity !== undefined ? options.titleOverlayOpacity : 0.95, // Opacity of title overlay (0.0 to 1.0)
         debug: false,             // Enable/disable debug logging
         autoplay: false,          // if video should autoplay at start
         defaultQuality: 'auto',   // 'auto', '1080p', '720p', '480p', etc.
@@ -57,8 +60,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
@@ -168,7 +171,9 @@ constructor(videoElement, options = {}) {
     };
 
     this.lastTimeUpdate = 0; // For throttling timeupdate events
-
+    // Inject default styles
+    this.injectDefaultControlbarStyles();
+    // Set language if specified
     if (this.options.language && this.isI18nAvailable()) {
         VideoPlayerTranslations.setLanguage(this.options.language);
     }