import * as React from 'react';
import videojs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
// import 'videojs-contrib-dash';
import { ResponsiveEmbed } from 'react-bootstrap';

export default class VideoPlayer extends React.Component<VideoJsPlayerOptions> {
  videoNode: HTMLVideoElement;

  player: VideoJsPlayer;

  componentDidMount() {
    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
      console.log('Video.js Ready', this);
    });
  }

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

  render() {
    return (
      <ResponsiveEmbed aspectRatio="16by9">
        <div>
          <div data-vjs-player>
            {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
            <video
              ref={(node) => { this.videoNode = node; }}
              className="video-js"
            />
          </div>
        </div>
      </ResponsiveEmbed>
    );
  }
}