reactjsclassantdreact-player

why is react-player playing video even when playing={false}?


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?


Solution

  • This issue is specific to antd modal. I tried reactstrap modal and it worked.