From 0bdcd91b8dd5c2d446af5d3b98807ff0c7297bfa Mon Sep 17 00:00:00 2001
From: gofnnp <fbicha1234@gmail.com>
Date: Tue, 25 Jun 2024 01:41:53 +0400
Subject: [PATCH] play-pause-button

add play/pause control to personal video
---
 .../components/PersonalVideo/index.tsx        | 14 +++-
 .../PersonalVideo/styles.module.css           |  9 +++
 .../ABDesign/v1/ui/PlayPauseButton/index.tsx  | 64 +++++++++++++++++++
 3 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 src/components/pages/ABDesign/v1/ui/PlayPauseButton/index.tsx

diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/index.tsx
index 01bee65..83a4f1d 100644
--- a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/index.tsx
@@ -3,6 +3,7 @@ import ReactPlayer from "react-player";
 import styles from "./styles.module.css";
 import Loader from "@/components/Loader";
 import PlayButton from "../../../../ui/PlayButton";
+import PlayPauseButton from "../../../../ui/PlayPauseButton";
 
 interface IPersonalVideoProps {
   gender: string;
@@ -11,6 +12,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,7 +23,9 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(({ url, gender }) => {
 
   return (
     <div className={styles.container}>
-      {!isPlaying && !isError && <Loader className={styles.loader} />}
+      {!isPlaying && !isError && !isStarted && (
+        <Loader className={styles.loader} />
+      )}
       {isError && (
         <PlayButton
           backgroundFill={gender === "male" ? "#85B6FF" : "#D1ACF2"}
@@ -40,6 +44,7 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(({ url, gender }) => {
         playing={isPlaying}
         stopOnUnmount={true}
         width="100%"
+        onStart={() => setIsStarted(true)}
         onReady={() => setIsPlaying(true)}
         onError={onError}
         playsinline={true}
@@ -48,6 +53,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>
   );
 });
diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/styles.module.css b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/styles.module.css
index 7880b62..b6a4cf5 100644
--- a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/styles.module.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/components/pages/ABDesign/v1/ui/PlayPauseButton/index.tsx b/src/components/pages/ABDesign/v1/ui/PlayPauseButton/index.tsx
new file mode 100644
index 0000000..3d50ffa
--- /dev/null
+++ b/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;