feat(flat-pages): add preferences modal in room (#1910)

* feat(flat-pages): add preferences modal in room * fix(flat-pages): resolve test audio path in electron
netless-io · May 5, 2023 · bd2edc2 · bd2edc2
1 parent 63d5470
commit bd2edc2
Show file tree

Hide file tree

Showing 17 changed files with 861 additions and 141 deletions.
diff --git a/packages/flat-components/package.json b/packages/flat-components/package.json
@@ -4,8 +4,7 @@
   "main": "./src/index.ts",
   "exports": {
     ".": "./src/index.ts",
-    "./theme/index.less": "./src/theme/index.less",
-    "./theme/fancy-scrollbar.less": "./src/theme/fancy-scrollbar.less"
+    "./*": "./src/*"
   },
   "private": true,
   "license": "MIT",

diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -278,6 +278,7 @@
   "boot-up-and-run-automatically": "Automatically run on startup",
   "chinese": "Chinese",
   "general-settings": "General settings",
+  "language": "Language",
   "language-settings": "Language settings",
   "shortcut-settings": "Shortcut settings",
   "delete-object": "Delete selected object",
@@ -333,6 +334,7 @@
   "device-condition-is-normal": "Device condition is normal",
   "headphone-testing": "Headphone",
   "microphone": "Microphone",
+  "microphone-settings": "Microphone",
   "microphone-testing": "Microphone",
   "normal": "Normal",
   "ok": "OK",
@@ -343,6 +345,7 @@
   "able-to-hear": "Able to hear",
   "cache-available-storage-space": "Cache available storage space",
   "camera": "Camera",
+  "camera-settings": "Camera",
   "cpu": "Processor (CPU)",
   "headphone": "Headphone",
   "network-quality-situation": "Network quality",
@@ -430,6 +433,7 @@
   },
   "no-device-permission": "No permission",
   "speaker": "Speaker",
+  "speaker-settings": "Speaker",
   "enable-camera-permission-tip": "Missing permission for camera access",
   "device-test": "Devices Test",
   "close-tip": "Close tip",

diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -278,6 +278,7 @@
   "shortcut-settings": "热键设置",
   "about-us": "关于我们",
   "boot-up-and-run-automatically": "开机自动运行",
+  "language": "语言",
   "language-settings": "语言设置",
   "chinese": "中文",
   "shortcut-name": "名称",
@@ -325,6 +326,7 @@
   "exit-replay": "退出回放",
   "exit-reply-tips": "确定退出回放？",
   "microphone": "麦克风",
+  "microphone-settings": "麦克风设置",
   "audition-sound": "试听声音",
   "unable-to-see": "不能看到",
   "able-to-see": "能看到",
@@ -345,6 +347,7 @@
   "unable-to-hear": "不能听到",
   "able-to-hear": "能听到",
   "camera": "摄像头",
+  "camera-settings": "摄像头设置",
   "cpu": "处理器 (CPU)",
   "cache-available-storage-space": "缓存可用空间",
   "network-quality-situation": "网络质量情况",
@@ -430,6 +433,7 @@
   },
   "no-device-permission": "未开启权限",
   "speaker": "扬声器",
+  "speaker-settings": "扬声器设置",
   "enable-camera-permission-tip": "请开启浏览器的摄像头使用权限",
   "device-test": "设备检测",
   "close-tip": "不再提示",

diff --git a/packages/flat-pages/src/BigClassPage/index.tsx b/packages/flat-pages/src/BigClassPage/index.tsx
@@ -38,6 +38,7 @@ import { ShareScreenPicker } from "../components/ShareScreen/ShareScreenPicker";
 import { ExtraPadding } from "../components/ExtraPadding";
 import { UsersButton } from "../components/UsersButton";
 import { Shortcuts, Rewards } from "../components/Shortcuts";
+import { PreferencesButton } from "../components/PreferencesButton";
 
 export type BigClassPageProps = {};
 
