AW-119-personal-video-edits

add video preview and change loading on /v1/onboarding page

src/components/pages/ABDesign/v1/pages/Onboarding/index.tsx

@@ -53,14 +53,15 @@ function OnboardingPage() {
 
   const getProgressIntervalTiming = useCallback(() => {
     const generateTimeLimit = import.meta.env.AURA_PERSONAL_VIDEO_TIME_LIMIT;
-    if (progress < 95 || isVideoReady) {
-      return (onboardingTitles.length * 5000) / 100;
-    }
-    return (
+    const baseTiming = (onboardingTitles.length * 5000) / 100;
+    if (isVideoReady) return baseTiming;
+    const generatingVideoTiming =
       (Number(generateTimeLimit) * 1000 - new Date().getTime() + createdDate) /
-      4
-    );
-  }, [createdDate, isVideoReady, progress]);
+      100;
+    return generatingVideoTiming < baseTiming
+      ? baseTiming
+      : generatingVideoTiming;
+  }, [createdDate, isVideoReady]);
 
   useEffect(() => {
     progressInterval.current = setInterval(() => {

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

@@ -20,12 +20,7 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(({ url, gender }) => {
   };
 
   return (
-    <div
-      className={styles.container}
-      style={{
-        backgroundColor: gender === "male" ? "#85B6FF" : "#D1ACF2",
-      }}
-    >
+    <div className={styles.container}>
       {!isPlaying && !isError && <Loader className={styles.loader} />}
       {isError && (
         <PlayButton

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

@@ -4,6 +4,10 @@
     position: relative;
     overflow: hidden;
     border-radius: 10px;
+    background-image: url("/personal_video_preview.webp");
+    background-size: contain;
+    background-position: 0 0;
+    background-repeat: no-repeat;
 }
 
 .play-button, .loader {