fix(desktop): share screen not work (#1736)

desktop/main-app/src/preload.ts

@@ -69,3 +69,6 @@ ipcRenderer.send("preload-loaded");
         basename: (p: string, ext?: string | undefined): string => path.basename(p, ext),
     },
 };
+
+// code in renderer can use `if (window.isElectron)` with different logic
+(window as any).isElectron = true;

desktop/main-app/src/window-manager/window-main/index.ts

@@ -32,9 +32,9 @@ export class WindowMain extends AbstractWindow<false> {
 
         this._mainWindow$.setValue(customWindow);
 
-        if (process.env.NODE_ENV === "development") {
-            WindowMain.loadExtensions(customWindow, "react-devtools");
-        }
+        // if (process.env.NODE_ENV === "development") {
+        //     WindowMain.loadExtensions(customWindow, "react-devtools");
+        // }
 
         return customWindow;
     }

desktop/renderer-app/src/components/WindowsBtnContext.ts

@@ -1,6 +1,12 @@
 import { WindowsBtnContextInterface } from "@netless/flat-pages/src/components/WindowsBtnContext";
 import { WindowsSystemBtnItem } from "flat-components";
-import { ipcAsyncByMainWindow, ipcReceive, ipcReceiveRemove } from "../utils/ipc";
+import {
+    ipcAsyncByMainWindow,
+    ipcAsyncByShareScreenTipWindow,
+    ipcReceive,
+    ipcReceiveRemove,
+} from "../utils/ipc";
+import { portalWindowManager } from "../utils/portal-window-manager";
 
 export class WindowsBtnContext implements WindowsBtnContextInterface {
     public showWindowsBtn: boolean = window.node.os.platform() === "win32";
@@ -26,6 +32,14 @@ export class WindowsBtnContext implements WindowsBtnContextInterface {
     public openExternalBrowser = (url: string): void => {
         void window.electron.shell.openExternal(url);
     };
+
+    public createShareScreenTipPortalWindow = (
+        div: HTMLDivElement,
+        title: string,
+    ): (() => void) => {
+        portalWindowManager.createShareScreenTipPortalWindow(div, title);
+        return () => ipcAsyncByShareScreenTipWindow("force-close-window", {});
+    };
 }
 
 export const windowsBtnContext = new WindowsBtnContext();

packages/flat-pages/src/BigClassPage/index.tsx

@@ -34,6 +34,7 @@ import { ShareScreen } from "../components/ShareScreen";
 import { useLoginCheck } from "../utils/use-login-check";
 import { withClassroomStore, WithClassroomStoreProps } from "../utils/with-classroom-store";
 import { WindowsSystemBtnContext } from "../components/StoreProvider";
+import { ShareScreenPicker } from "../components/ShareScreen/ShareScreenPicker";
 
 export type BigClassPageProps = {};
 
@@ -73,7 +74,11 @@ export const BigClassPage = withClassroomStore<BigClassPageProps>(
                         )}
                         <div className="big-class-realtime-content">
                             <div className="big-class-realtime-content-container">
-                                <ShareScreen classRoomStore={classroomStore} />
+                                <ShareScreen classroomStore={classroomStore} />
+                                <ShareScreenPicker
+                                    classroomStore={classroomStore}
+                                    handleOk={() => classroomStore.toggleShareScreen(true)}
+                                />
                                 <Whiteboard
                                     classRoomStore={classroomStore}
                                     whiteboardStore={whiteboardStore}
@@ -123,10 +128,19 @@ export const BigClassPage = withClassroomStore<BigClassPageProps>(
                         <TopBarRightBtn
                             icon={<SVGScreenSharing active={classroomStore.isScreenSharing} />}
                             title={t("share-screen.self")}
-                            onClick={() => classroomStore.toggleShareScreen()}
+                            onClick={() => {
+                                if (window.isElectron) {
+                                    if (classroomStore.isScreenSharing) {
+                                        classroomStore.toggleShareScreen(false);
+                                    } else {
+                                        classroomStore.toggleShareScreenPicker(true);
+                                    }
+                                } else {
+                                    classroomStore.toggleShareScreen();
+                                }
+                            }}
                         />
                     )}
