feat(classroom): add auto recording and pencil tail settings (#1706)

* feat(classroom): add auto recording and pencil tail settings * use preference store
netless-io · Sep 21, 2022 · 6456334 · 6456334
1 parent c98d858
commit 6456334
Show file tree

Hide file tree

Showing 11 changed files with 84 additions and 6 deletions.
diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -419,7 +419,7 @@
   "device-test": "Devices Test",
   "close-tip": "Close tip",
   "device-test-option": "Device test option",
-  "turn-on-device-test": "Turn on device test when join the room",
+  "turn-on-device-test": "Turn on device test on entering room",
   "user-guide-text": "Want to learn more about {{appName}}? ",
   "user-guide-button": "Check it out now",
   "start-recording": "Start recording",
@@ -491,5 +491,13 @@
   "replay-page": {
     "loading": "Loading",
     "playing": "Now Playing"
+  },
+  "recording-settings": {
+    "title": "Recording Options",
+    "auto-recording": "Turn on recording on entering room"
+  },
+  "whiteboard-settings": {
+    "title": "Whiteboard Options",
+    "pencil-tail": "Pencil tail"
   }
 }
diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -491,5 +491,13 @@
   "replay-page": {
     "loading": "加载中",
     "playing": "正在播放"
+  },
+  "recording-settings": {
+    "title": "录制选项",
+    "auto-recording": "进入房间自动开启录制"
+  },
+  "whiteboard-settings": {
+    "title": "笔锋选项",
+    "pencil-tail": "开启铅笔笔锋"
   }
 }
diff --git a/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/index.less b/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/index.less
@@ -121,6 +121,10 @@
     line-height: 40px;
 }
 
+.general-setting-recording-box {
+    padding-top: 8px;
+}
+
 .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
