feat(flat-web): add big class page (#719)

* feat(flat-web): add big class page

* chore(ci): increase ram for flat-web

.github/workflows/code-check.yml

@@ -76,7 +76,7 @@ jobs:
         if: steps.filter.outputs.main == 'true'
 
       - name: Build flat-web
-        run: yarn workspace flat-web build
+        run: NODE_OPTIONS="--max-old-space-size=4096" yarn workspace flat-web build
         if: steps.filter.outputs.flat-web == 'true'
 
       - name: Check i18n

web/flat-web/package.json

@@ -33,8 +33,13 @@
     "@loadable/component": "^5.15.0",
     "@netless/combine-player": "^1.1.5",
     "@netless/cursor-tool": "^0.1.0",
+    "@netless/page-controller": "^0.0.4",
+    "@netless/preview-controller": "^0.0.9",
+    "@netless/redo-undo": "^0.0.5",
+    "@netless/tool-box": "^0.1.5",
     "@netless/white-audio-plugin": "^2.0.3",
     "@netless/white-video-plugin": "^2.0.3",
+    "@netless/zoom-controller": "^0.1.1",
     "agora-rtc-sdk-ng": "^4.5.0",
     "agora-rtm-sdk": "^1.4.3",
     "antd": "^4.15.4",

web/flat-web/src/AppRoutes/route-pages.ts

@@ -8,6 +8,12 @@ export type RoutePages = {
     };
 };
 
+/**
+ * NOTE: If you see error from "loadable-component", the real error
+ *       message may be hidden by `import()` below. You can change
+ *       `import("../pages/SomePage")` to
+ *       `Promise.resolve({ default: SomePage })` to see the real error.
+ */
 export const routePages: RoutePages = {
     [RouteNameType.LoginPage]: {
         title: "Flat Login",
@@ -27,7 +33,7 @@ export const routePages: RoutePages = {
     },
     [RouteNameType.BigClassPage]: {
         title: "BigClassPage",
-        component: () => Promise.resolve({ default: () => null }),
+        component: () => import("../pages/BigClassPage"),
     },
     [RouteNameType.RoomDetailPage]: {
         title: "RoomDetailPage",

web/flat-web/src/components/AvatarCanvas.less

@@ -0,0 +1,4 @@
+.video-avatar-canvas {
+    width: 100%;
+    height: 100%;
+}