fix(whiteboard): window-manager not mount when whiteboard was connect…

…ed (#1034)
netless-io · Oct 25, 2021 · c555024 · c555024
1 parent ef6a08d
commit c555024
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 24 deletions.
diff --git a/desktop/renderer-app/src/components/Whiteboard.tsx b/desktop/renderer-app/src/components/Whiteboard.tsx
@@ -10,15 +10,13 @@ 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;
 }
 
 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
@@ -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
@@ -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
@@ -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
@@ -10,15 +10,13 @@ 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;
 }
 
 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
@@ -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
@@ -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
@@ -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}