From df6a2c8a540ccd4860431499e7bc567d325e5648 Mon Sep 17 00:00:00 2001
From: cheerchen <meetcheerego@gmail.com>
Date: Mon, 25 Oct 2021 17:55:59 +0800
Subject: [PATCH] fix(whiteboard): window-manager not mount when whiteboard was
 connected

---
 desktop/renderer-app/src/components/Whiteboard.tsx    | 10 ++--------
 desktop/renderer-app/src/pages/BigClassPage/index.tsx |  6 +++++-
 desktop/renderer-app/src/pages/OneToOnePage/index.tsx |  6 +++++-
 .../renderer-app/src/pages/SmallClassPage/index.tsx   |  6 +++++-
 web/flat-web/src/components/Whiteboard.tsx            | 11 +++--------
 web/flat-web/src/pages/BigClassPage/index.tsx         |  6 +++++-
 web/flat-web/src/pages/OneToOnePage/index.tsx         | 10 +++++++---
 web/flat-web/src/pages/SmallClassPage/index.tsx       |  6 +++++-
 8 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/desktop/renderer-app/src/components/Whiteboard.tsx b/desktop/renderer-app/src/components/Whiteboard.tsx
index bb9cd466891..93d6dfe2e28 100644
--- a/desktop/renderer-app/src/components/Whiteboard.tsx
+++ b/desktop/renderer-app/src/components/Whiteboard.tsx
@@ -10,7 +10,6 @@ import { WindowManager } from "@netless/window-manager";
 import { WhiteboardStore } from "../stores/whiteboard-store";
 import { isSupportedImageType, onDropImage } from "../utils/dnd/image";
 import { ScenesController } from "flat-components";
-import { useIsUnMounted } from "../utils/hooks/lifecycle";
 
 export interface WhiteboardProps {
     whiteboardStore: WhiteboardStore;
@@ -18,7 +17,6 @@ export interface WhiteboardProps {
 
 export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteboardStore }) {
     const { room } = whiteboardStore;
-    const isUnMountedRef = useIsUnMounted();
 
     const [whiteboardEl, setWhiteboardEl] = useState<HTMLElement | null>(null);
     const [collectorEl, setCollectorEl] = useState<HTMLElement | null>(null);
@@ -41,12 +39,8 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteb
                     },
                     chessboard: false,
                 });
-                if (isUnMountedRef.current) {
-                    whiteboardStore.destroyWindowManager();
-                } else {
-                    whiteboardStore.onMainViewModeChange();
-                    whiteboardStore.onWindowManagerBoxStateChange();
-                }
+                whiteboardStore.onMainViewModeChange();
+                whiteboardStore.onWindowManagerBoxStateChange();
             }
         };
 
diff --git a/desktop/renderer-app/src/pages/BigClassPage/index.tsx b/desktop/renderer-app/src/pages/BigClassPage/index.tsx
index d170bae3482..a4d99ee6063 100644
--- a/desktop/renderer-app/src/pages/BigClassPage/index.tsx
+++ b/desktop/renderer-app/src/pages/BigClassPage/index.tsx
@@ -106,6 +106,7 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
     const [isRealtimeSideOpen, openRealtimeSide] = useState(true);
 
     const updateLayoutTimeoutRef = useRef(NaN);
