Signed URL Example for UnicornFlix

GridView-index.jsx

// Replace overlayMovie() with this one: 
overlayMovie = () => {
    const { displayingMovie, sources, choosenItem: { title, description }, token } = this.state;
    return (
      <Modal id="popup" style={{ maxWidth: 755 }} isOpen={displayingMovie} toggle={this.hideMovie}>
        <ModalHeader toggle={this.hideMovie}>{title}</ModalHeader>
        <ModalBody>
          {description}
          <VideoPlayer
            controls
            sources={sources}
            width={720}
            height={420}
            bigPlayButton={false}
            autoplay
            token={token}
          />
        </ModalBody>
      </Modal>
    );
  }

//Replace Location 13 with this: (Please note that this is using not best practices of GraphQL) Contact sampatze@ if you want to know how to update.
const region = Amplify._config.aws_project_region;
this.setState({
  sources: [{
      src: `https://${awsvideo.awsOutputVideo}/${item.video.id}/${item.video.id}.m3u8`,
      type: 'application/x-mpegURL',
    }],
  displayingMovie: true,
  choosenItem: item,
  token: item.video.token,
});

VideoPlayer-index.jsx

/* eslint-disable jsx-a11y/media-has-caption */
import React from 'react';
import videojs from 'video.js';
import './index.css';

export default class VideoPlayer extends React.Component {
  componentDidMount() {
    videojs.Hls.xhr.beforeRequest = function (options) {
      options.uri = `${options.uri}${videojs.getAllPlayers()[0].options().token}`;
      return options;
    };
    this.player = videojs(this.videoNode, this.props);
  }

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

  render() {
    return (
      <div>
        <div data-vjs-player>
          <video ref={(node) => { this.videoNode = node; }} className="video-js" />
        </div>
      </div>
    );
  }
}