Added Agora Video Calling, Cloud Recording and Replaying.

config/.env

@@ -2,6 +2,15 @@ NETLESS_SDK_TOKEN=
 NETLESS_APP_IDENTIFIER=
 
 AGORA_APP_ID=
+AGORA_RESTFUL_ID=
+AGORA_RESTFUL_SECRET=
+
+AGORA_OSS_ACCESS_KEY_ID=
+AGORA_OSS_ACCESS_KEY_SECRET=
+AGORA_OSS_REGION=
+AGORA_OSS_BUCKET=
+AGORA_OSS_FOLDER=
+AGORA_OSS_PREFIX=
 
 OSS_ACCESS_KEY_ID=
 OSS_ACCESS_KEY_SECRET=

src/renderer-app/.eslintrc.js

@@ -18,7 +18,7 @@ module.exports = {
         "array-callback-return": "warn",
         "default-case": ["warn", { commentPattern: "^no default$" }],
         "dot-location": ["warn", "property"],
-        eqeqeq: ["warn", "smart"],
+        eqeqeq: ["error", "always"],
         "new-parens": "warn",
         "no-array-constructor": "warn",
         "no-caller": "warn",
@@ -196,6 +196,7 @@ module.exports = {
         "jsx-a11y/role-has-required-aria-props": "warn",
         "jsx-a11y/role-supports-aria-props": "warn",
         "jsx-a11y/scope": "warn",
+        "jsx-a11y/media-has-caption": "off",
 
         // https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks
         "react-hooks/rules-of-hooks": "error",

src/renderer-app/package.json

@@ -5,6 +5,7 @@
   "homepage": ".",
   "dependencies": {
     "@ant-design/icons": "^4.2.2",
+    "@netless/combine-player": "^1.1.0",
     "@netless/cursor-tool": "^0.0.4",
     "@netless/docs-center": "^0.0.2",
     "@netless/fetch-middleware": "^1.0.6",
@@ -20,8 +21,10 @@
     "@netless/zoom-controller": "^0.0.3",
     "@videojs/vhs-utils": "2.2.1",
     "antd": "^4.6.1",
+    "classnames": "^2.2.6",
     "extract-zip": "^2.0.1",
     "fs-extra": "^9.0.1",
+    "memoize-one": "^5.1.1",
     "node-downloader-helper": "^1.0.13",
     "polly-js": "^1.6.7",
     "react": "^16.13.1",
@@ -40,6 +43,7 @@
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.1",
+    "@types/classnames": "^2.2.11",
     "@types/fs-extra": "^9.0.1",
     "@types/node": "^14.14.6",
     "@types/node-downloader-helper": "^1.0.2",

src/renderer-app/src/HistoryPage.tsx

@@ -20,6 +20,12 @@ export type LocalStorageRoomDataType = {
     userId: string;
     roomName?: string;
     cover?: string;
+    recordings?: Array<{
+        uuid: string;
+        startTime: number;
+        endTime: number;
+        videoUrl?: string;
+    }>;
 };
 
 export default class JoinPage extends React.Component<RouteComponentProps<{}>, JoinPageStates> {

src/renderer-app/src/ReplayPage.less

@@ -1,67 +1,67 @@
-.player-box {
-    width: 100%;
-    height: 100%;
-}
-//
-.player-out-box {
+.replay-container {
     width: 100%;
     height: 100vh;
     display: flex;
-    flex-direction: row;
-}
-//
-.player-big-icon {
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    position: absolute;
-    z-index: 1000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    background-color: white;
-    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.08);
 }
-//
-.player-mask {
-    width: 100%;
+
+.replay-whiteboard-wrap {
+    position: relative;
+    flex: 1;
     height: 100%;
-    position: absolute;
-    z-index: 99;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
 }
-//
-.player-board {
+
+.replay-whiteboard {
     width: 100%;
     height: 100%;
-    position: relative;
-    .operation {
-        width: 100px;
-        text-align: center;
-    }
-    .phase {
-        width: 100px;
-        text-align: right;
-    }
+    background: #f3f6f9;
 }
-//
-.player-board-inner {
+
+.replay-overlay {
+    position: absolute;
+    z-index: 100;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
-    position: relative;
 }
 
-.white-board-loading {
-    width: 100%;
-    height: 100%;
+.replay-play-overlay:extend(.replay-overlay) {
     display: flex;
     justify-content: center;
     align-items: center;
+}
+
+.replay-play-icon {
+    width: 80px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    outline: none;
+    border-radius: 50%;
+    background-color: #fff;
+    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.08);
+    cursor: pointer;
+    transition: backgroud-color 0.4s;
+
+    &:hover,
+    &:focus,
+    &:active {
+        box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.2);
+    }
+}
+
+.replay-exit {
     position: absolute;
-    z-index: 1002;
-    background-color: white;
+    z-index: 200;
+    top: 21px;
+    left: 18px;
+    border-radius: 50%;
+    overflow: hidden;
+    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.08);
+
+    .topbar-content-right-cell {
+        margin: 0;
+    }
 }