feat(whiteboard): support multi window (#924)

* feat(whiteboard): support multi window (#896) * refactor(desktop): set aspect ratio to 16/9 (#899) * feat(whiteboard): add containerSizeRatio config in windowManager (#900) * chore(ci): add dev branch to check action (#901) * fix(whiteboard): adjust location of collectorContainer element (#903) * refactor(whiteboard): remove vision control (#907) * refactor(whiteboard): remove Vision control * fix(ci): build web and renderer failed * chore(library): upgrade window-manager (#919) * fix(web): should close local tracks on exiting room (#920) * refactor(whiteboard): adjust class room style of whiteboard (#921) * refactor(whiteboard): adjust class room style of whiteboard * fix(type): type fail Co-authored-by: Cheerego7 <48879533+Cheerego7@users.noreply.github.com> Co-authored-by: Leo <1826234293@qq.com> Co-authored-by: hyrious <hyrious@outlook.com>
netless-io · Sep 3, 2021 · 1b7b76b · 1b7b76b
1 parent 97a5b90
commit 1b7b76b
Show file tree

Hide file tree

Showing 33 changed files with 748 additions and 512 deletions.
diff --git a/.commitlintrc.js b/.commitlintrc.js
@@ -48,6 +48,7 @@ module.exports = {
                 "husky",
                 "lint",
                 "project",
+                "vscode",
             ],
         ],
         "scope-case": [2, "always", ["lower-case", "kebab-case"]],

diff --git a/.github/workflows/check-code.yml b/.github/workflows/check-code.yml
@@ -3,6 +3,7 @@ on:
   pull_request:
     branches:
       - main
+      - dev
     paths-ignore:
       - "docs/**"
       - "*.md"

diff --git a/.github/workflows/check-spell.yml b/.github/workflows/check-spell.yml
@@ -3,6 +3,7 @@ on:
   pull_request:
     branches:
       - main
+      - dev
 
 jobs:
   check-spell:

diff --git a/.github/workflows/deploy-web-dev.yml b/.github/workflows/deploy-web-dev.yml
@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - "main"
+      - "dev"
     paths:
       - "web/flat-web/**"
       - "packages/flat-components/src/**"

diff --git a/desktop/main-app/src/utils/IPCActions.ts b/desktop/main-app/src/utils/IPCActions.ts
@@ -51,6 +51,13 @@ const windowActionAsync = (customWindow: CustomSingleWindow): ipc.WindowActionAs
                 window.center();
             }
         },
+        "set-aspect-ratio": args => {
+            window.setAspectRatio(args.aspectRatio);
+
+            const isReset = args.aspectRatio === 0;
+
+            window.setFullScreenable(isReset);
+        },
         "disable-window": args => {
             options.disableClose = args.disable;
         },

diff --git a/desktop/renderer-app/package.json b/desktop/renderer-app/package.json
@@ -8,13 +8,11 @@
     "@netless/combine-player": "^1.1.4",
     "@netless/cursor-tool": "^0.1.0",
     "@netless/fetch-middleware": "^1.0.7",
-    "@netless/page-controller": "^0.0.4",
     "@netless/player-controller": "^0.0.9",
-    "@netless/preview-controller": "^0.0.9",
     "@netless/redo-undo": "^0.0.5",
     "@netless/tool-box": "^0.1.4",
     "@netless/video-js-plugin": "^0.3.6",
-    "@netless/zoom-controller": "^0.1.1",
+    "@netless/window-manager": "^0.1.55",
     "@videojs/vhs-utils": "^2.3.0",
     "agora-rtm-sdk": "^1.4.3",
     "antd": "^4.15.4",
@@ -43,7 +41,7 @@
     "react-virtualized": "^9.22.2",
     "uuid": "^8.3.2",
     "video.js": "7.10.2",
-    "white-web-sdk": "2.13.17"
+    "white-web-sdk": "2.13.19"
   },
   "devDependencies": {
     "@netless/eslint-plugin": "1.1.2",

diff --git a/desktop/renderer-app/src/components/RealtimePanel.less b/desktop/renderer-app/src/components/RealtimePanel.less
@@ -6,6 +6,8 @@
     width: @panel-width;
     height: 100%;
     position: relative;
+    padding-top: 8px;
+    border-left: 0.5px solid #dbe1e9;
 }
 
 .realtime-panel-video-slot {

diff --git a/desktop/renderer-app/src/components/Whiteboard.less b/desktop/renderer-app/src/components/Whiteboard.less
@@ -29,47 +29,20 @@
     z-index: 3;
     bottom: 8px;
     left: 8px;
-}
 
