fix(flat-stores): set devices on entering room (#1926)

* fix(flat-stores): set devices on entering room * refactor(flat-pages): add place holder to device settings * fix typo
netless-io · May 10, 2023 · 318b938 · 318b938
1 parent aea1d42
commit 318b938
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 20 deletions.
diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -666,5 +666,6 @@
   "restore-windows": "restore windows",
   "show": "Show",
   "hide": "Hide",
-  "avatars-hidden": "Avatars are hidden"
+  "avatars-hidden": "Avatars are hidden",
+  "default": "default"
 }
diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -666,5 +666,6 @@
   "restore-windows": "复位",
   "show": "显示",
   "hide": "隐藏",
-  "avatars-hidden": "视频区域已隐藏"
+  "avatars-hidden": "视频区域已隐藏",
+  "default": "默认"
 }
diff --git a/packages/flat-pages/src/components/PreferencesButton/CameraSettings.tsx b/packages/flat-pages/src/components/PreferencesButton/CameraSettings.tsx
@@ -1,18 +1,20 @@
 import type { PreferencesButtonProps } from "./index";
 
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useContext, useEffect } from "react";
 import { observer } from "mobx-react-lite";
 import { Select } from "antd";
 
 import { useTranslate } from "@netless/flat-i18n";
 import { IServiceVideoChatDevice } from "@netless/flat-services";
 import { useSafePromise } from "flat-components";
