twitch-embed

Make Twitch's interactive embed video script available on npm. I needed it available on a project and figured other's might too.

Implementation

This isn't the most ideal implementation. The script still pollutes the window and the functions/objects are NOT able to be imported. i.e. import { Player } from 'twitch-embed'. To enable this Twitch would have to provide its source and make a few modifications.

lib/v1.js is literally just http://player.twitch.tv/js/embed/v1.js

Modifications

I did have to make a change to the source. I pretty printed it, and hard coded the base of the Twitch video requests to 'http://player.twitch.tv/js/embed/v1.js' you can see the change at line 320.

Usage

npm i --save twitch-embed
import 'twitch-embed';

eslint

You may need to disable the eslint error for global variable usage if you are referencing the Twitch variable without window. (Twitch vs window.Twitch)

//.eslintrc
{
  "globals": {
    "Twitch": false
  }
}

See Twitch's Video Embed page for more information. https://github.com/justintv/Twitch-API/blob/master/embed-video.md

React class ES6 Example

import React from 'react';
import 'twitch-embed';

export default class TwitchVideoEmbed extends React.Component {
    constructor(props) {
        super(props);
        this.player = null;
        this.state = {
            id: null
        };
    }

    static propTypes = {
        channel: React.PropTypes.string,
        video: React.PropTypes.string,
        play: React.PropTypes.bool
    };

    componentWillMount() {
        this.setId();
    }

    componentDidMount() {
        this.setPlayer();
    }

    componentDidUpdate() {
        this.setPlayer();
    }

    componentWillReceiveProps(nextProps) {
        this.setId();
        this.setPlayer();

        //can check for props and call player functions here
    }

    setId() {
        if (!this.state.id) {
            if (this.props.channel) {
                this.channel = true;
                this.setState({
                    id: `twitch-${this.props.channel}`
                });
            }
            if (this.props.video) {
                this.channel = false;
                this.setState({
                    id: `twitch-${this.props.video}`
                });
            }
        }
    }

    setPlayer() {
        if (!this.player) {
            const options = {};
            if (this.channel) {
                options.channel = this.props.channel;
            } else {
                options.video = this.props.video;
            }
            if (typeof window !== 'undefined' && window.Twitch) {
                this.player = new window.Twitch.Player(this.state.id, options);
            }
        }
    }

    render() {
        return (
            <div id={this.state.id || ''} className="twitch-video-embed"></div>
        );
    }
}