fixed: banner hover time

Author: Peace1030

app/(home)/watch/[id]/page.js

@@ -28,6 +28,8 @@ const Watch = ({ params }) => {
   const episode = searchParams.get('episode') || animeInfo?.episodes?.[0]?.number || 1;
 
 
+
+
   useEffect(() => {
     const fetchAnimeInfo = async () => {
       try {

components/ui/banner/Banner.jsx

@@ -1,4 +1,3 @@
-"use client"
 import Image from "next/image"
 import styles from "./banner.module.css"
 import AnimeInfo from "./AnimeInfo/AnimeInfo"
@@ -9,17 +8,21 @@ const Banner = ({ info }) => {
   const [isVideoPlaying, setIsVideoPlaying] = useState(false)
   const [isImageLoaded, setIsImageLoaded] = useState(false)
   const HoverTime = 1000
+  let hoverTimer = null;
 
   const onMouseEnter = () => {
     if (!isVideoPlaying && window.innerWidth >= 890) {
-      setTimeout(() => {
-        setIsVideoPlaying(prev => !prev)
-      }, !isVideoPlaying ? HoverTime : 0);
+      hoverTimer = setTimeout(() => {
+        setIsVideoPlaying(true);
+      }, HoverTime);
     }
   }
+
   const onMouseLeave = () => {
-    setIsVideoPlaying(false)
+    clearTimeout(hoverTimer); // Cancel the timeout if mouse leaves before HoverTime
+    setIsVideoPlaying(false);
   }
+
   return (
     <div className={styles.container}
       onMouseEnter={onMouseEnter}
@@ -35,4 +38,4 @@ const Banner = ({ info }) => {
   )
 }
 
-export default Banner
+export default Banner

components/ui/recentReleaseCard/loading.module.css

@@ -6,7 +6,7 @@
 
 .loading {
   background: #0f0f13;
-  height: 336px;
+  height: 400px;
   border-radius: 14px;
   position: relative;
   animation: loading 8s linear infinite;

content/HomePage/Home/discover/Discover.jsx

@@ -43,6 +43,7 @@ const Discover = () => {
 
           {!isLoaded ? Array.from({ length: 8 }).map((_, index) => <Card key={index} isLoading={true} />) : datas?.results?.map((data) => (
             <Card key={data.id} data={data} />
+            // <Card key={data} isLoading={true} />
           ))}
         </div>
       </div>

content/HomePage/Home/recentRelease/RecentRelease.jsx

@@ -38,7 +38,7 @@ const RecentRelease = () => {
         <div className={styles.cards}>
 
           {!isLoaded ? Array.from({ length: 10 * page }).map((_, index) => <RecentReleasesCard key={index} isLoading />) : datas?.results?.map((data, index) => (
-            <RecentReleasesCard key={index} info={data} />
+            <RecentReleasesCard key={index} info={data}/>
           ))}
         </div>