From cdffb42f6b0cf4a5cbc8dd8d86470e51ea014ee6 Mon Sep 17 00:00:00 2001
From: hyrious <hyrious@outlook.com>
Date: Fri, 12 May 2023 11:30:11 +0800
Subject: [PATCH] feat(flat-pages): add option to hide others' cursor names
 (#1934)

- remove share with audio option on macOS in electron
---
 packages/flat-i18n/locales/en.json            |  1 +
 packages/flat-i18n/locales/zh-CN.json         |  1 +
 .../GeneralSettingPage/index.less             |  7 +++
 .../GeneralSettingPage/index.tsx              |  8 ++++
 .../ShareScreen/ShareScreenPicker/index.tsx   | 45 ++++++++++++++-----
 .../flat-pages/src/components/Whiteboard.less |  6 +++
 .../flat-pages/src/components/Whiteboard.tsx  |  1 +
 packages/flat-stores/src/preferences-store.ts |  7 +++
 8 files changed, 64 insertions(+), 12 deletions(-)

diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
index 852c0c1fe62..9a1dd0f135e 100644
--- a/packages/flat-i18n/locales/en.json
+++ b/packages/flat-i18n/locales/en.json
@@ -257,6 +257,7 @@
   "join-options": "Join Options",
   "create-room-default-title": "The room created by {{name}}",
   "turn-on-the-camera": "Camera",
+  "turn-on-cursor-name": "Show cursor name of others",
   "enter-room-uuid": "Please enter the room ID",
   "turn-on-the-microphone": "Microphone",
   "schedule-room-default-title": "The room scheduled by {{name}}",
diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
index 98813af3de0..7d0d000aaab 100644
--- a/packages/flat-i18n/locales/zh-CN.json
+++ b/packages/flat-i18n/locales/zh-CN.json
@@ -257,6 +257,7 @@
   "begin": "开始",
   "join-options": "加入选项",
   "turn-on-the-camera": "开启摄像头",
+  "turn-on-cursor-name": "显示对方光标昵称",
   "enter-room-uuid": "请输入房间号",
   "turn-on-the-microphone": "开启麦克风",
   "schedule-room-default-title": "{{name}} 预定的房间",
diff --git a/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/index.less b/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/index.less
index 1090124328a..e8428d5d0ef 100644
--- a/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/index.less
+++ b/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/index.less
@@ -139,6 +139,13 @@
     padding-top: 8px;
 }
 