+import { PreferencesStoreContext } from "../StoreProvider";
 
 export interface CameraSettingsProps extends PreferencesButtonProps {}
 
 export const CameraSettings = observer<CameraSettingsProps>(function CameraSettings({ classroom }) {
     const t = useTranslate();
     const sp = useSafePromise();
+    const preferences = useContext(PreferencesStoreContext);
     const { rtc } = classroom;
     const [current, setCurrent] = React.useState<string | null>(null);
     const [devices, setDevices] = React.useState<IServiceVideoChatDevice[]>([]);
@@ -29,28 +31,32 @@ export const CameraSettings = observer<CameraSettingsProps>(function CameraSetti
 
     useEffect(() => {
         if (devices.length) {
-            const current = classroom.rtc.getCameraID();
+            const current = rtc.getCameraID();
             if (current && devices.find(device => device.deviceId === current)) {
                 setCurrent(current);
             } else {
-                classroom.rtc.setCameraID(devices[0].deviceId);
+                const first = devices[0].deviceId;
+                preferences.updateCameraId(first);
+                rtc.setCameraID(first);
             }
         }
-    }, [classroom.rtc, devices]);
+    }, [rtc, devices, preferences]);
 
     const changeCamera = useCallback(
         (deviceId: string) => {
-            classroom.rtc.setCameraID(deviceId);
+            preferences.updateCameraId(deviceId);
+            rtc.setCameraID(deviceId);
             setCurrent(deviceId);
         },
-        [classroom.rtc],
+        [preferences, rtc],
     );
 
     return (
         <div className="preferences-modal-section" id="preferences-1">
             <h3 className="preferences-modal-section-title">{t("camera-settings")}</h3>
             <Select
                 className="preferences-modal-section-control"
+                placeholder={t("default")}
                 value={current}
                 onChange={changeCamera}
             >

diff --git a/packages/flat-pages/src/components/PreferencesButton/MicrophoneSettings.tsx b/packages/flat-pages/src/components/PreferencesButton/MicrophoneSettings.tsx
@@ -1,12 +1,13 @@
 import type { PreferencesButtonProps } from "./index";
 
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useContext, useEffect } from "react";
 import { observer } from "mobx-react-lite";
 import { Select } from "antd";
 
 import { useTranslate } from "@netless/flat-i18n";
 import { IServiceVideoChatDevice } from "@netless/flat-services";
 import { useSafePromise } from "flat-components";
+import { PreferencesStoreContext } from "../StoreProvider";
 
 export interface MicrophoneSettingsProps extends PreferencesButtonProps {}
 
@@ -15,6 +16,7 @@ export const MicrophoneSettings = observer<MicrophoneSettingsProps>(function Mic
 }) {
     const t = useTranslate();
     const sp = useSafePromise();
+    const preferences = useContext(PreferencesStoreContext);
     const { rtc } = classroom;
     const [current, setCurrent] = React.useState<string | null>(null);
     const [devices, setDevices] = React.useState<IServiceVideoChatDevice[]>([]);
@@ -31,28 +33,32 @@ export const MicrophoneSettings = observer<MicrophoneSettingsProps>(function Mic
 
     useEffect(() => {
         if (devices.length) {
-            const current = classroom.rtc.getMicID();
+            const current = rtc.getMicID();
             if (current && devices.find(device => device.deviceId === current)) {
                 setCurrent(current);
             } else {
-                classroom.rtc.setMicID(devices[0].deviceId);
+                const first = devices[0].deviceId;
+                preferences.updateMicrophoneId(first);
+                rtc.setMicID(first);
             }
         }
-    }, [classroom.rtc, devices]);
+    }, [rtc, devices, preferences]);
 
     const changeMicrophone = useCallback(
         (deviceId: string) => {
-            classroom.rtc.setMicID(deviceId);
+            preferences.updateMicrophoneId(deviceId);
+            rtc.setMicID(deviceId);
             setCurrent(deviceId);
         },
-        [classroom.rtc],
+        [preferences, rtc],
     );
 
     return (
         <div className="preferences-modal-section" id="preferences-3">
             <h3 className="preferences-modal-section-title">{t("microphone-settings")}</h3>
             <Select
                 className="preferences-modal-section-control"
+                placeholder={t("default")}
                 value={current}
                 onChange={changeMicrophone}
             >

diff --git a/packages/flat-pages/src/components/PreferencesButton/SpeakerSettings.tsx b/packages/flat-pages/src/components/PreferencesButton/SpeakerSettings.tsx
@@ -9,7 +9,7 @@ import { Button, Select } from "antd";
 import { useTranslate } from "@netless/flat-i18n";
 import { IServiceVideoChatDevice } from "@netless/flat-services";
 import { SVGPause, SVGPlay, useSafePromise } from "flat-components";
-import { RuntimeContext } from "../StoreProvider";
+import { PreferencesStoreContext, RuntimeContext } from "../StoreProvider";
 
 export interface SpeakerSettingsProps extends PreferencesButtonProps {}
 
@@ -19,6 +19,7 @@ export const SpeakerSettings = observer<SpeakerSettingsProps>(function SpeakerSe
     const t = useTranslate();
     const sp = useSafePromise();
     const runtime = useContext(RuntimeContext);
+    const preferences = useContext(PreferencesStoreContext);
     const { rtc } = classroom;
     const [current, setCurrent] = React.useState<string | null>(null);
     const [devices, setDevices] = React.useState<IServiceVideoChatDevice[]>([]);
@@ -35,21 +36,24 @@ export const SpeakerSettings = observer<SpeakerSettingsProps>(function SpeakerSe
 
     useEffect(() => {
         if (devices.length) {
-            const current = classroom.rtc.getSpeakerID();
+            const current = rtc.getSpeakerID();
             if (current && devices.find(device => device.deviceId === current)) {
                 setCurrent(current);
             } else {
-                classroom.rtc.setSpeakerID(devices[0].deviceId);
+                const first = devices[0].deviceId;
+                preferences.updateSpeakerId(first);
+                rtc.setSpeakerID(first);
             }
         }
-    }, [classroom.rtc, devices]);
+    }, [rtc, devices, preferences]);
 
     const changeSpeaker = useCallback(
         (value: string): void => {
-            classroom.rtc.setSpeakerID(value);
+            preferences.updateSpeakerId(value);
+            rtc.setSpeakerID(value);
             setCurrent(value);
         },
-        [classroom.rtc],
+        [preferences, rtc],
     );
 
     const [isPlaying, setPlaying] = useState(false);
@@ -82,6 +86,7 @@ export const SpeakerSettings = observer<SpeakerSettingsProps>(function SpeakerSe
             <h3 className="preferences-modal-section-title">{t("speaker-settings")}</h3>
             <Select
                 className="preferences-modal-section-control"
+                placeholder={t("default")}
                 value={current}
                 onChange={changeSpeaker}
             >

diff --git a/packages/flat-stores/src/classroom-store/index.ts b/packages/flat-stores/src/classroom-store/index.ts
@@ -1375,6 +1375,18 @@ export class ClassroomStore {
                 shareScreenToken: globalStore.rtcShareScreen?.token || "",
             });
 
+            if (preferencesStore.cameraId) {
+                await this.rtc.setCameraID(preferencesStore.cameraId);
+            }
+
+            if (preferencesStore.microphoneId) {
+                await this.rtc.setMicID(preferencesStore.microphoneId);
+            }
+
+            if (preferencesStore.speakerId) {
+                await this.rtc.setSpeakerID(preferencesStore.speakerId);
+            }
+
             runInAction(() => {
                 this.isJoinedRTC = true;
             });