66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
|
import styles from "./styles.module.scss";
|
|
|
|
interface IVideoOverlayProps {
|
|
isShow: boolean;
|
|
setIsShow: React.Dispatch<React.SetStateAction<boolean>>;
|
|
animationDuration?: number;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
function VideoOverlay({
|
|
isShow,
|
|
setIsShow,
|
|
animationDuration = 5000,
|
|
children,
|
|
}: IVideoOverlayProps) {
|
|
const timeoutRef = useRef<NodeJS.Timeout>();
|
|
const [animationDurationLocal, setAnimationDurationLocal] =
|
|
useState(animationDuration);
|
|
|
|
const click = () => {
|
|
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
setAnimationDurationLocal((prev) => prev + animationDuration);
|
|
timeoutRef.current = setTimeout(() => {
|
|
setIsShow(false);
|
|
}, animationDuration);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!isShow) return;
|
|
console.log("start ");
|
|
|
|
timeoutRef.current = setTimeout(() => {
|
|
setIsShow(false);
|
|
}, animationDuration);
|
|
return () => {
|
|
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
};
|
|
}, [animationDuration, isShow, setIsShow]);
|
|
|
|
return (
|
|
<>
|
|
{isShow && (
|
|
<div
|
|
className={styles.overlay}
|
|
style={{
|
|
animationDelay: `0s, ${animationDurationLocal - 500}ms`,
|
|
}}
|
|
onClick={click}
|
|
>
|
|
<div
|
|
className={styles.content}
|
|
style={{
|
|
animationDelay: `0s, ${animationDurationLocal - 500}ms`,
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default VideoOverlay;
|