refactor(flat-pages): show join options in more places (#1855)

- add "auto mic on" option in create room box - make "auto mic/camera on" option take effect at once - add join options in device test page - always open device test page from join page
netless-io · Mar 7, 2023 · 33e1b0d · 33e1b0d
1 parent 38f0414
commit 33e1b0d
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 11 deletions.
diff --git a/packages/flat-components/src/components/DeviceTestPage/index.tsx b/packages/flat-components/src/components/DeviceTestPage/index.tsx
@@ -24,13 +24,18 @@ export interface DeviceTestPanelProps {
     isSpeakerAccessible: boolean;
     isMicrophoneAccessible: boolean;
     cameraVideoStreamRef: React.RefObject<HTMLDivElement>;
+    isTurnOffDeviceTest: boolean;
     setSpeakerDevice: (deviceID: string) => void;
     setCameraDevice: (deviceID: string) => void;
     setMicrophoneDevice: (deviceID: string) => void;
     startSpeakerTest: (url: string) => void;
     stopSpeakerTest: () => void;
     toggleDeviceTest: () => void;
     joinRoom: () => void;
+    autoMicOn: boolean;
+    autoCameraOn: boolean;
+    toggleAutoMicOn: () => void;
+    toggleAutoCameraOn: () => void;
 }
 
 export const DeviceTestPanel: React.FC<DeviceTestPanelProps> = ({
@@ -47,13 +52,18 @@ export const DeviceTestPanel: React.FC<DeviceTestPanelProps> = ({
     isSpeakerAccessible,
     isMicrophoneAccessible,
     cameraVideoStreamRef,
+    isTurnOffDeviceTest,
     setCameraDevice,
     setMicrophoneDevice,
     setSpeakerDevice,
     startSpeakerTest,
     stopSpeakerTest,
     toggleDeviceTest,
     joinRoom,
+    autoMicOn,
+    autoCameraOn,
+    toggleAutoMicOn,
+    toggleAutoCameraOn,
 }) => {
     const t = useTranslate();
     return (
@@ -87,11 +97,24 @@ export const DeviceTestPanel: React.FC<DeviceTestPanelProps> = ({
                         microphoneVolume={microphoneVolume}
                         setMicrophoneDevice={setMicrophoneDevice}
                     />
+                    <div className="device-test-panel-join-options">
+                        <div className="device-test-panel-join-options-text">
+                            {t("join-options")}
+                        </div>
+                        <Checkbox checked={autoMicOn} onClick={toggleAutoMicOn}>
+                            {t("turn-on-the-microphone")}
+                        </Checkbox>
+                        <Checkbox checked={autoCameraOn} onClick={toggleAutoCameraOn}>
+                            {t("turn-on-the-camera")}
+                        </Checkbox>
+                    </div>
                 </div>
             </div>
             <div className="device-test-panel-tips-box">
                 <div className="device-test-panel-tips-radio">
-                    <Checkbox onClick={toggleDeviceTest}>{t("close-tip")}</Checkbox>
+                    <Checkbox checked={isTurnOffDeviceTest} onClick={toggleDeviceTest}>
+                        {t("close-tip")}
+                    </Checkbox>
                 </div>
                 <div className="device-test-panel-join-btn">
                     <Button type="primary" onClick={joinRoom}>

diff --git a/packages/flat-components/src/components/DeviceTestPage/style.less b/packages/flat-components/src/components/DeviceTestPage/style.less
@@ -25,7 +25,16 @@
 }
 
 .device-test-panel-tips-radio {
-    > .ant-checkbox-wrapper {
+    >.ant-checkbox-wrapper {
         color: var(--text);
     }
 }
+
+.device-test-panel-join-options>.ant-checkbox-wrapper {
+    color: var(--text);
+}
+
+.device-test-panel-join-options-text {
+    color: #7a7b7c;
+    padding-bottom: 8px;
+}
diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -247,7 +247,7 @@
   "the-room-has-been-removed": "The room has been removed",
   "history": "History",
   "begin": "Begin",
-  "join-options": "Join option",
+  "join-options": "Join Options",
   "create-room-default-title": "The room created by {{name}}",
   "turn-on-the-camera": "Camera",
   "enter-room-uuid": "Please enter the room ID",
@@ -429,7 +429,7 @@
   "enable-camera-permission-tip": "Missing permission for camera access",
   "device-test": "Devices Test",
   "close-tip": "Close tip",
-  "device-test-option": "Device test option",
+  "device-test-option": "Device Test Options",
   "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",

diff --git a/packages/flat-pages/src/DevicesTestPage/index.tsx b/packages/flat-pages/src/DevicesTestPage/index.tsx
@@ -196,6 +196,8 @@ export const DevicesTestPage = observer(function DeviceTestPage() {
         <div className="device-test-page-container">
             <div className="device-test-panel-box">
                 <DeviceTestPanel
+                    autoCameraOn={preferencesStore.autoCameraOn}
+                    autoMicOn={preferencesStore.autoMicOn}
                     cameraDevices={cameraDevices}
                     cameraVideoStreamRef={cameraVideoStreamRef}
                     currentCameraDeviceID={cameraDeviceId}
@@ -204,6 +206,7 @@ export const DevicesTestPage = observer(function DeviceTestPage() {
                     isCameraAccessible={isCameraAccessible}
                     isMicrophoneAccessible={isMicrophoneAccessible}
                     isSpeakerAccessible={isSpeakerAccessible}
+                    isTurnOffDeviceTest={globalStore.isTurnOffDeviceTest}
                     joinRoom={joinRoom}
                     microphoneDevices={microphoneDevices}
                     microphoneVolume={volume}
@@ -214,7 +217,13 @@ export const DevicesTestPage = observer(function DeviceTestPage() {
                     speakerTestFileName={"Music"}
                     startSpeakerTest={rtc ? rtc.startSpeakerTest : noop}
                     stopSpeakerTest={rtc ? rtc.stopSpeakerTest : noop}
-                    toggleDeviceTest={() => globalStore.toggleDeviceTest()}
+                    toggleAutoCameraOn={() =>
+                        preferencesStore.updateAutoCameraOn(!preferencesStore.autoCameraOn)
+                    }
+                    toggleAutoMicOn={() =>
+                        preferencesStore.updateAutoMicOn(!preferencesStore.autoMicOn)
+                    }
+                    toggleDeviceTest={globalStore.toggleDeviceTest}
                 />
             </div>
         </div>

diff --git a/packages/flat-pages/src/HomePage/MainRoomMenu/CreateRoomBox.tsx b/packages/flat-pages/src/HomePage/MainRoomMenu/CreateRoomBox.tsx
@@ -12,6 +12,7 @@ import { useTranslate } from "@netless/flat-i18n";
 interface CreateRoomFormValues {
     roomTitle: string;
     roomType: RoomType;
+    autoMicOn: boolean;
     autoCameraOn: boolean;
 }
 
@@ -38,6 +39,7 @@ export const CreateRoomBox = observer<CreateRoomBoxProps>(function CreateRoomBox
             ? t("create-room-default-title", { name: globalStore.userInfo.name })
             : "",
         roomType: RoomType.BigClass,
+        autoMicOn: preferencesStore.autoMicOn,
         autoCameraOn: preferencesStore.autoCameraOn,
     };
 
@@ -146,6 +148,9 @@ export const CreateRoomBox = observer<CreateRoomBoxProps>(function CreateRoomBox
                         <ClassPicker value={classType} onChange={e => setClassType(RoomType[e])} />
                     </Form.Item>
                     <Form.Item label={t("join-options")}>
+                        <Form.Item noStyle name="autoMicOn" valuePropName="checked">
+                            <Checkbox>{t("turn-on-the-microphone")}</Checkbox>
+                        </Form.Item>
                         <Form.Item noStyle name="autoCameraOn" valuePropName="checked">
                             <Checkbox>{t("turn-on-the-camera")}</Checkbox>
                         </Form.Item>
@@ -190,6 +195,9 @@ export const CreateRoomBox = observer<CreateRoomBoxProps>(function CreateRoomBox
 
     function formValidateStatus(): void {
         setIsFormValidated(form.getFieldsError().every(field => field.errors.length <= 0));
+        const values = form.getFieldsValue();
+        preferencesStore.updateAutoMicOn(values.autoMicOn);
+        preferencesStore.updateAutoCameraOn(values.autoCameraOn);
     }
 });
 

diff --git a/packages/flat-pages/src/HomePage/MainRoomMenu/JoinRoomBox.tsx b/packages/flat-pages/src/HomePage/MainRoomMenu/JoinRoomBox.tsx
@@ -66,7 +66,7 @@ export const JoinRoomBox = observer<JoinRoomBoxProps>(function JoinRoomBox({ onJ
                     </Button>,
                     <Button
                         key="submit"
-                        disabled={!isFormValidated}
+                        disabled={!isFormValidated || form.getFieldValue("roomUUID").trim() === ""}
                         loading={isLoading}
                         type="primary"
                         onClick={handleOk}
@@ -169,5 +169,8 @@ export const JoinRoomBox = observer<JoinRoomBoxProps>(function JoinRoomBox({ onJ
 
     function formValidateStatus(): void {
         setIsFormValidated(form.getFieldsError().every(field => field.errors.length <= 0));
+        const values = form.getFieldsValue();
+        preferencesStore.updateAutoMicOn(values.autoMicOn);
+        preferencesStore.updateAutoCameraOn(values.autoCameraOn);
     }
 });
diff --git a/packages/flat-pages/src/JoinPage/index.tsx b/packages/flat-pages/src/JoinPage/index.tsx
@@ -49,7 +49,7 @@ export const JoinPage = observer(function JoinPage() {
 
     async function joinRoom(): Promise<void> {
         if (isLogin && roomUUID) {
-            if (globalStore.isTurnOffDeviceTest || window.isElectron) {
+            if (window.isElectron) {
                 await joinRoomHandler(roomUUID, pushHistory);
             } else {
                 pushHistory(RouteNameType.DevicesTestPage, { roomUUID });

diff --git a/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/index.less b/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/index.less
@@ -1,6 +1,7 @@
 .general-setting-container {
     min-width: 360px;
-    > span {
+
+    >span {
         color: #7a7b7c;
     }
 }
@@ -10,14 +11,17 @@
         display: block;
         padding-bottom: 4px;
     }
-    > label {
+
+    >label {
         padding-right: 16px;
         color: var(--text);
     }
+
     .ant-input {
         width: 320px;
         margin-bottom: 12px;
     }
+
     .ant-input,
     .ant-btn {
         margin-right: 8px;
@@ -75,18 +79,21 @@
         justify-content: center;
     }
 }
+
 .flat-color-scheme-dark .general-setting-user-avatar {
     border-color: var(--grey-6);
 }
+
 .general-setting-user-avatar:hover {
     border-color: var(--primary);
 }
 
 .general-setting-select-language {
-    > span {
+    >span {
         display: block;
         padding-bottom: 3px;
     }
+
     .ant-radio-group {
         margin-left: 0;
 
@@ -97,17 +104,24 @@
 }
 
 .general-setting-appearance-picker-container {
-    > span {
+    >span {
         display: block;
         padding-top: 8px;
         padding-bottom: 3px;
     }
 }
 
+.general-setting-join-options-box,
 .general-setting-device-test-box {
     padding-top: 12px;
 }
 
+.general-setting-join-options-box {
+    .ant-checkbox-wrapper {
+        margin-right: 36px;
+    }
+}
+
 .general-setting-checkbox-title {
     padding-bottom: 3px;
 }

diff --git a/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/index.tsx b/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/index.tsx
@@ -144,6 +144,25 @@ export const GeneralSettingPage = observer(function GeneralSettingPage() {
                         defaultValue={preferencesStore.prefersColorScheme}
                     />
                 </div>
+                <div className="general-setting-join-options-box">
+                    <div className="general-setting-join-options">{t("join-options")}</div>
+                    <Checkbox
+                        value={preferencesStore.autoMicOn}
+                        onClick={() =>
+                            preferencesStore.updateAutoMicOn(!preferencesStore.autoMicOn)
+                        }
+                    >
+                        {t("turn-on-the-microphone")}
+                    </Checkbox>
+                    <Checkbox
+                        value={preferencesStore.autoCameraOn}
+                        onClick={() =>
+                            preferencesStore.updateAutoCameraOn(!preferencesStore.autoCameraOn)
+                        }
+                    >
+                        {t("turn-on-the-camera")}
+                    </Checkbox>
+                </div>
                 <div className="general-setting-device-test-box">
                     <div className="general-setting-checkbox-title">{t("device-test-option")}</div>
                     <Checkbox

diff --git a/packages/flat-stores/src/preferences-store.ts b/packages/flat-stores/src/preferences-store.ts
@@ -79,3 +79,7 @@ export class PreferencesStore {
 }
 
 export const preferencesStore = new PreferencesStore();
+
+if (process.env.NODE_ENV !== "production") {
+    (window as any).preferencesStore = preferencesStore;
+}