fix: minor changes

Author: mizadi

src/assets/styles/main.scss

@@ -226,48 +226,39 @@ $icon-font-path: '../icon-font' !default;
   &.vjs-using-native-controls .vjs-big-play-button,
   &.vjs-error .vjs-big-play-button {
     transition:
-      visibility 0.2s,
-      opacity 0.2s;
+      visibility 0.25s,
+      opacity 0.25s;
     display: block;
     visibility: hidden;
     opacity: 0;
   }
 
   // Mobile touch interaction - show big play button when tapped (must come after hiding rules above)
   &.cld-mobile-touch-active .vjs-big-play-button {
-    display: block !important;
-    opacity: 1 !important;
-    visibility: visible !important;
+    display: block;
+    opacity: 1;
+    visibility: visible;
   }
 
-  // Mobile touch - ONLY style the pause icon during mobile touch interactions
+  // Mobile touch pause icon - only shown during mobile interactions
   &.cld-mobile-touch-playing .vjs-big-play-button .vjs-icon-placeholder:before {
-    // Reset the CSS triangle properties completely
-    border: none !important;
-    border-left: none !important;
-    border-top: none !important; 
-    border-bottom: none !important;
-    margin: 0 !important;
-    
-    // Create perfectly centered pause icon with CSS
-    content: '' !important;
-    position: absolute !important;
-    
-    // Perfect mathematical centering for both lines
-    top: 50% !important;
-    left: 50% !important;
-    transform: translate(-50%, -50%) translate(-5.5px, 0) !important; // Center the 11px total width (4px + 3px + 4px)
-    
-    // Identical pause lines - clean and proportioned
-    width: 4px !important;
-    height: 22px !important;
-    background: currentColor !important;
-    border-radius: 2px !important;
+    // Reset default triangle and create pause icon
+    content: '';
+    position: absolute;
+    border: none;
+    margin: 0;
 
-    // Create identical second line with perfect 3px spacing
-    box-shadow: 7px 0 0 0 currentColor !important; // 4px line + 3px gap = 7px offset
+    // Center the pause icon (11px total width: 4px + 3px + 4px)
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) translate(-5.5px, 0);
 
-    display: block !important;
+    // Two vertical lines for pause icon
+    width: 4px;
+    height: 22px;
+    background: currentColor;
+    border-radius: 2px;
+    box-shadow: 7px 0 0 0 currentColor; // Second line with 3px gap
   }
 
   &.vjs-controls-enabled::before {

src/video-player.js

@@ -455,19 +455,8 @@ class VideoPlayer extends Utils.mixin(Eventable) {
           // Update mobile touch state based on current playback
           this._updateMobileTouchState();
 
-          // Remove the overlay after timeout
-          this.videojs.clearTimeout(this._mobileTouchTimeout);
-          this._mobileTouchTimeout = this.videojs.setTimeout(() => {
-            // First remove the visibility class to start fade-out
-            this.videojs.removeClass('cld-mobile-touch-active');
-            
-            // Wait for CSS transition to complete before removing pause icon class
-            setTimeout(() => {
-              this.videojs.removeClass('cld-mobile-touch-playing');
-              this._removeMobileBigPlayButtonHandler();
-              this._mobileInteractionActive = false; // End mobile interaction session
-            }, 250); // Wait slightly longer than the 0.2s CSS transition
-          }, 3000);
+          // Set up listener for VideoJS user activity events to sync with controls
+          this._setupMobileInactivityHandler();
         }
       };
 
@@ -492,8 +481,14 @@ class VideoPlayer extends Utils.mixin(Eventable) {
       // Clean up on dispose
       this.videojs.on('dispose', () => {
         playerElement.removeEventListener('touchend', handleMobileTouch);
-        this.videojs.clearTimeout(this._mobileTouchTimeout);
         this._removeMobileBigPlayButtonHandler();
+        
+        // Clean up inactivity handler
+        if (this._mobileInactivityHandler) {
+          this.videojs.off('userinactive', this._mobileInactivityHandler);
+          this._mobileInactivityHandler = null;
+        }
+        
         this._mobileTouchHandlerSetup = false;
         this._mobileInteractionActive = false;
       });
@@ -509,23 +504,48 @@ class VideoPlayer extends Utils.mixin(Eventable) {
     }
   }
 
+  _setupMobileInactivityHandler() {
+    // Remove any existing inactivity handler
+    if (this._mobileInactivityHandler) {
+      this.videojs.off('userinactive', this._mobileInactivityHandler);
+    }
+    
+    // Create handler that syncs with VideoJS control bar timing
+    this._mobileInactivityHandler = () => {
+      // Start fade-out when VideoJS controls fade out
+      this.videojs.removeClass('cld-mobile-touch-active');
+      
+      // Wait for CSS transition to complete before cleanup
+      setTimeout(() => {
+        this.videojs.removeClass('cld-mobile-touch-playing');
+        this._removeMobileBigPlayButtonHandler();
+        this._mobileInteractionActive = false; // End mobile interaction session
+        
+        // Remove the inactivity handler since this touch session is done
+        if (this._mobileInactivityHandler) {
+          this.videojs.off('userinactive', this._mobileInactivityHandler);
+          this._mobileInactivityHandler = null;
+        }
+      }, 250); // Wait slightly longer than the 0.2s CSS transition
+    };
+    
+    // Listen for VideoJS user inactivity (when controls fade out)
+    this.videojs.one('userinactive', this._mobileInactivityHandler);
+  }
+
   _updateMobileTouchState() {
     const isPlaying = !this.videojs.paused();
 
     if (isPlaying) {
       this.videojs.addClass('cld-mobile-touch-playing');
-      this._setupMobileBigPlayButtonHandler(true);
+      this._setupMobileBigPlayButtonHandler();
     } else {
       this.videojs.removeClass('cld-mobile-touch-playing');
       this._removeMobileBigPlayButtonHandler();
     }
   }
 
-  _setupMobileBigPlayButtonHandler(isPlaying) {
-    if (!isPlaying) {
-      return; // Use default play behavior when paused
-    }
-
+  _setupMobileBigPlayButtonHandler() {
     // Remove any existing handler first
     this._removeMobileBigPlayButtonHandler();