react-player - 用户点击缩略图后保持 react-player 灯光模式

Question

我在我的 ReactPlayer 组件中使用 light={true} 设置在视频列表中显示缩略图。这在初始加载时工作正常。但是，当用户单击缩略图时，我会打开一个模式来播放视频(在单独的 ReactPlayer 组件中)。当用户关闭模式并返回列表时，他们点击的视频现在不再处于“缩略图模式”。

我已经尝试在 MODAL_CLOSED 操作上从我的 reducer 传递一个 light: true 参数，我可以成功地看到该值进入我的组件，但是设置 light该值的属性对我的 ReactPlayer 组件的缩略图模式没有影响。

有没有办法让 ReactPlayer 始终保持缩略图模式，而不管用户交互如何？

Answer 1

我有一个类似的问题，这就是我将它保持在“轻”模式的方式

• 使用 useRef 添加一个 ref

// Create a ref
const playerRef = React.useRef(null)
// Your video url
const yourUrl = "https://yourUrlHere..."

return (
  <ReactPlayer 
    ref={playerRef}
    light={true}
    url={yourUrl}
  />
):

• 创建一个调用 ref.current.showPreview() 的 useEffect，只要有变化导致 ReactPlayer 离开“light”模式

// This will make the player go back to "light" mode
  React.useEffect(() => {
    
    if (playerRef) {
      playerRef.current.showPreview();
    }
    
  }, [index]);

我还做了一个CodeSandbox如果你想看看