gofnnp/w-aura
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AW-121-personal-video

Browse Source 
position sticky for personal video
This commit is contained in:
gofnnp 2024-06-26 17:43:36 +04:00
parent f7ef213c00
commit b0cb068eb6
3 changed files with 80 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/index.tsx
View File

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

8
src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx
View File

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

6
src/components/pages/ABDesign/v1/pages/TrialPayment/styles.module.css
View File

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