React component for videojs

VideoPreview.jsx

import React, { Component } from 'react';
import { PropTypes as T } from 'prop-types';
import videojs from 'video.js';

// a component for use with videojs
// use it like this:
// <VideoPreview video={myVideo} key={myVideo.id} />

export default class VideoPreview extends Component {
  ref = React.createRef();
  player = null;

  static propTypes = {
    video: T.object.isRequired,
  };



  componentDidMount () {
    this.player: videojs(this.ref.current.firstChild,
      { fluid: true, controls: true });
  }

  componentWillUnmount () {
    this.player.dispose();
  }

  render () {
    const { video } = this.props;
    return (
      <div ref={this.ref}>
        <video
          id={ `video-${video.id}` }
          className="video-js"
        >
          { video.sources.map(({ id, url, mimeType }) =>
            <source key={id} src={url} type={mimeType} />
          )}
        </video>
      </div>
    );
  }
}