feat(flat-pages): add option to hide small class top row (#1918)

* feat(flat-pages): add option to hide small class top row

* refactor: add top center info about this

packages/flat-components/src/components/ClassroomPage/TopBar/style.less

@@ -46,6 +46,10 @@
     margin: 0 (@topbar-content-right-cell-gap / 2) 0 auto;
 }
 
+.topbar-content-dimmed {
+    color: var(--text-weaker);
+}
+
 .flat-color-scheme-dark {
     .topbar-box {
         border-color: var(--grey-8);
@@ -56,4 +60,8 @@
     .topbar-content-divider {
         background-color: var(--grey-8);
     }
+
+    .topbar-content-dimmed {
+        color: var(--text);
+    }
 }

packages/flat-components/src/components/SettingPage/AppearancePicker/index.tsx

@@ -17,7 +17,7 @@ export const AppearancePicker: React.FC<AppearancePickerProps> = ({ value, chang
     const t = useTranslate();
     return (
         <div className="appearance-picker-container">
-            <Radio.Group value={value} onChange={changeAppearance}>
+            <Radio.Group name="theme" value={value} onChange={changeAppearance}>
                 <Radio value={"light"}>
                     <div className="appearance-picker-option">
                         <img src={lightSVG} />

packages/flat-i18n/locales/en.json

@@ -279,6 +279,7 @@
   "boot-up-and-run-automatically": "Automatically run on startup",
   "chinese": "Chinese",
   "general-settings": "General settings",
+  "general-settings-avatars": "Avatars",
   "language": "Language",
   "language-settings": "Language settings",
   "shortcut-settings": "Shortcut settings",
@@ -658,5 +659,8 @@
     "year": "Last Year"
   },
   "reward": "reward",
-  "restore-windows": "restore windows"
+  "restore-windows": "restore windows",
+  "show": "Show",
+  "hide": "Hide",
+  "avatars-hidden": "Avatars are hidden"
 }

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

@@ -276,6 +276,7 @@
   "switch-to-lecture-mode": "切换为讲课模式",
   "recording-completed-tips": "录制完成，可到历史记录查看",
   "general-settings": "常规设置",
+  "general-settings-avatars": "视频\n区域",
   "shortcut-settings": "热键设置",
   "about-us": "关于我们",
   "boot-up-and-run-automatically": "开机自动运行",
@@ -658,5 +659,8 @@
     "year": "最近一年"
   },
   "reward": "奖杯",
-  "restore-windows": "复位"
+  "restore-windows": "复位",
+  "show": "显示",
+  "hide": "隐藏",
+  "avatars-hidden": "视频区域已隐藏"
 }

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

@@ -76,15 +76,19 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
                     <div className="small-class-realtime-box">
                         {windowsBtn ? (
                             <TopBar
-                                // center={renderTopBarCenter()}
+                                center={renderTopBarCenter()}
                                 left={renderTopBarLeft()}
                                 right={renderTopBarRight()}
                                 showWindowsSystemBtn={windowsBtn.showWindowsBtn}
                                 onClickWindowsSystemBtn={windowsBtn.onClickWindowsSystemBtn}
                                 onDoubleClick={windowsBtn.clickWindowMaximize}
                             />
                         ) : (
-                            <TopBar left={renderTopBarLeft()} right={renderTopBarRight()} />
+                            <TopBar
+                                center={renderTopBarCenter()}
+                                left={renderTopBarLeft()}
+                                right={renderTopBarRight()}
+                            />
                         )}
                         {renderAvatars()}
                         <div className="small-class-realtime-content">
@@ -123,6 +127,7 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
                             <div
                                 className="small-class-realtime-avatars"
                                 data-user-uuid="[object Object]"
+                                hidden={!classroomStore.isAvatarsVisible()}
                             >
                                 <RTCAvatar
                                     avatarUser={classroomStore.users.creator}
@@ -227,12 +232,13 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
         //     );
         // }
 
