I have a video player in React, I need to open popup / modal window to check user is not a robot on a random second of video watching.
Algorythm: user opens website -> watches the video -> on a random second popup / modal appears -> user confirms captcha (I'm not a robot) -> modal/popup disappears - > video proceed playing.
A bit more info like code snippet and packages you're using would be helpful. But if you are using react-player, you can do something like this:
const Player = () => {
const playerRef = useRef();
const [playing, setPlaying] = useState(true)
const [randomSecond, setRandomSecond] = useState(0)
const [captchaConfirmed, setCaptchaConfirmed] = useState(false)
useEffect(() => {
if (playing || captchaConfirmed) {
return
}
checkCaptcha()
}, [playing])
const checkCaptcha = () => {
if (window.confirm('Are you a human')) {
setCaptchaConfirmed(true)
setPlaying(true)
}
}
return (
<ReactPlayer
ref={playerRef}
playing={playing}
onDuration={(duration) => {
setRandomSecond(Math.floor(Math.random() * duration))
}}
onPlay={() => setPlaying(true)}
onProgress={async (data) => {
if (captchaConfirmed || data.playedSeconds < randomSecond) {
return
}
setPlaying(false)
}}
url='https://www.youtube.com/watch?v=HYDs1FNNvfs' />
)
}