feat(whiteboard): support multi window (netless-io#896)

Cheerego7 · Sep 3, 2021 · 18ce521 · 18ce521
1 parent 97a5b90
commit 18ce521
Show file tree

Hide file tree

Showing 13 changed files with 518 additions and 393 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/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/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.41",
     "@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/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;
     }
 }
 

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 { 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;
@@ -20,14 +19,22 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteb
     const { room } = whiteboardStore;
 
     const bindWhiteboard = useCallback(
-        (ref: HTMLDivElement) => {
-            if (room) {
-                room.bindHtmlElement(ref);
-                if (room.phase === RoomPhase.Connected) {
-                    room.scalePptToFit();
-                }
+        async (ref: HTMLDivElement | null) => {
+            if (ref && room) {
+                await WindowManager.mount({
+                    room,
+                    container: ref,
+                    collectorStyles: {
+                        position: "absolute",
+                        right: "10px",
+                        bottom: "60px",
+                    },
+                });
+                whiteboardStore.onMainViewModeChange();
+                whiteboardStore.onWindowManagerBoxStateChange();
             }
         },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         [room],
     );
 
@@ -66,37 +73,31 @@ 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={bindWhiteboard} className="whiteboard-box" />
             </div>

diff --git a/desktop/renderer-app/src/pages/CloudStoragePage/index.tsx b/desktop/renderer-app/src/pages/CloudStoragePage/index.tsx
@@ -11,7 +11,7 @@ import { queryConvertingTaskStatus } from "../../apiMiddleware/courseware-conver
 import { convertFinish } from "../../apiMiddleware/flatServer/storage";
 import { useIsomorphicLayoutEffect } from "react-use";
 import { MainPageLayoutContainer } from "../../components/MainPageLayoutContainer";
-import { RoomPhase, SceneDefinition } from "white-web-sdk";
+import { SceneDefinition } from "white-web-sdk";
 import { useTranslation } from "react-i18next";
 import { RequestErrorCode } from "../../constants/ErrorCode";
 import { ServerRequestError } from "../../utils/error/ServerRequestError";
@@ -63,12 +63,9 @@ export const CloudStoragePage = observer<CloudStoragePageProps>(function CloudSt
                 await insertImage(file);
                 break;
             }
-            case ".mp3": {
-                insertAudio(file);
-                break;
-            }
+            case ".mp3":
             case ".mp4": {
-                insertVideo(file);
+                insertMediaFile(file);
                 break;
             }
             case ".doc":
@@ -92,6 +89,8 @@ export const CloudStoragePage = observer<CloudStoragePageProps>(function CloudSt
     }
 
     async function insertImage(file: CloudStorageFile): Promise<void> {
+        await whiteboard?.switchMainViewToWriter();
+
         const room = whiteboard?.room;
         if (!room) {
             return;
@@ -132,34 +131,8 @@ export const CloudStoragePage = observer<CloudStoragePageProps>(function CloudSt
         room.completeImageUpload(uuid, file.fileURL);
     }
 
-    function insertAudio(file: CloudStorageFile): void {
-        const room = whiteboard?.room;
-        if (!room) {
-            return;
-        }
-
-        room.insertPlugin("video.js", {
-            originX: -240,
-            originY: -43,
-            width: 480,
-            height: 86,
-            attributes: { src: file.fileURL },
-        });
-    }
-
-    function insertVideo(file: CloudStorageFile): void {
-        const room = whiteboard?.room;
-        if (!room) {
-            return;
-        }
-
-        room.insertPlugin("video.js", {
-            originX: -240,
-            originY: -135,
-            width: 480,
-            height: 270,
-            attributes: { src: file.fileURL },
-        });
+    function insertMediaFile(file: CloudStorageFile): void {
+        whiteboard?.openMediaFileInWindowManager(file.fileURL, file.fileName);
     }
 
     async function insertDocs(file: CloudStorageFile, ext: string): Promise<void> {
@@ -208,19 +181,16 @@ export const CloudStoragePage = observer<CloudStoragePageProps>(function CloudSt
                 f => ({
                     name: v4uuid(),
                     ppt: {
+                        src: f.conversionFileUrl,
                         width: f.width,
                         height: f.height,
-                        src: f.conversionFileUrl,
                         previewURL: f.preview,
                     },
                 }),
             );
             const uuid = v4uuid();
-            room.putScenes(`/${taskUUID}/${uuid}`, scenes);
-            room.setScenePath(`/${taskUUID}/${uuid}/${scenes[0].name}`);
-            if (room.phase === RoomPhase.Connected) {
-                room.scalePptToFit();
-            }
+            const scenesPath = `/${taskUUID}/${uuid}`;
+            whiteboard?.openDocsFileInWindowManager(scenesPath, file.fileName, scenes);
         } else {
             void message.error(t("unable-to-insert-courseware"));
         }