0

I have a div that should show react-player controls when i move my mouse over the player but it is not.

<div ref={videoControls} className={classes.controlWrapper}
      style={{visibility: (mouseOver && mouseMove) ? 'visible' : 'hidden'}}>
...
</div>

The mouseOver works fine but mouseMove does not work.

This is my mouseMove function

const [mouseMove, setMouseMove] = useState(false)

 const onMouseMove = () => {
        setMouseMove(true)
        if(!timeout.current)
        timeout.current = setTimeout(() => {
            setMouseMove(false)
            clearTimeout(timeout.current)
            timeout.current = null
        }, 6000);
    }

useEffect(() => {
        if (!props.session) return
        if (props.session.room) dispatch(setRoom(props.session.room))
        console.log("Session live view mount")
        window.addEventListener('mousemove', onMouseMove)
        return () => {
            dispatch(setRoom(null))
            console.log("Session live view umount")
            window.removeEventListener('mousemove', onMouseMove)
        }
    }, [props.session])
Yamin Ooh
  • 25
  • 5
  • You can't do arbitrary side-effects like settimeout in a function component. Use `useEffect`. https://upmostly.com/tutorials/settimeout-in-react-components-using-hooks – Jared Smith Jun 09 '21 at 15:40
  • Does this answer your question? [React hooks - right way to clear timeouts and intervals](https://stackoverflow.com/questions/53090432/react-hooks-right-way-to-clear-timeouts-and-intervals) – Jared Smith Jun 09 '21 at 15:43

0 Answers0