-        // function renderTopBarCenter(): React.ReactNode {
-        //     if (!classroomStore.isCreator) {
-        //         return null;
-        //     }
-        //     return renderClassMode();
-        // }
+        function renderTopBarCenter(): React.ReactNode {
+            if (classroomStore.isAvatarsVisible()) {
+                return null;
+            } else {
+                return <div className="topbar-content-dimmed">{t("avatars-hidden")}</div>;
+            }
+        }
 
         function renderTopBarRight(): React.ReactNode {
             return (

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

@@ -1,15 +1,21 @@
+import showAvatarsJPG from "./assets/show-avatars.jpg?url";
+import hideAvatarsJPG from "./assets/hide-avatars.jpg?url";
+
 import type { PreferencesButtonProps } from "./index";
 
 import React, { useCallback, useContext } from "react";
 import { observer } from "mobx-react-lite";
 import { Radio } from "antd";
 import { FlatI18n, useLanguage, useTranslate } from "@netless/flat-i18n";
+import { RoomType } from "@netless/flat-server-api";
 import { AppearancePicker } from "flat-components";
 import { PreferencesStoreContext } from "../StoreProvider";
 
 export interface GeneralSettingsProps extends PreferencesButtonProps {}
 
-export const GeneralSettings = observer<GeneralSettingsProps>(function GeneralSettings() {
+export const GeneralSettings = observer<GeneralSettingsProps>(function GeneralSettings({
+    classroom,
+}) {
     const t = useTranslate();
 
     const language = useLanguage();
@@ -21,6 +27,8 @@ export const GeneralSettings = observer<GeneralSettingsProps>(function GeneralSe
         [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>
@@ -31,16 +39,40 @@ export const GeneralSettings = observer<GeneralSettingsProps>(function GeneralSe
                 <Radio.Group
                     className="preferences-modal-section-grid-content"
                     id="language"
+                    name="language"
                     value={language}
                     onChange={changeLanguage}
                 >
                     <Radio value="zh-CN">
-                        <span className="radio-item-inner">{t("chinese")}</span>
+                        <span>{t("chinese")}</span>
                     </Radio>
                     <Radio value="en">
-                        <span className="radio-item-inner">English</span>
+                        <span>English</span>
                     </Radio>
                 </Radio.Group>
+                {isSmallClass && (
+                    <>
+                        <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>
+                    </>
+                )}
                 <label className="preferences-modal-section-grid-label" htmlFor="theme">
                     {t("theme")}
                 </label>

packages/flat-pages/src/components/PreferencesButton/style.less

@@ -144,10 +144,63 @@
     align-items: center;
 }
 
+.preferences-modal-section-grid-label {
+    white-space: pre-wrap;
+}
+
 .preferences-modal-section-control {
     max-width: 320px;
 }
 
+.preferences-modal-section-radio {
+    width: 160px;
+    height: 120px;
+    padding: 90px 0 12px 16px;
+    margin-right: 16px;
+    border-radius: 6px;
+    border: 1px solid var(--grey-1);
+    overflow: hidden;
+
+    &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        display: block;
+        width: 100%;
+        height: 38px;
+        border-top: 1px solid var(--grey-1);
+        z-index: 200;
+    }
+
+    &::after {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        display: block;
+        width: 100%;
+        height: 40px;
+        transition: background-color 0.3s ease;
+    }
+
+    &.ant-radio-wrapper-checked::after {
+        background-color: var(--blue-1);
+    }
+
+    .ant-radio,
+    .ant-radio+span {
+        z-index: 100;
+    }
+
+    .ant-radio+span>img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 160px;
+        pointer-events: none;
+    }
+}
+
 .preferences-modal-section-button {
     position: relative;
     display: flex;
@@ -248,6 +301,22 @@
         border-bottom-color: var(--grey-9);
     }
 
+    .preferences-modal-section-radio {
+        border-color: var(--grey-7);
+
+        &::before {
+            border-color: var(--grey-7);
+        }
+
+        &.ant-radio-wrapper-checked::after {
+            background-color: var(--grey-9);
+        }
+
+        .ant-radio+span>img {
+            filter: brightness(0.8);
+        }
+    }
+
     .preferences-modal-hotkey-setting-content {
         .ant-table-header tr>th {
             border: none;

packages/flat-stores/src/classroom-store/index.ts

@@ -1224,6 +1224,14 @@ export class ClassroomStore {
         }
     }
 
+    public isAvatarsVisible(): boolean {
+        return globalStore.isAvatarsVisible(this.roomUUID);
+    }
+
+    public toggleAvatars = (): void => {
+        globalStore.toggleAvatars(this.roomUUID, !this.isAvatarsVisible());
+    };
+
     private async switchRoomStatus(roomStatus: RoomStatus): Promise<void> {
         if (!this.isCreator || this.roomStatusLoading !== RoomStatusLoadingType.Null) {
             return;

packages/flat-stores/src/global-store.ts

@@ -41,6 +41,11 @@ export class GlobalStore {
      * This array holds the rooms that this behavior has been done.
      */
     public onStageRoomUUIDs: string[] | undefined = undefined;
+    /**
+     * Users can hide avatars (top row) in small class mode.
+     * This array holds the rooms that its avatars have been hidden.
+     */
+    public hideAvatarsRoomUUIDs: string[] | undefined = undefined;
 
     public get userUUID(): string | undefined {
         return this.userInfo?.userUUID;
@@ -93,6 +98,24 @@ export class GlobalStore {
         return this.onStageRoomUUIDs?.includes(roomUUID) ?? false;
     };
 
+    public isAvatarsVisible = (roomUUID: string): boolean => {
+        return !this.hideAvatarsRoomUUIDs?.includes(roomUUID);
+    };
+
+    public toggleAvatars = (roomUUID: string, show: boolean): void => {
+        this.hideAvatarsRoomUUIDs ||= [];
+        if (show) {
+            this.hideAvatarsRoomUUIDs = this.hideAvatarsRoomUUIDs.filter(uuid => uuid !== roomUUID);
+        } else {
+            if (!this.hideAvatarsRoomUUIDs.includes(roomUUID)) {
+                this.hideAvatarsRoomUUIDs.push(roomUUID);
+            }
+            while (this.hideAvatarsRoomUUIDs.length > 10) {
+                this.hideAvatarsRoomUUIDs.shift();
+            }
+        }
+    };
+
     public updateToken = (
         config: Partial<
             Pick<