+    const loadingPageRef = useRef(false);
 
     // control whiteboard writable
     useEffect(() => {
@@ -171,7 +172,9 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
         whiteboardStore.phase === RoomPhase.Disconnecting ||
         whiteboardStore.phase === RoomPhase.Reconnecting
     ) {
-        return <LoadingPage />;
+        loadingPageRef.current = true;
+    } else {
+        loadingPageRef.current = false;
     }
 
     function handleShareScreen(): void {
@@ -184,6 +187,7 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
 
     return (
         <div className="realtime-box">
+            {loadingPageRef.current && <LoadingPage />}
             <TopBar
                 isMac={runtime.isMac}
                 left={renderTopBarLeft()}
diff --git a/desktop/renderer-app/src/pages/OneToOnePage/index.tsx b/desktop/renderer-app/src/pages/OneToOnePage/index.tsx
index 7fccbf108ea..c76f14ac336 100644
--- a/desktop/renderer-app/src/pages/OneToOnePage/index.tsx
+++ b/desktop/renderer-app/src/pages/OneToOnePage/index.tsx
@@ -82,6 +82,7 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
     const [isRealtimeSideOpen, openRealtimeSide] = useState(true);
 
     const updateLayoutTimeoutRef = useRef(NaN);
+    const loadingPageRef = useRef(false);
 
     const { t } = useTranslation();
 
@@ -129,7 +130,9 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
         whiteboardStore.phase === RoomPhase.Disconnecting ||
         whiteboardStore.phase === RoomPhase.Reconnecting
     ) {
-        return <LoadingPage />;
+        loadingPageRef.current = true;
+    } else {
+        loadingPageRef.current = false;
     }
 
     function handleShareScreen(): void {
@@ -142,6 +145,7 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
 
     return (
         <div className="one-to-one-realtime-box">
+            {loadingPageRef.current && <LoadingPage />}
             <TopBar
                 isMac={runtime.isMac}
                 left={renderTopBarLeft()}
diff --git a/desktop/renderer-app/src/pages/SmallClassPage/index.tsx b/desktop/renderer-app/src/pages/SmallClassPage/index.tsx
index 99ec287248e..5cf09bc93a5 100644
--- a/desktop/renderer-app/src/pages/SmallClassPage/index.tsx
+++ b/desktop/renderer-app/src/pages/SmallClassPage/index.tsx
@@ -109,6 +109,7 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
     const [isRealtimeSideOpen, openRealtimeSide] = useState(true);
 
     const updateLayoutTimeoutRef = useRef(NaN);
+    const loadingPageRef = useRef(false);
 
     const { t } = useTranslation();
 
@@ -150,7 +151,9 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
         phase === RoomPhase.Disconnecting ||
         phase === RoomPhase.Reconnecting
     ) {
-        return <LoadingPage />;
+        loadingPageRef.current = true;
+    } else {
+        loadingPageRef.current = false;
     }
 
     function handleShareScreen(): void {
@@ -163,6 +166,7 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
 
     return (
         <div className="realtime-box">
+            {loadingPageRef.current && <LoadingPage />}
             <TopBar
                 isMac={runtime.isMac}
                 left={renderTopBarLeft()}
diff --git a/web/flat-web/src/components/Whiteboard.tsx b/web/flat-web/src/components/Whiteboard.tsx
index f5ae4c575c3..23dc705f688 100644
--- a/web/flat-web/src/components/Whiteboard.tsx
+++ b/web/flat-web/src/components/Whiteboard.tsx
@@ -10,7 +10,6 @@ import React, { useCallback, useEffect, useState } from "react";
 import { WhiteboardStore } from "../stores/whiteboard-store";
 import { isSupportedImageType, onDropImage } from "../utils/dnd/image";
 import { ScenesController } from "../../../../packages/flat-components/src";
-import { useIsUnMounted } from "../utils/hooks/lifecycle";
 
 export interface WhiteboardProps {
     whiteboardStore: WhiteboardStore;
@@ -18,7 +17,6 @@ export interface WhiteboardProps {
 
 export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteboardStore }) {
     const { room } = whiteboardStore;
-    const isUnMountedRef = useIsUnMounted();
 
     const [whiteboardEl, setWhiteboardEl] = useState<HTMLElement | null>(null);
     const [collectorEl, setCollectorEl] = useState<HTMLElement | null>(null);
@@ -41,12 +39,9 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteb
                     },
                     chessboard: false,
                 });
-                if (isUnMountedRef.current) {
-                    whiteboardStore.destroyWindowManager();
-                } else {
-                    whiteboardStore.onMainViewModeChange();
-                    whiteboardStore.onWindowManagerBoxStateChange();
-                }
+
+                whiteboardStore.onMainViewModeChange();
+                whiteboardStore.onWindowManagerBoxStateChange();
             }
         };
 
diff --git a/web/flat-web/src/pages/BigClassPage/index.tsx b/web/flat-web/src/pages/BigClassPage/index.tsx
index 16ae2132549..ab42d6b564c 100644
--- a/web/flat-web/src/pages/BigClassPage/index.tsx
+++ b/web/flat-web/src/pages/BigClassPage/index.tsx
@@ -104,6 +104,7 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
     const [isRealtimeSideOpen, openRealtimeSide] = useState(true);
 
     const updateLayoutTimeoutRef = useRef(NaN);
+    const loadingPageRef = useRef(false);
 
     // control whiteboard writable
     useEffect(() => {
@@ -169,11 +170,14 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
         whiteboardStore.phase === RoomPhase.Disconnecting ||
         whiteboardStore.phase === RoomPhase.Reconnecting
     ) {
-        return <LoadingPage />;
+        loadingPageRef.current = true;
+    } else {
+        loadingPageRef.current = false;
     }
 
     return (
         <div className="realtime-container">
+            {loadingPageRef.current && <LoadingPage />}
             <div className="realtime-box">
                 <TopBar
                     isMac={runtime.isMac}
diff --git a/web/flat-web/src/pages/OneToOnePage/index.tsx b/web/flat-web/src/pages/OneToOnePage/index.tsx
index 99468108f66..62be6c2e715 100644
--- a/web/flat-web/src/pages/OneToOnePage/index.tsx
+++ b/web/flat-web/src/pages/OneToOnePage/index.tsx
@@ -77,6 +77,7 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
     const [isRealtimeSideOpen, openRealtimeSide] = useState(true);
 
     const updateLayoutTimeoutRef = useRef(NaN);
+    const loadingPageRef = useRef(false);
 
     const joiner = useComputed(() => {
         if (classRoomStore.isCreator) {
@@ -122,11 +123,14 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
         whiteboardStore.phase === RoomPhase.Disconnecting ||
         whiteboardStore.phase === RoomPhase.Reconnecting
     ) {
-        return <LoadingPage />;
+        loadingPageRef.current = true;
+    } else {
+        loadingPageRef.current = false;
     }
 
     return (
         <div className="one-to-one-realtime-container">
+            {loadingPageRef.current && <LoadingPage />}
             <div className="one-to-one-realtime-box">
                 <TopBar
                     isMac={runtime.isMac}
@@ -259,8 +263,8 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
                         title="Vision control"
                         icon={
                             whiteboardStore.isBroadcasterMode === undefined
-                                ? "follow-active"
-                                : "follow"
+                                ? "follow"
+                                : "follow-active"
                         }
                         onClick={toggleRoomVisionController}
                     />
diff --git a/web/flat-web/src/pages/SmallClassPage/index.tsx b/web/flat-web/src/pages/SmallClassPage/index.tsx
index 1a045c047e7..568f48908ec 100644
--- a/web/flat-web/src/pages/SmallClassPage/index.tsx
+++ b/web/flat-web/src/pages/SmallClassPage/index.tsx
@@ -105,6 +105,7 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
     const [isRealtimeSideOpen, openRealtimeSide] = useState(true);
 
     const updateLayoutTimeoutRef = useRef(NaN);
+    const loadingPageRef = useRef(false);
 
     // control whiteboard writable
     useEffect(() => {
@@ -144,7 +145,9 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
         phase === RoomPhase.Disconnecting ||
         phase === RoomPhase.Reconnecting
     ) {
-        return <LoadingPage />;
+        loadingPageRef.current = true;
+    } else {
+        loadingPageRef.current = false;
     }
 
     function handleShareScreen(): void {
@@ -153,6 +156,7 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
 
     return (
         <div className="realtime-container">
+            {loadingPageRef.current && <LoadingPage />}
             <div className="realtime-box">
                 <TopBar
                     isMac={runtime.isMac}