Brightcove Player, React and Typescript

README.md

Brightcove Player, React and Typescript

WARNING: A work in progress, this is a first attempt at getting Brightcove Player working in a Typescript and React Enviroment.

This was inspired from the VideoJS React Tutorial and a previous gist Videojs, React and Typescript

Prerequistes: Using TypeScript-React-Starter

Then npm install packages

npm i --save-dev @types/video.js

Update the following in the BrightcoverPlayerReactTypescript.tsx

• #YOURACCOUNTIDHERE
• #YOURPLAYERIDHERE
• #YOURPLAYERIDHERE

Brightcove.Windows.d.ts

export interface BCWindowInterface extends Window {
    bc: Function;
}

BrightcovePlayer.tsx

import * as React from 'react';
import { BCWindowInterface } from './Brightcove.Window';

declare let window: BCWindowInterface;

interface IBrightcoverPlayerProps extends videojs.PlayerOptions {
  videoJsOptions?: videojs.PlayerOptions;
  accountId: number;
  playerId: string;
  embedId?: string;
  videoId?: number;
}

interface IBrightcovePlayerStates {}

class BrightcovePlayer extends React.Component<IBrightcoverPlayerProps, IBrightcovePlayerStates> {
  private player?: videojs.Player;
  private videoNode?: HTMLVideoElement;

  constructor(props: IBrightcoverPlayerProps) {
    super(props);

    this.state = {};

    this.player = undefined;
    this.videoNode = undefined;
  }

  componentDidMount() {
    this.player = window.bc(this.videoNode, this.props);
  }

  // destroy player on unmount
  componentWillUnmount() {
    if (this.player) {
      this.player.dispose();
    }
  }

  // wrap the player in a div with a `data-vjs-player` attribute
  // so videojs won't create additional wrapper in the DOM
  // see https://github.com/videojs/video.js/pull/3856
  render() {
    const hasAutoPlay = this.props.autoplay;
    const hasControls = this.props.controls;
    const hasEmbedId = this.props.embedId;
    const hasVideoId = this.props.videoId;
    return (
      <div className="c-player">
        <div className="c-player__screen" data-vjs-player="true">
          <video
            autoPlay={hasAutoPlay}
            controls={hasControls}
            data-account={this.props.accountId}
            data-player={this.props.playerId}
            data-embed={hasEmbedId ? this.props.embedId : 'default'}
            data-video-id={hasVideoId}
            ref={(node: HTMLVideoElement) => this.videoNode = node}
            className="video-js"
          />
        </div>
      </div>
    );
  }
}

export default BrightcovePlayer;

BrightcoverPlayerReactTypescript.tsx

import * as React from 'react';
import BrightcovePlayer from './BrightcovePlayer';

const brightcoveOptions = {
  accountId: #YOURACCOUNTIDHERE,
  playerId: '#YOURPLAYERIDHERE',
  videoId: #YOURPLAYERIDHERE,
  embedId: 'default',
  autoplay: true
};

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <BrightcovePlayer 
          {...brightcoveOptions}
        />
      </div>
    );
  }
}

export default App;