Merge branch 'AW-121-personal-video' into 'develop'

AW-121-personal-video

See merge request witapp/aura-webapp!202
This commit is contained in:
Daniil Chemerkin 2024-06-26 13:56:38 +00:00
commit da53759bd5
3 changed files with 80 additions and 63 deletions

View File

@ -9,9 +9,11 @@ import PlayPauseButton from "../../../../ui/PlayPauseButton";
interface IPersonalVideoProps { interface IPersonalVideoProps {
gender: string; gender: string;
url: string; url: string;
classNameContainer?: string;
} }
const PersonalVideo = React.memo<IPersonalVideoProps>(({ url, gender }) => { const PersonalVideo = React.memo<IPersonalVideoProps>(
({ url, gender, classNameContainer = "" }) => {
const [isPlaying, setIsPlaying] = useState(false); const [isPlaying, setIsPlaying] = useState(false);
const [isStarted, setIsStarted] = useState(false); const [isStarted, setIsStarted] = useState(false);
const [isError, setIsError] = useState(false); const [isError, setIsError] = useState(false);
@ -38,7 +40,9 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(({ url, gender }) => {
}; };
return ( return (
<div className={`${styles.container} ym-hide-content`}> <div
className={`${styles.container} ym-hide-content ${classNameContainer}`}
>
{!isPlaying && !isError && !isStarted && ( {!isPlaying && !isError && !isStarted && (
<Loader className={styles.loader} /> <Loader className={styles.loader} />
)} )}
@ -79,6 +83,7 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(({ url, gender }) => {
)} )}
</div> </div>
); );
}); }
);
export default PersonalVideo; export default PersonalVideo;

View File

@ -133,7 +133,13 @@ function TrialPaymentPage() {
/> />
<Header className={styles.header} /> <Header className={styles.header} />
<TrialPaymentHeader buttonClick={openStripeModal} /> <TrialPaymentHeader buttonClick={openStripeModal} />
{!!videoUrl.length && <PersonalVideo gender={gender} url={videoUrl} />} {!!videoUrl.length && (
<PersonalVideo
gender={gender}
url={videoUrl}
classNameContainer={styles["personal-video"]}
/>
)}
{singleOrWithPartner === "partner" && ( {singleOrWithPartner === "partner" && (
<WithPartnerInformation <WithPartnerInformation
zodiacSign={zodiacSign} zodiacSign={zodiacSign}

View File

@ -36,3 +36,9 @@
padding: 0 32px; padding: 0 32px;
width: calc(100% + 36px) !important; width: calc(100% + 36px) !important;
} }
.personal-video {
position: sticky !important;
top: 62px;
z-index: 30;
}