From d6accf14f7bd816dd01733084971fd4af246eb98 Mon Sep 17 00:00:00 2001
From: Enrique Palacios <enrique.palacios@struck.com>
Date: Mon, 20 Jul 2020 12:14:13 -0600
Subject: [PATCH 1/5] Agregar el video player

---
 public/index.html | 129 ++++++++++++++++++++++++++++++++++++++++++++--
 src/App.js        |  31 +++--------
 2 files changed, 131 insertions(+), 29 deletions(-)
diff --git a/public/index.html b/public/index.html
index 73b2ecd7fc..6f5aaa4840 100755
--- a/public/index.html
+++ b/public/index.html
@@ -1,15 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.6.6/video-js.css"
+      rel="stylesheet"
+    />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.6.6/video.min.js"></script>
+    <script src="https://player.live-video.net/1.0.0/amazon-ivs-videojs-tech.min.js"></script>
+    <script src="https://player.live-video.net/1.0.0/amazon-ivs-quality-plugin.min.js"></script>
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -26,6 +36,115 @@
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
+    <div class="video-container">
+      <video
+        id="amazon-ivs-videojs"
+        class="video-js vjs-4-3 vjs-big-play-centered"
+        controls
+        autoplay
+        playsinline
+      ></video>
+    </div>
+
+    <script>
+      const DEFAULT_STREAM =
+        "https://fea3c903eeea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.681707848755.channel.o9B3EYPomehb.m3u8";
+
+      // Initialize player
+      (function () {
+        // Set up IVS playback tech and quality plugin
+        registerIVSTech(videojs);
+        registerIVSQualityPlugin(videojs);
+
+        // Initialize video.js player
+        const videoJSPlayer = videojs("amazon-ivs-videojs", {
+          techOrder: ["AmazonIVS"],
+          controlBar: {
+            playToggle: {
+              replay: false,
+            }, // Hides the replay button for VOD
+            pictureInPictureToggle: false, // Hides the PiP button
+          },
+        });
+
+        // Use the player API once the player instance's ready callback is fired
+        const readyCallback = function () {
+          // This executes after video.js is initialized and ready
+          window.videoJSPlayer = videoJSPlayer;
+
+          // Get reference to Amazon IVS player
+          const ivsPlayer = videoJSPlayer.getIVSPlayer();
+
+          // Show the "big play" button when the stream is paused
+          const videoContainerEl = document.querySelector(
+            "#amazon-ivs-videojs"
+          );
+          videoContainerEl.addEventListener("click", () => {
+            if (videoJSPlayer.paused()) {
+              videoContainerEl.classList.remove("vjs-has-started");
+            } else {
+              videoContainerEl.classList.add("vjs-has-started");
+            }
+          });
+
+          // Logs low latency setting and latency value 5s after playback starts
+          const PlayerState = videoJSPlayer.getIVSEvents().PlayerState;
+          ivsPlayer.addEventListener(PlayerState.PLAYING, () => {
+            console.log("Player State - PLAYING");
+            setTimeout(() => {
+              console.log(
+                `This stream is ${
+                  ivsPlayer.isLiveLowLatency() ? "" : "not "
+                }playing in ultra low latency mode`
+              );
+              console.log(`Stream Latency: ${ivsPlayer.getLiveLatency()}s`);
+            }, 5000);
+          });
+
+          // Log errors
+          const PlayerEventType = videoJSPlayer.getIVSEvents().PlayerEventType;
+          ivsPlayer.addEventListener(PlayerEventType.ERROR, (type, source) => {
+            console.warn("Player Event - ERROR: ", type, source);
+          });
+
+          // Log and display timed metadata
+          ivsPlayer.addEventListener(
+            PlayerEventType.TEXT_METADATA_CUE,
+            (cue) => {
+              const metadataText = cue.text;
+              const position = ivsPlayer.getPosition().toFixed(2);
+              console.log(
+                `Player Event - TEXT_METADATA_CUE: "${metadataText}". Observed ${position}s after playback started.`
+              );
+            }
+          );
+
+          // Enables manual quality selection plugin
+          videoJSPlayer.enableIVSQualityPlugin();
+
+          // Set volume and play default stream
+          videoJSPlayer.volume(0.5);
+          videoJSPlayer.src(DEFAULT_STREAM);
+        };
+
+        // Register ready callback
+        videoJSPlayer.ready(readyCallback);
+      })();
+
+      // Sets up input box for Amazon IVS manifest
+      (function () {
+        const containerEl = document.querySelector(".video-container");
+        const directSrcFormEl = containerEl.querySelector(
+          ".src-container-direct"
+        );
+        const directSrcInputEl = containerEl.querySelector(".src-input");
+        directSrcFormEl.addEventListener("submit", (e) => {
+          e.preventDefault();
+          videoJSPlayer.src(directSrcInputEl.value);
+        });
+      })();
+    </script>
+
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/App.js b/src/App.js
index 353a862f79..127e041344 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,31 +1,14 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
-import { withAuthenticator } from 'aws-amplify-react'
-import Amplify, { Auth } from 'aws-amplify';
-import aws_exports from './aws-exports';
+import React, { Component } from "react";
+import logo from "./logo.svg";
+import "./App.css";
+import { withAuthenticator } from "aws-amplify-react";
+import Amplify, { Auth } from "aws-amplify";
+import aws_exports from "./aws-exports";
 Amplify.configure(aws_exports);
 
 class App extends Component {
   render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
-      </div>
-    );
+    return <div></div>;
   }
 }
 

