From b8bae86ae700e872804f1c52bfe726aceff4df99 Mon Sep 17 00:00:00 2001
From: Xin Wang <xin.victorwang@gmail.com>
Date: Mon, 30 Jun 2025 13:01:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=84=E7=90=86=E6=8E=A7=E5=88=B6=E5=8F=B0?=
 =?UTF-8?q?=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/parallax.tsx              |  7 +++++--
 components/vanta-halo-background.tsx | 10 ++++++----
 components/video-grid-layout.tsx     | 13 +++++++++++--
 components/video-screen-layout.tsx   | 15 ++++++++++++---
 4 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/components/parallax.tsx b/components/parallax.tsx
index 5c87c0e..1044dcd 100644
--- a/components/parallax.tsx
+++ b/components/parallax.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
+import dynamic from 'next/dynamic';
 
 // 导入图片资源
 import mono from '@/assets/3dr_mono.png';
@@ -56,7 +57,8 @@ const Parallax = () => {
     };
     
     if (pageX) {
-      pageX.addEventListener('mousemove', parallax as EventListener, false);
+      // Add the passive flag to the event listener to improve scrolling performance
+      pageX.addEventListener('mousemove', parallax as EventListener, { passive: true });
       
       return () => {
         pageX.removeEventListener('mousemove', parallax as EventListener);
@@ -226,4 +228,5 @@ const CardTitle = styled.p`
   color: #fff;
 `;
 
-export default Parallax;
\ No newline at end of file
+// Export with noSSR to prevent server-side rendering issues
+export default dynamic(() => Promise.resolve(Parallax), { ssr: false });
\ No newline at end of file
diff --git a/components/vanta-halo-background.tsx b/components/vanta-halo-background.tsx
index 3aad519..b06df53 100644
--- a/components/vanta-halo-background.tsx
+++ b/components/vanta-halo-background.tsx
@@ -3,8 +3,8 @@
 
 import React, { useRef, useEffect, memo } from 'react'
 import dynamic from 'next/dynamic'
-// Import THREE only once and use it consistently
-import * as THREE from 'three'
+// Remove direct import of THREE to avoid SSR issues
+// import * as THREE from 'three'
 
 interface VantaHaloBackgroundProps {
   onLoaded?: () => void;
@@ -14,6 +14,7 @@ interface VantaHaloBackgroundProps {
 declare global {
   interface Window {
     VANTA: any;
+    THREE: any; // Add THREE to window type
   }
 }
 
@@ -68,7 +69,7 @@ const VantaHaloBackground = memo(({ onLoaded }: VantaHaloBackgroundProps) => {
             if (window.VANTA && window.VANTA.HALO) {
               effectInstance.current = window.VANTA.HALO({
                 el: vantaRef.current,
-                THREE, // Pass the imported THREE instance
+                THREE: window.THREE, // Use THREE from window instead of import
                 mouseControls: true,
                 touchControls: true,
                 gyroControls: false,
@@ -136,4 +137,5 @@ const VantaHaloBackground = memo(({ onLoaded }: VantaHaloBackgroundProps) => {
 
 VantaHaloBackground.displayName = 'VantaHaloBackground'
 
-export default VantaHaloBackground
+// Export with noSSR to prevent server-side rendering
+export default dynamic(() => Promise.resolve(VantaHaloBackground), { ssr: false })
diff --git a/components/video-grid-layout.tsx b/components/video-grid-layout.tsx
index 80fbe46..9f1af35 100644
--- a/components/video-grid-layout.tsx
+++ b/components/video-grid-layout.tsx
@@ -1,6 +1,9 @@
+'use client'; // Add this to ensure it's a client component
+
 import React, { useState } from 'react';
 import { Edit2, Trash2, Play } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import dynamic from 'next/dynamic';
 
 interface VideoGridLayoutProps {
   videos: {
@@ -13,7 +16,7 @@ interface VideoGridLayoutProps {
   onDelete?: (id: string) => void;
 }
 
-export function VideoGridLayout({ videos, onEdit, onDelete }: VideoGridLayoutProps) {
+function VideoGridLayoutComponent({ videos, onEdit, onDelete }: VideoGridLayoutProps) {
   const [hoveredId, setHoveredId] = useState<string | null>(null);
   const [isPlaying, setIsPlaying] = useState<{ [key: string]: boolean }>({});
 
@@ -58,6 +61,7 @@ export function VideoGridLayout({ videos, onEdit, onDelete }: VideoGridLayoutPro
             <video
               id={`video-${video.id}`}
               src={video.url}
+              suppressHydrationWarning
               className="w-full h-full object-cover"
               loop
               muted
@@ -112,4 +116,9 @@ export function VideoGridLayout({ videos, onEdit, onDelete }: VideoGridLayoutPro
       ))}
     </div>
   );
-} 
\ No newline at end of file
+}
+
+// Export as a client-only component to prevent hydration issues
+export const VideoGridLayout = dynamic(() => Promise.resolve(VideoGridLayoutComponent), {
+  ssr: false
+}); 
\ No newline at end of file
diff --git a/components/video-screen-layout.tsx b/components/video-screen-layout.tsx
index 140e1b2..189c9fe 100644
--- a/components/video-screen-layout.tsx
+++ b/components/video-screen-layout.tsx
@@ -1,6 +1,9 @@
+'use client'; // Add this to ensure it's a client component
+
 import React, { useState, useRef, useEffect } from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import dynamic from 'next/dynamic';
 
 interface VideoScreenLayoutProps {
   videos: {
@@ -10,7 +13,7 @@ interface VideoScreenLayoutProps {
   }[];
 }
 
-export function VideoScreenLayout({ videos }: VideoScreenLayoutProps) {
+function VideoScreenLayoutComponent({ videos }: VideoScreenLayoutProps) {
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isAnimating, setIsAnimating] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -74,9 +77,10 @@ export function VideoScreenLayout({ videos }: VideoScreenLayoutProps) {
             style={getPanelStyle(index)}
           >
             <div className="relative w-full h-full overflow-hidden rounded-lg">
-              {/* 视频 */}
+              {/* 视频 - Add suppressHydrationWarning to prevent className mismatch warnings */}
               <video
                 src={video.url}
+                suppressHydrationWarning
                 className="w-full h-full object-cover"
                 autoPlay
                 loop
@@ -122,4 +126,9 @@ export function VideoScreenLayout({ videos }: VideoScreenLayoutProps) {
       </Button>
     </div>
   );
-} 
\ No newline at end of file
+}
+
+// Export as a client-only component to prevent hydration issues
+export const VideoScreenLayout = dynamic(() => Promise.resolve(VideoScreenLayoutComponent), {
+  ssr: false
+}); 
\ No newline at end of file