Allow disabling legacy calls and make Voice & Video settings Legacy Voice & Video (#33692)

* Change `feature_group_calls` to default to true.
Change state to Beta

* Add `enableLegacyCallsVoip` (clarify: Audio settings relate to Legacy)
Change `element_call.use_exclusively` to just be the default of
`enableLegacyCallsVoip`.
Allow disabling in Legacy in the settings. (overwrite `use_exclusivly`
via `enableLegacyCallsVoip`)
Rename `Voice & Video` to `Legacy Voice & Video`

* improvements
 - settings title update to only show legacy when appropriate
 - hide menu all together if use_exclusivly is chosen

* simplify by removing the feature_group_calls flag

* smaller cleanup

* fix tests and cleanup

* clarify settings (disable) in config.md

* add back EC relevant settings in room settings dialog

* update screenshots (now default to EC enabled (not disabled)
-> show voice and video tab in room settings

* update screenshots

* always show option to control voice messages input

* lint

* fix test

* disable -> enabled And only have on mic dropdown

* update config.md

* Back to `disabled` (on by default/no config)

* remove element call hint from voice-video settings

* Update apps/web/src/i18n/strings/en_EN.json

Co-authored-by: Robin <robin@robin.town>

* Update apps/web/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx

Co-authored-by: Robin <robin@robin.town>

* review

* cleanup element call url setting (its deprecated/not used anymore)

* clarify, that also jisti will be enabled/disabled by legacy settings
flag

* remove double section

* remove unn exassary element_call configurations

* Update en_EN.json

* Update VoiceUserSettingsTab.tsx

* Make tests use new defaults (enable element call)

* Default events power levels

* format

* review "Enable Legacy voice/video calls" label

* more radical usage of defaults in element_call config.json's

* Update config.json

* Update en_EN.json

* Update RoomSettingsDialog-test.tsx.snap

* Update useRoomCall.tsx

* fix imports

* Update request permission promp to latest designs:
https://www.figma.com/design/aOEkaJtaBmPy058V7uoqVr/Element-Call-Updates---2026?node-id=45-12591&t=7takL39icZwt9YjL-0

* Update config.json.d.ts

* fix usage of `Element` in i18n

* Update General-room-settings-tab-should-be-rendered-properly-1-linux.png

---------

Co-authored-by: Robin <robin@robin.town>
This commit is contained in:
Timo
2026-07-07 16:09:36 +00:00
committed by GitHub
co-authored by Robin
parent 467ab5e7d4
commit 1b10122a7b
32 changed files with 265 additions and 185 deletions
@@ -146,10 +146,7 @@ describe("<RoomSettingsDialog />", () => {
});
});
it("renders voip settings tab when enabled", () => {
jest.spyOn(SettingsStore, "getValue").mockImplementation(
(settingName) => settingName === "feature_group_calls",
);
it("always renders voip settings tab when enabled", () => {
getComponent();
expect(screen.getByTestId("settings-tab-ROOM_VOIP_TAB")).toBeInTheDocument();
});
@@ -32,6 +32,35 @@ NodeList [
General
</span>
</li>,
<li
aria-controls="mx_tabpanel_ROOM_VOIP_TAB"
aria-labelledby="mx_tabpanel_ROOM_VOIP_TAB_label"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
data-testid="settings-tab-ROOM_VOIP_TAB"
role="tab"
tabindex="-1"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M8.929 15.1a13.6 13.6 0 0 0 4.654 3.066q2.62 1.036 5.492.923h.008l.003-.004.003-.002-.034-3.124-3.52-.483-1.791 1.792-.645-.322a13.5 13.5 0 0 1-3.496-2.52 13.4 13.4 0 0 1-2.52-3.496l-.322-.645 1.792-1.791-.483-3.52-3.123-.033-.003.002-.003.004v.002a13.65 13.65 0 0 0 .932 5.492A13.4 13.4 0 0 0 8.93 15.1m3.92 4.926a15.6 15.6 0 0 1-5.334-3.511 15.4 15.4 0 0 1-3.505-5.346 15.6 15.6 0 0 1-1.069-6.274 1.93 1.93 0 0 1 .589-1.366c.366-.366.84-.589 1.386-.589h.01l3.163.035a1.96 1.96 0 0 1 1.958 1.694v.005l.487 3.545v.003c.043.297.025.605-.076.907a2 2 0 0 1-.485.773l-.762.762a11.3 11.3 0 0 0 1.806 2.348 11.4 11.4 0 0 0 2.348 1.806l.762-.762a2 2 0 0 1 .774-.485c.302-.1.61-.118.907-.076l3.553.487a1.96 1.96 0 0 1 1.694 1.958l.034 3.174c0 .546-.223 1.02-.588 1.386-.36.36-.827.582-1.363.588a15.3 15.3 0 0 1-6.29-1.062"
fill-rule="evenodd"
/>
</svg>
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_ROOM_VOIP_TAB_label"
>
Voice & Video
</span>
</li>,
<li
aria-controls="mx_tabpanel_ROOM_SECURITY_TAB"
aria-labelledby="mx_tabpanel_ROOM_SECURITY_TAB_label"
@@ -409,11 +409,7 @@ describe("RoomHeader", () => {
describe("group call enabled", () => {
beforeEach(async () => {
SdkConfig.put({
features: {
feature_group_calls: true,
},
});
SdkConfig.put({});
// Enable Element Call
client._unstable_getRTCTransports = jest
.fn()
@@ -478,12 +474,10 @@ describe("RoomHeader", () => {
const user = userEvent.setup();
mockRoomMembers(room, 3);
SdkConfig.add({
element_call: { disable: true }, // This test is about Jitsi widget re-pinning, not Element Call
setting_defaults: {
[UIFeature.Widgets]: true,
},
features: {
feature_group_calls: false,
},
});
// allow calls
jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
@@ -44,39 +44,17 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
</button>
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Video call"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-react-use-id-1"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="react-use-id-1"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
/>
</svg>
</div>
</button>
<button
aria-disabled="false"
aria-label="Voice call"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
type="button"
>
<div
class="_indicator-icon_147l5_17"
@@ -89,6 +67,38 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
/>
</svg>
</div>
</button>
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Voice call"
class="_icon-button_1215g_8"
data-kind="primary"
data-state="closed"
id="radix-react-use-id-3"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
type="button"
>
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="react-use-id-4"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
@@ -98,7 +108,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
</button>
<button
aria-label="Threads"
aria-labelledby="react-use-id-3"
aria-labelledby="react-use-id-5"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -125,7 +135,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
</button>
<button
aria-label="Room info"
aria-labelledby="react-use-id-4"
aria-labelledby="react-use-id-6"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
@@ -23,7 +23,7 @@ import userEvent from "@testing-library/user-event";
import RolesRoomSettingsTab from "../../../../../../../src/components/views/settings/tabs/room/RolesRoomSettingsTab";
import { mkStubRoom, withClientContextRenderOptions, stubClient } from "../../../../../../test-utils";
import { MatrixClientPeg } from "../../../../../../../src/MatrixClientPeg";
import SettingsStore from "../../../../../../../src/settings/SettingsStore";
import SdkConfig from "../../../../../../../src/SdkConfig";
import { ElementCallEventType, ElementCallMemberEventType } from "../../../../../../../src/call-types";
describe("RolesRoomSettingsTab", () => {
@@ -75,11 +75,13 @@ describe("RolesRoomSettingsTab", () => {
describe("Element Call", () => {
const setGroupCallsEnabled = (val: boolean): void => {
jest.spyOn(SettingsStore, "getValue").mockImplementation((name: string): any => {
if (name === "feature_group_calls") return val;
});
SdkConfig.put({ element_call: { disable: !val } });
};
afterEach(() => {
SdkConfig.reset();
});
const getStartCallSelect = (tab: RenderResult): HTMLElement => {
return tab.container.querySelector("select[label='Start Element Call calls']")!;
};