feat(sample-app) Added video player to the sample app (#133)

examples/react-app/package.json

@@ -11,6 +11,7 @@
     "@iot-app-kit/source-iotsitewise": "*",
     "@iot-app-kit/source-iottwinmaker": "*",
     "@iot-app-kit/table": "*",
+    "@material-ui/core": "^4.12.4",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^12.0.0",

examples/react-app/src/App.css

@@ -1,3 +1,19 @@
 .App {
   text-align: center;
 }
+
+.SceneViewer {
+  position: relative;
+  min-height: 680px;
+  min-width: 1200px;
+  resize: both;
+  overflow: auto;
+}
+
+.VideoPlayerComponent {
+  position: absolute;
+  min-height: 680px;
+  min-width: 1200px;
+  resize: both;
+  overflow: auto;
+}

examples/react-app/src/App.tsx

@@ -1,10 +1,10 @@
 import './App.css';
-import SceneViewer from './SceneViewer';
+import ComponentsTab from './components/componentsTab';
 
 function App() {
   return (
     <div className="App">
-      <SceneViewer />
+      <ComponentsTab />
     </div>
   );
 }

examples/react-app/src/SceneViewer.tsx → examples/react-app/src/components/SceneViewer.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react';
 
 import { SceneViewer as SceneViewerComp } from '@iot-app-kit/scene-composer';
-import { dataSource } from './dataSource';
-import { sceneId, componentTypeQueries, viewport, entityQueries, dataBindingTemplate } from './configs';
+import { dataSource } from '../dataSource';
+import { sceneId, componentTypeQueries, viewport, entityQueries, dataBindingTemplate } from '../configs';
 
 const sceneLoader = dataSource.s3SceneLoader(sceneId);
 

examples/react-app/src/components/VideoPlayer.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { VideoPlayer } from '@iot-app-kit/react-components';
+import { dataSource } from '../dataSource';
+import { kvsStreamName, videoEntityId, videoComponentName, videoViewport } from '../configs';
+
+const videoData = dataSource.videoData({ kvsStreamName: kvsStreamName, entityId: videoEntityId, componentName: videoComponentName });
+
+const VideoPlayerComponent = () => {
+  return (
+    <div className="VideoPlayerComponent" >
+      <VideoPlayer
+        videoData={videoData}
+        viewport={videoViewport}
+      />
+    </div>
+  );
+}
+
+export default VideoPlayerComponent;

examples/react-app/src/components/componentsTab.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import Paper from "@material-ui/core/Paper";
+import Tab from "@material-ui/core/Tab";
+import Tabs from "@material-ui/core/Tabs";
+import SceneViewer from "./SceneViewer";
+import VideoPlayerComponent from './VideoPlayer';
+
+const ComponentsTab = () => {
+    const [value, setValue] = React.useState(0);
+
+    return (
+        <div>
+            <h3>Sample IoT AppKit Components</h3>
+            <Paper square>
+                <Tabs
+                value={value}
+                textColor="primary"
+                indicatorColor="primary"
+                onChange={(event: any, newValue: React.SetStateAction<number>) => {
+                    setValue(newValue);
+                }}
+                >
+                <Tab label="Scene Viewer" />
+                <Tab label="Video Player" />
+                </Tabs>
+                {value === 0 && <SceneViewer />}
+                {value === 1 && <div><VideoPlayerComponent /></div>}
+            </Paper>
+        </div>
+    );
+};
+
+export default ComponentsTab;

examples/react-app/src/configs.ts

@@ -37,3 +37,31 @@ export const entityQueries: TwinMakerQuery[] = [
 export const dataBindingTemplate: IDataBindingTemplate = {
   'sel_entity': (entityQueries[0] as TwinMakerEntityHistoryQuery).entityId
 }
+
+// Video Player
+
+/**
+ * Simple Mode
+ * Specify the video stream name to stream video directly from Kinesis Video Streams
+ */
+ export const kvsStreamName = '<your-kvs-stream-name>';
+
+ /**
+  * AWS IoT TwinMaker Mode
+  * Specify videoEntityId and videoComponentName from AWS IoT TwinMaker workspace
+  */
+ export const videoEntityId = undefined;
+ export const videoComponentName = undefined;
+
+ /**
+  * Specify time range for the video player
+  */
+ export const videoViewport: Viewport = {
+   // Live video playback - use duration
+   duration: '0',
+   // On-Demand video playback - specify start and end time for video
+   /*
+   start: new Date('<your-start-time>'),
+   end: new Date('<your-end-time>'),
+   */
+ };