From e9bb1063f9e5401553a21263c6b0c793d229e36c Mon Sep 17 00:00:00 2001
From: Edgar Perez <edgarp.dev@gmail.com>
Date: Wed, 22 Jul 2020 20:59:41 -0500
Subject: [PATCH 2/5] Adding VideoPlayer component

---
 amplify/.config/project-config.json           |   2 +-
 ...ognitocf0c6096-cloudformation-template.yml |   2 +-
 package.json                                  |   1 +
 public/index.html                             | 116 ------------------
 src/App.js                                    |  12 +-
 src/components/VideoPlayer.jsx                |  17 +++
 6 files changed, 29 insertions(+), 121 deletions(-)
 create mode 100644 src/components/VideoPlayer.jsx

diff --git a/amplify/.config/project-config.json b/amplify/.config/project-config.json
index bafe837409..affe2d89cd 100755
--- a/amplify/.config/project-config.json
+++ b/amplify/.config/project-config.json
@@ -1,6 +1,6 @@
 {
     "projectName": "authcra",
-    "version": "1.0",
+    "version": "3.0",
     "frontend": "javascript",
     "javascript": {
         "framework": "react",
diff --git a/amplify/backend/auth/cognitocf0c6096/cognitocf0c6096-cloudformation-template.yml b/amplify/backend/auth/cognitocf0c6096/cognitocf0c6096-cloudformation-template.yml
index 4cfeebbb61..4ff768d31e 100755
--- a/amplify/backend/auth/cognitocf0c6096/cognitocf0c6096-cloudformation-template.yml
+++ b/amplify/backend/auth/cognitocf0c6096/cognitocf0c6096-cloudformation-template.yml
@@ -263,7 +263,7 @@ Resources:
             - ' }'
             - '};'
       Handler: index.handler
-      Runtime: nodejs8.10
+      Runtime: nodejs10.x
       Timeout: '300'
       Role: !GetAtt 
         - UserPoolClientRole
diff --git a/package.json b/package.json
index 49c1d85857..c20facbd2f 100755
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "kind-of": "^6.0.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-player": "^2.5.0",
     "react-scripts": "^3.4.1"
   },
   "resolutions": {
diff --git a/public/index.html b/public/index.html
index 6f5aaa4840..484bc5b010 100755
--- a/public/index.html
+++ b/public/index.html
@@ -8,13 +8,6 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#000000" />
-    <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.6.6/video-js.css"
-      rel="stylesheet"
-    />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.6.6/video.min.js"></script>
-    <script src="https://player.live-video.net/1.0.0/amazon-ivs-videojs-tech.min.js"></script>
-    <script src="https://player.live-video.net/1.0.0/amazon-ivs-quality-plugin.min.js"></script>
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
@@ -36,115 +29,6 @@
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
-    <div class="video-container">
-      <video
-        id="amazon-ivs-videojs"
-        class="video-js vjs-4-3 vjs-big-play-centered"
-        controls
-        autoplay
-        playsinline
-      ></video>
-    </div>
-
-    <script>
-      const DEFAULT_STREAM =
-        "https://fea3c903eeea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.681707848755.channel.o9B3EYPomehb.m3u8";
-
-      // Initialize player
-      (function () {
-        // Set up IVS playback tech and quality plugin
-        registerIVSTech(videojs);
-        registerIVSQualityPlugin(videojs);
-
-        // Initialize video.js player
-        const videoJSPlayer = videojs("amazon-ivs-videojs", {
-          techOrder: ["AmazonIVS"],
-          controlBar: {
-            playToggle: {
-              replay: false,
-            }, // Hides the replay button for VOD
-            pictureInPictureToggle: false, // Hides the PiP button
-          },
-        });
-
-        // Use the player API once the player instance's ready callback is fired
-        const readyCallback = function () {
-          // This executes after video.js is initialized and ready
-          window.videoJSPlayer = videoJSPlayer;
-
-          // Get reference to Amazon IVS player
-          const ivsPlayer = videoJSPlayer.getIVSPlayer();
-
-          // Show the "big play" button when the stream is paused
-          const videoContainerEl = document.querySelector(
-            "#amazon-ivs-videojs"
-          );
-          videoContainerEl.addEventListener("click", () => {
-            if (videoJSPlayer.paused()) {
-              videoContainerEl.classList.remove("vjs-has-started");
-            } else {
-              videoContainerEl.classList.add("vjs-has-started");
-            }
-          });
-
-          // Logs low latency setting and latency value 5s after playback starts
-          const PlayerState = videoJSPlayer.getIVSEvents().PlayerState;
-          ivsPlayer.addEventListener(PlayerState.PLAYING, () => {
-            console.log("Player State - PLAYING");
-            setTimeout(() => {
-              console.log(
-                `This stream is ${
-                  ivsPlayer.isLiveLowLatency() ? "" : "not "
-                }playing in ultra low latency mode`
-              );
-              console.log(`Stream Latency: ${ivsPlayer.getLiveLatency()}s`);
-            }, 5000);
-          });
-
-          // Log errors
-          const PlayerEventType = videoJSPlayer.getIVSEvents().PlayerEventType;
-          ivsPlayer.addEventListener(PlayerEventType.ERROR, (type, source) => {
-            console.warn("Player Event - ERROR: ", type, source);
-          });
-
-          // Log and display timed metadata
-          ivsPlayer.addEventListener(
-            PlayerEventType.TEXT_METADATA_CUE,
-            (cue) => {
-              const metadataText = cue.text;
-              const position = ivsPlayer.getPosition().toFixed(2);
-              console.log(
-                `Player Event - TEXT_METADATA_CUE: "${metadataText}". Observed ${position}s after playback started.`
-              );
-            }
-          );
-
-          // Enables manual quality selection plugin
-          videoJSPlayer.enableIVSQualityPlugin();
-
-          // Set volume and play default stream
-          videoJSPlayer.volume(0.5);
-          videoJSPlayer.src(DEFAULT_STREAM);
-        };
-
-        // Register ready callback
-        videoJSPlayer.ready(readyCallback);
-      })();
-
-      // Sets up input box for Amazon IVS manifest
-      (function () {
-        const containerEl = document.querySelector(".video-container");
-        const directSrcFormEl = containerEl.querySelector(
-          ".src-container-direct"
-        );
-        const directSrcInputEl = containerEl.querySelector(".src-input");
-        directSrcFormEl.addEventListener("submit", (e) => {
-          e.preventDefault();
-          videoJSPlayer.src(directSrcInputEl.value);
-        });
-      })();
-    </script>
-
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/App.js b/src/App.js
index 127e041344..992756d179 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,20 @@
 import React, { Component } from "react";
-import logo from "./logo.svg";
 import "./App.css";
+import VideoPlayer from "./components/VideoPlayer";
+
+// Amplify
 import { withAuthenticator } from "aws-amplify-react";
-import Amplify, { Auth } from "aws-amplify";
+import Amplify from "aws-amplify";
 import aws_exports from "./aws-exports";
 Amplify.configure(aws_exports);
 
 class App extends Component {
   render() {
-    return <div></div>;
+    return (
+      <>
+        <VideoPlayer videoUrl="https://www.youtube.com/watch?v=ysz5S6PUM-U" />
+      </>
+    );
   }
 }
 
diff --git a/src/components/VideoPlayer.jsx b/src/components/VideoPlayer.jsx
new file mode 100644
index 0000000000..9ec669707d
--- /dev/null
+++ b/src/components/VideoPlayer.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactPlayer from 'react-player';
+import PropTypes from 'prop-types';
+
+// Video player component docs
+// https://www.npmjs.com/package/react-player
+const VideoPlayer = (props) => {
+    return (
+        <ReactPlayer url={props.videoUrl} />
+    )
+}
+
+VideoPlayer.propTypes = {
+    videoUrl: PropTypes.string.isRequired
+}
+
+export default VideoPlayer;
\ No newline at end of file

From d9b4479bb57171605920935e217041d88e7d4bec Mon Sep 17 00:00:00 2001
From: Gabriel Ramirez <gabanox@MacBook-Pro-de-Gabriel.local>
Date: Sat, 25 Jul 2020 22:05:14 -0500
Subject: [PATCH 3/5] url test

---
 .gitignore                                    |  11 +-
 amplify/.config/project-config.json           |  12 +-
 ...ognitocf0c6096-cloudformation-template.yml |   2 +-
 amplify/team-provider-info.json               |  20 ++
 package.json                                  |   4 +-
 public/index.html                             |   2 +-
 src/App.css                                   |   4 +
 yarn.lock                                     | 194 +++++++++++++++++-
 8 files changed, 238 insertions(+), 11 deletions(-)
 mode change 100755 => 100644 amplify/.config/project-config.json
 create mode 100644 amplify/team-provider-info.json

diff --git a/.gitignore b/.gitignore
index e1d20a2c4a..5644a1e586 100755
--- a/.gitignore
+++ b/.gitignore
@@ -35,6 +35,15 @@ awsconfiguration.json
 #amplify
 amplify/\#current-cloud-backend
 amplify/.config/local-*
+amplify/mock-data
 amplify/backend/amplify-meta.json
+amplify/backend/awscloudformation
+build/
+dist/
+node_modules/
 aws-exports.js
-awsconfiguration.json
\ No newline at end of file
+awsconfiguration.json
+amplifyconfiguration.json
+amplify-build-config.json
+amplify-gradle-config.json
+amplifytools.xcconfig
\ No newline at end of file
diff --git a/amplify/.config/project-config.json b/amplify/.config/project-config.json
old mode 100755
new mode 100644
index bafe837409..f63b757821
--- a/amplify/.config/project-config.json
+++ b/amplify/.config/project-config.json
@@ -1,6 +1,9 @@
 {
-    "projectName": "authcra",
-    "version": "1.0",
+    "providers": [
+        "awscloudformation"
+    ],
+    "projectName": "ACF584",
+    "version": "3.0",
     "frontend": "javascript",
     "javascript": {
         "framework": "react",
@@ -10,8 +13,5 @@
             "BuildCommand": "npm run-script build",
             "StartCommand": "npm run-script start"
         }
-    },
-    "providers": [
-        "awscloudformation"
-    ]
+    }
 }
