fix(artplayer): prevent body and player scrollbars when video player is open

- Add effect to disable body scroll by setting overflow to hidden when player is open
- Restore original body overflow styles on player close
- Add overflow-hidden and scrollbar hiding styles to player container
- Apply CSS rules to hide scrollbars on artplayer container and all child elements
- Set inline styles to suppress scrollbars in player elements on different browsers

src/components/artplayer-wrapper.tsx

@@ -59,6 +59,25 @@ export default function ArtPlayerWrapper({
   const [localAvgRating, setLocalAvgRating] = useState(avgRating);
   const hlsErrorHandlerRef = useRef<HLSErrorHandler | null>(null);
 
+  // Prevent body scroll when video player is open
+  useEffect(() => {
+    if (isOpen) {
+      // Save current body overflow and apply overflow hidden
+      const originalOverflow = document.body.style.overflow;
+      const originalOverflowX = document.body.style.overflowX;
+      const originalOverflowY = document.body.style.overflowY;
+      
+      document.body.style.overflow = 'hidden';
+      
+      return () => {
+        // Restore original overflow styles
+        document.body.style.overflow = originalOverflow;
+        document.body.style.overflowX = originalOverflowX;
+        document.body.style.overflowY = originalOverflowY;
+      };
+    }
+  }, [isOpen]);
+
   // Update local state when props change
   useEffect(() => {
     setLocalIsBookmarked(isBookmarked);
@@ -504,7 +523,7 @@ export default function ArtPlayerWrapper({
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center">
+    <div className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center overflow-hidden">
       <div className="relative w-full h-full max-w-7xl max-h-[90vh] mx-auto my-8">
         {/* Close button */}
         <button
@@ -571,12 +590,18 @@ export default function ArtPlayerWrapper({
           className="relative w-full h-full bg-black rounded-lg overflow-hidden"
           onMouseMove={() => setShowControls(true)}
           onMouseLeave={() => setShowControls(false)}
+          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
         >
           {/* ArtPlayer will be mounted here */}
           <div 
             ref={containerRef}
             className="w-full h-full artplayer-container"
-            style={{ display: isLoading ? 'none' : 'block' }}
+            style={{ 
+              display: isLoading ? 'none' : 'block',
+              scrollbarWidth: 'none',
+              msOverflowStyle: 'none',
+              overflow: 'hidden'
+            }}
           />
 
           {/* Loading overlay */}

src/lib/artplayer-config.ts

@@ -121,6 +121,26 @@ export const artPlayerStyles = `
     width: 100%;
     height: 100%;
     position: relative;
+    overflow: hidden !important;
+    scrollbar-width: none !important;
+    -ms-overflow-style: none !important;
+  }
+  
+  .artplayer-container::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
+  }
+  
+  /* Prevent scrollbars on all child elements */
+  .artplayer-container * {
+    scrollbar-width: none !important;
+    -ms-overflow-style: none !important;
+    overflow: hidden !important;
+  }
+  
+  .artplayer-container *::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
   }
   
   /* Ensure crisp video rendering */