-.zoom-controller-box {
-    position: absolute;
-    left: 76px;
-    z-index: 3;
-    bottom: 8px;
+    &.is-disabled {
+        display: none;
+    }
 }
 
 .page-controller-box {
     position: absolute;
     z-index: 3;
     bottom: 8px;
     right: 8px;
-}
-
-.page-controller-mid-box {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: white;
-    height: 32px;
-    padding-left: 4px;
-    padding-right: 4px;
-    border-radius: 4px;
-    user-select: none;
-    font-size: 12px;
-    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
-}
 
-.page-preview-cell {
-    width: 24px;
-    height: 24px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    background-color: white;
-    border-radius: 2px;
-    &:hover {
-        background: rgba(33, 35, 36, 0.1);
+    &.is-disabled {
+        display: none;
     }
 }
 
@@ -78,3 +51,8 @@
     height: 100%;
     background: #f3f6f9;
 }
+
+.netless-window-manager-sizer::before,
+.netless-window-manager-sizer::after {
+    background: #fff;
+}
diff --git a/desktop/renderer-app/src/components/Whiteboard.tsx b/desktop/renderer-app/src/components/Whiteboard.tsx
@@ -1,16 +1,15 @@
-import PageController from "@netless/page-controller";
-import PreviewController from "@netless/preview-controller";
+import "@netless/window-manager/dist/style.css";
+import "./Whiteboard.less";
+
 import RedoUndo from "@netless/redo-undo";
 import ToolBox from "@netless/tool-box";
-import ZoomController from "@netless/zoom-controller";
 import classNames from "classnames";
 import { observer } from "mobx-react-lite";
-import React, { useCallback } from "react";
-import { RoomPhase } from "white-web-sdk";
-import pagesSVG from "../assets/image/pages.svg";
+import React, { useCallback, useEffect, useState } from "react";
+import { WindowManager } from "@netless/window-manager";
 import { WhiteboardStore } from "../stores/WhiteboardStore";
 import { isSupportedImageType, onDropImage } from "../utils/dnd/image";
