fix(renderer-app): error of whiteboard resize (#1323)

netless-io · Jan 21, 2022 · dfefbac · dfefbac
1 parent 65a7a8b
commit dfefbac
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 15 deletions.
diff --git a/desktop/renderer-app/src/components/Whiteboard.tsx b/desktop/renderer-app/src/components/Whiteboard.tsx
@@ -80,12 +80,15 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
         if (whiteboardEl) {
             const whiteboardRatio = whiteboardStore.getWhiteboardRatio();
 
-            const classRoomRightSideWidth = 304;
+            const isSmallClass = whiteboardStore.smallClassRatio === whiteboardRatio;
+            const classRoomRightSideWidth = whiteboardStore.isRightSideClose ? 0 : 304;
+
             let classRoomTopBarHeight: number;
             let classRoomMinWidth: number;
             let classRoomMinHeight: number;
+            let smallClassAvatarWrapMaxWidth: number;
 
-            if (whiteboardStore.smallClassRatio === whiteboardRatio) {
+            if (isSmallClass) {
                 classRoomTopBarHeight = 182;
                 classRoomMinWidth = 1130;
                 classRoomMinHeight = 610;
@@ -110,6 +113,21 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
                 whiteboardEl.style.minWidth = `${whiteboardMinWidth}px`;
                 whiteboardEl.style.minHeight = `${whiteboardMinWidth * whiteboardRatio}px`;
             }
+
+            const classRoomWidth = whiteboardWidth + classRoomRightSideWidth;
+            const classRoomWithoutRightSideWidth = classRoomMinWidth - classRoomRightSideWidth;
+
+            if (whiteboardStore.isRightSideClose) {
+                smallClassAvatarWrapMaxWidth =
+                    classRoomWidth < classRoomWithoutRightSideWidth
+                        ? classRoomWithoutRightSideWidth
+                        : classRoomWidth;
+            } else {
+                smallClassAvatarWrapMaxWidth =
+                    classRoomWidth < classRoomMinWidth ? classRoomMinWidth : classRoomWidth;
+            }
+
+            whiteboardStore.updateSmallClassAvatarWrapMaxWidth(smallClassAvatarWrapMaxWidth);
         }
     }, [whiteboardEl, whiteboardStore]);
 
@@ -123,6 +141,11 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
         };
     }, [whiteboardEl, whiteboardOnResize]);
 
+    useEffect(() => {
+        whiteboardOnResize();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [whiteboardStore.isRightSideClose]);
+
     const bindWhiteboard = useCallback((ref: HTMLDivElement | null) => {
         if (ref) {
             setWhiteboardEl(ref);

diff --git a/desktop/renderer-app/src/pages/BigClassPage/index.tsx b/desktop/renderer-app/src/pages/BigClassPage/index.tsx
@@ -294,7 +294,10 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
                         )
                     }
                     title={isRealtimeSideOpen ? t("side-panel.hide") : t("side-panel.show")}
-                    onClick={handleSideOpenerSwitch}
+                    onClick={() => {
+                        openRealtimeSide(isRealtimeSideOpen => !isRealtimeSideOpen);
+                        whiteboardStore.setRightSideClose(isRealtimeSideOpen);
+                    }}
                 />
             </>
         );
@@ -363,10 +366,6 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
         );
     }
 
-    function handleSideOpenerSwitch(): void {
-        openRealtimeSide(isRealtimeSideOpen => !isRealtimeSideOpen);
-    }
-
     function onVideoAvatarExpand(): void {
         setMainSpeaker(mainSpeaker =>
             mainSpeaker?.userUUID === classRoomStore.users.creator?.userUUID

diff --git a/desktop/renderer-app/src/pages/OneToOnePage/index.tsx b/desktop/renderer-app/src/pages/OneToOnePage/index.tsx
@@ -252,7 +252,10 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
                         )
                     }
                     title={isRealtimeSideOpen ? t("side-panel.hide") : t("side-panel.show")}
-                    onClick={handleSideOpenerSwitch}
+                    onClick={() => {
+                        openRealtimeSide(isRealtimeSideOpen => !isRealtimeSideOpen);
+                        whiteboardStore.setRightSideClose(isRealtimeSideOpen);
+                    }}
                 />
             </>
         );
@@ -296,10 +299,6 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
         );
     }
 
-    function handleSideOpenerSwitch(): void {
-        openRealtimeSide(isRealtimeSideOpen => !isRealtimeSideOpen);
-    }
-
     function updateCloudRecordLayout(): void {
         const { creator } = classRoomStore.users;
         const backgroundConfig: AgoraCloudRecordBackgroundConfigItem[] = [];

diff --git a/desktop/renderer-app/src/pages/SmallClassPage/SmallClassPage.less b/desktop/renderer-app/src/pages/SmallClassPage/SmallClassPage.less
@@ -28,7 +28,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/desktop/renderer-app/src/pages/SmallClassPage/index.tsx b/desktop/renderer-app/src/pages/SmallClassPage/index.tsx
@@ -204,7 +204,10 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
 
     function renderAvatars(): React.ReactNode {
         return (
-            <div className="realtime-avatars-wrap">
+            <div
+                className="realtime-avatars-wrap"
+                style={{ maxWidth: `${whiteboardStore.smallClassAvatarWrapMaxWidth}px` }}
+            >
                 <div className="realtime-avatars">
                     <SmallClassAvatar
                         avatarUser={classRoomStore.users.creator}
@@ -320,7 +323,10 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
                         )
                     }
                     title={isRealtimeSideOpen ? t("side-panel.hide") : t("side-panel.show")}
-                    onClick={() => openRealtimeSide(isRealtimeSideOpen => !isRealtimeSideOpen)}
+                    onClick={() => {
+                        openRealtimeSide(isRealtimeSideOpen => !isRealtimeSideOpen);
+                        whiteboardStore.setRightSideClose(isRealtimeSideOpen);
+                    }}
                 />
             </>
         );

diff --git a/desktop/renderer-app/src/stores/whiteboard-store.ts b/desktop/renderer-app/src/stores/whiteboard-store.ts
@@ -41,10 +41,12 @@ export class WhiteboardStore {
     public isKicked = false;
     public isFocusWindow = false;
     public isWindowMaximization = false;
+    public isRightSideClose = false;
     public currentSceneIndex = 0;
     public scenesCount = 0;
     public smallClassRatio = 8.3 / 16;
     public otherClassRatio = 10.46 / 16;
+    public smallClassAvatarWrapMaxWidth = 0;
 
     /** is room Creator */
     public readonly isCreator: boolean;
@@ -124,6 +126,10 @@ export class WhiteboardStore {
         this.isFocusWindow = isFocus;
     };
 
+    public updateSmallClassAvatarWrapMaxWidth = (smallClassAvatarWrapMaxWidth: number): void => {
+        this.smallClassAvatarWrapMaxWidth = smallClassAvatarWrapMaxWidth;
+    };
+
     public getWhiteboardRatio = (): number => {
         // the Ratio of whiteboard compute method is height / width.
         if (this.getRoomType() === RoomType.SmallClass) {
@@ -148,6 +154,10 @@ export class WhiteboardStore {
         this.isShowPreviewPanel = show;
     };
 
+    public setRightSideClose = (close: boolean): void => {
+        this.isRightSideClose = close;
+    };
+
     public switchMainViewToWriter = async (): Promise<void> => {
         if (this.windowManager && this.isFocusWindow) {
             await this.windowManager.switchMainViewToWriter();