AW-121-personal-video

position sticky for personal video

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 PersonalVideo = React.memo<IPersonalVideoProps>(
-  const [isPlaying, setIsPlaying] = useState(false);
+  ({ url, gender, classNameContainer = "" }) => {
-  const [isStarted, setIsStarted] = useState(false);
+    const [isPlaying, setIsPlaying] = useState(false);
-  const [isError, setIsError] = useState(false);
+    const [isStarted, setIsStarted] = useState(false);
+    const [isError, setIsError] = useState(false);
 
-  const onError = (error: unknown) => {
+    const onError = (error: unknown) => {
-    if (!error) return;
+      if (!error) return;
-    setIsError(true);
+      setIsError(true);
-    setIsPlaying(false);
+      setIsPlaying(false);
-  };
+    };
 
-  const onStart = () => {
+    const onStart = () => {
-    setIsStarted(true);
+      setIsStarted(true);
-    metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_START);
+      metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_START);
-  };
+    };
 
-  const onEnded = () => {
+    const onEnded = () => {
-    metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_END);
+      metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_END);
-  };
+    };
 
-  const handlePlayPause = () => {
+    const handlePlayPause = () => {
-    setIsPlaying((prev) => !prev);
+      setIsPlaying((prev) => !prev);
-    if (isPlaying) metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_USER_PLAY);
+      if (isPlaying) metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_USER_PLAY);
-    if (!isPlaying) metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_USER_STOP);
+      if (!isPlaying) metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_USER_STOP);
-  };
+    };
 
-  return (
+    return (
-    <div className={`${styles.container} ym-hide-content`}>
+      <div
-      {!isPlaying && !isError && !isStarted && (
+        className={`${styles.container} ym-hide-content ${classNameContainer}`}
-        <Loader className={styles.loader} />
+      >
-      )}
+        {!isPlaying && !isError && !isStarted && (
-      {isError && (
+          <Loader className={styles.loader} />
-        <PlayButton
+        )}
-          backgroundFill={gender === "male" ? "#85B6FF" : "#D1ACF2"}
+        {isError && (
-          className={styles["play-button"]}
+          <PlayButton
-          onClick={() => {
+            backgroundFill={gender === "male" ? "#85B6FF" : "#D1ACF2"}
-            setIsError(false);
+            className={styles["play-button"]}
-            setIsPlaying(true);
+            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",
           }}
         />
-      )}
+        {!isError && isStarted && (
-      <ReactPlayer
+          <PlayPauseButton
-        url={url}
+            state={isPlaying ? "pause" : "play"}
-        controls={false}
+            onClick={handlePlayPause}
-        light={false}
+            className={styles["play-pause-button"]}
-        muted={false}
+          />
-        playing={isPlaying}
+        )}
-        stopOnUnmount={true}
+      </div>
-        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>
-  );
-});
 
 export default PersonalVideo;

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}

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