@@ -147,14 +147,38 @@ export const GeneralSettingPage = observer(function GeneralSettingPage() {
                 <div className="general-setting-device-test-box">
                     <div className="general-setting-checkbox-title">{t("device-test-option")}</div>
                     <Checkbox
-                        defaultChecked={!globalStore.isTurnOffDeviceTest}
-                        onClick={() => {
-                            globalStore.toggleDeviceTest();
-                        }}
+                        checked={!globalStore.isTurnOffDeviceTest}
+                        onClick={globalStore.toggleDeviceTest}
                     >
                         <span className="checkbox-item-inner">{t("turn-on-device-test")}</span>
                     </Checkbox>
                 </div>
+                <div className="general-setting-recording-box">
+                    <div className="general-setting-checkbox-title">
+                        {t("recording-settings.title")}
+                    </div>
+                    <Checkbox
+                        checked={preferencesStore.autoRecording}
+                        onClick={preferencesStore.toggleAutoRecording}
+                    >
+                        <span className="checkbox-item-inner">
+                            {t("recording-settings.auto-recording")}
+                        </span>
+                    </Checkbox>
+                </div>
+                <div className="general-setting-recording-box">
+                    <div className="general-setting-checkbox-title">
+                        {t("whiteboard-settings.title")}
+                    </div>
+                    <Checkbox
+                        checked={preferencesStore.strokeTail}
+                        onClick={preferencesStore.toggleStrokeTail}
+                    >
+                        <span className="checkbox-item-inner">
+                            {t("whiteboard-settings.pencil-tail")}
+                        </span>
+                    </Checkbox>
+                </div>
                 <div className="general-setting-user-account">
                     <span className="general-setting-title">{t("delete-account")}</span>
                     <div>

diff --git a/packages/flat-pages/src/utils/with-classroom-store.tsx b/packages/flat-pages/src/utils/with-classroom-store.tsx
@@ -1,5 +1,5 @@
-import { ClassroomStore } from "@netless/flat-stores";
 import React from "react";
+import { ClassroomStore } from "@netless/flat-stores";
 import { RouteNameType, RouteParams } from "../utils/routes";
 import { useParams } from "react-router-dom";
 import { useClassroomStore } from "./use-classroom-store";

diff --git a/packages/flat-services/src/services/whiteboard/whiteboard.ts b/packages/flat-services/src/services/whiteboard/whiteboard.ts
@@ -6,6 +6,13 @@ import { IService } from "../typing";
 import { IServiceWhiteboardPhase } from "./constants";
 import { IServiceWhiteboardEvents } from "./events";
 
+export interface IServiceWhiteboardOptions {
+    /**
+     * true = render stroke tail
+     */
+    strokeTail?: boolean;
+}
+
 export interface IServiceWhiteboardJoinRoomConfig extends IService {
     appID?: string;
     roomID: string;
@@ -14,6 +21,7 @@ export interface IServiceWhiteboardJoinRoomConfig extends IService {
     nickName: string;
     region: Region;
     classroomType: RoomType;
+    options?: IServiceWhiteboardOptions;
 }
 
 export interface IServiceWhiteboard$Val {

diff --git a/packages/flat-stores/src/classroom-store/index.ts b/packages/flat-stores/src/classroom-store/index.ts
@@ -482,6 +482,10 @@ export class ClassroomStore {
                 roomID: this.roomUUID,
                 classroomType: this.roomType,
             });
+
+            if (preferencesStore.autoRecording && !this.isRecording) {
+                await this.toggleRecording();
+            }
         }
     }
 

diff --git a/packages/flat-stores/src/global-store.ts b/packages/flat-stores/src/global-store.ts
@@ -132,3 +132,7 @@ export class GlobalStore {
 }
 
 export const globalStore = new GlobalStore();
+
+if (process.env.NODE_ENV !== "production") {
+    (window as any).globalStore = globalStore;
+}
diff --git a/packages/flat-stores/src/preferences-store.ts b/packages/flat-stores/src/preferences-store.ts
@@ -23,6 +23,10 @@ export class PreferencesStore {
     public microphoneId?: string | null = null;
 
     public prefersColorScheme: FlatPrefersColorScheme = "light";
+    /** Turn on recording on joining room */
+    public autoRecording = false;
+    /** Show or hide stroke tails */
+    public strokeTail = true;
 
     public constructor() {
         autoPersistStore({ storeLSName: "PreferencesStore", store: this, version: LS_VERSION });
@@ -58,6 +62,14 @@ export class PreferencesStore {
     public updatePrefersColorScheme = (prefersColorScheme: FlatPrefersColorScheme): void => {
         this.prefersColorScheme = prefersColorScheme;
     };
+
+    public toggleAutoRecording = (): void => {
+        this.autoRecording = !this.autoRecording;
+    };
+
+    public toggleStrokeTail = (): void => {
+        this.strokeTail = !this.strokeTail;
+    };
 }
 
 export const preferencesStore = new PreferencesStore();
diff --git a/packages/flat-stores/src/whiteboard-store/index.ts b/packages/flat-stores/src/whiteboard-store/index.ts
@@ -14,6 +14,7 @@ import { globalStore } from "../global-store";
 import { ClassroomReplayEventData } from "../classroom-store/event";
 import { FlatServices, IServiceWhiteboard } from "@netless/flat-services";
 import { SideEffectManager } from "side-effect-manager";
+import { preferencesStore } from "../preferences-store";
 
 export class WhiteboardStore {
     private sideEffect = new SideEffectManager();
@@ -163,6 +164,9 @@ export class WhiteboardStore {
             uid: globalStore.userUUID,
             nickName: globalStore.userInfo?.name ?? globalStore.userUUID,
             classroomType: this.getRoomType(),
+            options: {
+                strokeTail: preferencesStore.strokeTail,
+            },
         });
 
         // @TODO remove me after refactoring

diff --git a/service-providers/fastboard/src/index.ts b/service-providers/fastboard/src/index.ts
@@ -184,6 +184,7 @@ export class Fastboard extends IServiceWhiteboard {
         nickName,
         region,
         classroomType,
+        options = {},
     }: IServiceWhiteboardJoinRoomConfig): Promise<void> {
         if (!appID) {
             throw new Error("[Fastboard] APP_ID is not set");
@@ -205,6 +206,7 @@ export class Fastboard extends IServiceWhiteboard {
                 pptParams: {
                     useServerWrap: true,
                 },
+                disableNewPencilStroke: options.strokeTail === false,
             },
             managerConfig: {
                 containerSizeRatio: classroomType === RoomType.SmallClass ? 8.3 / 16 : 10.46 / 16,