react-player icon indicating copy to clipboard operation
react-player copied to clipboard

Canary v3.0.0 - Updating state variables through the player with `fallback = false` restarts the video

Open suuf opened this issue 1 year ago • 0 comments

Current Behavior

In canary v3.0.0, when I use fallback = false, whenever any state variable updated from the player has an updated value, the video starts again from the beginning.

Expected Behavior

The video should continue to play.

Steps to Reproduce

  1. Use a state variable like const [isPlaying, setIsPlaying] = useState<boolean>(false);
  2. Use fallback = false (or fallback={false as unknown as ReactElement})
  3. Update the state variable using a player prop, like:
onPause={() => {
    setIsPlaying(!isPlaying);
}}
  1. Let the video play/pause it to trigger the change of your state variable.
  2. The video starts again from the beginning.
  • fallback={false as unknown as ReactElement} is typed like this as fallback cannot be false with the current typings in v3.
  • The state variable needs to have an updated value for the restart to happen.

Environment

  • URL attempting to play: Any URL
  • Browser: Chromium
  • OS: Windows
  • Preview: Stackblitz

suuf avatar Dec 02 '24 10:12 suuf