mirror of
https://github.com/vector-im/element-call.git
synced 2026-08-20 20:49:20 +00:00
Merge branch 'livekit' into valere/rtc/remove_well_known_fallback
This commit is contained in:
Robin
@@ -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,12 +30,14 @@ 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 { Config } from "../config/Config";
|
||||
import {
|
||||
type Setting,
|
||||
useSetting,
|
||||
duplicateTiles as duplicateTilesSetting,
|
||||
debugTileLayout as debugTileLayoutSetting,
|
||||
@@ -43,10 +46,26 @@ import {
|
||||
alwaysShowIphoneEarpiece as alwaysShowIphoneEarpieceSetting,
|
||||
matrixRTCMode as matrixRTCModeSetting,
|
||||
customLivekitUrl as customLivekitUrlSetting,
|
||||
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,
|
||||
enableExtendedLivekitLogs as enableExtendedLivekitLogsSetting,
|
||||
} from "./settings";
|
||||
import { MatrixRTCMode } from "../config/ConfigOptions";
|
||||
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";
|
||||
|
||||
@@ -138,6 +157,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>
|
||||
@@ -166,6 +364,7 @@ export const DeveloperSettingsTab: FC<Props> = ({
|
||||
id: client.getDeviceId() || "unknown",
|
||||
})}
|
||||
</p>
|
||||
<Separator />
|
||||
<FieldRow>
|
||||
<InputField
|
||||
id="duplicateTiles"
|
||||
@@ -315,6 +514,7 @@ export const DeveloperSettingsTab: FC<Props> = ({
|
||||
<ErrorMessage>{customLivekitUrlUpdateError}</ErrorMessage>
|
||||
)}
|
||||
</EditInPlace>
|
||||
<Separator />
|
||||
<Heading as="h3" type="body" weight="semibold" size="lg">
|
||||
{t("developer_mode.matrixRTCMode.title")}
|
||||
</Heading>
|
||||
@@ -403,6 +603,61 @@ export const DeveloperSettingsTab: FC<Props> = ({
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
<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 />
|
||||
<Separator />
|
||||
<p>{t("developer_mode.environment_variables")}</p>
|
||||
<pre>{JSON.stringify(env, null, 2)}</pre>
|
||||
<p>{t("developer_mode.url_params")}</p>
|
||||
|
||||
@@ -33,3 +33,27 @@ Please see LICENSE in the repository root for full details.
|
||||
.volumeSlider > p {
|
||||
color: var(--cpd-color-text-secondary);
|
||||
}
|
||||
|
||||
.volumeSlider > select {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
margin-top: var(--cpd-space-1x);
|
||||
border: 1px solid var(--cpd-color-border-interactive-primary);
|
||||
border-radius: 4px;
|
||||
background-color: var(--cpd-color-bg-canvas-default);
|
||||
color: var(--cpd-color-text-primary);
|
||||
font-size: var(--font-size-body);
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.volumeSlider > select:focus {
|
||||
outline: none;
|
||||
border-color: var(--cpd-color-text-link-external);
|
||||
}
|
||||
|
||||
.settingValue {
|
||||
font-weight: normal;
|
||||
color: var(--cpd-color-text-secondary);
|
||||
}
|
||||
|
||||
@@ -152,7 +152,13 @@ export const SettingsModal: FC<Props> = ({
|
||||
/>
|
||||
|
||||
<div className={styles.volumeSlider}>
|
||||
<label>{t("settings.audio_tab.effect_volume_label")}</label>
|
||||
<label>
|
||||
{t("settings.audio_tab.effect_volume_label")}
|
||||
{": "}
|
||||
<span className={styles.settingValue}>
|
||||
{Math.round(soundVolumeRaw * 100)}%
|
||||
</span>
|
||||
</label>
|
||||
<p>{t("settings.audio_tab.effect_volume_description")}</p>
|
||||
<Slider
|
||||
label={t("video_tile.volume")}
|
||||
|
||||
@@ -17,6 +17,12 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
|
||||
<p>
|
||||
Device ID: DEVICE123
|
||||
</p>
|
||||
<div
|
||||
class="_separator_13qwf_8"
|
||||
data-kind="primary"
|
||||
data-orientation="horizontal"
|
||||
role="separator"
|
||||
/>
|
||||
<div
|
||||
class="_fieldRow_1bd8c0"
|
||||
>
|
||||
@@ -255,6 +261,12 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
<div
|
||||
class="_separator_13qwf_8"
|
||||
data-kind="primary"
|
||||
data-orientation="horizontal"
|
||||
role="separator"
|
||||
/>
|
||||
<h3
|
||||
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74"
|
||||
>
|
||||
@@ -463,6 +475,242 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
|
||||
</p>
|
||||
<ul />
|
||||
</div>
|
||||
<div
|
||||
class="_separator_13qwf_8"
|
||||
data-kind="primary"
|
||||
data-orientation="horizontal"
|
||||
role="separator"
|
||||
/>
|
||||
<h4>
|
||||
Camera quality
|
||||
</h4>
|
||||
<div
|
||||
class="_fieldRow_1bd8c0"
|
||||
>
|
||||
<div
|
||||
class="_field_1bd8c0 _checkboxField_1bd8c0"
|
||||
>
|
||||
<input
|
||||
aria-describedby="_r_k_"
|
||||
id="cameraToggle"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="cameraToggle"
|
||||
>
|
||||
<div
|
||||
class="_checkbox_1bd8c0"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="#000"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m20 6-11 11-5-5"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
Advanced camera settings
|
||||
</label>
|
||||
<p
|
||||
class="_description_1bd8c0"
|
||||
id="_r_k_"
|
||||
>
|
||||
Configure resolution, framerate, bitrate, and codec for camera video. Changes apply on next call join.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="_separator_13qwf_8"
|
||||
data-kind="primary"
|
||||
data-orientation="horizontal"
|
||||
role="separator"
|
||||
/>
|
||||
<h4>
|
||||
Screen sharing
|
||||
</h4>
|
||||
<div
|
||||
class="_fieldRow_1bd8c0"
|
||||
>
|
||||
<div
|
||||
class="_field_1bd8c0 _checkboxField_1bd8c0"
|
||||
>
|
||||
<input
|
||||
aria-describedby="_r_l_"
|
||||
id="screenShareToggle"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="screenShareToggle"
|
||||
>
|
||||
<div
|
||||
class="_checkbox_1bd8c0"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="#000"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m20 6-11 11-5-5"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
Advanced screen share settings
|
||||
</label>
|
||||
<p
|
||||
class="_description_1bd8c0"
|
||||
id="_r_l_"
|
||||
>
|
||||
Configure resolution, framerate, bitrate, and codec for screen sharing
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="_separator_13qwf_8"
|
||||
data-kind="primary"
|
||||
data-orientation="horizontal"
|
||||
role="separator"
|
||||
/>
|
||||
<h4>
|
||||
Audio processing
|
||||
</h4>
|
||||
<p>
|
||||
Changes apply on next call join.
|
||||
</p>
|
||||
<div
|
||||
class="_fieldRow_1bd8c0"
|
||||
>
|
||||
<div
|
||||
class="_field_1bd8c0 _checkboxField_1bd8c0"
|
||||
>
|
||||
<input
|
||||
aria-describedby="_r_m_"
|
||||
checked=""
|
||||
id="echoCancellation"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="echoCancellation"
|
||||
>
|
||||
<div
|
||||
class="_checkbox_1bd8c0"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="#000"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m20 6-11 11-5-5"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
Echo cancellation
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="_fieldRow_1bd8c0"
|
||||
>
|
||||
<div
|
||||
class="_field_1bd8c0 _checkboxField_1bd8c0"
|
||||
>
|
||||
<input
|
||||
aria-describedby="_r_n_"
|
||||
checked=""
|
||||
id="noiseSuppression"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="noiseSuppression"
|
||||
>
|
||||
<div
|
||||
class="_checkbox_1bd8c0"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="#000"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m20 6-11 11-5-5"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
Noise suppression
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="_fieldRow_1bd8c0"
|
||||
>
|
||||
<div
|
||||
class="_field_1bd8c0 _checkboxField_1bd8c0"
|
||||
>
|
||||
<input
|
||||
aria-describedby="_r_o_"
|
||||
checked=""
|
||||
id="autoGainControl"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="autoGainControl"
|
||||
>
|
||||
<div
|
||||
class="_checkbox_1bd8c0"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="#000"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m20 6-11 11-5-5"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
Automatic gain control
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="_separator_13qwf_8"
|
||||
data-kind="primary"
|
||||
data-orientation="horizontal"
|
||||
role="separator"
|
||||
/>
|
||||
<p>
|
||||
Environment variables
|
||||
</p>
|
||||
|
||||
111
src/settings/settings.test.ts
Normal file
111
src/settings/settings.test.ts
Normal file
@@ -0,0 +1,111 @@
|
||||
/*
|
||||
Copyright 2026 Element Creations Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { describe, expect, it, beforeEach } from "vitest";
|
||||
|
||||
import {
|
||||
Setting,
|
||||
parseResolution,
|
||||
seedSettingsFromConfig,
|
||||
screenShareCodec,
|
||||
screenShareResolution,
|
||||
screenShareFramerate,
|
||||
screenShareBitrate,
|
||||
cameraCodec,
|
||||
cameraResolution,
|
||||
cameraFramerate,
|
||||
cameraBitrate,
|
||||
} from "./settings";
|
||||
|
||||
beforeEach(() => {
|
||||
localStorage.clear();
|
||||
});
|
||||
|
||||
describe("parseResolution", () => {
|
||||
it("parses a WIDTHxHEIGHT string", () => {
|
||||
expect(parseResolution("1920x1080")).toEqual({
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
});
|
||||
});
|
||||
|
||||
it("parses non-standard resolutions", () => {
|
||||
expect(parseResolution("640x360")).toEqual({ width: 640, height: 360 });
|
||||
});
|
||||
});
|
||||
|
||||
describe("Setting", () => {
|
||||
describe("seedFromConfig", () => {
|
||||
it("updates value when no localStorage value exists", () => {
|
||||
const setting = new Setting<string>("test-seed", "default");
|
||||
setting.seedFromConfig("from-config");
|
||||
expect(setting.getValue()).toBe("from-config");
|
||||
});
|
||||
|
||||
it("does not override an existing localStorage value", () => {
|
||||
localStorage.setItem(
|
||||
"matrix-setting-test-seed-existing",
|
||||
JSON.stringify("user-set"),
|
||||
);
|
||||
const setting = new Setting<string>("test-seed-existing", "default");
|
||||
expect(setting.getValue()).toBe("user-set");
|
||||
setting.seedFromConfig("from-config");
|
||||
expect(setting.getValue()).toBe("user-set");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("seedSettingsFromConfig", () => {
|
||||
it("does nothing when config is undefined", () => {
|
||||
const codecBefore = screenShareCodec.getValue();
|
||||
seedSettingsFromConfig(undefined);
|
||||
expect(screenShareCodec.getValue()).toBe(codecBefore);
|
||||
});
|
||||
|
||||
it("seeds video codec to both camera and screen share", () => {
|
||||
seedSettingsFromConfig({ video_codec: "av1" });
|
||||
expect(screenShareCodec.getValue()).toBe("av1");
|
||||
expect(cameraCodec.getValue()).toBe("av1");
|
||||
});
|
||||
|
||||
it("seeds screen share settings from config", () => {
|
||||
seedSettingsFromConfig({
|
||||
screen_share: {
|
||||
max_resolution: 720,
|
||||
max_framerate: 15,
|
||||
max_bitrate: 2_000_000,
|
||||
},
|
||||
});
|
||||
expect(screenShareResolution.getValue()).toBe("1280x720");
|
||||
expect(screenShareFramerate.getValue()).toBe(15);
|
||||
expect(screenShareBitrate.getValue()).toBe(2_000_000);
|
||||
});
|
||||
|
||||
it("seeds camera/video settings from config", () => {
|
||||
seedSettingsFromConfig({
|
||||
video: {
|
||||
max_resolution: 1080,
|
||||
max_framerate: 60,
|
||||
max_bitrate: 4_000_000,
|
||||
},
|
||||
});
|
||||
expect(cameraResolution.getValue()).toBe("1920x1080");
|
||||
expect(cameraFramerate.getValue()).toBe(60);
|
||||
expect(cameraBitrate.getValue()).toBe(4_000_000);
|
||||
});
|
||||
|
||||
it("only seeds provided fields, leaves others at defaults", () => {
|
||||
const defaultFramerate = screenShareFramerate.getValue();
|
||||
seedSettingsFromConfig({
|
||||
screen_share: {
|
||||
max_bitrate: 3_000_000,
|
||||
},
|
||||
});
|
||||
expect(screenShareBitrate.getValue()).toBe(3_000_000);
|
||||
expect(screenShareFramerate.getValue()).toBe(defaultFramerate);
|
||||
});
|
||||
});
|
||||
@@ -21,6 +21,7 @@ export class Setting<T> {
|
||||
this.key = `matrix-setting-${key}`;
|
||||
|
||||
const storedValue = localStorage.getItem(this.key);
|
||||
this.hasStoredValue = storedValue !== null;
|
||||
let initialValue = defaultValue;
|
||||
if (storedValue !== null) {
|
||||
try {
|
||||
@@ -40,6 +41,7 @@ export class Setting<T> {
|
||||
}
|
||||
|
||||
private readonly key: string;
|
||||
private readonly hasStoredValue: boolean;
|
||||
|
||||
private readonly _value$: BehaviorSubject<T>;
|
||||
private readonly _lastUpdateReason$: BehaviorSubject<string | null>;
|
||||
@@ -54,6 +56,17 @@ export class Setting<T> {
|
||||
public readonly getValue = (): T => {
|
||||
return this._value$.getValue();
|
||||
};
|
||||
|
||||
/**
|
||||
* Update the setting's value from a config source, but only if the user
|
||||
* hasn't explicitly set a value in localStorage. This lets admins set
|
||||
* org-wide defaults in config.json that users can override.
|
||||
*/
|
||||
public seedFromConfig(value: T): void {
|
||||
if (!this.hasStoredValue) {
|
||||
this._value$.next(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -144,3 +157,130 @@ export const customLivekitUrl = new Setting<string | null>(
|
||||
"custom-livekit-url",
|
||||
null,
|
||||
);
|
||||
|
||||
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;
|
||||
} {
|
||||
const [w, h] = res.split("x").map(Number);
|
||||
return { width: w, height: h };
|
||||
}
|
||||
|
||||
export const advancedScreenShare = new Setting<boolean>(
|
||||
"advanced-screen-share",
|
||||
false,
|
||||
);
|
||||
|
||||
export const screenShareResolution = new Setting<string>(
|
||||
"screen-share-resolution",
|
||||
"1920x1080",
|
||||
);
|
||||
|
||||
export const screenShareFramerate = new Setting<number>(
|
||||
"screen-share-framerate",
|
||||
30,
|
||||
);
|
||||
|
||||
export const screenShareBitrate = new Setting<number>(
|
||||
"screen-share-bitrate",
|
||||
5_000_000,
|
||||
);
|
||||
|
||||
export const screenShareCodec = new Setting<VideoCodec>(
|
||||
"screen-share-codec",
|
||||
"vp9",
|
||||
);
|
||||
|
||||
// Camera video quality settings
|
||||
export const advancedCamera = new Setting<boolean>("advanced-camera", false);
|
||||
|
||||
export const cameraResolution = new Setting<string>(
|
||||
"camera-resolution",
|
||||
"1280x720",
|
||||
);
|
||||
|
||||
export const cameraFramerate = new Setting<number>("camera-framerate", 30);
|
||||
|
||||
export const cameraBitrate = new Setting<number>("camera-bitrate", 1_700_000);
|
||||
|
||||
export const cameraCodec = new Setting<VideoCodec>("camera-codec", "vp8");
|
||||
|
||||
// Audio processing settings
|
||||
export const echoCancellationSetting = new Setting<boolean>(
|
||||
"echo-cancellation",
|
||||
true,
|
||||
);
|
||||
|
||||
export const noiseSuppressionSetting = new Setting<boolean>(
|
||||
"noise-suppression",
|
||||
true,
|
||||
);
|
||||
|
||||
export const autoGainControlSetting = new Setting<boolean>(
|
||||
"auto-gain-control",
|
||||
true,
|
||||
);
|
||||
|
||||
/**
|
||||
* Seed setting defaults from config.json's media_quality section.
|
||||
* Call this after Config.init() has resolved.
|
||||
* 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,
|
||||
): void {
|
||||
if (!mediaQuality) return;
|
||||
|
||||
const codec = mediaQuality.video_codec;
|
||||
if (codec) {
|
||||
screenShareCodec.seedFromConfig(codec);
|
||||
cameraCodec.seedFromConfig(codec);
|
||||
}
|
||||
|
||||
const screen = mediaQuality.screen_share;
|
||||
if (screen) {
|
||||
if (screen.max_resolution) {
|
||||
const width = Math.round((screen.max_resolution * 16) / 9);
|
||||
screenShareResolution.seedFromConfig(`${width}x${screen.max_resolution}`);
|
||||
}
|
||||
if (screen.max_framerate) {
|
||||
screenShareFramerate.seedFromConfig(screen.max_framerate);
|
||||
}
|
||||
if (screen.max_bitrate) {
|
||||
screenShareBitrate.seedFromConfig(screen.max_bitrate);
|
||||
}
|
||||
}
|
||||
|
||||
const video = mediaQuality.video;
|
||||
if (video) {
|
||||
if (video.max_resolution) {
|
||||
const width = Math.round((video.max_resolution * 16) / 9);
|
||||
cameraResolution.seedFromConfig(`${width}x${video.max_resolution}`);
|
||||
}
|
||||
if (video.max_framerate) {
|
||||
cameraFramerate.seedFromConfig(video.max_framerate);
|
||||
}
|
||||
if (video.max_bitrate) {
|
||||
cameraBitrate.seedFromConfig(video.max_bitrate);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,7 +19,10 @@ import { useClient } from "../ClientContext";
|
||||
import { Config } from "../config/Config";
|
||||
import { type RageshakeRequestModal } from "../room/RageshakeRequestModal";
|
||||
import { getUrlParams } from "../UrlParams";
|
||||
|
||||
import { deepCompare } from "matrix-js-sdk/lib/utils";
|
||||
import { advancedCamera as advancedCameraSetting } from "./settings";
|
||||
import { advancedScreenShare as advancedScreenShareSetting } from "./settings";
|
||||
import { DEFAULT_CONFIG } from "../config/ConfigOptions";
|
||||
const gzip = async (text: string): Promise<Blob> => {
|
||||
// pako is relatively large (200KB), so we only import it when needed
|
||||
const { gzip: pakoGzip } = await import("pako");
|
||||
@@ -245,6 +248,20 @@ export function useSubmitRageshake(
|
||||
}
|
||||
}
|
||||
|
||||
// Add custom media related information to the rageshake issue description.
|
||||
// Used to quickly identify issues due to untested configurations.
|
||||
if (
|
||||
!deepCompare(Config.get().media_quality, DEFAULT_CONFIG.media_quality)
|
||||
) {
|
||||
body.append("custom_media_quality_in_config", "true");
|
||||
}
|
||||
if (advancedCameraSetting.getValue()) {
|
||||
body.append("devTools_advancedCameraSettings", "true");
|
||||
}
|
||||
if (advancedScreenShareSetting.getValue()) {
|
||||
body.append("devTools_advancedScreenShareSetting", "true");
|
||||
}
|
||||
|
||||
if (navigator.storage && navigator.storage.estimate) {
|
||||
try {
|
||||
const estimate: {
|
||||
|
||||
@@ -22,6 +22,8 @@ import { useSubmitRageshake, getRageshakeSubmitUrl } from "./submit-rageshake";
|
||||
import { ClientContextProvider } from "../ClientContext";
|
||||
import { getUrlParams } from "../UrlParams";
|
||||
import { mockConfig } from "../utils/test";
|
||||
import { DEFAULT_CONFIG } from "../config/ConfigOptions";
|
||||
import { advancedCamera, advancedScreenShare } from "./settings";
|
||||
|
||||
vi.mock("../UrlParams", () => ({ getUrlParams: vi.fn() }));
|
||||
|
||||
@@ -201,6 +203,60 @@ describe("useSubmitRageshake", () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe("media quality metadata", () => {
|
||||
const submitAndGetBody = async (): Promise<FormData> => {
|
||||
const fetchFn = vi.fn().mockResolvedValue({
|
||||
status: 200,
|
||||
});
|
||||
vi.stubGlobal("fetch", fetchFn);
|
||||
|
||||
renderWithMockClient(() => "https://rageshake.localhost/foo", false);
|
||||
screen.getByTestId("submit").click();
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId("sent").textContent).toBe("true");
|
||||
});
|
||||
return fetchFn.mock.calls[0][1].body as FormData;
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
vi.unstubAllGlobals();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
advancedCamera.setValue(advancedCamera.defaultValue);
|
||||
advancedScreenShare.setValue(advancedScreenShare.defaultValue);
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it("omits media quality fields when config and settings are default", async () => {
|
||||
mockConfig({});
|
||||
const body = await submitAndGetBody();
|
||||
expect(body.get("custom_media_quality_in_config")).toBeNull();
|
||||
expect(body.get("devTools_advancedCameraSettings")).toBeNull();
|
||||
expect(body.get("devTools_advancedScreenShareSetting")).toBeNull();
|
||||
});
|
||||
|
||||
it("includes custom_media_quality_in_config when media_quality differs from default", async () => {
|
||||
mockConfig({
|
||||
media_quality: {
|
||||
...DEFAULT_CONFIG.media_quality,
|
||||
video_codec: "h264",
|
||||
},
|
||||
});
|
||||
const body = await submitAndGetBody();
|
||||
expect(body.get("custom_media_quality_in_config")).toBe("true");
|
||||
});
|
||||
|
||||
it("includes devTools flags when advanced media settings are enabled", async () => {
|
||||
mockConfig({});
|
||||
advancedCamera.setValue(true);
|
||||
advancedScreenShare.setValue(true);
|
||||
const body = await submitAndGetBody();
|
||||
expect(body.get("devTools_advancedCameraSettings")).toBe("true");
|
||||
expect(body.get("devTools_advancedScreenShareSetting")).toBe("true");
|
||||
});
|
||||
});
|
||||
|
||||
describe("when rageshake is not available", () => {
|
||||
it("starts unsent", () => {
|
||||
renderWithMockClient(() => undefined, false);
|
||||
|
||||
Reference in New Issue
Block a user