-import "./Whiteboard.less";
+import { ScenesController } from "flat-components";
 
 export interface WhiteboardProps {
     whiteboardStore: WhiteboardStore;
@@ -19,17 +18,47 @@ export interface WhiteboardProps {
 export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteboardStore }) {
     const { room } = whiteboardStore;
 
-    const bindWhiteboard = useCallback(
-        (ref: HTMLDivElement) => {
-            if (room) {
-                room.bindHtmlElement(ref);
-                if (room.phase === RoomPhase.Connected) {
-                    room.scalePptToFit();
-                }
+    const [whiteboardEl, setWhiteboardEl] = useState<HTMLElement | null>(null);
+    const [collectorEl, setCollectorEl] = useState<HTMLElement | null>(null);
+
+    useEffect(() => {
+        const mountWindowManager = async (): Promise<void> => {
+            if (whiteboardEl && collectorEl && room) {
+                await WindowManager.mount({
+                    room,
+                    container: whiteboardEl,
+                    collectorContainer: collectorEl,
+                    cursor: true,
+                    /* the containerSizeRatio config limit width and height ratio of windowManager
+                     for make sure windowManager sync in whiteboard. */
+                    containerSizeRatio: whiteboardStore.updateWhiteboardResize(),
+                    collectorStyles: {
+                        position: "absolute",
+                        right: "10px",
+                        bottom: "60px",
+                    },
+                    chessboard: false,
+                });
+                whiteboardStore.onMainViewModeChange();
+                whiteboardStore.onWindowManagerBoxStateChange();
             }
-        },
-        [room],
-    );
+        };
+
+        void mountWindowManager();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [whiteboardEl, collectorEl, room]);
+
+    const bindWhiteboard = useCallback((ref: HTMLDivElement | null) => {
+        if (ref) {
+            setWhiteboardEl(ref);
+        }
+    }, []);
+
+    const bindCollector = useCallback((ref: HTMLDivElement | null) => {
+        if (ref) {
+            setCollectorEl(ref);
+        }
+    }, []);
 
     const onDragOver = useCallback(
         (event: React.DragEvent<HTMLDivElement>) => {
@@ -66,38 +95,33 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteb
                 onDragOver={onDragOver}
                 onDrop={onDrop}
             >
-                <div className="zoom-controller-box">
-                    <ZoomController room={room} />
-                </div>
                 <div className="whiteboard-writable-area">
                     <div className="tool-box-out">
                         <ToolBox room={room} />
                     </div>
-                    <div className="redo-undo-box">
+                    <div
+                        className={classNames("redo-undo-box", {
+                            "is-disabled": whiteboardStore.isWindowMaximization,
+                        })}
+                    >
                         <RedoUndo room={room} />
                     </div>
-                    <div className="page-controller-box">
-                        <div className="page-controller-mid-box">
-                            <PageController room={room} />
-                            <div
-                                className="page-preview-cell"
-                                onClick={whiteboardStore.showPreviewPanel}
-                            >
-                                <img src={pagesSVG} alt={"pages"} />
-                            </div>
-                        </div>
+                    <div
+                        className={classNames("page-controller-box", {
+                            "is-disabled": whiteboardStore.isWindowMaximization,
+                        })}
+                    >
+                        <ScenesController
+                            addScene={whiteboardStore.addMainViewScene}
+                            preScene={whiteboardStore.preMainViewScene}
+                            nextScene={whiteboardStore.nextMainViewScene}
+                            currentSceneIndex={whiteboardStore.currentSceneIndex}
+                            scenesCount={whiteboardStore.scenesCount}
+                            disabled={whiteboardStore.isFocusWindow}
+                        />
                     </div>
-                    <PreviewController
-                        handlePreviewState={whiteboardStore.setPreviewPanel}
-                        isVisible={whiteboardStore.isShowPreviewPanel}
-                        room={room}
-                    />
-                    {/* <DocsCenter
-                        handleDocCenterState={whiteboardStore.setFileOpen}
-                        isFileOpen={whiteboardStore.isFileOpen}
-                        room={room}
-                    /> */}
                 </div>
+                <div ref={bindCollector} className="collector-container" />
                 <div ref={bindWhiteboard} className="whiteboard-box" />
             </div>
         )

diff --git a/desktop/renderer-app/src/pages/BigClassPage/index.tsx b/desktop/renderer-app/src/pages/BigClassPage/index.tsx
@@ -12,7 +12,7 @@ import {
 import { observer } from "mobx-react-lite";
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { useParams } from "react-router-dom";
-import { RoomPhase, ViewMode } from "white-web-sdk";
+import { RoomPhase } from "white-web-sdk";
 import { useTranslation } from "react-i18next";
 import { AgoraCloudRecordBackgroundConfigItem } from "../../apiMiddleware/flatServer/agora";
 import { RoomStatus, RoomType } from "../../apiMiddleware/flatServer/constants";
@@ -307,14 +307,15 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
                     />
                 )}
 
-                {whiteboardStore.isWritable && (
+                {/* {whiteboardStore.isWritable && (
                     <TopBarRightBtn
                         title="Vision control"
                         icon="follow"
                         active={whiteboardStore.viewMode === ViewMode.Broadcaster}
                         onClick={handleRoomController}
                     />
-                )}
+                )} */}
+
                 {/* <TopBarRightBtn
                     title="Docs center"
                     icon="folder"
@@ -400,19 +401,19 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
         );
     }
 
-    function handleRoomController(): void {
-        const { room } = whiteboardStore;
-        if (!room) {
-            return;
-        }
-        if (room.state.broadcastState.mode !== ViewMode.Broadcaster) {
-            room.setViewMode(ViewMode.Broadcaster);
-            void message.success(t("follow-your-perspective-tips"));
-        } else {
-            room.setViewMode(ViewMode.Freedom);
-            void message.success(t("Stop-following-your-perspective-tips"));
-        }
-    }
+    // function handleRoomController(): void {
+    //     const { room } = whiteboardStore;
+    //     if (!room) {
+    //         return;
+    //     }
+    //     if (room.state.broadcastState.mode !== ViewMode.Broadcaster) {
+    //         room.setViewMode(ViewMode.Broadcaster);
+    //         void message.success(t("follow-your-perspective-tips"));
+    //     } else {
+    //         room.setViewMode(ViewMode.Freedom);
+    //         void message.success(t("Stop-following-your-perspective-tips"));
+    //     }
+    // }
 
     function handleSideOpenerSwitch(): void {
         openRealtimeSide(isRealtimeSideOpen => !isRealtimeSideOpen);