fix: resolve video loading error

Author: zjy365

components/footer/index.tsx

@@ -102,7 +102,7 @@ const Footer = async () => {
             Privacy Policy
           </FooterLink>
           <div>|</div>
-          <div>Copyright © 2024 Fumadocs. All rights reserved.</div>
+          <div>Copyright © 2024 Sailos. All rights reserved.</div>
         </div>
         <div className="flex space-x-4">
           <Link

components/header/video.tsx

@@ -8,19 +8,8 @@ export default function Video() {
   const [isPlaying, setIsPlaying] = useState(false);
   const playerRef = useRef<ReactPlayer>(null);
 
-  const handlePlay = () => {
-    setIsPlaying(true);
-    playerRef.current?.seekTo(0);
-  };
-
-  useEffect(() => {
-    if (playerRef.current) {
-      playerRef.current.getInternalPlayer()?.load();
-    }
-  }, []);
-
   return (
-    <div className="relative w-full mt-20">
+    <div className="relative mt-20 w-full">
       <div className="relative z-20 mx-auto max-w-[1000px] px-4">
         <AnimateElement type="slideUp" delay={0.2} duration={0.6}>
           <div className="aspect-video w-full">
@@ -31,18 +20,21 @@ export default function Video() {
               height="100%"
               playing={isPlaying}
               controls={true}
+              onReady={() => {
+                console.log('Video is ready to play');
+              }}
               config={{
                 youtube: {
                   playerVars: {
                     modestbranding: 1,
-                    rel: 0
-                  }
-                }
+                    rel: 0,
+                  },
+                },
               }}
             />
           </div>
         </AnimateElement>
       </div>
     </div>
   );
-}
+}

components/ui/animated-wrapper.tsx

@@ -24,7 +24,7 @@ export const AnimateElement: React.FC<AnimateElementProps> = ({
   children,
   type,
   delay = 0.2,
-  duration = 0.6,
+  duration = 0.4,
   className,
 }) => {
   const ref = useRef(null);