fixed modal showreel

src/components/Layouts/VideoModal.tsx

@@ -1,17 +1,26 @@
+import { useEffect, useRef } from 'react';
 import { CloseIcon } from '../../components/icons/CloseIcon';
 import { useModalStore } from '../../store/modalStore';
 
 interface VideoModalProps {
   link: string;
+  currentTime: number;
 }
 
-export function VideoModal({ link }: VideoModalProps) {
+export function VideoModal({ link, currentTime }: VideoModalProps) {
   const { setModal } = useModalStore();
 
   const handleOnCloseClick = () => {
     setModal(null);
   };
 
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (!videoRef.current) return;
+    videoRef.current.currentTime = currentTime;
+  }, [currentTime, videoRef]);
+
   return (
     <div className="w-screen h-screen absolute z-[110] top-0 left-0 overflow-hidden flex justify-center items-center">
       <div className="flex items-center justify-center w-full aspect-video">
@@ -21,7 +30,15 @@ export function VideoModal({ link }: VideoModalProps) {
         >
           <CloseIcon />
         </button>
-        <video src={link} className="h-full" autoPlay muted loop playsInline />
+        <video
+          src={link}
+          ref={videoRef}
+          className="h-full"
+          autoPlay
+          muted
+          loop
+          playsInline
+        />
       </div>
     </div>
   );

src/components/Main/Showreel.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { Fullscreen } from '../icons/Fullscreen';
 import { useModalStore } from '../../store/modalStore';
 import { VideoModal } from '../Layouts/VideoModal';
@@ -15,10 +15,13 @@ export function Showreel() {
     return () => document.removeEventListener('keydown', listener);
   }, [setModal]);
 
+  const videoRef = useRef<HTMLVideoElement>(null);
+
   return (
     <div className="lg:mb-[100px] sm:mb-[70px] mb-14 w-full relative flex justify-center items-center group">
       <video
         src="/video/showreel.mp4"
+        ref={videoRef}
         autoPlay
         loop
         muted
@@ -28,7 +31,12 @@ export function Showreel() {
       <button
         className="absolute z-10 lg:p-8 sm:p-6 p-4 rounded-full border group-hover:block hidden bg-[#14161F33]"
         onClick={() => {
-          setModal(<VideoModal link={'/video/showreel.mp4'} />);
+          setModal(
+            <VideoModal
+              currentTime={videoRef.current?.currentTime ?? 0}
+              link={'/video/showreel.mp4'}
+            />,
+          );
         }}
       >
         <Fullscreen />