@@ -166,6 +167,7 @@ export const BigClassPage = withClassroomStore<BigClassPageProps>(
                     <InviteButton roomInfo={classroomStore.roomInfo} />
                     {/* TODO: open users sub window */}
                     <UsersButton classroom={classroomStore} />
+                    <PreferencesButton classroom={classroomStore} />
                     {!windowsBtn?.showWindowsBtn && (
                         <TopBarRightBtn
                             icon={<SVGExit />}

diff --git a/packages/flat-pages/src/OneToOnePage/index.tsx b/packages/flat-pages/src/OneToOnePage/index.tsx
@@ -38,6 +38,7 @@ import { ShareScreenPicker } from "../components/ShareScreen/ShareScreenPicker";
 import { ExtraPadding } from "../components/ExtraPadding";
 import { UsersButton } from "../components/UsersButton";
 import { Shortcuts, Rewards } from "../components/Shortcuts";
+import { PreferencesButton } from "../components/PreferencesButton";
 
 export type OneToOnePageProps = {};
 
@@ -161,6 +162,7 @@ export const OneToOnePage = withClassroomStore<OneToOnePageProps>(
                     <InviteButton roomInfo={classroomStore.roomInfo} />
                     {/* TODO: open users sub window */}
                     <UsersButton classroom={classroomStore} />
+                    <PreferencesButton classroom={classroomStore} />
                     {!windowsBtn?.showWindowsBtn && (
                         <TopBarRightBtn
                             icon={<SVGExit />}

diff --git a/packages/flat-pages/src/SmallClassPage/index.tsx b/packages/flat-pages/src/SmallClassPage/index.tsx
@@ -43,6 +43,7 @@ import { ShareScreenPicker } from "../components/ShareScreen/ShareScreenPicker";
 import { ExtraPadding } from "../components/ExtraPadding";
 import { UsersButton } from "../components/UsersButton";
 import { Shortcuts, Rewards } from "../components/Shortcuts";
+import { PreferencesButton } from "../components/PreferencesButton";
 import { useScrollable } from "./utils";
 
 export type SmallClassPageProps = {};
@@ -273,6 +274,7 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
                     <InviteButton roomInfo={classroomStore.roomInfo} />
                     {/* TODO: open users sub window */}
                     <UsersButton classroom={classroomStore} />
+                    <PreferencesButton classroom={classroomStore} />
                     {!windowsBtn?.showWindowsBtn && (
                         <TopBarRightBtn
                             icon={<SVGExit />}

diff --git a/packages/flat-pages/src/UserSettingPage/HotKeySettingPage/index.tsx b/packages/flat-pages/src/UserSettingPage/HotKeySettingPage/index.tsx
@@ -1,148 +1,13 @@
 import "./index.less";
 
-import { Table } from "antd";
 import React from "react";
+import { Table } from "antd";
 import { UserSettingLayoutContainer } from "../UserSettingLayoutContainer";
-import { useTranslate } from "@netless/flat-i18n";
-
-interface HotKeyTable {
-    name: string;
-    key: string;
-    desc: string;
-}
-
-interface HotKey {
-    name: string;
-    hotKey: string;
-    key?: string;
-}
+import { useHotKeyData, HotKeyTable } from "./useHotKeyData";
 
 export const HotKeySettingPage = (): React.ReactElement => {
-    const t = useTranslate();
-
-    const HotKeyTableTitleList = [
-        {
-            title: t("shortcut-name"),
-            dataIndex: "desc",
-        },
-        {
-            title: t("shortcut-tips"),
-            dataIndex: "",
-        },
-    ];
-
-    const HotKeyTableRow = [t("toolbar"), t("editor")];
-
-    const HotKeyTableExpandTitleList = [
-        {
-            dataIndex: "name",
-        },
-        {
-            dataIndex: "hotKey",
-        },
-    ];
-
-    const HotKeyTableExpandRow: {
-        [index: string]: HotKey[];
-    } = {
-        tools: [
-            {
-                name: t("tool-selector"),
-                hotKey: "S",
-            },
-            {
-                name: t("tool-pen"),
-                hotKey: "P",
-            },
-            {
-                name: t("tool-eraser"),
-                hotKey: "E",
-            },
-            {
-                name: t("tool-circle"),
-                hotKey: "C",
-            },
-            {
-                name: t("tool-rectangle"),
-                hotKey: "R",
-            },
-            {
-                name: t("tool-arrow"),
-                hotKey: "A",
-            },
-            {
-                name: t("tool-line"),
-                hotKey: "L",
-            },
-            {
-                name: t("tool-laser-pointer"),
-                hotKey: "Z",
-            },
-            {
-                name: t("tool-hand"),
-                hotKey: "H",
-            },
-        ],
-        edit: [
-            {
-                name: t("delete-object"),
-                hotKey: "Backspace / Delete",
-            },
-            {
-                name: t("proportional-zoom"),
-                hotKey: "Shift / ⇧",
-            },
-            {
-                name: t("switch-to-next-color"),
-                hotKey: "Alt + Q / ⌥ + Q",
-            },
-            {
-                name: t("switch-to-previous-color"),
-                hotKey: "Alt + Shift + Q / ⌥ + Shift + Q",
-            },
-            {
-                name: t("pencil-tool-draws-circle"),
-                hotKey: "Shift + Mouse",
-            },
-            {
-                name: t("draw-circles-from-center"),
-                hotKey: "Ctrl + Mouse / ⌘ + Mouse ",
-            },
-            {
-                name: t("undo"),
-                hotKey: "Ctrl + Z / ⌘ + Z",
-            },
-            {
-                name: t("redo"),
-                hotKey: "Ctrl + Y / ⌘ + Y",
-            },
-            {
-                name: t("copy"),
-                hotKey: "Ctrl + C / ⌘ + C",
-            },
-            {
-                name: t("paste"),
-                hotKey: "Ctrl + V / ⌘ + V",
-            },
-        ],
-    };
-
-    const HotKeyTableKeys = Object.freeze(Object.keys(HotKeyTableExpandRow));
-
-    // gen key of expanded table
-    HotKeyTableKeys.forEach((data: string) => {
-        HotKeyTableExpandRow[data].forEach((row: HotKey, index) => {
-            row.key = `${row.name + String(index)}`;
-        });
-    });
-
-    const tableRow: HotKeyTable[] = HotKeyTableKeys.map((data: string, index) => {
-        return {
-            name: data,
-            key: `${data + String(index)}`,
-            desc: HotKeyTableRow[index],
-        };
-    });
+    const { HotKeyTableExpandRow, HotKeyTableExpandTitleList, HotKeyTableTitleList, tableRow } =
+        useHotKeyData();
 
     const expandedRowRender = (row: HotKeyTable): React.ReactElement => {
         return (