From b0cb068eb6ec5a86612ca8fed9d79e2755e254b5 Mon Sep 17 00:00:00 2001
From: gofnnp <fbicha1234@gmail.com>
Date: Wed, 26 Jun 2024 17:43:36 +0400
Subject: [PATCH] AW-121-personal-video

position sticky for personal video
---
 .../components/PersonalVideo/index.tsx        | 129 +++++++++---------
 .../ABDesign/v1/pages/TrialPayment/index.tsx  |   8 +-
 .../v1/pages/TrialPayment/styles.module.css   |   6 +
 3 files changed, 80 insertions(+), 63 deletions(-)

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 4953bd1..8e41cdb 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
@@ -9,76 +9,81 @@ import PlayPauseButton from "../../../../ui/PlayPauseButton";
 interface IPersonalVideoProps {
   gender: string;
   url: string;
+  classNameContainer?: string;
 }
 
-const PersonalVideo = React.memo<IPersonalVideoProps>(({ url, gender }) => {
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [isStarted, setIsStarted] = useState(false);
-  const [isError, setIsError] = useState(false);
+const PersonalVideo = React.memo<IPersonalVideoProps>(
+  ({ url, gender, classNameContainer = "" }) => {
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [isStarted, setIsStarted] = useState(false);
+    const [isError, setIsError] = useState(false);
 
-  const onError = (error: unknown) => {
-    if (!error) return;
-    setIsError(true);
-    setIsPlaying(false);
-  };
+    const onError = (error: unknown) => {
+      if (!error) return;
+      setIsError(true);
+      setIsPlaying(false);
+    };
 
-  const onStart = () => {
-    setIsStarted(true);
-    metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_START);
-  };
+    const onStart = () => {
+      setIsStarted(true);
+      metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_START);
+    };
 
-  const onEnded = () => {
-    metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_END);
-  };
+    const onEnded = () => {
+      metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_END);
+    };
 
-  const handlePlayPause = () => {
-    setIsPlaying((prev) => !prev);
-    if (isPlaying) metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_USER_PLAY);
-    if (!isPlaying) metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_USER_STOP);
-  };
+    const handlePlayPause = () => {
+      setIsPlaying((prev) => !prev);
+      if (isPlaying) metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_USER_PLAY);
+      if (!isPlaying) metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_USER_STOP);
+    };
 
-  return (
-    <div className={`${styles.container} ym-hide-content`}>
-      {!isPlaying && !isError && !isStarted && (
-        <Loader className={styles.loader} />
-      )}
-      {isError && (
-        <PlayButton
-          backgroundFill={gender === "male" ? "#85B6FF" : "#D1ACF2"}
-          className={styles["play-button"]}
-          onClick={() => {
-            setIsError(false);
-            setIsPlaying(true);
+    return (
+      <div
+        className={`${styles.container} ym-hide-content ${classNameContainer}`}
+      >
+        {!isPlaying && !isError && !isStarted && (
+          <Loader className={styles.loader} />
+        )}
+        {isError && (
+          <PlayButton
+            backgroundFill={gender === "male" ? "#85B6FF" : "#D1ACF2"}
+            className={styles["play-button"]}
+            onClick={() => {
+              setIsError(false);
+              setIsPlaying(true);
+            }}
+          />
+        )}
+        <ReactPlayer
+          url={url}
+          controls={false}
+          light={false}
+          muted={false}
+          playing={isPlaying}
+          stopOnUnmount={true}
+          width="100%"
+          onStart={onStart}
+          onReady={() => setIsPlaying(true)}
+          onEnded={onEnded}
+          onError={onError}
+          playsinline={true}
+          height={"auto"}
+          style={{
+            aspectRatio: "16 / 9",
           }}
         />
-      )}
-      <ReactPlayer
-        url={url}
-        controls={false}
-        light={false}
-        muted={false}
-        playing={isPlaying}
-        stopOnUnmount={true}
-        width="100%"
-        onStart={onStart}
-        onReady={() => setIsPlaying(true)}
-        onEnded={onEnded}
-        onError={onError}
-        playsinline={true}
-        height={"auto"}
-        style={{
-          aspectRatio: "16 / 9",
-        }}
-      />
-      {!isError && isStarted && (
-        <PlayPauseButton
-          state={isPlaying ? "pause" : "play"}
-          onClick={handlePlayPause}
-          className={styles["play-pause-button"]}
-        />
-      )}
-    </div>
-  );
-});
+        {!isError && isStarted && (
+          <PlayPauseButton
+            state={isPlaying ? "pause" : "play"}
+            onClick={handlePlayPause}
+            className={styles["play-pause-button"]}
+          />
+        )}
+      </div>
+    );
+  }
+);
 
 export default PersonalVideo;
diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx
index 68ffd74..234c8ea 100644
--- a/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx
@@ -133,7 +133,13 @@ function TrialPaymentPage() {
       />
       <Header className={styles.header} />
       <TrialPaymentHeader buttonClick={openStripeModal} />
-      {!!videoUrl.length && <PersonalVideo gender={gender} url={videoUrl} />}
+      {!!videoUrl.length && (
+        <PersonalVideo
+          gender={gender}
+          url={videoUrl}
+          classNameContainer={styles["personal-video"]}
+        />
+      )}
       {singleOrWithPartner === "partner" && (
         <WithPartnerInformation
           zodiacSign={zodiacSign}
diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/styles.module.css b/src/components/pages/ABDesign/v1/pages/TrialPayment/styles.module.css
index 557d3ce..6e23cbb 100644
--- a/src/components/pages/ABDesign/v1/pages/TrialPayment/styles.module.css
+++ b/src/components/pages/ABDesign/v1/pages/TrialPayment/styles.module.css
@@ -35,4 +35,10 @@
   top: 32px;
   padding: 0 32px;
   width: calc(100% + 36px) !important;
+}
+
+.personal-video {
+  position: sticky !important;
+  top: 62px;
+  z-index: 30;
 }
\ No newline at end of file