The react-player is playing video even when `playing={false}`.

Be sure to search for your issue before opening a new one.

Current Behavior

The react-player is playing video even when playing={false}. I’m using antd modal which is wrapped around my player. when I close the modal the modal state changes to false. Which is passed in react-player but the player keeps on playing in the background.

Expected Behavior

It should close with modal.

Steps to Reproduce

1.Install antd modal and react-player 2.Make a class component with the below code. ` import React, { Component } from ‘react’ import { Modal } from “antd”; import ReactPlayer from “react-player”;

    export class demo extends Component {
    constructor(props) {
        super(props);
        this.state = {
          isModalOpen: false,
        };
      }

  ConfirmationModalhandleCancel = () => {
    this.setState({ isModalOpen: false });
  };

  ConfirmationModalPlay = () => {
    this.setState({ isModalOpen: true });
  };

  getVideo = () => {
    console.log("Modal state",this.state.isModalOpen)
    return (
      <ReactPlayer
        playing={this.state.isModalOpen}
        className="introductionVideoLearningPlanPage"
        controls={true}
        url="https://www.youtube.com/watch?v=agi4geKb8v8"
      />
    );
  };

  getIntroVideoModal = () => {
    return (
      <Modal
      title={null}
      footer={null}
      visible={this.state.isModalOpen}
      onCancel={this.ConfirmationModalhandleCancel}
      width="fit-content"
      bodyStyle={{ padding: '0' }}
  >
      {this.getVideo()}
  </Modal>
    )
  }

render() {
    return (
        <div>
            {this.getIntroVideoModal()}
        </div>
        )
    }
}

export default demo

`

Environment

• Browser: Chrome : 92.0.4515.159 (Official Build) (64-bit)
• Operating system: windows 10
• react-player: 2.6.2, 2.9.0 (tried on both)

Other Information

I have observed that the console.log(“Modal state”,this.state.isModalOpen) is consoling false when the modal closes but the player keeps on playing.

[koloer-blus]

Hello, Is the react player refreshing when the state changes? Can you include a codesandbox to reproduce this more easily ?

Is the internally maintained state not updated because the external props have not changed? Is it possible to add a prop to support completely external props to control the playback?

Hi baiziyu-fe hope you’re doing well, The reason why your second demo there isn’t working is because you didn’t set the onPlay behaviour to change the state. Here’s what goes wrong if you don’t do that:

1. The page loads with playing1 being false
2. You click on the video to play , it behaves as a normal youtube video player and it starts playing, but , since you didn’t setup any onPlay behaviour ( namely onPlay={()=>setPlaying1(true)} ) to change your state to true then your playing1 state is still false.
3. You click the external pause button, react tries to change the state to false , sees it’s already false and proceeds to not refresh the component where the video is playing.

Here’s the codesandbox Hope this helps!

Thank you very much for your answers.

[AlvesJorge]

Hello, Is the react player refreshing when the state changes? Can you include a codesandbox to reproduce this more easily ?

Is the internally maintained state not updated because the external props have not changed? Is it possible to add a prop to support completely external props to control the playback?

Hi baiziyu-fe hope you’re doing well, The reason why your second demo there isn’t working is because you didn’t set the onPlay behaviour to change the state. Here’s what goes wrong if you don’t do that:

1. The page loads with playing1 being false
2. You click on the video to play , it behaves as a normal youtube video player and it starts playing, but , since you didn’t setup any onPlay behaviour ( namely onPlay={()=>setPlaying1(true)} ) to change your state to true then your playing1 state is still false.
3. You click the external pause button, react tries to change the state to false , sees it’s already false and proceeds to not refresh the component where the video is playing.

Here’s the codesandbox Hope this helps!