fixed readme with new images

nnamdiken · Feb 20, 2023 · 2e2acfc · 2e2acfc
1 parent 47cce5d
commit 2e2acfc
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -70,7 +70,7 @@
 
 - [MUI(Material UI)](https://mui.com/)
 - [framer-motion](https://www.framer.com/docs/)
-- [react-player](https://github.com/CookPete/react-player)
+- [video.js](https://videojs.com)
 - [react-use](https://github.com/streamich/react-use)
 - [react-slick](https://react-slick.neostack.com/)
 

diff --git a/public/assets/detail-modal.png b/public/assets/detail-modal.png
diff --git a/public/assets/grid-genre.png b/public/assets/grid-genre.png
diff --git a/public/assets/home-page.png b/public/assets/home-page.png
diff --git a/public/assets/mini-portal.png b/public/assets/mini-portal.png
diff --git a/src/components/VideoCardPortal.tsx b/src/components/VideoCardPortal.tsx
@@ -40,6 +40,7 @@ export default function VideoCardModal({
   return (
     <Card
       onMouseLeave={() => {
+        console.log("Mouse out");
         setPortal(null, null);
       }}
       sx={{

diff --git a/src/components/VideoItemWithHover.tsx b/src/components/VideoItemWithHover.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef, useDeferredValue } from "react";
 import { Movie } from "src/types/Movie";
 import { usePortal } from "src/providers/PortalProvider";
 import { useGetConfigurationQuery } from "src/store/slices/configuration";
@@ -13,13 +13,15 @@ export default function VideoItemWithHover({ video }: VideoItemWithHoverProps) {
   const { setPortal } = usePortal();
   const elementRef = useRef<HTMLDivElement>(null);
   const [isHovered, setIsHovered] = useState(false);
+  // const deferredStatus = useDeferredValue(isHovered);
+
   const { data: configuration } = useGetConfigurationQuery(undefined);
   const [debouncedHoverStated, setDebouncedHoverState] = useState(false);
   useDebounce(
     () => {
       setDebouncedHoverState(isHovered);
     },
-    700,
+    isHovered ? 300 : 0,
     [isHovered]
   );
 
@@ -29,6 +31,12 @@ export default function VideoItemWithHover({ video }: VideoItemWithHoverProps) {
     }
   }, [debouncedHoverStated]);
 
+  // useEffect(() => {
+  //   if (deferredStatus) {
+  //     setPortal(elementRef.current, video);
+  //   }
+  // }, [deferredStatus]);
+
   return (
     <VideoItemWithHoverPure
       src={`${configuration?.images.base_url}w300${video.backdrop_path}`}