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 state changes to false. Which is passed in react-player but the player keeps on playing in the background.
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
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. react-player version: 2.6.2 and 2.9.0. How do I stop playing the video once the modal closes?
This issue is specific to antd modal
. I tried reactstrap modal and it worked.