fixed modal showreel

src/components/Devices.tsx

@@ -11,7 +11,7 @@ export function Devices() {
   return (
     <div
       id="devices"
-      className="pt-12 space-y-8 lg:pt-16 sm:space-y-10 lg:space-y-20"
+      className="space-y-8 pt-14 lg:pt-20 sm:space-y-10 lg:space-y-20"
     >
       <Title>
         Работаем с

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>
   );

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>Проекты</Title>
       <div className="flex-col max-sm:space-y-8 lg:flex gap-y-16 sm:max-lg:space-y-10">
         <div className="max-sm:space-y-8 lg:flex sm:max-lg:space-y-10 gap-x-4">

src/components/Promotion.tsx

@@ -13,10 +13,7 @@ export function Promotion() {
   const width = useWindowWidth();
 
   return (
-    <div
-      id="products"
-      className="pt-16 space-y-8 lg:space-y-20 sm:space-y-10 lg:-mt-4 sm:-mt-10"
-    >
+    <div id="products" className="pt-20 space-y-8 lg:space-y-20 sm:space-y-10">
       <Title className="max-w-[calc(1310/1600*100vw)]">
         Повышаем количество посетителей на&nbsp;стенде,
         <span className="text-gradient">

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 />