Error changing video source when in StrinctMode/DevMode and using Hls

[rostalevicek]

Current Behavior

While in StrinctMode/DevMode, React mounts component twice. ReactPlayer prevents initialization of player and loading sources when player is already instantiated:

Player.js:

handlePlayerMount = player => {
    **if (this.player) {
      this.progress() // Ensure onProgress is still called in strict mode
      return // Return here to prevent loading twice in strict mode
    }**
    this.player = player
    this.player.load(this.props.url)
    this.progress()
}

However, unmouting of the first component will destroy hls and its source loader: FilePlayer.js

componentWillUnmount () {
    this.player.src = ''
    this.removeListeners(this.player)
    **if (this.hls) {
      this.hls.destroy()
    }**
}

Therefore the new source is not loaded and played.

Expected Behavior

The new source should be loaded and played.

Other Information

Simple commenting of the condition Player.js, handlePlayerMount, solves this problem.

[ghost-vk]

Seems I have the same problem, when changing the URL without unmount everything works ok - as in the demo. The file is loaded normally. But when the unmount method is called, the new resource is not loaded after that. But for me preventing the rerender with a useEffect helped me in this situation.

This works for me:

export const MyReactPlayer = ({ url }) => {
  const [videoUrl, setVideoUrl] = useState('');

  useEffect(() => { setVideoUrl(url) }, [url])

  return (
    <ReactPlayer
        url={videoUrl}
        config={{
          hlsOptions: {
            enableWorker: false,
            manifestLoadingMaxRetry: 3,
            maxPlaylistRetries: 5
          }
        }}
      />
  );
};

[sieman216485]

Current Behavior

While in StrinctMode/DevMode, React mounts component twice. ReactPlayer prevents initialization of player and loading sources when player is already instantiated:

Player.js:

handlePlayerMount = player => {
    **if (this.player) {
      this.progress() // Ensure onProgress is still called in strict mode
      return // Return here to prevent loading twice in strict mode
    }**
    this.player = player
    this.player.load(this.props.url)
    this.progress()
}

However, unmouting of the first component will destroy hls and its source loader: FilePlayer.js

componentWillUnmount () {
    this.player.src = ''
    this.removeListeners(this.player)
    **if (this.hls) {
      this.hls.destroy()
    }**
}

Therefore the new source is not loaded and played.

Expected Behavior

The new source should be loaded and played.

Other Information

Simple commenting of the condition Player.js, handlePlayerMount, solves this problem.

Hello, I am also faced with the same issue now. In detail, I am building a simple one-page react app that shows multiple camera players in a grid layout, which a user selects in a camera list. In this case, it can not avoid the unmount of react player in strict mode. I hope you fix this issue as soon as possible. Thanks and regards.