aws-samples · gabanox · Jul 20, 2020 · Jul 23, 2020 · Jul 26, 2020 · Jul 26, 2020
diff --git 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
+awsconfiguration.json
+amplifyconfiguration.json
+amplify-build-config.json
+amplify-gradle-config.json
+amplifytools.xcconfig
diff --git 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"
-    ]
-}
+    }
+}
diff --git 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
@@ -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": {}
+            }
+        }
+    }
+}
diff --git a/package.json b/package.json
@@ -9,7 +9,10 @@
     "kind-of": "^6.0.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "^3.4.1"
+    "react-scripts": "^3.4.1",
+    "react-player": "^2.5.0",
+    "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
@@ -1,15 +1,18 @@
 <!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" />
     <!--
       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 +29,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.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.css b/src/App.css
@@ -18,6 +18,10 @@
   color: white;
 }
 
+.Button {
+  color:black;
+}
+
 .App-link {
   color: #61dafb;
 }

diff --git a/src/App.js b/src/App.js
@@ -1,30 +1,19 @@
-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 "./App.css";
+import VideoPlayer from "./components/VideoPlayer";
+
+// Amplify
+import { withAuthenticator } from "aws-amplify-react";
+import Amplify 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>
+      <>
+        <VideoPlayer videoUrl="https://www.youtube.com/watch?v=ysz5S6PUM-U" />
+      </>
     );
   }
 }

diff --git a/src/components/VideoPlayer.jsx 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;