upd presentation videos

src/components/slides/VideoLayerMain.tsx

@@ -1,13 +1,13 @@
-import LoaderIcon from '../../../public/icons/loader.svg';
-import { videos } from '@/consts/presentation/videos';
+import LoaderIcon from "../../../public/icons/loader.svg";
+import { videos } from "@/consts/presentation/videos";
 import {
   motion,
   MotionValue,
   useMotionValueEvent,
   useTransform,
-} from 'framer-motion';
-import { useTranslations } from 'next-intl';
-import { createRef, Fragment, RefObject, useEffect, useState } from 'react';
+} from "framer-motion";
+import { useTranslations } from "next-intl";
+import { createRef, Fragment, RefObject, useEffect, useState } from "react";
 
 export function VideoLayerMain({ scroll }: { scroll: MotionValue<number> }) {
   const [slide, setSlide] = useState(0);
@@ -31,31 +31,31 @@ export function VideoLayerMain({ scroll }: { scroll: MotionValue<number> }) {
   const x = useTransform(
     scroll,
     [0, 1 / 5, 2 / 5, 3 / 5, 4 / 5, 1],
-    ['32.708vw', '32.708vw', '0vw', '0vw', '30vw', '30vw']
+    ["32.708vw", "32.708vw", "0vw", "0vw", "30vw", "30vw"]
   );
 
   const width = useTransform(
     scroll,
     [0, 1 / 5, 2 / 5, 3 / 5, 4 / 5, 1],
-    ['64.444vw', '61.667vw', '64.444vw', '64.444vw', '61.667vw', '65vw']
+    ["64.444vw", "61.667vw", "64.444vw", "64.444vw", "61.667vw", "65vw"]
   );
 
   const backgroundSize = useTransform(
     scroll,
     [0, 1 / 5, 2 / 5, 3 / 5, 4 / 5, 1],
-    ['48.333vw', '53.962vw', '53.962vw', '62.946vw', '53.962vw', '47.813vw']
+    ["48.333vw", "53.962vw", "53.962vw", "62.946vw", "53.962vw", "47.813vw"]
   );
 
   const videoWidth = useTransform(
     scroll,
     [0, 1 / 5, 2 / 5, 3 / 5, 4 / 5, 1],
-    ['39.822vw', '44.46vw', '44.46vw', '51.861vw', '44.46vw', '39.392vw']
+    ["39.822vw", "44.46vw", "44.46vw", "51.861vw", "44.46vw", "39.392vw"]
   );
 
   const videoHeight = useTransform(
     scroll,
     [0, 1 / 5, 2 / 5, 3 / 5, 4 / 5, 1],
-    ['19vw', '21vw', '21vw', '24.5vw', '21vw', '18.5vw']
+    ["19vw", "21vw", "21vw", "24.5vw", "21vw", "18.5vw"]
   );
 
   const opacity = useTransform(scroll, [4.5 / 5, 1], [0, 1]);
@@ -63,16 +63,16 @@ export function VideoLayerMain({ scroll }: { scroll: MotionValue<number> }) {
   const backgroundPositionY = useTransform(
     scroll,
     [0, 1 / 5, 2 / 5, 3 / 5, 4 / 5, 1],
-    ['0vw', '0vw', '0vw', '-2.569vw', '0vw', '7.292vw']
+    ["0vw", "0vw", "0vw", "-2.569vw", "0vw", "7.292vw"]
   );
 
   const top = useTransform(
     scroll,
     [0, 1 / 5, 2 / 5, 3 / 5, 4 / 5, 1],
-    ['3.602vw', '4.022vw', '4.022vw', '2.122vw', '4.022vw', '10.855vw']
+    ["3.602vw", "4.022vw", "4.022vw", "2.122vw", "4.022vw", "10.855vw"]
   );
 
-  useMotionValueEvent(scroll, 'change', (value) =>
+  useMotionValueEvent(scroll, "change", (value) =>
     setSlide(Math.min(Math.trunc(value * videos.length), videos.length - 1))
   );
 
@@ -80,8 +80,8 @@ export function VideoLayerMain({ scroll }: { scroll: MotionValue<number> }) {
 
   useEffect(() => setCurrentBuffering(true), [slide]);
 
-  const t = useTranslations('integration_crm');
-  const tLoading = useTranslations('video_loading');
+  const t = useTranslations("integration_crm");
+  const tLoading = useTranslations("video_loading");
 
   return (
     <motion.div
@@ -94,7 +94,7 @@ export function VideoLayerMain({ scroll }: { scroll: MotionValue<number> }) {
       }}
       className="absolute h-full overflow-hidden bg-[url(/img/pages/home/presentation/touch_screen.png)] bg-cover bg-top bg-no-repeat"
       onViewportEnter={handleOnViewportFeatureEnter}
-      viewport={{ margin: '-10% 0% 0% 0%', once: true }}
+      viewport={{ margin: "-10% 0% 0% 0%", once: true }}
     >
       {!!videoRefs.length &&
         videos.map(({ src }, index) => (
@@ -104,7 +104,7 @@ export function VideoLayerMain({ scroll }: { scroll: MotionValue<number> }) {
                 style={{ opacity }}
                 className="absolute left-[1.667vw] top-[1.667vw] z-10 max-w-[34.097vw] heading2 font-medium"
               >
-                {t('description3')}
+                {t("description3")}
               </motion.p>
             )}
             <motion.video
@@ -114,7 +114,7 @@ export function VideoLayerMain({ scroll }: { scroll: MotionValue<number> }) {
               src={
                 isViewportEntered
                   ? `/videos/pages/home/presentation/${src}.mp4`
-                  : ''
+                  : ""
               }
               style={{
                 zIndex: videos.length - index,
@@ -127,7 +127,7 @@ export function VideoLayerMain({ scroll }: { scroll: MotionValue<number> }) {
               muted
               playsInline
               className={`object-bottom object-cover origin-top absolute left-1/2 -translate-x-1/2 !rotate-x-[4deg] transition-[opacity,transform]${
-                slide > index ? ' opacity-0' : ''
+                slide > index ? " opacity-0" : ""
               }`}
             />
             <motion.div
@@ -143,7 +143,7 @@ export function VideoLayerMain({ scroll }: { scroll: MotionValue<number> }) {
               }}
             >
               <LoaderIcon className="animate-spin lg:w-[1.389vw] lg:h-[1.389vw] h-5 w-5" />
-              <span className="text2 select-none">{tLoading('title')}</span>
+              <span className="text2 select-none">{tLoading("title")}</span>
             </motion.div>
             <motion.div
               initial={{ opacity: 0 }}

src/consts/presentation/videos.ts

@@ -1,70 +1,70 @@
 export const videos = [
   {
-    src: '1_search',
-    anchorImg: '/img/pages/prime/search-select.jpg',
-    title: 'search',
+    src: "1_search_comp",
+    anchorImg: "/img/pages/prime/search-select.jpg",
+    title: "search",
   },
   {
-    src: '2_3dtour',
-    anchorImg: '/img/pages/prime/3dtour.jpg',
-    title: '3dtour',
+    src: "2_3dtour_comp",
+    anchorImg: "/img/pages/prime/3dtour.jpg",
+    title: "3dtour",
   },
   {
-    src: '3_infrastructure',
-    anchorImg: '/img/pages/prime/infra.jpg',
-    title: 'infrastructure',
+    src: "3_infrastructure_comp",
+    anchorImg: "/img/pages/prime/infra.jpg",
+    title: "infrastructure",
   },
   {
-    src: '4_insolation',
-    anchorImg: '/img/pages/prime/insolation.jpg',
-    title: 'insolation',
+    src: "4_insolation_comp",
+    anchorImg: "/img/pages/prime/insolation.jpg",
+    title: "insolation",
   },
   {
-    src: '5_engine',
-    anchorImg: '/img/pages/prime/engine.jpg',
-    title: 'engine',
+    src: "5_engine_comp",
+    anchorImg: "/img/pages/prime/engine.jpg",
+    title: "engine",
   },
   {
-    src: '6_reservation',
-    anchorImg: '/img/pages/prime/crm.jpg',
-    title: 'crm',
+    src: "6_reservation_comp",
+    anchorImg: "/img/pages/prime/crm.jpg",
+    title: "crm",
   },
 ];
 
 export const primeVideos = [
   {
-    src: '2_3dtour',
-    anchorImg: '/img/pages/prime/3dtour.jpg',
-    title: '3D тур',
+    src: "2_3dtour_comp",
+    anchorImg: "/img/pages/prime/3dtour.jpg",
+    title: "3D тур",
   },
   {
-    src: '1_search',
-    anchorImg: '/img/pages/prime/search-select.jpg',
-    title: 'Поиск',
+    src: "1_search_comp",
+    anchorImg: "/img/pages/prime/search-select.jpg",
+    title: "Поиск",
   },
   {
-    src: '3_infrastructure',
-    anchorImg: '/img/pages/prime/infra.jpg',
-    title: 'Инфраструктура',
+    src: "3_infrastructure_comp",
+    anchorImg: "/img/pages/prime/infra.jpg",
+    title: "Инфраструктура",
   },
   {
-    src: '7_favorites',
-    anchorImg: '/img/pages/prime/favorites.jpg',
-    title: 'Избранное',
+    src: "7_favorites",
+    anchorImg: "/img/pages/prime/favorites.jpg",
+    title: "Избранное",
   },
   {
-    src: '8_integrationCRM',
-    anchorImg: '/img/pages/prime/crm.jpg',
-    title: 'Интеграция с CRM',
+    src: "8_integrationCRM",
+    anchorImg: "/img/pages/prime/crm.jpg",
+    title: "Интеграция с CRM",
   },
   {
-    src: '4_insolation',
-    anchorImg: '/img/pages/prime/insolation.jpg',
-    title: 'Инсоляция',
+    src: "4_insolation_comp",
+    anchorImg: "/img/pages/prime/insolation.jpg",
+    title: "Инсоляция",
   },
   {
-    src: '6_reservation',
-    anchorImg: '/img/pages/prime/cp.jpg',
-    title: 'Отправка КП',
+    src: "6_reservation_comp",
+    anchorImg: "/img/pages/prime/cp.jpg",
+    title: "Отправка КП",
   },
 ];