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

play-pause-button

Browse Source 
add play/pause control to personal video
This commit is contained in:
gofnnp 2024-06-25 01:41:53 +04:00
parent 98735276c4
commit 0bdcd91b8d
3 changed files with 86 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,7 @@ import ReactPlayer from "react-player";
import styles from "./styles.module.css";
import Loader from "@/components/Loader";
import PlayButton from "../../../../ui/PlayButton";
import PlayPauseButton from "../../../../ui/PlayPauseButton";
interface IPersonalVideoProps {
gender: string;
@ -11,6 +12,7 @@ interface IPersonalVideoProps {
const PersonalVideo = React.memo<IPersonalVideoProps>(({ url, gender }) => {
const [isPlaying, setIsPlaying] = useState(false);
const [isStarted, setIsStarted] = useState(false);
const [isError, setIsError] = useState(false);
const onError = (error: unknown) => {
@ -21,7 +23,9 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(({ url, gender }) => {
return (
<div className={styles.container}>
{!isPlaying && !isError && <Loader className={styles.loader} />}
{!isPlaying && !isError && !isStarted && (
<Loader className={styles.loader} />
)}
{isError && (
<PlayButton
backgroundFill={gender === "male" ? "#85B6FF" : "#D1ACF2"}
@ -40,6 +44,7 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(({ url, gender }) => {
playing={isPlaying}
stopOnUnmount={true}
width="100%"
onStart={() => setIsStarted(true)}
onReady={() => setIsPlaying(true)}
onError={onError}
playsinline={true}
@ -48,6 +53,13 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(({ url, gender }) => {
aspectRatio: "16 / 9",
}}
/>
{!isError && isStarted && (
<PlayPauseButton
state={isPlaying ? "pause" : "play"}
onClick={() => setIsPlaying((prev) => !prev)}
className={styles["play-pause-button"]}
/>
)}
</div>
);
});

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

@ -15,4 +15,13 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.play-pause-button {
position: absolute;
bottom: 10px;
left: 8px;
width: 34px;
height: auto;
z-index: 10;
}

64
src/components/pages/ABDesign/v1/ui/PlayPauseButton/index.tsx Normal file
View File

@ -0,0 +1,64 @@
import { SVGProps } from "react";
interface IPlayPauseButtonProps {
state?: "play" | "pause";
}
function PlayPauseButton({
state = "play",
...props
}: IPlayPauseButtonProps & SVGProps<SVGSVGElement>) {
return (
<svg
width="71"
height="50"
viewBox="0 0 71 50"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g filter="url(#filter0_b_201_4)">
<rect width="71" height="50" rx="8" fill="#4D4D4D" fillOpacity="0.88" />
</g>
{state === "play" && (
<path
d="M43.5 24.134C44.1667 24.5189 44.1667 25.4811 43.5 25.866L31.5 32.7942C30.8333 33.1791 30 32.698 30 31.9282L30 18.0718C30 17.302 30.8333 16.8209 31.5 17.2058L43.5 24.134Z"
fill="#DADADA"
/>
)}
{state === "pause" && (
<>
<rect x="27" y="17" width="5" height="16" rx="2" fill="#D9D9D9" />
<rect x="39" y="17" width="5" height="16" rx="2" fill="#D9D9D9" />
</>
)}
<defs>
<filter
id="filter0_b_201_4"
x="-6.7"
y="-6.7"
width="84.4"
height="63.4"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="3.35" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_201_4"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_201_4"
result="shape"
/>
</filter>
</defs>
</svg>
);
}
export default PlayPauseButton;