Convert document.querySelector() into Reactjs

Question

I'am try to convert my code bellow into Reactjs. I use this code bellow to embed THEOplayer to my website, as long as i know we can use "ref" to replace the document.querySelector('.classname') instead to target particular DOM to change or modifiying it but i'm still confused and getting error, what is the best practice to change my code bellow.

var playerConfig = {
    "libraryLocation": "//cdn.theoplayer.com/dash/theoplayer/",
    ui: {
        fluid: true
    },
};

var element = document.querySelector('.video-container');
var player = new THEOplayer.Player(element, playerConfig);

player.source = {
    sources : [{
        src : '//cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8', // sets HLS source //  //cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8
        type : 'application/x-mpegurl' // sets type to HLS
    }],
    textTracks : [{
        default: true, //optional
        kind : 'subtitles',
        src : 'example.srt',
        srclang : 'en'
    }]
};


player.addEventListener('sourcechange', function() {
    player.removeEventListener('playing', firstplay);
    player.addEventListener('playing', firstplay);
});

Please, provide at least your react code that illustrates your attempt and the error that you get (or make a code snippet that illustrates your problem) — Limbo
– Limbo, Commented Sep 25, 2018 at 7:42

Shubham Khatri · Accepted Answer · 2018-09-25 07:42:46Z

You could simple write a react component and add your custom event listeners in componentDidMount method

const playerConfig = {
    "libraryLocation": "//cdn.theoplayer.com/dash/theoplayer/",
    ui: {
        fluid: true
    },
};

class App extends React.Component {
    componentDidMount() {
        const player = this.player;
        player.addEventListener('sourcechange',() => {
            player.removeEventListener('playing', this.firstplay);
            player.addEventListener('playing', this.firstplay);
        });
        this.playerSrc = new THEOplayer.Player(player, playerConfig);

        this.playerSrc.source = {
            sources : [{
                src : '//cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8', // sets HLS source //  //cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8
                type : 'application/x-mpegurl' // sets type to HLS
            }],
            textTracks : [{
                default: true, //optional
                kind : 'subtitles',
                src : 'example.srt',
                srclang : 'en'
            }]
        };

    }
    render() {
       return <div className={video-container} ref={(ref) => this.player = ref}/>
    }
}

Collectives™ on Stack Overflow

Convert document.querySelector() into Reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related