feat(flat-pages): add option to change background of whiteboard (#1931)

packages/flat-i18n/locales/en.json

@@ -284,6 +284,7 @@
   "chinese": "Chinese",
   "general-settings": "General settings",
   "general-settings-avatars": "Avatars",
+  "general-settings-background": "Background",
   "language": "Language",
   "language-settings": "Language settings",
   "shortcut-settings": "Shortcut settings",
@@ -671,5 +672,11 @@
   "show": "Show",
   "hide": "Hide",
   "avatars-hidden": "Avatars are hidden",
-  "default": "default"
+  "default": "default",
+  "background": {
+    "default": "Default",
+    "teal": "Teal",
+    "grey": "Grey",
+    "green": "Green"
+  }
 }

packages/flat-i18n/locales/zh-CN.json

@@ -281,6 +281,7 @@
   "recording-completed-tips": "录制完成，可到历史记录查看",
   "general-settings": "常规设置",
   "general-settings-avatars": "视频\n区域",
+  "general-settings-background": "白板\n背景",
   "shortcut-settings": "热键设置",
   "about-us": "关于我们",
   "boot-up-and-run-automatically": "开机自动运行",
@@ -671,5 +672,11 @@
   "show": "显示",
   "hide": "隐藏",
   "avatars-hidden": "视频区域已隐藏",
-  "default": "默认"
+  "default": "默认",
+  "background": {
+    "default": "默认",
+    "teal": "藏青",
+    "grey": "浅灰",
+    "green": "墨绿"
+  }
 }

packages/flat-pages/src/components/PreferencesButton/GeneralSettings/AvatarsSettings.tsx

@@ -0,0 +1,41 @@
+import showAvatarsJPG from "../assets/show-avatars.jpg?url";
+import hideAvatarsJPG from "../assets/hide-avatars.jpg?url";
+
+import type { PreferencesButtonProps } from "../index";
+
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { Radio } from "antd";
+import { useTranslate } from "@netless/flat-i18n";
+
+export interface AvatarsSettingsProps extends PreferencesButtonProps {}
+
+export const AvatarsSettings = observer<AvatarsSettingsProps>(function AvatarsSettings({
+    classroom,
+}) {
+    const t = useTranslate();
+
+    return (
+        <>
+            <label className="preferences-modal-section-grid-label" htmlFor="avatars">
+                {t("general-settings-avatars")}
+            </label>
+            <Radio.Group
+                className="preferences-modal-section-grid-content"
+                id="avatars"
+                name="avatars"
+                value={classroom.isAvatarsVisible()}
+                onChange={classroom.toggleAvatars}
+            >
+                <Radio className="preferences-modal-section-radio" value={true}>
+                    <img src={showAvatarsJPG} />
+                    <span>{t("show")}</span>
+                </Radio>
+                <Radio className="preferences-modal-section-radio" value={false}>
+                    <img src={hideAvatarsJPG} />
+                    <span>{t("hide")}</span>
+                </Radio>
+            </Radio.Group>
+        </>
+    );
+});

packages/flat-pages/src/components/PreferencesButton/GeneralSettings/BackgroundSettings.tsx

@@ -0,0 +1,55 @@
+import frontZhSVG from "../assets/front-zh.svg";
+import frontEnSVG from "../assets/front-en.svg";
+
+import type { PreferencesButtonProps } from "../index";
+
+import React, { useCallback, useContext } from "react";
+import { Radio } from "antd";
+import { observer } from "mobx-react-lite";
+
+import { Background } from "@netless/flat-stores";
+import { useLanguage, useTranslate } from "@netless/flat-i18n";
+import { PreferencesStoreContext } from "../../StoreProvider";
+
+export interface BackgroundSettingsProps extends PreferencesButtonProps {}
+
+const backgrounds: Background[] = ["default", "teal", "grey", "green"];
+
+export const BackgroundSettings = observer<BackgroundSettingsProps>(function BackgroundSettings() {
+    const t = useTranslate();
+    const language = useLanguage();
+    const preferences = useContext(PreferencesStoreContext);
+
+    const changeBackground = useCallback(
+        (ev: any) => preferences.updateBackground(ev.target.value),
+        [preferences],
+    );
+
+    return (
+        <>
+            <label className="preferences-modal-section-grid-label" htmlFor="background">
+                {t("general-settings-background")}
+            </label>
+            <Radio.Group
+                className="preferences-modal-section-grid-content"
+                id="background"
+                name="background"
+                value={preferences.background}
+                onChange={changeBackground}
+            >
+                {backgrounds.map(background => (
+                    <Radio className="preferences-modal-section-radio" value={background}>
+                        <span className={"preferences-modal-section-background " + background}>
+                            <img
+                                alt={t("online-interaction-to-synchronize-ideas")}
+                                className="preferences-modal-section-front"
+                                src={language === "zh-CN" ? frontZhSVG : frontEnSVG}
+                            />
+                        </span>
+                        <span>{t("background." + background)}</span>
+                    </Radio>
+                ))}
+            </Radio.Group>
+        </>
+    );
+});

