React中MouseMove功能失效：React-Player控件无法随鼠标移动正常显示

Let's break down what's going wrong with your mouseMove logic and fix it step by step.

The Problem #

You've got a control wrapper div that should show when hovering over your React-Player (via mouseOver) OR when moving the mouse (via mouseMove). While mouseOver works, the mouseMove state isn't behaving as expected—likely because of two key issues in your implementation.

Why Your Current Code Fails #

1. Broken timeout logic: Your onMouseMove function only sets a timeout if timeout.current is null. That means after the first mouse move, subsequent moves won't reset the timeout. So even if you're still moving the mouse over the player, the 6-second timer will expire and hide the controls anyway.
2. Window-wide listener overkill: You're listening to mousemove on the entire window, which triggers the state update even when the mouse is nowhere near your player. This not only wastes resources but can also lead to unexpected behavior if other elements interfere with event bubbling.

Fixed Implementation #

Here's a revised version of your code that addresses both issues, plus adds better cleanup and player-specific event handling:

import { useState, useEffect, useRef } from 'react';
import ReactPlayer from 'react-player';

const YourVideoComponent = ({ classes, props, dispatch }) => {
  const [mouseOver, setMouseOver] = useState(false);
  const [mouseMove, setMouseMove] = useState(false);
  const timeout = useRef(null);
  const playerContainerRef = useRef(null); // Reference to the player's container
  const videoControls = useRef(null); // Your existing controls ref

  const handleMouseMove = () => {
    setMouseMove(true);
    
    // Reset the timeout every time the mouse moves
    if (timeout.current) {
      clearTimeout(timeout.current);
    }
    
    timeout.current = setTimeout(() => {
      setMouseMove(false);
      timeout.current = null;
    }, 6000);
  };

  const handleMouseEnter = () => {
    setMouseOver(true);
    setMouseMove(true); // Show controls immediately when mouse enters
  };

  const handleMouseLeave = () => {
    setMouseOver(false);
    setMouseMove(false); // Hide controls immediately when mouse leaves
    if (timeout.current) {
      clearTimeout(timeout.current);
      timeout.current = null;
    }
  };

  useEffect(() => {
    if (!props.session) return;
    
    if (props.session.room) {
      dispatch(setRoom(props.session.room));
    }

    // Bind mouse move listener to the player container, not the window
    const container = playerContainerRef.current;
    if (container) {
      container.addEventListener('mousemove', handleMouseMove);
    }

    console.log("Session live view mount");

    return () => {
      dispatch(setRoom(null));
      console.log("Session live view unmount");
      
      // Clean up the event listener and timeout
      if (container) {
        container.removeEventListener('mousemove', handleMouseMove);
      }
      if (timeout.current) {
        clearTimeout(timeout.current);
        timeout.current = null;
      }
    };
  }, [props.session, dispatch]);

  return (
    <div 
      ref={playerContainerRef}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      style={{ position: 'relative' }} // Ensure controls are positioned correctly
    >
      <ReactPlayer 
        // Add your player props here (url, controls, etc.)
      />
      <div 
        ref={videoControls} 
        className={classes.controlWrapper} 
        style={{
          visibility: (mouseOver || mouseMove) ? 'visible' : 'hidden',
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0
        }}
      >
        {/* Your control buttons/elements here */}
      </div>
    </div>
  );
};

Key Improvements #

• Player-specific event listening: We're now listening for mousemove directly on the player's container, so the state only updates when the mouse is active over your video player.
• Timeout reset: Every mouse move clears the existing timeout and sets a new one, ensuring controls stay visible as long as you're moving the mouse over the player.
• Cleaner state handling: mouseEnter and mouseLeave directly manage both states, making the logic more predictable and aligned with user expectations.
• Proper cleanup: We remove the event listener and clear the timeout when the component unmounts to avoid memory leaks.

Quick Check #

Make sure your control wrapper has proper positioning (like position: absolute) relative to the player container so it overlays correctly on top of the video.

内容的提问来源于stack exchange，提问作者Yamin Ooh