-
                     {classroomStore.isCreator && (
                         <CloudRecordBtn
                             isRecording={classroomStore.isRecording}

packages/flat-pages/src/OneToOnePage/index.tsx

@@ -34,6 +34,7 @@ import { ShareScreen } from "../components/ShareScreen";
 import { useLoginCheck } from "../utils/use-login-check";
 import { withClassroomStore, WithClassroomStoreProps } from "../utils/with-classroom-store";
 import { WindowsSystemBtnContext } from "../components/StoreProvider";
+import { ShareScreenPicker } from "../components/ShareScreen/ShareScreenPicker";
 
 export type OneToOnePageProps = {};
 
@@ -67,7 +68,11 @@ export const OneToOnePage = withClassroomStore<OneToOnePageProps>(
                         )}
                         <div className="one-to-one-realtime-content">
                             <div className="one-to-one-realtime-content-container">
-                                <ShareScreen classRoomStore={classroomStore} />
+                                <ShareScreen classroomStore={classroomStore} />
+                                <ShareScreenPicker
+                                    classroomStore={classroomStore}
+                                    handleOk={() => classroomStore.toggleShareScreen(true)}
+                                />
                                 <Whiteboard
                                     classRoomStore={classroomStore}
                                     whiteboardStore={whiteboardStore}
@@ -117,7 +122,17 @@ export const OneToOnePage = withClassroomStore<OneToOnePageProps>(
                         <TopBarRightBtn
                             icon={<SVGScreenSharing active={classroomStore.isScreenSharing} />}
                             title={t("share-screen.self")}
-                            onClick={() => classroomStore.toggleShareScreen()}
+                            onClick={() => {
+                                if (window.isElectron) {
+                                    if (classroomStore.isScreenSharing) {
+                                        classroomStore.toggleShareScreen(false);
+                                    } else {
+                                        classroomStore.toggleShareScreenPicker(true);
+                                    }
+                                } else {
+                                    classroomStore.toggleShareScreen();
+                                }
+                            }}
                         />
                     )}
 

packages/flat-pages/src/SmallClassPage/index.tsx

@@ -36,6 +36,7 @@ import { ShareScreen } from "../components/ShareScreen";
 import { useLoginCheck } from "../utils/use-login-check";
 import { withClassroomStore, WithClassroomStoreProps } from "../utils/with-classroom-store";
 import { WindowsSystemBtnContext } from "../components/StoreProvider";
+import { ShareScreenPicker } from "../components/ShareScreen/ShareScreenPicker";
 
 export type SmallClassPageProps = {};
 
@@ -78,7 +79,11 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
                         {renderAvatars()}
                         <div className="small-class-realtime-content">
                             <div className="small-class-realtime-content-container">
-                                <ShareScreen classRoomStore={classroomStore} />
+                                <ShareScreen classroomStore={classroomStore} />
+                                <ShareScreenPicker
+                                    classroomStore={classroomStore}
+                                    handleOk={() => classroomStore.toggleShareScreen(true)}
+                                />
                                 <Whiteboard
                                     classRoomStore={classroomStore}
                                     whiteboardStore={whiteboardStore}
@@ -183,7 +188,17 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
                         <TopBarRightBtn
                             icon={<SVGScreenSharing active={classroomStore.isScreenSharing} />}
                             title={t("share-screen.self")}
-                            onClick={() => classroomStore.toggleShareScreen()}
+                            onClick={() => {
+                                if (window.isElectron) {
+                                    if (classroomStore.isScreenSharing) {
+                                        classroomStore.toggleShareScreen(false);
+                                    } else {
+                                        classroomStore.toggleShareScreenPicker(true);
+                                    }
+                                } else {
+                                    classroomStore.toggleShareScreen();
+                                }
+                            }}
                         />
                     )}
 

desktop/renderer-app/src/components/ShareScreen/ShareScreenPicker/ScreenList/index.tsx → packages/flat-pages/src/components/ShareScreen/ShareScreenPicker/ScreenList/index.tsx

@@ -1,23 +1,29 @@
 import "./style.less";
 
-import classNames from "classnames";
 import React, { useCallback, useEffect, useState } from "react";
+import classNames from "classnames";
 import { observer } from "mobx-react-lite";
-import { message } from "antd";
 import { useTranslate } from "@netless/flat-i18n";
 import { IServiceShareScreenInfo } from "@netless/flat-services";
+import { ClassroomStore } from "@netless/flat-stores";
+import { message } from "antd";
 
