Render Clappr player in ReactJS

Question

I want Clappr player component appear and destroy when I click to a toggle button. But it seems like when Clappr player is created, the entire page has reload (the toggle button dissapear and appear in a blink). So here is my code:

ClapprComponent.js

import React, { Component } from 'react'
import Clappr from 'clappr'

class ClapprComponent extends Component {
    shouldComponentUpdate(nextProps) {
        let changed = (nextProps.source != this.props.source)
        if (changed) {
            this.change(nextProps.source)
        }
        return false
    }
    componentDidMount() {
        this.change(this.props.source)
    }
    componentWillUnmount() {
        this.destroyPlayer()
    }
    destroyPlayer = () => {
        if (this.player) {
            this.player.destroy()
        }
        this.player = null
    }
    change = source => {
        if (this.player) {
            this.player.load(source)
            return
        }
        const { id, width, height } = this.props
        this.player = new Clappr.Player({
            baseUrl: "/assets/clappr",
            parent: `#${id}`,
            source: source,
            autoPlay: true,
            width: width,
            height: height
        })
    }
    render() {
        const { id } = this.props
        return (
            <div id={id}></div>
        )
    }
}

export default ClapprComponent

Video.js

import React, { Component } from 'react'

import { Clappr } from '../components'

class VideoList extends Component {
    constructor() {
        super()
        this.state = {
            isActive: false
        }
    }
    toggle() {
        this.setState({
            isActive: !this.state.isActive
        })
    }
    render() {
        const boxStyle = {
            width: "640",
            height: "360",
            border: "2px solid",
            margin: "0 auto"
        }
        return (
            <div>
                <div style={boxStyle}>
                    {this.state.isActive ?
                        <Clappr
                            id="video"
                            source="http://qthttp.apple.com.edgesuite.net/1010qwoeiuryfg/sl.m3u8"
                            width="640"
                            height="360" />
                    : ''}
                </div>
                <button class="btn btn-primary" onClick={this.toggle.bind(this)}>Toggle</button>
            </div>
        )
    }
}

export default VideoList

Anyone can explain why? And how to fix this problem?

Edit 1: I kind of understand why the button is reload. It's because in index.html <head>, I load some css. When the page is re-render, it load the css first, and then execute my app.min.js. The button doesn't reload in a blink if I move the css tags under the <script src="app.min.js"></script>. But it doesn't solve my problem yet. Because the css files have to put in <head> tags. Any help? :(

score 1 · Answer 1 · answered Aug 19 '16 at 08:11

Here you have a running (jsbin link) example. I simplified a little bit and it still shows your main requirement:

class ClapprComponent extends React.Component {

  componentDidMount(){

    const { id, source } = this.props;

    this.clappr_player = new Clappr.Player({
      parent: `#${id}`,
      source: source
    });

  }

  componentWillUnmount() {
    this.clappr_player.destroy();
    this.clappr_player = null;
  }

  render() {

    const { id } = this.props;

    return (
      <div>
        <p>Active</p>
        <p id={id}></p>
      </div>
    );
  }

}

class NotActive extends React.Component {

  render() {

    return (
      <p>Not Active</p>
    );
  }
}

class App extends React.Component {

  constructor(props){

    super(props);

    this.toggle = this.toggle.bind(this);

    this.state = {
      isActive: false
    }
  }

  toggle() {

    this.setState({
      isActive: !this.state.isActive
    })
  }  

  render() {

    return (
      <div>

        <h1>Clappr React Demo</h1>

        { this.state.isActive ? 
            <ClapprComponent 
              id="video"
              source="http://www.html5videoplayer.net/videos/toystory.mp4"
            /> : 
            <NotActive />}

        <button onClick={this.toggle}>Toggle</button>

      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

Also make sure to rename the button class property to className.

Maybe you can work from here to find your exact problem? Hope that helps.

score 0 · Answer 2 · answered Aug 19 '16 at 11:43

0

In Clappr's documentation I found a like about how to use clappr with reactjs

answered Aug 19 '16 at 11:43

Leandro Moreira

377
3
16

Render Clappr player in ReactJS

2 Answers2