refactor: move media settings to developer tab, centralize config defaults

src/settings/DeveloperSettingsTab.tsx

@@ -8,6 +8,7 @@ Please see LICENSE in the repository root for full details.
 import {
   type ChangeEvent,
   type FC,
+  type ReactNode,
   useCallback,
   useEffect,
   useMemo,
@@ -29,11 +30,13 @@ import {
   InlineField,
   Label,
   RadioControl,
+  Separator,
 } from "@vector-im/compound-web";
 import { type Room as LivekitRoom } from "livekit-client";
 
 import { FieldRow, InputField } from "../input/Input";
 import {
+  type Setting,
   useSetting,
   duplicateTiles as duplicateTilesSetting,
   debugTileLayout as debugTileLayoutSetting,
@@ -43,8 +46,24 @@ import {
   matrixRTCMode as matrixRTCModeSetting,
   customLivekitUrl as customLivekitUrlSetting,
   MatrixRTCMode,
+  advancedScreenShare as advancedScreenShareSetting,
+  screenShareResolution as screenShareResolutionSetting,
+  screenShareFramerate as screenShareFramerateSetting,
+  screenShareBitrate as screenShareBitrateSetting,
+  screenShareCodec as screenShareCodecSetting,
+  advancedCamera as advancedCameraSetting,
+  cameraResolution as cameraResolutionSetting,
+  cameraFramerate as cameraFramerateSetting,
+  cameraBitrate as cameraBitrateSetting,
+  cameraCodec as cameraCodecSetting,
+  echoCancellationSetting,
+  noiseSuppressionSetting,
+  autoGainControlSetting,
+  type VideoCodec,
 } from "./settings";
 import styles from "./DeveloperSettingsTab.module.css";
+import settingsStyles from "./SettingsModal.module.css";
+import { Slider } from "../Slider";
 import { useUrlParams } from "../UrlParams";
 import { getSFUConfigWithOpenID } from "../livekit/openIDSFU";
 
@@ -127,6 +146,185 @@ export const DeveloperSettingsTab: FC<Props> = ({
     return null;
   }, [livekitRooms]);
 
+  const MediaQualitySettings: React.FC<{
+    id: string;
+    header: string;
+    toggleLabel: string;
+    description: string;
+    toggleSetting: Setting<boolean>;
+    resolutionSetting: Setting<string>;
+    framerateSetting: Setting<number>;
+    bitrateSetting: Setting<number>;
+    codecSetting: Setting<VideoCodec>;
+    resolutionOptions: { value: string; label: string }[];
+    bitrateRange: { min: number; max: number; step: number };
+  }> = ({
+    id,
+    header,
+    toggleLabel,
+    description,
+    toggleSetting,
+    resolutionSetting,
+    framerateSetting,
+    bitrateSetting,
+    codecSetting,
+    resolutionOptions,
+    bitrateRange,
+  }): ReactNode => {
+    const [advancedEnabled, setAdvancedEnabled] = useSetting(toggleSetting);
+    const [resolution, setResolution] = useSetting(resolutionSetting);
+    const [framerate, setFramerate] = useSetting(framerateSetting);
+    const [framerateRaw, setFramerateRaw] = useState(framerate);
+    const [bitrate, setBitrate] = useSetting(bitrateSetting);
+    const [bitrateRaw, setBitrateRaw] = useState(bitrate);
+    const [codec, setCodec] = useSetting(codecSetting);
+
+    return (
+      <>
+        <h4>{header}</h4>
+        <FieldRow>
+          <InputField
+            id={`${id}Toggle`}
+            label={toggleLabel}
+            description={description}
+            type="checkbox"
+            checked={advancedEnabled}
+            onChange={(e): void => setAdvancedEnabled(e.target.checked)}
+          />
+        </FieldRow>
+        {advancedEnabled && (
+          <>
+            <div className={settingsStyles.volumeSlider}>
+              <label htmlFor={`${id}Resolution`}>
+                {t("settings.resolution_label", "Resolution")}
+              </label>
+              <select
+                id={`${id}Resolution`}
+                value={resolution}
+                onChange={(e): void => setResolution(e.target.value)}
+              >
+                {resolutionOptions.map((opt) => (
+                  <option key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className={settingsStyles.volumeSlider}>
+              <label>
+                {t("settings.framerate_label", "Framerate")}
+                {": "}
+                <span className={settingsStyles.settingValue}>
+                  {framerateRaw} fps
+                </span>
+              </label>
+              <Slider
+                label={t("settings.framerate_label", "Framerate")}
+                value={framerateRaw}
+                onValueChange={setFramerateRaw}
+                onValueCommit={setFramerate}
+                min={5}
+                max={60}
+                step={5}
+                tooltipFormatter={(v): string => `${v} fps`}
+              />
+            </div>
+            <div className={settingsStyles.volumeSlider}>
+              <label>
+                {t("settings.bitrate_label", "Bitrate")}
+                {": "}
+                <span className={settingsStyles.settingValue}>
+                  {(bitrateRaw / 1_000_000).toFixed(1)} Mbps
+                </span>
+              </label>
+              <Slider
+                label={t("settings.bitrate_label", "Bitrate")}
+                value={bitrateRaw}
+                onValueChange={setBitrateRaw}
+                onValueCommit={setBitrate}
+                min={bitrateRange.min}
+                max={bitrateRange.max}
+                step={bitrateRange.step}
+                tooltipFormatter={(v): string =>
+                  `${(v / 1_000_000).toFixed(1)} Mbps`
+                }
+              />
+            </div>
+            <div className={settingsStyles.volumeSlider}>
+              <label htmlFor={`${id}Codec`}>
+                {t("settings.codec_label", "Codec")}
+              </label>
+              <select
+                id={`${id}Codec`}
+                value={codec}
+                onChange={(e): void => setCodec(e.target.value as VideoCodec)}
+              >
+                <option value="vp8">VP8</option>
+                <option value="vp9">VP9</option>
+                <option value="h264">H.264</option>
+                <option value="av1">AV1</option>
+              </select>
+            </div>
+          </>
+        )}
+      </>
+    );
+  };
+
+  const AudioProcessingSettings: React.FC = (): ReactNode => {
+    const [echoCancellation, setEchoCancellation] = useSetting(
+      echoCancellationSetting,
+    );
+    const [noiseSuppression, setNoiseSuppression] = useSetting(
+      noiseSuppressionSetting,
+    );
+    const [autoGainControl, setAutoGainControl] = useSetting(
+      autoGainControlSetting,
+    );
+
+    return (
+      <>
+        <h4>{t("settings.audio_processing_header", "Audio processing")}</h4>
+        <p>
+          {t(
+            "settings.audio_processing_description",
+            "Changes apply on next call join.",
+          )}
+        </p>
+        <FieldRow>
+          <InputField
+            id="echoCancellation"
+            label={t("settings.echo_cancellation_label", "Echo cancellation")}
+            type="checkbox"
+            checked={echoCancellation}
+            onChange={(e): void => setEchoCancellation(e.target.checked)}
+          />
+        </FieldRow>
+        <FieldRow>
+          <InputField
+            id="noiseSuppression"
+            label={t("settings.noise_suppression_label", "Noise suppression")}
+            type="checkbox"
+            checked={noiseSuppression}
+            onChange={(e): void => setNoiseSuppression(e.target.checked)}
+          />
+        </FieldRow>
+        <FieldRow>
+          <InputField
+            id="autoGainControl"
+            label={t(
+              "settings.auto_gain_control_label",
+              "Automatic gain control",
+            )}
+            type="checkbox"
+            checked={autoGainControl}
+            onChange={(e): void => setAutoGainControl(e.target.checked)}
+          />
+        </FieldRow>
+      </>
+    );
+  };
+
   return (
     <>
       <p>
@@ -379,6 +577,60 @@ export const DeveloperSettingsTab: FC<Props> = ({
       <pre>{JSON.stringify(env, null, 2)}</pre>
       <p>{t("developer_mode.url_params")}</p>
       <pre>{JSON.stringify(urlParams, null, 2)}</pre>
+      <Separator />
+      <MediaQualitySettings
+        id="camera"
+        header={t("settings.camera_header", "Camera quality")}
+        toggleLabel={t(
+          "settings.advanced_camera_label",
+          "Advanced camera settings",
+        )}
+        description={t(
+          "settings.advanced_camera_description",
+          "Configure resolution, framerate, bitrate, and codec for camera video. Changes apply on next call join.",
+        )}
+        toggleSetting={advancedCameraSetting}
+        resolutionSetting={cameraResolutionSetting}
+        framerateSetting={cameraFramerateSetting}
+        bitrateSetting={cameraBitrateSetting}
+        codecSetting={cameraCodecSetting}
+        resolutionOptions={[
+          { value: "640x360", label: "360p" },
+          { value: "960x540", label: "540p" },
+          { value: "1280x720", label: "720p" },
+          { value: "1920x1080", label: "1080p" },
+          { value: "2560x1440", label: "1440p" },
+        ]}
+        bitrateRange={{ min: 200_000, max: 8_000_000, step: 100_000 }}
+      />
+      <Separator />
+      <MediaQualitySettings
+        id="screenShare"
+        header={t("settings.screen_share_header", "Screen sharing")}
+        toggleLabel={t(
+          "settings.advanced_screen_share_label",
+          "Advanced screen share settings",
+        )}
+        description={t(
+          "settings.advanced_screen_share_description",
+          "Configure resolution, framerate, bitrate, and codec for screen sharing",
+        )}
+        toggleSetting={advancedScreenShareSetting}
+        resolutionSetting={screenShareResolutionSetting}
+        framerateSetting={screenShareFramerateSetting}
+        bitrateSetting={screenShareBitrateSetting}
+        codecSetting={screenShareCodecSetting}
+        resolutionOptions={[
+          { value: "1024x576", label: "576p" },
+          { value: "1280x720", label: "720p" },
+          { value: "1920x1080", label: "1080p" },
+          { value: "2560x1440", label: "1440p" },
+          { value: "3840x2160", label: "4K" },
+        ]}
+        bitrateRange={{ min: 500_000, max: 15_000_000, step: 500_000 }}
+      />
+      <Separator />
+      <AudioProcessingSettings />
     </>
   );
 };

src/settings/SettingsModal.tsx

@@ -20,25 +20,10 @@ import { iosDeviceMenu$ } from "../state/MediaDevices";
 import { useMediaDevices } from "../MediaDevicesContext";
 import { widget } from "../widget";
 import {
-  type Setting,
   useSetting,
   soundEffectVolume as soundEffectVolumeSetting,
   backgroundBlur as backgroundBlurSetting,
   developerMode,
-  advancedScreenShare as advancedScreenShareSetting,
-  screenShareResolution as screenShareResolutionSetting,
-  screenShareFramerate as screenShareFramerateSetting,
-  screenShareBitrate as screenShareBitrateSetting,
-  screenShareCodec as screenShareCodecSetting,
-  advancedCamera as advancedCameraSetting,
-  cameraResolution as cameraResolutionSetting,
-  cameraFramerate as cameraFramerateSetting,
-  cameraBitrate as cameraBitrateSetting,
-  cameraCodec as cameraCodecSetting,
-  echoCancellationSetting,
-  noiseSuppressionSetting,
-  autoGainControlSetting,
-  type VideoCodec,
 } from "./settings";
 import { PreferencesSettingsTab } from "./PreferencesSettingsTab";
 import { Slider } from "../Slider";
@@ -113,191 +98,6 @@ export const SettingsModal: FC<Props> = ({
     );
   };
 
-  const MediaQualitySettings: React.FC<{
-    id: string;
-    header: string;
-    toggleLabel: string;
-    description: string;
-    toggleSetting: Setting<boolean>;
-    resolutionSetting: Setting<string>;
-    framerateSetting: Setting<number>;
-    bitrateSetting: Setting<number>;
-    codecSetting: Setting<VideoCodec>;
-    resolutionOptions: { value: string; label: string }[];
-    bitrateRange: { min: number; max: number; step: number };
-  }> = ({
-    id,
-    header,
-    toggleLabel,
-    description,
-    toggleSetting,
-    resolutionSetting,
-    framerateSetting,
-    bitrateSetting,
-    codecSetting,
-    resolutionOptions,
-    bitrateRange,
-  }): ReactNode => {
-    const [advancedEnabled, setAdvancedEnabled] = useSetting(toggleSetting);
-    const [resolution, setResolution] = useSetting(resolutionSetting);
-    const [framerate, setFramerate] = useSetting(framerateSetting);
-    const [framerateRaw, setFramerateRaw] = useState(framerate);
-    const [bitrate, setBitrate] = useSetting(bitrateSetting);
-    const [bitrateRaw, setBitrateRaw] = useState(bitrate);
-    const [codec, setCodec] = useSetting(codecSetting);
-
-    return (
-      <>
-        <h4>{header}</h4>
-        <FieldRow>
-          <InputField
-            id={`${id}Toggle`}
-            label={toggleLabel}
-            description={description}
-            type="checkbox"
-            checked={advancedEnabled}
-            onChange={(e): void => setAdvancedEnabled(e.target.checked)}
-          />
-        </FieldRow>
-        {advancedEnabled && (
-          <>
-            <div className={styles.volumeSlider}>
-              <label htmlFor={`${id}Resolution`}>
-                {t("settings.resolution_label", "Resolution")}
-              </label>
-              <select
-                id={`${id}Resolution`}
-                value={resolution}
-                onChange={(e): void => setResolution(e.target.value)}
-              >
-                {resolutionOptions.map((opt) => (
-                  <option key={opt.value} value={opt.value}>
-                    {opt.label}
-                  </option>
-                ))}
-              </select>
-            </div>
-            <div className={styles.volumeSlider}>
-              <label>
-                {t("settings.framerate_label", "Framerate")}
-                {": "}
-                <span className={styles.settingValue}>{framerateRaw} fps</span>
-              </label>
-              <Slider
-                label={t("settings.framerate_label", "Framerate")}
-                value={framerateRaw}
-                onValueChange={setFramerateRaw}
-                onValueCommit={setFramerate}
-                min={5}
-                max={60}
-                step={5}
-                tooltipFormatter={(v): string => `${v} fps`}
-              />
-            </div>
-            <div className={styles.volumeSlider}>
-              <label>
-                {t("settings.bitrate_label", "Bitrate")}
-                {": "}
-                <span className={styles.settingValue}>
-                  {(bitrateRaw / 1_000_000).toFixed(1)} Mbps
-                </span>
-              </label>
-              <Slider
-                label={t("settings.bitrate_label", "Bitrate")}
-                value={bitrateRaw}
-                onValueChange={setBitrateRaw}
-                onValueCommit={setBitrate}
-                min={bitrateRange.min}
-                max={bitrateRange.max}
-                step={bitrateRange.step}
-                tooltipFormatter={(v): string =>
-                  `${(v / 1_000_000).toFixed(1)} Mbps`
-                }
-              />
-            </div>
-            <div className={styles.volumeSlider}>
-              <label htmlFor={`${id}Codec`}>
-                {t("settings.codec_label", "Codec")}
-              </label>
-              <select
-                id={`${id}Codec`}
-                value={codec}
-                onChange={(e): void =>
-                  setCodec(e.target.value as VideoCodec)
-                }
-              >
-                <option value="vp8">VP8</option>
-                <option value="vp9">VP9</option>
-                <option value="h264">H.264</option>
-                <option value="av1">AV1</option>
-              </select>
-            </div>
-          </>
-        )}
-      </>
-    );
-  };
-
-  const AudioProcessingSettings: React.FC = (): ReactNode => {
-    const [echoCancellation, setEchoCancellation] = useSetting(
-      echoCancellationSetting,
-    );
-    const [noiseSuppression, setNoiseSuppression] = useSetting(
-      noiseSuppressionSetting,
-    );
-    const [autoGainControl, setAutoGainControl] = useSetting(
-      autoGainControlSetting,
-    );
-
-    return (
-      <>
-        <h4>{t("settings.audio_processing_header", "Audio processing")}</h4>
-        <p>
-          {t(
-            "settings.audio_processing_description",
-            "Changes apply on next call join.",
-          )}
-        </p>
-        <FieldRow>
-          <InputField
-            id="echoCancellation"
-            label={t(
-              "settings.echo_cancellation_label",
-              "Echo cancellation",
-            )}
-            type="checkbox"
-            checked={echoCancellation}
-            onChange={(e): void => setEchoCancellation(e.target.checked)}
-          />
-        </FieldRow>
-        <FieldRow>
-          <InputField
-            id="noiseSuppression"
-            label={t(
-              "settings.noise_suppression_label",
-              "Noise suppression",
-            )}
-            type="checkbox"
-            checked={noiseSuppression}
-            onChange={(e): void => setNoiseSuppression(e.target.checked)}
-          />
-        </FieldRow>
-        <FieldRow>
-          <InputField
-            id="autoGainControl"
-            label={t(
-              "settings.auto_gain_control_label",
-              "Automatic gain control",
-            )}
-            type="checkbox"
-            checked={autoGainControl}
-            onChange={(e): void => setAutoGainControl(e.target.checked)}
-          />
-        </FieldRow>
-      </>
-    );
-  };
-
   const devices = useMediaDevices();
   useEffect(() => {
     if (open) devices.requestDeviceNames();
@@ -371,8 +171,6 @@ export const SettingsModal: FC<Props> = ({
             />
           </div>
         </Form>
-        <Separator />
-        <AudioProcessingSettings />
       </>
     ),
   };
@@ -391,46 +189,6 @@ export const SettingsModal: FC<Props> = ({
         </Form>
         <Separator />
         <BlurCheckbox />
-        <Separator />
-        <MediaQualitySettings
-          id="camera"
-          header={t("settings.camera_header", "Camera quality")}
-          toggleLabel={t("settings.advanced_camera_label", "Advanced camera settings")}
-          description={t("settings.advanced_camera_description", "Configure resolution, framerate, bitrate, and codec for camera video. Changes apply on next call join.")}
-          toggleSetting={advancedCameraSetting}
-          resolutionSetting={cameraResolutionSetting}
-          framerateSetting={cameraFramerateSetting}
-          bitrateSetting={cameraBitrateSetting}
-          codecSetting={cameraCodecSetting}
-          resolutionOptions={[
-            { value: "640x360", label: "360p" },
-            { value: "960x540", label: "540p" },
-            { value: "1280x720", label: "720p" },
-            { value: "1920x1080", label: "1080p" },
-            { value: "2560x1440", label: "1440p" },
-          ]}
-          bitrateRange={{ min: 200_000, max: 8_000_000, step: 100_000 }}
-        />
-        <Separator />
-        <MediaQualitySettings
-          id="screenShare"
-          header={t("settings.screen_share_header", "Screen sharing")}
-          toggleLabel={t("settings.advanced_screen_share_label", "Advanced screen share settings")}
-          description={t("settings.advanced_screen_share_description", "Configure resolution, framerate, bitrate, and codec for screen sharing")}
-          toggleSetting={advancedScreenShareSetting}
-          resolutionSetting={screenShareResolutionSetting}
-          framerateSetting={screenShareFramerateSetting}
-          bitrateSetting={screenShareBitrateSetting}
-          codecSetting={screenShareCodecSetting}
-          resolutionOptions={[
-            { value: "1024x576", label: "576p" },
-            { value: "1280x720", label: "720p" },
-            { value: "1920x1080", label: "1080p" },
-            { value: "2560x1440", label: "1440p" },
-            { value: "3840x2160", label: "4K" },
-          ]}
-          bitrateRange={{ min: 500_000, max: 15_000_000, step: 500_000 }}
-        />
       </>
     ),
   };

src/settings/settings.ts

@@ -169,7 +169,10 @@ export type VideoCodec = "vp8" | "vp9" | "h264" | "av1";
 /**
  * Parse a "WIDTHxHEIGHT" resolution string into numeric width and height.
  */
-export function parseResolution(res: string): { width: number; height: number } {
+export function parseResolution(res: string): {
+  width: number;
+  height: number;
+} {
   const [w, h] = res.split("x").map(Number);
   return { width: w, height: h };
 }
@@ -209,10 +212,7 @@ export const cameraResolution = new Setting<string>(
 
 export const cameraFramerate = new Setting<number>("camera-framerate", 30);
 
-export const cameraBitrate = new Setting<number>(
-  "camera-bitrate",
-  1_700_000,
-);
+export const cameraBitrate = new Setting<number>("camera-bitrate", 1_700_000);
 
 export const cameraCodec = new Setting<VideoCodec>("camera-codec", "vp8");
 
@@ -238,19 +238,21 @@ export const autoGainControlSetting = new Setting<boolean>(
  * Only updates settings that the user hasn't explicitly set in localStorage.
  */
 export function seedSettingsFromConfig(
-  mediaQuality: {
-    video_codec?: VideoCodec;
-    video?: {
-      max_resolution?: number;
-      max_bitrate?: number;
-      max_framerate?: number;
-    };
-    screen_share?: {
-      max_resolution?: number;
-      max_bitrate?: number;
-      max_framerate?: number;
-    };
-  } | undefined,
+  mediaQuality:
+    | {
+        video_codec?: VideoCodec;
+        video?: {
+          max_resolution?: number;
+          max_bitrate?: number;
+          max_framerate?: number;
+        };
+        screen_share?: {
+          max_resolution?: number;
+          max_bitrate?: number;
+          max_framerate?: number;
+        };
+      }
+    | undefined,
 ): void {
   if (!mediaQuality) return;