+.general-setting-user-account {
+    .general-setting-title {
+        display: block;
+        margin-bottom: 4px;
+    }
+}
+
 .binding-wechat {
     display: inline-flex;
     align-items: center;
diff --git a/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/index.tsx b/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/index.tsx
index e45ea7a07a0..0b0cc17c0ea 100644
--- a/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/index.tsx
+++ b/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/index.tsx
@@ -162,6 +162,14 @@ export const GeneralSettingPage = observer(function GeneralSettingPage() {
                     >
                         {t("turn-on-the-camera")}
                     </Checkbox>
+                    <Checkbox
+                        checked={preferencesStore.cursorNameOn}
+                        onClick={() =>
+                            preferencesStore.updateCursorNameOn(!preferencesStore.cursorNameOn)
+                        }
+                    >
+                        {t("turn-on-cursor-name")}
+                    </Checkbox>
                 </div>
                 <div className="general-setting-device-test-box">
                     <div className="general-setting-checkbox-title">{t("device-test-option")}</div>
diff --git a/packages/flat-pages/src/components/ShareScreen/ShareScreenPicker/index.tsx b/packages/flat-pages/src/components/ShareScreen/ShareScreenPicker/index.tsx
index 491f236f6d9..6ff92d6301a 100644
--- a/packages/flat-pages/src/components/ShareScreen/ShareScreenPicker/index.tsx
+++ b/packages/flat-pages/src/components/ShareScreen/ShareScreenPicker/index.tsx
@@ -1,6 +1,13 @@
 import "./style.less";
 
-import React, { useCallback, useEffect, useLayoutEffect, useState } from "react";
+import React, {
+    useCallback,
+    useContext,
+    useEffect,
+    useLayoutEffect,
+    useMemo,
+    useState,
+} from "react";
 import classNames from "classnames";
 import { useTranslate } from "@netless/flat-i18n";
 import { ClassroomStore } from "@netless/flat-stores";
@@ -9,6 +16,7 @@ import { observer } from "mobx-react-lite";
 import { IServiceVideoChatDevice } from "@netless/flat-services";
 import { useSafePromise } from "flat-components";
 import { ScreenList } from "./ScreenList";
+import { RuntimeContext } from "../../StoreProvider";
 
 interface ShareScreenPickerProps {
     classroomStore: ClassroomStore;
@@ -20,6 +28,7 @@ const ShareScreenPickerModel = observer<ShareScreenPickerProps>(function ShareSc
     handleOk,
 }) {
     const t = useTranslate();
+    const runtime = useContext(RuntimeContext);
 
     useLayoutEffect(() => {
         classroomStore.refreshShareScreenInfo();
@@ -31,6 +40,28 @@ const ShareScreenPickerModel = observer<ShareScreenPickerProps>(function ShareSc
 
     const isSelected = classroomStore.selectedScreenInfo !== null;
 
+    const chooseSpeaker = useMemo<React.ReactNode>(() => {
+        if (runtime?.isMac) {
+            return null;
+        } else {
+            return (
+                <>
+                    <Checkbox
+                        checked={classroomStore.shareScreenWithAudio}
+                        onChange={ev =>
+                            classroomStore.toggleShareScreenWithAudio(ev.target.checked)
+                        }
+                    >
+                        {t("share-screen.with-audio")}
+                    </Checkbox>
+                    {classroomStore.shareScreenWithAudio && (
+                        <ShareScreenSelectSpeaker classroom={classroomStore} />
+                    )}
+                </>
+            );
+        }
+    }, [classroomStore, runtime, t]);
+
     return (
         <div>
             <Modal
@@ -43,17 +74,7 @@ const ShareScreenPickerModel = observer<ShareScreenPickerProps>(function ShareSc
                 footer={
                     <Row>
                         <Col flex={1} style={{ textAlign: "left" }}>
-                            <Checkbox
-                                checked={classroomStore.shareScreenWithAudio}
-                                onChange={ev =>
-                                    classroomStore.toggleShareScreenWithAudio(ev.target.checked)
-                                }
-                            >
-                                {t("share-screen.with-audio")}
-                            </Checkbox>
-                            {classroomStore.shareScreenWithAudio && (
-                                <ShareScreenSelectSpeaker classroom={classroomStore} />
-                            )}
+                            {chooseSpeaker}
                         </Col>
                         <Col>
                             <Button key="cancel" className="footer-button" onClick={closeModal}>
diff --git a/packages/flat-pages/src/components/Whiteboard.less b/packages/flat-pages/src/components/Whiteboard.less
index 22d0951e7f9..c0412d83878 100644
--- a/packages/flat-pages/src/components/Whiteboard.less
+++ b/packages/flat-pages/src/components/Whiteboard.less
@@ -24,6 +24,12 @@
                 display: revert;
             }
         }
+
+        &.hide-cursor-name {
+            .netless-window-manager-cursor-name {
+                display: none;
+            }
+        }
     }
 
     .telebox-collector {
diff --git a/packages/flat-pages/src/components/Whiteboard.tsx b/packages/flat-pages/src/components/Whiteboard.tsx
index 207d734f032..04b15de771f 100644
--- a/packages/flat-pages/src/components/Whiteboard.tsx
+++ b/packages/flat-pages/src/components/Whiteboard.tsx
@@ -209,6 +209,7 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
                                     !classRoomStore.userWindowsGrid &&
                                     (classRoomStore.isCreator ||
                                         classRoomStore.users.currentUser?.wbOperate),
+                                "hide-cursor-name": !preferences.cursorNameOn,
                             },
                         )}
                     />
diff --git a/packages/flat-stores/src/preferences-store.ts b/packages/flat-stores/src/preferences-store.ts
index a2865bd0bd3..ee880446ea1 100644
--- a/packages/flat-stores/src/preferences-store.ts
+++ b/packages/flat-stores/src/preferences-store.ts
@@ -30,6 +30,9 @@ export class PreferencesStore {
 
     public background: Background = "default";
 
+    /** Show cursor name in room */
+    public cursorNameOn = true;
+
     /** Turn on recording on joining room */
     public autoRecording = false;
     /** Show or hide stroke tails */
@@ -47,6 +50,10 @@ export class PreferencesStore {
         this.autoMicOn = isOn;
     };
 
+    public updateCursorNameOn = (isOn: boolean): void => {
+        this.cursorNameOn = isOn;
+    };
+
     public updateCameraId = (cameraId: string): void => {
         this.cameraId = cameraId;
     };