\ No newline at end of file
diff --git a/amplify/backend/auth/cognitocf0c6096/cognitocf0c6096-cloudformation-template.yml b/amplify/backend/auth/cognitocf0c6096/cognitocf0c6096-cloudformation-template.yml
index 4cfeebbb61..4ff768d31e 100755
--- a/amplify/backend/auth/cognitocf0c6096/cognitocf0c6096-cloudformation-template.yml
+++ b/amplify/backend/auth/cognitocf0c6096/cognitocf0c6096-cloudformation-template.yml
@@ -263,7 +263,7 @@ Resources:
             - ' }'
             - '};'
       Handler: index.handler
-      Runtime: nodejs8.10
+      Runtime: nodejs10.x
       Timeout: '300'
       Role: !GetAtt 
         - UserPoolClientRole
diff --git a/amplify/team-provider-info.json b/amplify/team-provider-info.json
new file mode 100644
index 0000000000..47f33b4a05
--- /dev/null
+++ b/amplify/team-provider-info.json
@@ -0,0 +1,20 @@
+{
+    "devn": {
+        "awscloudformation": {
+            "AuthRoleName": "amplify-authcra-devn-170435-authRole",
+            "UnauthRoleArn": "arn:aws:iam::681707848755:role/amplify-authcra-devn-170435-unauthRole",
+            "AuthRoleArn": "arn:aws:iam::681707848755:role/amplify-authcra-devn-170435-authRole",
+            "Region": "us-east-1",
+            "DeploymentBucketName": "amplify-authcra-devn-170435-deployment",
+            "UnauthRoleName": "amplify-authcra-devn-170435-unauthRole",
+            "StackName": "amplify-authcra-devn-170435",
+            "StackId": "arn:aws:cloudformation:us-east-1:681707848755:stack/amplify-authcra-devn-170435/170a49b0-caab-11ea-8f56-12498e67507f",
+            "AmplifyAppId": "d1l4ttk6myd0ji"
+        },
+        "categories": {
+            "auth": {
+                "cognitocf0c6096": {}
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 49c1d85857..e5ee6809a3 100755
--- a/package.json
+++ b/package.json
@@ -9,7 +9,9 @@
     "kind-of": "^6.0.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "^3.4.1"
+    "react-scripts": "^3.4.1",
+    "styled-components": "^5.1.1",
+    "yarn": "^1.22.4"
   },
   "resolutions": {
     "set-value": "^2.0.1",
diff --git a/public/index.html b/public/index.html
index 6f5aaa4840..bf0041523a 100755
--- a/public/index.html
+++ b/public/index.html
@@ -48,7 +48,7 @@
 
     <script>
       const DEFAULT_STREAM =
-        "https://fea3c903eeea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.681707848755.channel.o9B3EYPomehb.m3u8";
+        "https://fea3c903eeea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.681707848755.channel.8pW4AwxymFua.m3u8";
 
       // Initialize player
       (function () {
diff --git a/src/App.css b/src/App.css
index 92f956e804..d326d9e057 100755
--- a/src/App.css
+++ b/src/App.css
@@ -18,6 +18,10 @@
   color: white;
 }
 
+.Button {
+  color:black;
+}
+
 .App-link {
   color: #61dafb;
 }
diff --git a/yarn.lock b/yarn.lock
index 438808945c..2404648aff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -171,6 +171,13 @@
   dependencies:
     "@babel/highlight" "^7.0.0"
 
+"@babel/code-frame@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
+  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
+  dependencies:
+    "@babel/highlight" "^7.10.4"
+
 "@babel/compat-data@^7.8.6", "@babel/compat-data@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.9.0.tgz#04815556fc90b0c174abd2c0c1bb966faa036a6c"
@@ -222,6 +229,15 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
+"@babel/generator@^7.10.5":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.10.5.tgz#1b903554bc8c583ee8d25f1e8969732e6b829a69"
+  integrity sha512-3vXxr3FEW7E7lJZiWQ3bM4+v/Vyr9C+hpolQ8BGFr9Y8Ri2tFLWTixmwKBafDujO1WVah4fhZBeU1bieKdghig==
+  dependencies:
+    "@babel/types" "^7.10.5"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.4.0", "@babel/generator@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.9.0.tgz#0f67adea4ec39dad6e63345f70eec33014d78c89"
@@ -351,6 +367,15 @@
     "@babel/template" "^7.1.0"
     "@babel/types" "^7.0.0"
 
+"@babel/helper-function-name@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz#d2d3b20c59ad8c47112fa7d2a94bc09d5ef82f1a"
+  integrity sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-function-name@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.8.3.tgz#eeeb665a01b1f11068e9fb86ad56a1cb1a824cca"
@@ -372,6 +397,13 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
+"@babel/helper-get-function-arity@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz#98c1cbea0e2332f33f9a4661b8ce1505b2c19ba2"
+  integrity sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-get-function-arity@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz#b894b947bd004381ce63ea1db9f08547e920abd5"
@@ -393,6 +425,13 @@
   dependencies:
     "@babel/types" "^7.8.3"
 
+"@babel/helper-module-imports@^7.0.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz#4c5c54be04bd31670a7382797d75b9fa2e5b5620"
+  integrity sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-module-imports@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz#7fe39589b39c016331b6b8c3f441e8f0b1419498"
@@ -477,6 +516,13 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
+"@babel/helper-split-export-declaration@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.4.tgz#2c70576eaa3b5609b24cb99db2888cc3fc4251d1"
+  integrity sha512-pySBTeoUff56fL5CBU2hWm9TesA4r/rOkI9DyJLvvgz09MB9YtfIYe3iBriVaYNaPe+Alua0vBIOVOLs2buWhg==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-split-export-declaration@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz#31a9f30070f91368a7182cf05f831781065fc7a9"
@@ -484,6 +530,11 @@
   dependencies:
     "@babel/types" "^7.8.3"
 
+"@babel/helper-validator-identifier@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
+  integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
+
 "@babel/helper-validator-identifier@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.0.tgz#ad53562a7fc29b3b9a91bbf7d10397fd146346ed"
@@ -524,6 +575,15 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
+  integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/highlight@^7.8.3":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.9.0.tgz#4e9b45ccb82b79607271b2979ad82c7b68163079"
@@ -537,6 +597,11 @@
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.1.2.tgz#85c5c47af6d244fab77bce6b9bd830e38c978409"
 
+"@babel/parser@^7.10.4", "@babel/parser@^7.10.5":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.10.5.tgz#e7c6bf5a7deff957cec9f04b551e2762909d826b"
+  integrity sha512-wfryxy4bE1UivvQKSQDU4/X6dr+i8bctjUjj8Zyt3DQy7NtPizJXT8M52nqpNKL+nq2PW8lxk4ZqLj0fD4B4hQ==
+
 "@babel/parser@^7.4.3", "@babel/parser@^7.7.0", "@babel/parser@^7.8.6", "@babel/parser@^7.9.0":
   version "7.9.2"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.2.tgz#4e767f424b479c514077544484d1f9bdba7f1158"
@@ -1230,6 +1295,15 @@
     "@babel/parser" "^7.1.2"
     "@babel/types" "^7.1.2"
 
+"@babel/template@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
+  integrity sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/parser" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
 "@babel/template@^7.4.0", "@babel/template@^7.8.3", "@babel/template@^7.8.6":
   version "7.8.6"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.6.tgz#86b22af15f828dfb086474f964dcc3e39c43ce2b"
@@ -1283,6 +1357,21 @@
     globals "^11.1.0"
     lodash "^4.17.13"
 
+"@babel/traverse@^7.4.5":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.10.5.tgz#77ce464f5b258be265af618d8fddf0536f20b564"
+  integrity sha512-yc/fyv2gUjPqzTz0WHeRJH2pv7jA9kA7mBX2tXl/x5iOE81uaVPuGPtaYk7wmkx4b67mQ7NqI8rmT2pF47KYKQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.10.5"
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.10.4"
+    "@babel/parser" "^7.10.5"
+    "@babel/types" "^7.10.5"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.19"
+
 "@babel/types@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.44.tgz#6b1b164591f77dec0a0342aca995f2d046b3a757"
@@ -1299,6 +1388,15 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.10.4", "@babel/types@^7.10.5":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.10.5.tgz#d88ae7e2fde86bfbfe851d4d81afa70a997b5d15"
+  integrity sha512-ixV66KWfCI6GKoA/2H9v6bQdbfXEwwpOdQ8cRvb4F+eyvhlaHxWFMQB4+3d9QFJXZsiiiqVrewNV0DFEQpyT4Q==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    lodash "^4.17.19"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.7.0", "@babel/types@^7.8.3", "@babel/types@^7.8.6", "@babel/types@^7.8.7", "@babel/types@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.0.tgz#00b064c3df83ad32b2dbf5ff07312b15c7f1efb5"
@@ -1325,6 +1423,28 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
+"@emotion/is-prop-valid@^0.8.8":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
+"@emotion/stylis@^0.8.4":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -2488,6 +2608,21 @@ babel-plugin-named-asset-import@^0.3.6:
   resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz#c9750a1b38d85112c9e166bf3ef7c5dbc605f4be"
   integrity sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA==
 
+"babel-plugin-styled-components@>= 1":
+  version "1.10.7"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz#3494e77914e9989b33cc2d7b3b29527a949d635c"
+  integrity sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-module-imports" "^7.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+
 babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
@@ -2910,6 +3045,11 @@ camelcase@5.3.1, camelcase@^5.3.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
+camelize@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
+  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
+
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -3500,6 +3640,11 @@ css-blank-pseudo@^0.1.4:
   dependencies:
     postcss "^7.0.5"
 
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
+
 css-color-names@0.0.4, css-color-names@^0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -3571,6 +3716,15 @@ css-select@^2.0.0:
     domutils "^1.7.0"
     nth-check "^1.0.1"
 
+css-to-react-native@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
+  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
 css-tree@1.0.0-alpha.28:
   version "1.0.0-alpha.28"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.28.tgz#8e8968190d886c9477bc8d61e96f61af3f7ffa7f"
@@ -5267,6 +5421,13 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hoist-non-react-statics@^3.0.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hosted-git-info@^2.1.4:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047"
@@ -6764,6 +6925,11 @@ lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
+lodash@^4.17.19:
+  version "4.17.19"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
+  integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
+
 loglevel@^1.6.6:
   version "1.6.7"
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.7.tgz#b3e034233188c68b889f5b862415306f565e2c56"
@@ -8880,7 +9046,7 @@ react-error-overlay@^6.0.7:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
-react-is@^16.8.1, react-is@^16.8.4:
+react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9584,6 +9750,11 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -10068,6 +10239,22 @@ style-loader@0.23.1:
     loader-utils "^1.1.0"
     schema-utils "^1.0.0"
 
+styled-components@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.1.1.tgz#96dfb02a8025794960863b9e8e365e3b6be5518d"
+  integrity sha512-1ps8ZAYu2Husx+Vz8D+MvXwEwvMwFv+hqqUwhNlDN5ybg6A+3xyW1ECrAgywhvXapNfXiz79jJyU0x22z0FFTg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^0.8.8"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 stylehacks@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.1.tgz#3186595d047ab0df813d213e51c8b94e0b9010f2"
@@ -11131,6 +11318,11 @@ yargs@^13.3.0:
     y18n "^4.0.0"
     yargs-parser "^13.1.2"
 
+yarn@^1.22.4:
+  version "1.22.4"
+  resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.4.tgz#01c1197ca5b27f21edc8bc472cd4c8ce0e5a470e"
+  integrity sha512-oYM7hi/lIWm9bCoDMEWgffW8aiNZXCWeZ1/tGy0DWrN6vmzjCXIKu2Y21o8DYVBUtiktwKcNoxyGl/2iKLUNGA==
+
 zen-observable@^0.8.6:
   version "0.8.11"
   resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.11.tgz#d3415885eeeb42ee5abb9821c95bb518fcd6d199"

From 5bce4f69b0d4356b1661886c7a4fb1a84c1b6a2d Mon Sep 17 00:00:00 2001
From: Gabriel Ramirez <gabanox@MacBook-Pro-de-Gabriel.local>
Date: Sun, 26 Jul 2020 10:44:02 -0500
Subject: [PATCH 4/5] add react player dependency

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index e5ee6809a3..c662041d3d 100755
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "^3.4.1",
+    "react-player": "^2.5.0",
     "styled-components": "^5.1.1",
     "yarn": "^1.22.4"
   },

From 52a452b05e9a618c83229019f43b6b0ae6cba119 Mon Sep 17 00:00:00 2001
From: Edgar Perez <edgar@cbqasolutions.com>
Date: Sat, 1 Aug 2020 16:43:37 -0500
Subject: [PATCH 5/5] Adding IVS integration

---
 package.json                   |   1 -
 public/index.html              | 112 +--------------------------------
 src/App.js                     |   2 +-
 src/components/VideoPlayer.jsx |  42 +++++++++----
 src/components/ivs-script.js   |  31 +++++++++
 src/index.css                  |   9 +++
 6 files changed, 73 insertions(+), 124 deletions(-)
 create mode 100644 src/components/ivs-script.js

diff --git a/package.json b/package.json
index c662041d3d..e5ee6809a3 100755
--- a/package.json
+++ b/package.json
@@ -10,7 +10,6 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "^3.4.1",
-    "react-player": "^2.5.0",
     "styled-components": "^5.1.1",
     "yarn": "^1.22.4"
   },
diff --git a/public/index.html b/public/index.html
index 4bd298164a..6c2fd47b9a 100755
--- a/public/index.html
+++ b/public/index.html
@@ -22,122 +22,16 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <script src="https://player.live-video.net/1.0.0/amazon-ivs-player.min.js"></script>
     <title>React App</title>
   </head>
   <body>
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
-    <div id="root"></div>
-    <div class="video-container">
-      <video
-        id="amazon-ivs-videojs"
-        class="video-js vjs-4-3 vjs-big-play-centered"
-        controls
-        autoplay
-        playsinline
-      ></video>
+    <div id="root">
+      <video id="video-player" playsinline></video>
     </div>
-
-    <script>
-      const DEFAULT_STREAM =
-        "https://fea3c903eeea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.681707848755.channel.8pW4AwxymFua.m3u8";
-
-      // Initialize player
-      (function () {
-        // Set up IVS playback tech and quality plugin
-        registerIVSTech(videojs);
-        registerIVSQualityPlugin(videojs);
-
-        // Initialize video.js player
-        const videoJSPlayer = videojs("amazon-ivs-videojs", {
-          techOrder: ["AmazonIVS"],
-          controlBar: {
-            playToggle: {
-              replay: false,
-            }, // Hides the replay button for VOD
-            pictureInPictureToggle: false, // Hides the PiP button
-          },
-        });
-
-        // Use the player API once the player instance's ready callback is fired
-        const readyCallback = function () {
-          // This executes after video.js is initialized and ready
-          window.videoJSPlayer = videoJSPlayer;
-
-          // Get reference to Amazon IVS player
-          const ivsPlayer = videoJSPlayer.getIVSPlayer();
-
-          // Show the "big play" button when the stream is paused
-          const videoContainerEl = document.querySelector(
-            "#amazon-ivs-videojs"
-          );
-          videoContainerEl.addEventListener("click", () => {
-            if (videoJSPlayer.paused()) {
-              videoContainerEl.classList.remove("vjs-has-started");
-            } else {
-              videoContainerEl.classList.add("vjs-has-started");
-            }
-          });
-
-          // Logs low latency setting and latency value 5s after playback starts
-          const PlayerState = videoJSPlayer.getIVSEvents().PlayerState;
-          ivsPlayer.addEventListener(PlayerState.PLAYING, () => {
-            console.log("Player State - PLAYING");
-            setTimeout(() => {
-              console.log(
-                `This stream is ${
-                  ivsPlayer.isLiveLowLatency() ? "" : "not "
-                }playing in ultra low latency mode`
-              );
-              console.log(`Stream Latency: ${ivsPlayer.getLiveLatency()}s`);
-            }, 5000);
-          });
-
-          // Log errors
-          const PlayerEventType = videoJSPlayer.getIVSEvents().PlayerEventType;
-          ivsPlayer.addEventListener(PlayerEventType.ERROR, (type, source) => {
-            console.warn("Player Event - ERROR: ", type, source);
-          });
-
-          // Log and display timed metadata
-          ivsPlayer.addEventListener(
-            PlayerEventType.TEXT_METADATA_CUE,
-            (cue) => {
-              const metadataText = cue.text;
-              const position = ivsPlayer.getPosition().toFixed(2);
-              console.log(
-                `Player Event - TEXT_METADATA_CUE: "${metadataText}". Observed ${position}s after playback started.`
-              );
-            }
-          );
-
-          // Enables manual quality selection plugin
-          videoJSPlayer.enableIVSQualityPlugin();
-
-          // Set volume and play default stream
-          videoJSPlayer.volume(0.5);
-          videoJSPlayer.src(DEFAULT_STREAM);
-        };
-
-        // Register ready callback
-        videoJSPlayer.ready(readyCallback);
-      })();
-
-      // Sets up input box for Amazon IVS manifest
-      (function () {
-        const containerEl = document.querySelector(".video-container");
-        const directSrcFormEl = containerEl.querySelector(
-          ".src-container-direct"
-        );
-        const directSrcInputEl = containerEl.querySelector(".src-input");
-        directSrcFormEl.addEventListener("submit", (e) => {
-          e.preventDefault();
-          videoJSPlayer.src(directSrcInputEl.value);
-        });
-      })();
-    </script>
-
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/App.js b/src/App.js
index 992756d179..a9d7009178 100755
--- a/src/App.js
+++ b/src/App.js
@@ -12,7 +12,7 @@ class App extends Component {
   render() {
     return (
       <>
-        <VideoPlayer videoUrl="https://www.youtube.com/watch?v=ysz5S6PUM-U" />
+        <VideoPlayer/> 
       </>
     );
   }
diff --git a/src/components/VideoPlayer.jsx b/src/components/VideoPlayer.jsx
index 9ec669707d..b6791db0e3 100644
--- a/src/components/VideoPlayer.jsx
+++ b/src/components/VideoPlayer.jsx
@@ -1,17 +1,33 @@
-import React from 'react';
-import ReactPlayer from 'react-player';
-import PropTypes from 'prop-types';
+import React, { Component } from "react";
 
-// Video player component docs
-// https://www.npmjs.com/package/react-player
-const VideoPlayer = (props) => {
-    return (
-        <ReactPlayer url={props.videoUrl} />
-    )
-}
+class VideoPlayer extends Component {
+  componentDidMount() {
+    // Load ivs script
+    const script = document.createElement("script");
+    script.src = "./ivs-script.js";
+    script.async = true;
+    script.type = "text/jsx";
+    document.body.appendChild(script);
 
-VideoPlayer.propTypes = {
-    videoUrl: PropTypes.string.isRequired
+    // Show the video player, inital visibility set to hidden, once component
+    // is loaded visibility is changed to visible
+    document
+      .getElementById("root")
+      .getElementsByTagName("video")[0].style.visibility = "visible";
+  }
+
+  render() {
+    return (
+      <div>
+        <div data-vjs-player>
+          <video
+            ref={(node) => (this.videoNode = node)}
+            className="video-js"
+          ></video>
+        </div>
+      </div>
+    );
+  }
 }
 
-export default VideoPlayer;
\ No newline at end of file
+export default VideoPlayer;
diff --git a/src/components/ivs-script.js b/src/components/ivs-script.js
new file mode 100644
index 0000000000..8d205fa0a3
--- /dev/null
+++ b/src/components/ivs-script.js
@@ -0,0 +1,31 @@
+/*
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: MIT-0
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this
+ * software and associated documentation files (the "Software"), to deal in the Software
+ * without restriction, including without limitation the rights to use, copy, modify,
+ * merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+ * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+ * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+// Playback configuration
+// Replace this with your own Amazon IVS Playback URL
+(function() {
+    const playbackUrl =
+    "https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.m3u8";
+  
+  if (IVSPlayer.isPlayerSupported) {
+    const player = IVSPlayer.create();
+    player.attachHTMLVideoElement(document.getElementById("video-player"));
+    player.load(playbackUrl);
+    player.play();
+  }
+})();
diff --git a/src/index.css b/src/index.css
index cee5f348fb..2bb5b4cc86 100755
--- a/src/index.css
+++ b/src/index.css
@@ -12,3 +12,12 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+video {
+  width: 90%;
+  max-width: 1080px;
+  position: relative;
+  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
+  background: black;
+  visibility: hidden;
+}
