feat(whiteboard): add the resize EventListener event to change whiteb…

…oard size (#941)
netless-io · Sep 9, 2021 · b4b9805 · b4b9805
1 parent b656bc6
commit b4b9805
Show file tree

Hide file tree

Showing 12 changed files with 184 additions and 72 deletions.
diff --git a/packages/flat-components/src/components/ClassroomPage/TopBar/style.less b/packages/flat-components/src/components/ClassroomPage/TopBar/style.less
@@ -15,7 +15,6 @@
     font-size: 16px;
     // Windows 下菜单栏在窗口以内，需要分割
     border-top: 0.5px #dbe1ea solid;
-    border-bottom: 0.5px solid #dbe1e9;
     user-select: none;
     &.isMac {
         border-top: none;

diff --git a/web/flat-web/package.json b/web/flat-web/package.json
@@ -40,7 +40,7 @@
     "@netless/redo-undo": "^0.0.5",
     "@netless/tool-box": "^0.1.5",
     "@netless/video-js-plugin": "^0.3.6",
-    "@netless/window-manager": "0.1.55",
+    "@netless/window-manager": "^0.1.63-canary.1",
     "@videojs/vhs-utils": "^2.3.0",
     "@zip.js/zip.js": "^2.3.7",
     "agora-rtc-sdk-ng": "^4.5.0",

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

diff --git a/web/flat-web/src/components/Whiteboard.tsx b/web/flat-web/src/components/Whiteboard.tsx
@@ -31,7 +31,7 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteb
                     collectorContainer: collectorEl,
                     /* the containerSizeRatio config limit width and height ratio of windowManager
                      for make sure windowManager sync in whiteboard. */
-                    containerSizeRatio: whiteboardStore.updateWhiteboardResize(),
+                    containerSizeRatio: whiteboardStore.getWhiteboardRatio(),
                     collectorStyles: {
                         position: "absolute",
                         right: "10px",
@@ -48,6 +48,17 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteb
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [whiteboardEl, collectorEl, room]);
 
+    useEffect(() => {
+        if (whiteboardEl) {
+            whiteboardOnResize();
+            window.addEventListener("resize", whiteboardOnResize);
+        }
+        return () => {
+            window.removeEventListener("resize", whiteboardOnResize);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [whiteboardEl]);
+
     const bindWhiteboard = useCallback((ref: HTMLDivElement | null) => {
         if (ref) {
             setWhiteboardEl(ref);
@@ -86,6 +97,45 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteb
         [room],
     );
 
+    const whiteboardOnResize = (): void => {
+        if (whiteboardEl) {
+            const whiteboardRatio = whiteboardStore.getWhiteboardRatio();
+
+            if (window.innerHeight < 600 || window.innerWidth < 800) {
+                whiteboardEl.style.minWidth = "550px";
+                whiteboardEl.style.minHeight = `${550 * whiteboardRatio}px`;
+            }
+
+            if (whiteboardStore.smallClassRatio === whiteboardRatio) {
+                const classRoomRightSideWidth = 304;
+                const classRoomTopBarHeight = 182;
+
+                const whiteboardWidth = Math.min(
+                    window.innerWidth - classRoomRightSideWidth,
+                    (window.innerHeight - classRoomTopBarHeight) / whiteboardRatio,
+                );
+
+                const whiteboardHeight = whiteboardWidth * whiteboardRatio;
+
+                whiteboardEl.style.width = `${whiteboardWidth}px`;
+                whiteboardEl.style.height = `${whiteboardHeight}px`;
+            } else {
+                const classRoomRightSideWidth = 304;
+                const classRoomTopBarHeight = 50;
+
+                const whiteboardWidth = Math.min(
+                    window.innerWidth - classRoomRightSideWidth,
+                    (window.innerHeight - classRoomTopBarHeight) / whiteboardRatio,
+                );
+
+                const whiteboardHeight = whiteboardWidth * whiteboardRatio;
+
+                whiteboardEl.style.width = `${whiteboardWidth}px`;
+                whiteboardEl.style.height = `${whiteboardHeight}px`;
+            }
+        }
+    };
+
     return (
         room && (
             <div

diff --git a/web/flat-web/src/pages/BigClassPage/BigClassPage.less b/web/flat-web/src/pages/BigClassPage/BigClassPage.less
@@ -1,9 +1,16 @@
+body {
+    background-color: #dfe1e5;
+}
+
+.realtime-container {
+    text-align: center;
+}
+
 .realtime-box {
-    width: 100%;
-    height: 100vh;
     overflow: hidden;
-    display: flex;
+    display: inline-flex;
     flex-direction: column;
+    background-color: #fff;
 
     .container {
         position: relative;

diff --git a/web/flat-web/src/pages/BigClassPage/index.tsx b/web/flat-web/src/pages/BigClassPage/index.tsx
@@ -171,26 +171,28 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
     }
 
     return (
-        <div className="realtime-box">
-            <TopBar
-                isMac={runtime.isMac}
-                left={renderTopBarLeft()}
-                center={renderTopBarCenter()}
-                right={renderTopBarRight()}
-            />
-            <div className="realtime-content">
-                <div className="container">
-                    <ShareScreen shareScreenStore={shareScreenStore} />
-                    <Whiteboard whiteboardStore={whiteboardStore} />
+        <div className="realtime-container">
+            <div className="realtime-box">
+                <TopBar
+                    isMac={runtime.isMac}
+                    left={renderTopBarLeft()}
+                    center={renderTopBarCenter()}
+                    right={renderTopBarRight()}
+                />
+                <div className="realtime-content">
+                    <div className="container">
+                        <ShareScreen shareScreenStore={shareScreenStore} />
+                        <Whiteboard whiteboardStore={whiteboardStore} />
+                    </div>
+                    {renderRealtimePanel()}
                 </div>
-                {renderRealtimePanel()}
+                <ExitRoomConfirm isCreator={classRoomStore.isCreator} {...exitConfirmModalProps} />
+                <RoomStatusStoppedModal
+                    isCreator={classRoomStore.isCreator}
+                    isRemoteLogin={classRoomStore.isRemoteLogin}
+                    roomStatus={classRoomStore.roomStatus}
+                />
             </div>
-            <ExitRoomConfirm isCreator={classRoomStore.isCreator} {...exitConfirmModalProps} />
-            <RoomStatusStoppedModal
-                isCreator={classRoomStore.isCreator}
-                isRemoteLogin={classRoomStore.isRemoteLogin}
-                roomStatus={classRoomStore.roomStatus}
-            />
         </div>
     );
 

diff --git a/web/flat-web/src/pages/OneToOnePage/OneToOnePage.less b/web/flat-web/src/pages/OneToOnePage/OneToOnePage.less
@@ -1,9 +1,16 @@
+body {
+    background-color: #dfe1e5;
+}
+
+.one-to-one-realtime-container {
+    text-align: center;
+}
+
 .one-to-one-realtime-box {
-    width: 100%;
-    height: 100vh;
     overflow: hidden;
-    display: flex;
+    display: inline-flex;
     flex-direction: column;
+    background-color: #fff;
 
     .container {
         position: relative;

diff --git a/web/flat-web/src/pages/OneToOnePage/index.tsx b/web/flat-web/src/pages/OneToOnePage/index.tsx
@@ -124,26 +124,28 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
     }
 
     return (
-        <div className="one-to-one-realtime-box">
-            <TopBar
-                isMac={runtime.isMac}
-                left={renderTopBarLeft()}
-                center={renderTopBarCenter()}
-                right={renderTopBarRight()}
-            />
-            <div className="one-to-one-realtime-content">
-                <div className="container">
-                    <ShareScreen shareScreenStore={shareScreenStore} />
-                    <Whiteboard whiteboardStore={whiteboardStore} />
+        <div className="one-to-one-realtime-container">
+            <div className="one-to-one-realtime-box">
+                <TopBar
+                    isMac={runtime.isMac}
+                    left={renderTopBarLeft()}
+                    center={renderTopBarCenter()}
+                    right={renderTopBarRight()}
+                />
+                <div className="one-to-one-realtime-content">
+                    <div className="container">
+                        <ShareScreen shareScreenStore={shareScreenStore} />
+                        <Whiteboard whiteboardStore={whiteboardStore} />
+                    </div>
+                    {renderRealtimePanel()}
                 </div>
-                {renderRealtimePanel()}
+                <ExitRoomConfirm isCreator={classRoomStore.isCreator} {...exitConfirmModalProps} />
+                <RoomStatusStoppedModal
+                    isCreator={classRoomStore.isCreator}
+                    isRemoteLogin={classRoomStore.isRemoteLogin}
+                    roomStatus={classRoomStore.roomStatus}
+                />
             </div>
-            <ExitRoomConfirm isCreator={classRoomStore.isCreator} {...exitConfirmModalProps} />
-            <RoomStatusStoppedModal
-                isCreator={classRoomStore.isCreator}
-                isRemoteLogin={classRoomStore.isRemoteLogin}
-                roomStatus={classRoomStore.roomStatus}
-            />
         </div>
     );
 

diff --git a/web/flat-web/src/pages/SmallClassPage/SmallClassPage.less b/web/flat-web/src/pages/SmallClassPage/SmallClassPage.less
@@ -1,9 +1,16 @@
+body {
+    background-color: #dfe1e5;
+}
+
+.realtime-container {
+    text-align: center;
+}
+
 .realtime-box {
-    width: 100%;
-    height: 100vh;
     overflow: hidden;
-    display: flex;
+    display: inline-flex;
     flex-direction: column;
+    background-color: #fff;
 
     .container {
         position: relative;
@@ -23,7 +30,6 @@
     height: 130px;
     border-top: 0.5px #dbe1ea solid;
     box-shadow: 0px 8px 24px 0px rgba(68, 78, 96, 0.08);
-    border-bottom: 0.5px solid #dbe1e9;
 
     &::-webkit-scrollbar {
         display: none;

diff --git a/web/flat-web/src/pages/SmallClassPage/index.tsx b/web/flat-web/src/pages/SmallClassPage/index.tsx
@@ -150,27 +150,29 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
     }
 
     return (
-        <div className="realtime-box">
-            <TopBar
-                isMac={runtime.isMac}
-                left={renderTopBarLeft()}
-                center={renderTopBarCenter()}
-                right={renderTopBarRight()}
-            />
-            {renderAvatars()}
-            <div className="realtime-content">
-                <div className="container">
-                    <ShareScreen shareScreenStore={shareScreenStore} />
-                    <Whiteboard whiteboardStore={whiteboardStore} />
+        <div className="realtime-container">
+            <div className="realtime-box">
+                <TopBar
+                    isMac={runtime.isMac}
+                    left={renderTopBarLeft()}
+                    center={renderTopBarCenter()}
+                    right={renderTopBarRight()}
+                />
+                {renderAvatars()}
+                <div className="realtime-content">
+                    <div className="container">
+                        <ShareScreen shareScreenStore={shareScreenStore} />
+                        <Whiteboard whiteboardStore={whiteboardStore} />
+                    </div>
+                    {renderRealtimePanel()}
                 </div>
-                {renderRealtimePanel()}
+                <ExitRoomConfirm isCreator={classRoomStore.isCreator} {...exitConfirmModalProps} />
+                <RoomStatusStoppedModal
+                    isCreator={classRoomStore.isCreator}
+                    isRemoteLogin={classRoomStore.isRemoteLogin}
+                    roomStatus={classRoomStore.roomStatus}
+                />
             </div>
-            <ExitRoomConfirm isCreator={classRoomStore.isCreator} {...exitConfirmModalProps} />
-            <RoomStatusStoppedModal
-                isCreator={classRoomStore.isCreator}
-                isRemoteLogin={classRoomStore.isRemoteLogin}
-                roomStatus={classRoomStore.roomStatus}
-            />
         </div>
     );
 

diff --git a/web/flat-web/src/stores/WhiteboardStore.ts b/web/flat-web/src/stores/WhiteboardStore.ts
@@ -104,7 +104,7 @@ export class WhiteboardStore {
         this.isFocusWindow = isFocus;
     };
 
-    public updateWhiteboardResize = (): number => {
+    public getWhiteboardRatio = (): number => {
         // the Ratio of whiteboard compute method is height / width.
         if (this.roomType === RoomType.SmallClass) {
             return this.smallClassRatio;