jrebecchi / React-Web-Media-Player

A React Player that can play videos, audio tracks, slideshows, with a customizable design.
https://react-web-media-player.herokuapp.com/
MIT License
30 stars 9 forks source link

React Web Media Player can't run if change props #4

Closed AnnguyenEnclave closed 5 years ago

AnnguyenEnclave commented 5 years ago

Hi Johan, your lib very cool and I am using it. But I get a small issue. I can't run the player if I update props. Could you help me to check and help me solve it? Thank you so much

jrebecchi commented 5 years ago

Hi An,

Thank you very much for your support (a little star would be welcome :p)!

Yes I can look at that this weekend. Would you give me a reproduceable scenario ?

Regards

AnnguyenEnclave commented 5 years ago

This a small example:

class PlayList extends Component {
    state = {
        audio: {
            audio_url: "https://nusid.net/audio.mp3",
            thumbnail: "https://nusid.net/album-cover.jpg",
            title: 'Just a test :D'
        }
    }
    handleChangeMusic() {
       const audio = {
        audio_url: "https://nusid.net/audio.mp3",
        thumbnail: "https://nusid.net/album-cover.jpg",
        title: 'I am go to change the current state'
       }

       this.setState({audio});
    }
    render() {
        const {audio} = {...this.state};
        return (
            <>
            <ReactWebMediaPlayer
                        width={'100%'} height={400}
                        title={audio.title}
                        thumbnail={audio.thumbnail}
                        audio={audio.audio_url}
                        logo={{
                            img: "https://nusid.net/your-logo.png",
                            href: "https://www.npmjs.com/package/react-web-media-player"
                        }}
            />

            <Button onClick={() => this.handleChangeMusic()}>Update the current audio</Button>
            </>
        );
    }
}

export default PlayList;

I see it update state ok ( audio URL, thumbnail also title) but when I update state I can't click the play button.

I just added one star for this repo, you did a great component :D

jrebecchi commented 5 years ago

Hi An,

Thanks a lot! I made the correction. Before publishing it on npm I want to write some new end-2-end & integration tests.

If you want to use this new version now , please follow the following steps: 1- Clone the repo 2- Build the project: npm run build 3- Build the package: npm pack This will create you an archive named "react-web-media-player-1.1.4.tgz". 4- In your Playlist project run: npm install --save ..localPathTo/react-web-media-player-1.1.4.tgz

If your goal is to do a playlist, you can add the option autoplay: true on props update, it will start automatically the player. It works well for me. Btw a possible new feature would be to add a "Next" button, just like in Youtube.

Any feedback are welcome!

AnnguyenEnclave commented 5 years ago

Hi Johan, Great, I saw you did a lot of work to help me the current issue. I highly appreciate it. I am going to check it. If have any other issues I will feedback soon.

Thank you so much!

jrebecchi commented 5 years ago

You are welcome An! Thanks for using the React-Web-Media-Player!