在 react/redux 中获取最新信息

Question

快速总结

我希望能够观看视频，并在视频中的给定时间戳创建一些注释。我目前正在使用react-player 库来流式传输视频，以及使用 CRA 创建的 react/redux 项目。我发现在创建笔记时很难获得视频的最新时间戳。

详情

感兴趣的主要组件是两个同级组件。为简单起见，假设我们有一个App.js 文件，其中包含VideoPlayer 组件和AddNoteButton 组件。

这是每个组件中现在发生的事情，非常简化

视频播放器

export function VideoPlayer() {
  const player = useRef(null);
  const playing = useSelector(selectPlaying);
  const dispatch = useDispatch();

  return (
    <ReactPlayer
      ref={player}
      onPause={() => {
        dispatch(setPlaying(false));
      }}
      onPlay={() => {
        dispatch(setPlaying(true));
      }}
      onProgress={(progress) => dispatch(setProgress(progress))}
      playing={playing}
    />
  );
}

• playing 和 progress 都保存为 redux 状态。

添加注释按钮

export function AddNoteButton() {
  const [visible, setVisible] = useState(false);
  const [start, setStart] = useState();
  const progress = useSelector(selectProgress);
  const dispatch = useDispatch();

  const showModal = () => {
    dispatch(setPlaying(false)); // dispatches action to stop playing player
    setStart(progress.playedSeconds);
    setVisible(true);
  };

  return (
    <>
      <Button onClick={showModal} />
      <Modal title="Add Note" visible={visible}>
        <div>{pauseStart}</div>
      </Modal>
    </>
  );
}

问题

当用户单击 AddNoteButton 中的按钮时，会发生以下情况：

1. 它分派setPlaying(false)，将redux 中的playing 状态更改为false
2. 使用播放器的当前时间戳显示模式
3. 看到playing 的更新值后，ReactPlayer 停止运行

请注意，在 2、3 之间有一小段时间玩家没有停下来。因此，我们看到的是在函数showModal 创建时从redux 状态检索的注释中的时间戳，这不一定是实际ReactPlayer 停止的位置（它总是更早）理想情况下，我们希望在player.current.getCurrentTime() 创建一个便条在它停止之后。有没有办法继续实现这一目标？任何帮助表示赞赏！

Answer 1

你能把showModal 调用放在react-player 的onPause 回调属性中吗？我认为这会颠倒第 2 步和第 3 步的顺序，因此模式会在播放器暂停后显示，并希望具有正确的时间戳