45 lines
1.2 KiB
JavaScript
45 lines
1.2 KiB
JavaScript
|
import { Fragment, h } from 'preact'
|
||
|
|
import { useEffect, useRef, useState } from 'preact/hooks'
|
||
|
|
|
||
|
|
import { string } from 'prop-types'
|
||
|
|
|
||
|
|
import { VideoWrapper, Iframe, StyledCrossSvg as CrossSvg } from './styles'
|
||
|
|
|
||
|
|
const Video = ({ url, onClose }) => {
|
||
|
|
const overlayTimeout = useRef(null)
|
||
|
|
const [overlayActive, setOverlayActiveState] = useState(false)
|
||
|
|
|
||
|
|
const activateOverlay = () => {
|
||
|
|
clearTimeout(overlayTimeout.current)
|
||
|
|
overlayTimeout.current = null
|
||
|
|
setOverlayActiveState(true)
|
||
|
|
|
||
|
|
console.log('overlayTimeout.current', overlayTimeout.current)
|
||
|
|
overlayTimeout.current = setTimeout(
|
||
|
|
() => setOverlayActiveState(false),
|
||
|
|
1500
|
||
|
|
)
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<Fragment>
|
||
|
|
<VideoWrapper onMouseMove={activateOverlay} $active={overlayActive}>
|
||
|
|
<CrossSvg $active={overlayActive} onClick={onClose} size="64" />
|
||
|
|
</VideoWrapper>
|
||
|
|
<Iframe
|
||
|
|
width="560"
|
||
|
|
height="315"
|
||
|
|
src="https://www.youtube-nocookie.com/embed/Ye5qTm9vqcE?controls=0&autoplay=1"
|
||
|
|
frameborder="0"
|
||
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||
|
|
allowfullscreen
|
||
|
|
/>
|
||
|
|
</Fragment>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
Video.propTypes = {
|
||
|
|
url: string,
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Video
|