-import { uint8ArrayToImageURL } from "./Utils";
-import { ClassRoomStore } from "../../../../stores/class-room-store";
+const uint8ArrayToImageURL = (buffer: Uint8Array): string => {
+    return URL.createObjectURL(
+        new Blob([buffer.buffer], {
+            type: "image/png",
+        }),
+    );
+};
 
 interface ScreenListProps {
     screenInfo: IServiceShareScreenInfo[];
-    classRoomStore: ClassRoomStore;
+    classroomStore: ClassroomStore;
 }
 
 export const ScreenList = observer<ScreenListProps>(function ShareScreen({
     screenInfo,
-    classRoomStore,
+    classroomStore,
 }) {
     const [activeInfo, setActiveInfo] = useState("");
     const t = useTranslate();
@@ -31,15 +37,15 @@ export const ScreenList = observer<ScreenListProps>(function ShareScreen({
     const onClick = useCallback(
         (screenInfo: IServiceShareScreenInfo, activeKey: string) => {
             setActiveInfo(activeKey);
-            classRoomStore.updateSelectedScreenInfo(screenInfo);
+            classroomStore.selectShareScreenInfo(screenInfo);
         },
-        [classRoomStore],
+        [classroomStore],
     );
 
     const cancelSelected = useCallback(() => {
         setActiveInfo("");
-        classRoomStore.updateSelectedScreenInfo(null);
-    }, [classRoomStore]);
+        classroomStore.selectShareScreenInfo(null);
+    }, [classroomStore]);
 
     return (
         <div className="screen-list">

desktop/renderer-app/src/components/ShareScreen/ShareScreenPicker/index.tsx → packages/flat-pages/src/components/ShareScreen/ShareScreenPicker/index.tsx

@@ -1,39 +1,40 @@
 import "./style.less";
 
-import { Button, Modal, Spin } from "antd";
-import classNames from "classnames";
-import { observer } from "mobx-react-lite";
 import React, { useCallback, useLayoutEffect, useState } from "react";
+import classNames from "classnames";
 import { useTranslate } from "@netless/flat-i18n";
+import { ClassroomStore } from "@netless/flat-stores";
+import { Button, Modal, Spin } from "antd";
+import { observer } from "mobx-react-lite";
 
-import { ClassRoomStore } from "../../../stores/class-room-store";
 import { ScreenList } from "./ScreenList";
 
 interface ShareScreenPickerProps {
-    classRoomStore: ClassRoomStore;
+    classroomStore: ClassroomStore;
     handleOk: () => void;
 }
 
 const ShareScreenPickerModel = observer<ShareScreenPickerProps>(function ShareScreen({
-    classRoomStore,
+    classroomStore,
     handleOk,
 }) {
     const t = useTranslate();
 
     useLayoutEffect(() => {
-        classRoomStore.refreshShareScreenInfo();
-    }, [classRoomStore]);
+        classroomStore.refreshShareScreenInfo();
+    }, [classroomStore]);
 
     const closeModal = useCallback(() => {
-        classRoomStore.updateShowShareScreenPicker(false);
-    }, [classRoomStore]);
+        classroomStore.toggleShareScreenPicker(false);
+    }, [classroomStore]);
 
-    const isSelected = classRoomStore.selectedScreenInfo !== null;
+    const isSelected = classroomStore.selectedScreenInfo !== null;
 
     return (
         <div>
             <Modal
                 centered
+                open
                 bodyStyle={{
                     padding: "16px 0 0 16px",
                 }}
@@ -45,19 +46,18 @@ const ShareScreenPickerModel = observer<ShareScreenPickerProps>(function ShareSc
                     <ConfirmButton key={"confirm"} handleOk={handleOk} isSelected={isSelected} />,
                 ]}
                 title={t("share-screen.choose-share-content")}
-                visible={true}
                 width="784px"
                 onCancel={closeModal}
             >
                 <div
                     className={classNames("share-screen-picker", {
-                        loading: classRoomStore.shareScreenInfo.length === 0,
+                        loading: classroomStore.shareScreenInfo.length === 0,
                     })}
                 >
-                    {classRoomStore.shareScreenInfo.length > 0 ? (
+                    {classroomStore.shareScreenInfo.length > 0 ? (
                         <ScreenList
-                            classRoomStore={classRoomStore}
-                            screenInfo={classRoomStore.shareScreenInfo}
+                            classroomStore={classroomStore}
+                            screenInfo={classroomStore.shareScreenInfo}
                         />
                     ) : (
                         <Spin size="large" />
@@ -69,11 +69,11 @@ const ShareScreenPickerModel = observer<ShareScreenPickerProps>(function ShareSc
 });
 
 export const ShareScreenPicker = observer<ShareScreenPickerProps>(function ShareScreen({
-    classRoomStore,
+    classroomStore: classRoomStore,
     handleOk,
 }) {
-    return classRoomStore.showShareScreenPicker ? (
-        <ShareScreenPickerModel classRoomStore={classRoomStore} handleOk={handleOk} />
+    return classRoomStore.shareScreenPickerVisible ? (
+        <ShareScreenPickerModel classroomStore={classRoomStore} handleOk={handleOk} />
     ) : null;
 });