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,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
@@ -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.
@@ -19,13 +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 id="root">
+      <video id="video-player" playsinline></video>
+    </div>
     <!--
       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/> 
+      </>
     );
   }
 }

diff --git a/src/components/VideoPlayer.jsx b/src/components/VideoPlayer.jsx
@@ -0,0 +1,33 @@
+import React, { Component } from "react";
+
+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);
+
+    // 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;
diff --git a/src/components/ivs-script.js 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
@@ -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;
+}