cookpete / react-player

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion
https://cookpete.github.io/react-player
MIT License
8.9k stars 1.12k forks source link

Player continues playing when changing playing to false #1737

Closed yanikm closed 3 weeks ago

yanikm commented 3 months ago

Current Behavior

When the modal is closed the player continues to play the video.

Expected Behavior

Since i set the playing property to false, i expect the player to stop playing, but i continue to hear the sound.

Steps to Reproduce

Next.js 14

Environment

Code

`"use client";

import React, {useState} from 'react'; import {Button, Modal} from "antd"; import ReactPlayer from "react-player"; const video = "someURL.mp4";

const Page = () => { const [isModalOpen, setIsModalOpen] = useState(false); const [isPlaying, setIsPlaying] = useState(false);

const showModal = () => {
    setIsModalOpen(true);
};

const handleCancel = () => {
    setIsModalOpen(false);
    setIsPlaying(false);
};

return (
    <>
        <Button type="primary" onClick={showModal}>
            Open Modal
        </Button>
        <Modal open={isModalOpen} onCancel={handleCancel}>
            <ReactPlayer url={videoUmzug} width={400} height={400} controls={true} playing={false}>
            </ReactPlayer>
        </Modal>
    </>
);

};

export default Page; `

Adrian-stuff commented 3 months ago

change your playing props into your state <ReactPlayer url={videoUmzug} width={400} height={400} controls={true} playing={false}> into <ReactPlayer url={videoUmzug} width={400} height={400} controls={true} playing={isPlaying}> the player state will be synced with your isPlaying state