netless-io · BlackHole1 · Jun 15, 2022 · Jun 15, 2022
diff --git a/desktop/renderer-app/src/pages/SmallClassPage/index.tsx b/desktop/renderer-app/src/pages/SmallClassPage/index.tsx
@@ -125,6 +125,16 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [classRoomStore.classMode, whiteboardStore.room, classRoomStore.users.currentUser?.isSpeak]);
 
+    // Turn off the microphone automatically when it becomes lecture mode.
+    useEffect(() => {
+        if (!classRoomStore.isCreator && whiteboardStore.room) {
+            const currentUser = classRoomStore.users.currentUser;
+            if (classRoomStore.classMode === ClassModeType.Lecture && currentUser) {
+                classRoomStore.updateDeviceState(currentUser.userUUID, currentUser.camera, false);
+            }
+        }
+    }, [classRoomStore, classRoomStore.classMode, whiteboardStore.room]);
+
     useEffect(() => {
         if (classRoomStore.isRecording) {
             window.clearTimeout(updateLayoutTimeoutRef.current);
@@ -278,20 +288,20 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
         return classRoomStore.classMode === ClassModeType.Lecture ? (
             <TopBarRoundBtn
                 dark
-                icon={<SVGModeInteractive />}
-                title={t("lecture-mode")}
+                icon={<SVGModeLecture />}
+                title={t("switch-to-interactive-mode")}
                 onClick={classRoomStore.toggleClassMode}
             >
-                {t("switch-to-interactive-mode")}
+                {t("lecture-mode")}
             </TopBarRoundBtn>
         ) : (
             <TopBarRoundBtn
                 dark
-                icon={<SVGModeLecture />}
-                title={t("interactive-mode")}
+                icon={<SVGModeInteractive />}
+                title={t("switch-to-lecture-mode")}
                 onClick={classRoomStore.toggleClassMode}
             >
-                {t("switch-to-lecture-mode")}
+                {t("interactive-mode")}
             </TopBarRoundBtn>
         );
     }
@@ -370,7 +380,17 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
                 isCreator={classRoomStore.isCreator}
                 rtcAvatar={classRoomStore.rtc.getAvatar(user.rtcUID)}
                 small={true}
-                updateDeviceState={classRoomStore.updateDeviceState}
+                updateDeviceState={(uid, camera, mic) => {
+                    // Disallow toggling mic when not speak.
+                    const _mic =
+                        whiteboardStore.isWritable ||
+                        user.userUUID === classRoomStore.ownerUUID ||
+                        user.userUUID !== classRoomStore.users.currentUser?.userUUID ||
+                        classRoomStore.classMode !== ClassModeType.Lecture
+                            ? mic
+                            : user.mic;
+                    classRoomStore.updateDeviceState(uid, camera, _mic);
+                }}
                 userUUID={classRoomStore.userUUID}
             />
         );

diff --git a/desktop/renderer-app/src/stores/class-room-store.ts b/desktop/renderer-app/src/stores/class-room-store.ts
@@ -842,6 +842,10 @@ export class ClassRoomStore {
                     }
                     return true;
                 });
+                // Turn on the microphone automatically.
+                if (accept && userUUID === this.userUUID && this.users.currentUser) {
+                    this.updateDeviceState(userUUID, this.users.currentUser.camera, true);
+                }
             }
         });
 

diff --git a/desktop/renderer-app/src/stores/whiteboard-store.ts b/desktop/renderer-app/src/stores/whiteboard-store.ts
@@ -114,10 +114,14 @@ export class WhiteboardStore {
         this.isWritable = isWritable;
 
         if (oldWritable !== isWritable && this.room) {
-            await this.room.setWritable(isWritable);
-            this.room.disableDeviceInputs = !isWritable;
-            if (isWritable) {
-                this.room.disableSerialization = false;
+            try {
+                await this.room.setWritable(isWritable);
+                this.room.disableDeviceInputs = !isWritable;
+                if (isWritable) {
+                    this.room.disableSerialization = false;
+                }
+            } catch {
+                /* ignored */
             }
         }
     };

diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -250,8 +250,8 @@
   "view-all-rooms-in-periodic-rooms": "View all ({{count}}) rooms",
   "ending": "Ending...",
   "follow-your-perspective-tips": "Other users will follow your perspective",
-  "interactive-mode": "Currently in interactive mode",
-  "lecture-mode": "Currently in lecture mode",
+  "interactive-mode": "Interactive Mode",
+  "lecture-mode": "Lecture Mode",
   "more": "More",
   "pause": "pause",
   "pausing": "Pausing...",

diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -256,10 +256,10 @@
   "resume": "恢复上课",
   "start": "开始上课",
   "follow-your-perspective-tips": "其他用户将跟随您的视角",
-  "lecture-mode": "当前为讲课模式",
-  "switch-to-interactive-mode": "互动模式",
-  "interactive-mode": "当前为互动模式",
-  "switch-to-lecture-mode": "讲课模式",
+  "lecture-mode": "讲课模式",
+  "switch-to-interactive-mode": "切换为互动模式",
+  "interactive-mode": "互动模式",
+  "switch-to-lecture-mode": "切换为讲课模式",
   "recording-completed-tips": "录制完成，可到历史记录查看",
   "general-settings": "常规设置",
   "shortcut-settings": "热键设置",

diff --git a/web/flat-web/src/pages/SmallClassPage/index.tsx b/web/flat-web/src/pages/SmallClassPage/index.tsx
@@ -118,6 +118,16 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [classRoomStore.classMode, whiteboardStore.room, classRoomStore.users.currentUser?.isSpeak]);
 
