Getting most-up-to-date information in react/redux

Question

Quick Summary

I want to be able to watch a video, and create some note at a given timestamp I am at in the video. I am currently using react-player library to stream the video, and react/redux project created with CRA. I am finding it difficult to get the up-to-date timestamp of the video upon creating the note.

Details

Main components of interest are two sibling components. For simplification, let's say we have an App.js file, which contains VideoPlayer component and AddNoteButton component.

Here is what's happening right now in each component, very simplified

VideoPlayer

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 and progress are all saved as redux states.

AddNoteButton

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>
    </>
  );
}

Issue

When user clicks the button in AddNoteButton, the following happens:

1. It dispatches setPlaying(false), which changes the playing state in redux as false
2. A modal is shown using current timestamp of the player
3. Upon seeing updated value of playing, ReactPlayer stops running

Note, that between 2, 3 there is a short period of time where the player has not stopped. Hence, what we see is a timestamp in the note retrieved from redux state at the creation time of function showModal, which is not necessarily where the actual ReactPlayer is stopped at (it is always earlier) Ideally, we would want to create a note at player.current.getCurrentTime() after it has stopped. Is there a way to go on about achieving this? Any help is appreciated!

Answer 1

can you put the showModal call in the onPause callback prop of react-player? I think this would reverse the order of your steps 2 and 3, so the modal is shown after the player pauses and hopefully has the correct timestamp