import React, { useEffect } from "react"
import './index.less'

interface Props {
    src: string
    show: boolean,
    onClose?: () => void
}

/**
 * 播放视频
 * @param param0 
 * @returns 
 */
const VideoPopup: React.FC<Props> = ({ src, show, onClose }) => {


    useEffect(() => {
        if (show) {
            const videoPopup = document.getElementById('video_popup');
            videoPopup?.classList.add('show');
            setTimeout(() => { videoPopup?.classList.add('active'); })
        }
    }, [show])

    return <div id="video_popup" className={`popup`}>
        <div className="popup_box">
            <div className="content_box">
                {src && <video id="video-pop-player" src={src} autoPlay controls></video>}
            </div>
            <a
                className="close"
                onClick={() => {
                    onClose?.()
                    const videoPopup = document.getElementById('video_popup');
                    videoPopup?.classList.remove('active');
                    setTimeout(() => { videoPopup?.classList.remove('show'); }, 600)
                }}
            />
        </div>
    </div>
}

export default React.memo(VideoPopup)