+    // Turn off the microphone automatically when it becomes lecture mode.
+    useEffect(() => {
+        if (!classRoomStore.isCreator && whiteboardStore.room) {
+            const currentUser = classRoomStore.users.currentUser;
+            if (classRoomStore.classMode === ClassModeType.Lecture && currentUser) {
+                classRoomStore.updateDeviceState(currentUser.userUUID, currentUser.camera, false);
+            }
+        }
+    }, [classRoomStore, classRoomStore.classMode, whiteboardStore.room]);
+
     useEffect(() => {
         if (classRoomStore.isRecording) {
             window.clearTimeout(updateLayoutTimeoutRef.current);
@@ -230,20 +240,20 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
         return classRoomStore.classMode === ClassModeType.Lecture ? (
             <TopBarRoundBtn
                 dark
-                icon={<SVGModeInteractive />}
-                title={t("lecture-mode")}
+                icon={<SVGModeLecture />}
+                title={t("switch-to-interactive-mode")}
                 onClick={classRoomStore.toggleClassMode}
             >
-                {t("switch-to-interactive-mode")}
+                {t("lecture-mode")}
             </TopBarRoundBtn>
         ) : (
             <TopBarRoundBtn
                 dark
-                icon={<SVGModeLecture />}
-                title={t("interactive-mode")}
+                icon={<SVGModeInteractive />}
+                title={t("switch-to-lecture-mode")}
                 onClick={classRoomStore.toggleClassMode}
             >
-                {t("switch-to-lecture-mode")}
+                {t("interactive-mode")}
             </TopBarRoundBtn>
         );
     }
@@ -318,7 +328,17 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
                 isCreator={classRoomStore.isCreator}
                 rtcAvatar={classRoomStore.rtc.getAvatar(user.rtcUID)}
                 small={true}
-                updateDeviceState={classRoomStore.updateDeviceState}
+                updateDeviceState={(uid, camera, mic) => {
+                    // Disallow toggling mic when not speak.
+                    const _mic =
+                        whiteboardStore.isWritable ||
+                        user.userUUID === classRoomStore.ownerUUID ||
+                        user.userUUID !== classRoomStore.users.currentUser?.userUUID ||
+                        classRoomStore.classMode !== ClassModeType.Lecture
+                            ? mic
+                            : user.mic;
+                    classRoomStore.updateDeviceState(uid, camera, _mic);
+                }}
                 userUUID={classRoomStore.userUUID}
             />
         );

diff --git a/web/flat-web/src/stores/class-room-store.ts b/web/flat-web/src/stores/class-room-store.ts
@@ -803,6 +803,10 @@ export class ClassRoomStore {
                     }
                     return true;
                 });
+                // Turn on the microphone automatically.
+                if (accept && userUUID === this.userUUID && this.users.currentUser) {
+                    this.updateDeviceState(userUUID, this.users.currentUser.camera, true);
+                }
             }
         });
 

diff --git a/web/flat-web/src/stores/whiteboard-store.ts b/web/flat-web/src/stores/whiteboard-store.ts
@@ -113,10 +113,14 @@ export class WhiteboardStore {
 
         this.isWritable = isWritable;
         if (oldWritable !== isWritable && this.room) {
-            await this.room.setWritable(isWritable);
-            this.room.disableDeviceInputs = !isWritable;
-            if (isWritable) {
-                this.room.disableSerialization = false;
+            try {
+                await this.room.setWritable(isWritable);
+                this.room.disableDeviceInputs = !isWritable;
+                if (isWritable) {
+                    this.room.disableSerialization = false;
+                }
+            } catch {
+                /* ignored */
             }
         }
     };