Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-03-07 05:47:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix the MatrixRTC mode developer controls

Browse Source 
They weren't responding properly to clicks, and make more sense as radio buttons.
This commit is contained in:
Robin
2025-11-14 14:15:58 -05:00
parent b9ad83bf3b
commit 494ed7c126
2 changed files with 68 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
locales/en/app.json
View File

@@ -73,6 +73,7 @@
"livekit_sfu": "LiveKit SFU: {{url}}",
"matrix_id": "Matrix ID: {{id}}",
"matrixRTCMode": {
"title": "MatrixRTC mode",
"Comptibility": {
"description": "Compatible with homeservers that do not support sticky events (but all other EC clients are v0.17.0 or later)",
"label": "Compatibility: state events & multi SFU"

115
src/settings/DeveloperSettingsTab.tsx
View File

@@ -12,6 +12,7 @@ import {
useEffect,
useMemo,
useState,
useId,
} from "react";
import { useTranslation } from "react-i18next";
import {
@@ -19,6 +20,14 @@ import {
type MatrixClient,
} from "matrix-js-sdk";
import { logger } from "matrix-js-sdk/lib/logger";
import {
Root as Form,
Heading,
HelpMessage,
InlineField,
Label,
RadioControl,
} from "@vector-im/compound-web";
import { FieldRow, InputField } from "../input/Input";
import {
@@ -60,6 +69,13 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
}, [client]);
const [matrixRTCMode, setMatrixRTCMode] = useSetting(matrixRTCModeSetting);
const matrixRTCModeRadioGroup = useId();
const onMatrixRTCModeChange = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
setMatrixRTCMode(e.target.value as MatrixRTCMode);
},
[setMatrixRTCMode],
);
const [showConnectionStats, setShowConnectionStats] = useSetting(
showConnectionStatsSetting,
@@ -85,7 +101,7 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
}, [livekitRooms]);
return (
<>
<Form>
<p>
{t("developer_mode.hostname", {
hostname: window.location.hostname || "unknown",
@@ -142,52 +158,6 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
}
/>
</FieldRow>
<FieldRow>
<InputField
id="matrixRTCMode"
type="checkbox"
label={t("developer_mode.matrixRTCMode.Legacy.label")}
description={t("developer_mode.matrixRTCMode.Legacy.description")}
checked={matrixRTCMode === MatrixRTCMode.Legacy}
onChange={useCallback(
(event: ChangeEvent<HTMLInputElement>) => {
if (event.target.checked) setMatrixRTCMode(MatrixRTCMode.Legacy);
},
[setMatrixRTCMode],
)}
/>
<InputField
id="matrixRTCMode"
type="checkbox"
label={t("developer_mode.matrixRTCMode.Comptibility.label")}
description={t(
"developer_mode.matrixRTCMode.Comptibility.description",
)}
checked={matrixRTCMode === MatrixRTCMode.Compatibil}
onChange={useCallback(
(event: ChangeEvent<HTMLInputElement>) => {
if (event.target.checked)
setMatrixRTCMode(MatrixRTCMode.Compatibil);
},
[setMatrixRTCMode],
)}
/>
<InputField
id="matrixRTCMode"
type="checkbox"
label={t("developer_mode.matrixRTCMode.Matrix_2_0.label")}
description={t("developer_mode.matrixRTCMode.Matrix_2_0.description")}
disabled={!stickyEventsSupported}
checked={matrixRTCMode === MatrixRTCMode.Matrix_2_0}
onChange={useCallback(
(event: ChangeEvent<HTMLInputElement>) => {
if (event.target.checked)
setMatrixRTCMode(MatrixRTCMode.Matrix_2_0);
},
[setMatrixRTCMode],
)}
/>
</FieldRow>
<FieldRow>
<InputField
id="showConnectionStats"
@@ -230,6 +200,55 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
)}
/>{" "}
</FieldRow>
<Heading as="h3" type="body" weight="semibold" size="lg">
{t("developer_mode.matrixRTCMode.title")}
</Heading>
<InlineField
name={matrixRTCModeRadioGroup}
control={
<RadioControl
checked={matrixRTCMode === MatrixRTCMode.Legacy}
value={MatrixRTCMode.Legacy}
onChange={onMatrixRTCModeChange}
/>
}
>
<Label>{t("developer_mode.matrixRTCMode.Legacy.label")}</Label>
<HelpMessage>
{t("developer_mode.matrixRTCMode.Legacy.description")}
</HelpMessage>
</InlineField>
<InlineField
name={matrixRTCModeRadioGroup}
control={
<RadioControl
checked={matrixRTCMode === MatrixRTCMode.Compatibil}
value={MatrixRTCMode.Compatibil}
onChange={onMatrixRTCModeChange}
/>
}
>
<Label>{t("developer_mode.matrixRTCMode.Comptibility.label")}</Label>
<HelpMessage>
{t("developer_mode.matrixRTCMode.Comptibility.description")}
</HelpMessage>
</InlineField>
<InlineField
name={matrixRTCModeRadioGroup}
control={
<RadioControl
checked={matrixRTCMode === MatrixRTCMode.Matrix_2_0}
value={MatrixRTCMode.Matrix_2_0}
disabled={!stickyEventsSupported}
onChange={onMatrixRTCModeChange}
/>
}
>
<Label>{t("developer_mode.matrixRTCMode.Matrix_2_0.label")}</Label>
<HelpMessage>
{t("developer_mode.matrixRTCMode.Matrix_2_0.description")}
</HelpMessage>
</InlineField>
{livekitRooms?.map((livekitRoom) => (
<>
<h3>
@@ -254,6 +273,6 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
<pre>{JSON.stringify(import.meta.env, null, 2)}</pre>
<p>{t("developer_mode.url_params")}</p>
<pre>{JSON.stringify(urlParams, null, 2)}</pre>
</>
</Form>
);
};