diff --git a/src/components/Layouts/VideoModal.tsx b/src/components/Layouts/VideoModal.tsx index 6544687..3f6e350 100644 --- a/src/components/Layouts/VideoModal.tsx +++ b/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(null); + + useEffect(() => { + if (!videoRef.current) return; + videoRef.current.currentTime = currentTime; + }, [currentTime, videoRef]); + return (
@@ -21,7 +30,15 @@ export function VideoModal({ link }: VideoModalProps) { > -
); diff --git a/src/components/Main/Showreel.tsx b/src/components/Main/Showreel.tsx index 21a97ae..5780ea9 100644 --- a/src/components/Main/Showreel.tsx +++ b/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(null); + return (