Merge branch 'develop' into 'hide-lotti-from-yandex'

# Conflicts:
#   src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/index.tsx

src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/index.tsx

@@ -4,6 +4,7 @@ import styles from "./styles.module.css";
 import Loader from "@/components/Loader";
 import PlayButton from "../../../../ui/PlayButton";
 import metricService, { EGoals } from "@/services/metric/metricService";
+import PlayPauseButton from "../../../../ui/PlayPauseButton";
 
 interface IPersonalVideoProps {
   gender: string;
@@ -12,6 +13,7 @@ interface IPersonalVideoProps {
 
 const PersonalVideo = React.memo<IPersonalVideoProps>(({ url, gender }) => {
   const [isPlaying, setIsPlaying] = useState(false);
+  const [isStarted, setIsStarted] = useState(false);
   const [isError, setIsError] = useState(false);
 
   const onError = (error: unknown) => {
@@ -21,6 +23,7 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(({ url, gender }) => {
   };
 
   const onStart = () => {
+    setIsStarted(true);
     metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_START);
   };
 
@@ -30,7 +33,9 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(({ url, gender }) => {
 
   return (
     <div className={`${styles.container} ym-hide-content`}>
-      {!isPlaying && !isError && <Loader className={styles.loader} />}
+      {!isPlaying && !isError && !isStarted && (
+        <Loader className={styles.loader} />
+      )}
       {isError && (
         <PlayButton
           backgroundFill={gender === "male" ? "#85B6FF" : "#D1ACF2"}
@@ -59,6 +64,13 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(({ url, gender }) => {
           aspectRatio: "16 / 9",
         }}
       />
+      {!isError && isStarted && (
+        <PlayPauseButton
+          state={isPlaying ? "pause" : "play"}
+          onClick={() => setIsPlaying((prev) => !prev)}
+          className={styles["play-pause-button"]}
+        />
+      )}
     </div>
   );
 });

src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/styles.module.css

@@ -15,4 +15,13 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
+}
+
+.play-pause-button {
+    position: absolute;
+    bottom: 10px;
+    left: 8px;
+    width: 34px;
+    height: auto;
+    z-index: 10;
 }

src/components/pages/ABDesign/v1/ui/PlayPauseButton/index.tsx

@@ -0,0 +1,64 @@
+import { SVGProps } from "react";
+
+interface IPlayPauseButtonProps {
+  state?: "play" | "pause";
+}
+
+function PlayPauseButton({
+  state = "play",
+  ...props
+}: IPlayPauseButtonProps & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="71"
+      height="50"
+      viewBox="0 0 71 50"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g filter="url(#filter0_b_201_4)">
+        <rect width="71" height="50" rx="8" fill="#4D4D4D" fillOpacity="0.88" />
+      </g>
+      {state === "play" && (
+        <path
+          d="M43.5 24.134C44.1667 24.5189 44.1667 25.4811 43.5 25.866L31.5 32.7942C30.8333 33.1791 30 32.698 30 31.9282L30 18.0718C30 17.302 30.8333 16.8209 31.5 17.2058L43.5 24.134Z"
+          fill="#DADADA"
+        />
+      )}
+      {state === "pause" && (
+        <>
+          <rect x="27" y="17" width="5" height="16" rx="2" fill="#D9D9D9" />
+          <rect x="39" y="17" width="5" height="16" rx="2" fill="#D9D9D9" />
+        </>
+      )}
+      <defs>
+        <filter
+          id="filter0_b_201_4"
+          x="-6.7"
+          y="-6.7"
+          width="84.4"
+          height="63.4"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation="3.35" />
+          <feComposite
+            in2="SourceAlpha"
+            operator="in"
+            result="effect1_backgroundBlur_201_4"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_backgroundBlur_201_4"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>
+  );
+}
+
+export default PlayPauseButton;