Tengo un reproductor de video en React, necesito abrir una ventana emergente / modal para verificar que el usuario no sea un robot en un segundo aleatorio de visualización de video.
Algoritmo: el usuario abre el sitio web -> mira el video -> en una segunda ventana emergente aleatoria / aparece modal -> el usuario confirma el captcha (no soy un robot) -> desaparece la ventana modal / emergente -> el video continúa reproduciéndose.
Sería útil un poco más de información, como un fragmento de código y los paquetes que está utilizando. Pero si está usando react-player, puede hacer algo como esto:
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' /> ) }