feat(desktop): add share screen tip window and support multiple window

cspell.config.js

@@ -105,6 +105,7 @@ module.exports = {
         "browserslist",
         "estree",
         "webstorm",
+        "Frameless",
 
         // CNCF
         "nindent",

desktop/main-app/src/utils/IPCActions.ts

@@ -1,4 +1,4 @@
-import { CustomSingleWindow } from "./WindowManager";
+import { CustomSingleWindow, windowManager } from "./WindowManager";
 import { ipc } from "flat-types";
 import { app, ipcMain, powerSaveBlocker } from "electron";
 import runtime from "./Runtime";
@@ -105,6 +105,9 @@ export const appActionAsync: ipc.AppActionAsync = {
             openAsHidden: false,
         });
     },
+    "force-close-window": ({ windowName }) => {
+        windowManager.removeWindow(windowName);
+    },
 };
 
 export const appActionSync: ipc.AppActionSync = {

desktop/main-app/src/utils/IPCEmit.ts

@@ -16,19 +16,15 @@ const ipcEmitHandler = (windowName: constants.WindowsName): IPCEmit => {
 };
 
 export const ipcEmitByMain = ipcEmitHandler(constants.WindowsName.Main);
-export const ipcEmitByClass = ipcEmitHandler(constants.WindowsName.Class);
-export const ipcEmitByReplay = ipcEmitHandler(constants.WindowsName.Replay);
+export const ipcEmitByShareScreenTip = ipcEmitHandler(constants.WindowsName.ShareScreenTip);
 
 export const ipcEmit = (windowName: constants.WindowsName): IPCEmit => {
     switch (windowName) {
         case constants.WindowsName.Main: {
             return ipcEmitByMain;
         }
-        case constants.WindowsName.Class: {
-            return ipcEmitByClass;
-        }
-        case constants.WindowsName.Replay: {
-            return ipcEmitByReplay;
+        case constants.WindowsName.ShareScreenTip: {
+            return ipcEmitByShareScreenTip;
         }
     }
 };

desktop/main-app/src/utils/WindowEvent.ts

@@ -18,7 +18,16 @@ export const windowHookClose = (customWindow: CustomSingleWindow): void => {
 
 export const windowReadyToShow = (customWindow: CustomSingleWindow): void => {
     customWindow.window.on("ready-to-show", () => {
-        customWindow.window.show();
+        if (customWindow.options.isPortal) {
+            // waiting dom load finish
+            setTimeout(() => {
+                if (!customWindow.window.isDestroyed()) {
+                    customWindow.window.show();
+                }
+            }, 100);
+        } else {
+            customWindow.window.show();
+        }
     });
 };
 

desktop/main-app/src/utils/WindowManager.ts

@@ -1,7 +1,14 @@
-import { BrowserWindow, BrowserWindowConstructorOptions, ipcMain, IpcMainEvent } from "electron";
+import {
+    BrowserWindow,
+    screen,
+    BrowserWindowConstructorOptions,
+    ipcMain,
+    IpcMainEvent,
+    Display,
+} from "electron";
 import { windowHookClose, windowOpenDevTools, windowReadyToShow } from "./WindowEvent";
 import runtime from "./Runtime";
-import { constants } from "flat-types";
+import { constants, portal } from "flat-types";
 import { Subject, zip } from "rxjs";
 import { ignoreElements, mergeMap } from "rxjs/operators";
 
@@ -11,7 +18,6 @@ const defaultWindowOptions: Pick<WindowOptions, "disableClose" | "isOpenDevTools
 };
 
 const defaultBrowserWindowOptions: BrowserWindowConstructorOptions = {
-    center: true,
     resizable: false,
     show: false,
     fullscreenable: false,
@@ -20,7 +26,6 @@ const defaultBrowserWindowOptions: BrowserWindowConstructorOptions = {
         autoplayPolicy: "no-user-gesture-required",
         nodeIntegration: true,
         contextIsolation: false,
-        preload: runtime.preloadPath,
         webSecurity: false,
         webviewTag: true,
         nativeWindowOpen: true,
@@ -54,16 +59,22 @@ export class WindowManager extends RxSubject {
         const window = new BrowserWindow({
             ...defaultBrowserWindowOptions,
             ...browserWindowOptions,
+            webPreferences: {
+                ...defaultBrowserWindowOptions.webPreferences,
+                ...browserWindowOptions.webPreferences,
+            },
         });
 
         this.wins[options.name] = {
             options,
             window,
-            didFinishLoad: window.loadURL(options.url),
+            didFinishLoad: options.isPortal ? Promise.resolve() : window.loadURL(options.url),
         };
 
         const innerWin = this.getWindow(options.name)!;
 
+        this.interceptPortalNewWindow(innerWin);
+
         windowOpenDevTools(innerWin);
 
         windowHookClose(innerWin);
@@ -96,16 +107,37 @@ export class WindowManager extends RxSubject {
         }
     }
 
+    public removeWindow(name: constants.WindowsName): void {
+        const innerWin = this.wins[name];
+
+        if (!innerWin) {
+            return;
+        }
+
+        if (innerWin.window.isDestroyed()) {
+            delete this.wins[name];
+
+            return;
+        }
+
+        innerWin.options.disableClose = false;
+        innerWin.window.close();
+    }
+
     public createMainWindow(): CustomSingleWindow {
         const win = this.createWindow(
             {
                 url: runtime.startURL,
                 name: constants.WindowsName.Main,
                 isOpenDevTools: runtime.isDevelopment,
+                isPortal: false,
             },
             {
-                width: 960,
-                height: 640,
+                center: true,
+                ...constants.PageSize.Main,
+                webPreferences: {
+                    preload: runtime.preloadPath,
+                },
             },
         );
 
@@ -134,6 +166,93 @@ export class WindowManager extends RxSubject {
 
         return win;
     }
+
+    public createShareScreenTipWindow(
+        options: BrowserWindowConstructorOptions,
+    ): CustomSingleWindow {
+        const display = this.getDisplayByMainWindow();
+
+        const win = this.createWindow(
+            {
+                url: "",
+                name: constants.WindowsName.ShareScreenTip,
+                isOpenDevTools: false,
+                isPortal: true,
+                disableClose: true,
+            },
+            {
+                x: WindowManager.getXCenterPoint(display, constants.PageSize.ShareScreenTip.width),
+                y: display.workArea.y + 32,
+                // this may be a bug in electron
+                // when remove options.webContents will crash
+                // @ts-ignore
+                webContents: options.webContents,
+                ...constants.PageSize.ShareScreenTip,
+                frame: false,
+            },
+        );
+
+        // default level is: floating, at this level, other applications can still override this window
+        // so, we used modal-panel level
+        win.window.setAlwaysOnTop(true, "modal-panel");
+
+        return win;
+    }
+
+    private interceptPortalNewWindow(customWindow: CustomSingleWindow): void {
+        customWindow.window.webContents.on(
+            "new-window",
+            (event, _url, frameName, _disposition, options) => {
+                if (!frameName.startsWith(constants.Portal)) {
+                    return;
+                }
+
+                const customOptions: portal.Options = JSON.parse(
+                    frameName.substring(constants.Portal.length),
+                );
+
+                const handler = this.createPortalNewWindow(customOptions.name, options);
+
+                if (handler === null) {
+                    return;
+                }
+
+                event.preventDefault();
+
+                event.newGuest = handler().window;
+            },
+        );
+    }
+
+    private createPortalNewWindow(
+        windowName: constants.WindowsName,
+        options: BrowserWindowConstructorOptions,
+    ): null | (() => CustomSingleWindow) {
+        switch (windowName) {
+            case constants.WindowsName.ShareScreenTip: {
+                return () => this.createShareScreenTipWindow(options);
+            }
+            default: {
+                return null;
+            }
+        }
+    }
+
+    private getDisplayByMainWindow(): Display {
+        const mainBounds = this.wins.Main!.window.getBounds();
+
+        return screen.getDisplayNearestPoint({
+            x: mainBounds.x,
+            y: mainBounds.y,
+        });
+    }
+
+    private static getXCenterPoint(display: Display, windowWidth: number): number {
+        const { x, width } = display.workArea;
+
+        // see: https://github.com/jenslind/electron-positioner/blob/85bb453453af050dda2479c88c4a24a262f8a2fb/index.js#L74
+        return Math.floor(x + (width / 2 - windowWidth / 2));
+    }
 }
 
 export const windowManager = new WindowManager();
@@ -153,4 +272,5 @@ interface WindowOptions {
     name: constants.WindowsName;
     disableClose?: boolean;
     isOpenDevTools?: boolean;
+    isPortal: boolean;
 }

desktop/renderer-app/src/components/ShareScreen/ShareScreen/index.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useMemo, useRef } from "react";
 import { observer } from "mobx-react-lite";
 import classNames from "classnames";
 import type { ShareScreenStore } from "../../../stores/ShareScreenStore";
+import { ShareScreenTip } from "../ShareScreenTip";
 
 interface ShareScreenProps {
     shareScreenStore: ShareScreenStore;
@@ -24,5 +25,12 @@ export const ShareScreen = observer<ShareScreenProps>(function ShareScreen({ sha
         });
     }, [shareScreenStore.existOtherShareScreen]);
 
-    return <div className={classNameList} ref={ref} />;
+    return (
+        <>
+            <div className={classNameList} ref={ref} />
+            {shareScreenStore.enableShareScreenStatus && (
+                <ShareScreenTip shareScreenStore={shareScreenStore} />
+            )}
+        </>
+    );
 });

desktop/renderer-app/src/components/ShareScreen/ShareScreenTip/index.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { useEffect, useState } from "react";
+import ReactDOM from "react-dom";
+import { constants } from "flat-types";
+import "./style.less";
+import { portalWindowManager } from "../../../utils/portalWindowManager";
+import { ipcAsyncByApp } from "../../../utils/ipc";
+import dragSVG from "../../../assets/image/drag.svg";
+import { Button } from "antd";
+import { ShareScreenStore } from "../../../stores/ShareScreenStore";
+import { useTranslation } from "react-i18next";
+
+interface ShareScreenTipProps {
+    shareScreenStore: ShareScreenStore;
+}
+
+export const ShareScreenTip = observer<ShareScreenTipProps>(function ShareScreenTip({
+    shareScreenStore,
+}) {
+    const { t } = useTranslation();
+    const [windowInstance, setWindowInstance] = useState<null | Window>(null);
+    const [containerEl] = useState(() => document.createElement("div"));
+
+    useEffect(() => {
+        const instance = portalWindowManager.createShareScreenTipPortalWindow(containerEl);
+
+        setWindowInstance(instance);
+
+        return () => {
+            ipcAsyncByApp("force-close-window", {
+                windowName: constants.WindowsName.ShareScreenTip,
+            });
+        };
+    }, [containerEl, t]);
+
+    useEffect(() => {
+        if (windowInstance) {
+            windowInstance.document.title = t("share-screen.tip-window-title");
+        }
+    }, [windowInstance, t]);
+
+    const stopShareScreen = (): void => {
+        shareScreenStore.close().catch(console.error);
+    };
+
+    return ReactDOM.createPortal(
+        <div className={"share-screen-tip"}>
+            <div>
+                <img src={dragSVG} alt="drag icon" />
+                <span>{t("share-screen.tip-window-body")}</span>
+            </div>
+            <Button danger ghost onClick={stopShareScreen}>
+                {t("share-screen.tip-window-button")}
+            </Button>
+        </div>,
+        containerEl,
+    );
+});

desktop/renderer-app/src/components/ShareScreen/ShareScreenTip/style.less

@@ -0,0 +1,24 @@
+.share-screen-tip {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 8px;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.75);
+    color: #FFFFFF;
+    font-size: 14px;
+
+    & > div {
+        display: flex;
+
+        & > span {
+            display: block;
+            margin-left: 16px;
+        }
+    }
+
+    & > button {
+        border-radius: 8px;
+    }
+}