From d92c2808c2e38d5e22e9099ea262cee01191abda Mon Sep 17 00:00:00 2001
From: kuekhaoyang <kuekhaoyang@Gmail.com>
Date: Tue, 18 Nov 2025 13:10:42 +0800
Subject: [PATCH] feat: optimize scrolling performance and enhance control
 responsiveness in DesktopVideoPlayer

---
 app/globals.css                          | 31 +++++++++++++++++++++---
 components/player/DesktopVideoPlayer.tsx | 10 +++++++-
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index db0f8c7..429661d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -56,10 +56,13 @@ body {
   
   background-color: var(--bg-color);
   background-image: var(--bg-image);
-  background-attachment: fixed;
   color: var(--text-color);
   font-family: var(--font-family-system);
   transition: background 0.3s ease;
+  
+  /* Optimize scrolling performance */
+  will-change: scroll-position;
+  -webkit-overflow-scrolling: touch;
 }
 
 body.dark,
@@ -79,6 +82,14 @@ body.dark,
 
 *, *::before, *::after {
   box-sizing: border-box;
+  /* Optimize font rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html {
+  /* Enable smooth scrolling with performance optimization */
+  scroll-behavior: smooth;
 }
 
 
@@ -270,14 +281,28 @@ body.dark,
   border-radius: var(--radius-2xl);
   box-shadow: var(--shadow-md);
   border: 1px solid var(--glass-border);
-  transition: all var(--transition-fluid);
+  transition: transform var(--transition-fluid), box-shadow 0.2s ease;
+  
+  /* Use GPU acceleration for smooth animations */
+  will-change: transform;
+  transform: translateZ(0);
 }
 
 .glass-card:hover {
-  transform: translateY(-5px) scale(1.02);
+  transform: translateY(-5px) scale(1.02) translateZ(0);
   box-shadow: 0 8px 24px var(--shadow-color);
 }
 
+/* Optimize fixed/sticky elements for scrolling */
+nav:where(.sticky, .fixed),
+.sticky,
+.fixed {
+  will-change: transform;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
 .glass-input {
   background: var(--glass-bg);
   backdrop-filter: blur(10px) saturate(150%);
diff --git a/components/player/DesktopVideoPlayer.tsx b/components/player/DesktopVideoPlayer.tsx
index 47fd838..c3bfe29 100644
--- a/components/player/DesktopVideoPlayer.tsx
+++ b/components/player/DesktopVideoPlayer.tsx
@@ -50,6 +50,7 @@ export function DesktopVideoPlayer({
   const volumeBarTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const isDraggingProgressRef = useRef(false);
   const isDraggingVolumeRef = useRef(false);
+  const mouseMoveThrottleRef = useRef<NodeJS.Timeout | null>(null);
 
   // Check for PiP and AirPlay support
   useEffect(() => {
@@ -86,8 +87,15 @@ export function DesktopVideoPlayer({
     };
   }, [isPlaying, showSpeedMenu]);
 
-  // Handle mouse movement to show controls
+  // Handle mouse movement to show controls (throttled for performance)
   const handleMouseMove = () => {
+    // Throttle mouse move events to improve performance
+    if (mouseMoveThrottleRef.current) return;
+    
+    mouseMoveThrottleRef.current = setTimeout(() => {
+      mouseMoveThrottleRef.current = null;
+    }, 100); // Throttle to max 10 times per second
+    
     setShowControls(true);
     if (controlsTimeoutRef.current) {
       clearTimeout(controlsTimeoutRef.current);