diff --git a/src/components/Devices.tsx b/src/components/Devices.tsx index 0fd8f20..2cf76c6 100644 --- a/src/components/Devices.tsx +++ b/src/components/Devices.tsx @@ -11,7 +11,7 @@ export function Devices() { return (
Работаем с diff --git a/src/components/Layout/VideoModal.tsx b/src/components/Layout/VideoModal.tsx index 49ef218..0f78e3e 100644 --- a/src/components/Layout/VideoModal.tsx +++ b/src/components/Layout/VideoModal.tsx @@ -1,17 +1,26 @@ +import { useEffect, useRef } from 'react'; import { CloseIcon } from '../../components/icons/CloseIcon'; import { useModalStore } from '../../stores/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-dvh 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,7 @@ export function VideoModal({ link }: VideoModalProps) { > <CloseIcon /> </button> - <video src={link} className="h-full" autoPlay muted loop playsInline /> + <video src={link} ref={videoRef} autoPlay muted loop playsInline /> </div> </div> ); diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx index 8cc6e9d..b70c9c8 100644 --- a/src/components/Projects.tsx +++ b/src/components/Projects.tsx @@ -4,7 +4,7 @@ import { Title } from './ui/Title'; export function Projects() { return ( - <div id="projects" className="pt-12 space-y-10 lg:pt-16 sm:space-y-6"> + <div id="projects" className="space-y-10 pt-14 lg:pt-20 sm:space-y-6"> <Title>Проекты
diff --git a/src/components/Promotion.tsx b/src/components/Promotion.tsx index 74c28c4..b0092ad 100644 --- a/src/components/Promotion.tsx +++ b/src/components/Promotion.tsx @@ -13,10 +13,7 @@ export function Promotion() { const width = useWindowWidth(); return ( -
+
Повышаем количество посетителей на стенде, <span className="text-gradient"> diff --git a/src/components/Showreel.tsx b/src/components/Showreel.tsx index 3b8a9bd..7aedc65 100644 --- a/src/components/Showreel.tsx +++ b/src/components/Showreel.tsx @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import { useEffect, useRef } from 'react'; import { FullScreenIcon } from './icons/FullScreenIcon'; import { useModalStore } from '../stores/modalStore'; import { VideoModal } from './Layout/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 + link={'/video/showreel.mp4'} + currentTime={videoRef.current?.currentTime ?? 0} + />, + ); }} > <FullScreenIcon />