packages/flat-pages/src/components/PreferencesButton/GeneralSettings/LanguageSettings.tsx

@@ -0,0 +1,36 @@
+import type { PreferencesButtonProps } from "../index";
+import React, { useCallback } from "react";
+import { observer } from "mobx-react-lite";
+import { Radio } from "antd";
+import { FlatI18n, useLanguage, useTranslate } from "@netless/flat-i18n";
+
+export interface LanguageSettingsProps extends PreferencesButtonProps {}
+
+export const LanguageSettings = observer<LanguageSettingsProps>(function LanguageSettings() {
+    const t = useTranslate();
+
+    const language = useLanguage();
+    const changeLanguage = useCallback((ev: any) => FlatI18n.changeLanguage(ev.target.value), []);
+
+    return (
+        <>
+            <label className="preferences-modal-section-grid-label" htmlFor="language">
+                {t("language")}
+            </label>
+            <Radio.Group
+                className="preferences-modal-section-grid-content"
+                id="language"
+                name="language"
+                value={language}
+                onChange={changeLanguage}
+            >
+                <Radio value="zh-CN">
+                    <span>{t("chinese")}</span>
+                </Radio>
+                <Radio value="en">
+                    <span>English</span>
+                </Radio>
+            </Radio.Group>
+        </>
+    );
+});

packages/flat-pages/src/components/PreferencesButton/GeneralSettings/index.tsx

@@ -0,0 +1,46 @@
+import type { PreferencesButtonProps } from "../index";
+
+import React, { useCallback, useContext } from "react";
+import { observer } from "mobx-react-lite";
+
+import { useTranslate } from "@netless/flat-i18n";
+import { RoomType } from "@netless/flat-server-api";
+import { AppearancePicker } from "flat-components";
+import { PreferencesStoreContext } from "../../StoreProvider";
+import { AvatarsSettings } from "./AvatarsSettings";
+import { BackgroundSettings } from "./BackgroundSettings";
+import { LanguageSettings } from "./LanguageSettings";
+
+export interface GeneralSettingsProps extends PreferencesButtonProps {}
+
+export const GeneralSettings = observer<GeneralSettingsProps>(function GeneralSettings({
+    classroom,
+}) {
+    const t = useTranslate();
+
+    const preferences = useContext(PreferencesStoreContext);
+    const changeAppearance = useCallback(
+        (ev: any) => preferences.updatePrefersColorScheme(ev.target.value),
+        [preferences],
+    );
+
+    const isSmallClass = classroom.roomType === RoomType.SmallClass;
+
+    return (
+        <div className="preferences-modal-section" id="preferences-0">
+            <h3 className="preferences-modal-section-title">{t("general-settings")}</h3>
+            <div className="preferences-modal-section-grid">
+                <LanguageSettings classroom={classroom} />
+                {isSmallClass && <AvatarsSettings classroom={classroom} />}
+                <BackgroundSettings classroom={classroom} />
+                <label className="preferences-modal-section-grid-label" htmlFor="theme">
+                    {t("theme")}
+                </label>
+                <AppearancePicker
+                    changeAppearance={changeAppearance}
+                    value={preferences.prefersColorScheme}
+                />
+            </div>
+        </div>
+    );
+});