Add Element Call room settings

res/css/views/dialogs/_RoomSettingsDialog.pcss

@@ -21,6 +21,10 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/settings.svg');
 }
 
+.mx_RoomSettingsDialog_voiceIcon::before {
+    mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
+}
+
 .mx_RoomSettingsDialog_securityIcon::before {
     mask-image: url('$(res)/img/element-icons/security.svg');
 }

src/components/views/dialogs/RoomSettingsDialog.tsx

@@ -32,8 +32,10 @@ import SettingsStore from "../../../settings/SettingsStore";
 import { UIFeature } from "../../../settings/UIFeature";
 import BaseDialog from "./BaseDialog";
 import { Action } from '../../../dispatcher/actions';
+import { VoipRoomSettingsTab } from "../settings/tabs/room/VoipRoomSettingsTab";
 
 export const ROOM_GENERAL_TAB = "ROOM_GENERAL_TAB";
+export const ROOM_VOIP_TAB = "ROOM_VOIP_TAB";
 export const ROOM_SECURITY_TAB = "ROOM_SECURITY_TAB";
 export const ROOM_ROLES_TAB = "ROOM_ROLES_TAB";
 export const ROOM_NOTIFICATIONS_TAB = "ROOM_NOTIFICATIONS_TAB";
@@ -96,6 +98,14 @@ export default class RoomSettingsDialog extends React.Component<IProps, IState>
             <GeneralRoomSettingsTab roomId={this.props.roomId} />,
             "RoomSettingsGeneral",
         ));
+        if (SettingsStore.getValue("feature_group_calls")) {
+            tabs.push(new Tab(
+                ROOM_VOIP_TAB,
+                _td("Voice & Video"),
+                "mx_RoomSettingsDialog_voiceIcon",
+                <VoipRoomSettingsTab roomId={this.props.roomId} />,
+            ));
+        }
         tabs.push(new Tab(
             ROOM_SECURITY_TAB,
             _td("Security & Privacy"),

src/components/views/elements/LabelledToggleSwitch.tsx

@@ -66,7 +66,7 @@ export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
             "mx_SettingsFlag_toggleInFront": this.props.toggleInFront,
         });
         return (
-            <div className={classes}>
+            <div data-testid={this.props["data-testid"]} className={classes}>
                 { firstPart }
                 { secondPart }
             </div>

src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx

@@ -31,6 +31,7 @@ import PowerSelector from "../../../elements/PowerSelector";
 import SettingsFieldset from '../../SettingsFieldset';
 import SettingsStore from "../../../../../settings/SettingsStore";
 import { VoiceBroadcastInfoEventType } from '../../../../../voice-broadcast';
+import { ElementCall } from "../../../../../models/Call";
 
 interface IEventShowOpts {
     isState?: boolean;
@@ -60,6 +61,10 @@ const plEventsToShow: Record<string, IEventShowOpts> = {
     [EventType.Reaction]: { isState: false, hideForSpace: true },
     [EventType.RoomRedaction]: { isState: false, hideForSpace: true },
 
+    // MSC33401: Native Group VoIP signalling
+    [ElementCall.CALL_EVENT_TYPE.name]: { isState: true, hideForSpace: true },
+    [ElementCall.MEMBER_EVENT_TYPE.name]: { isState: true, hideForSpace: true },
+
     // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111)
     "im.vector.modular.widgets": { isState: true, hideForSpace: true },
     [VoiceBroadcastInfoEventType]: { isState: true, hideForSpace: true },
@@ -252,6 +257,11 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
         if (SettingsStore.getValue("feature_pinning")) {
             plEventsToLabels[EventType.RoomPinnedEvents] = _td("Manage pinned events");
         }
+        // MSC33401: Native Group VoIP signalling
+        if (SettingsStore.getValue("feature_group_calls")) {
+            plEventsToLabels[ElementCall.CALL_EVENT_TYPE.name] = _td("Start Element calls");
+            plEventsToLabels[ElementCall.MEMBER_EVENT_TYPE.name] = _td("Join Element calls");
+        }
 
         const powerLevelDescriptors: Record<string, IPowerLevelDescriptor> = {
             "users_default": {

src/components/views/settings/tabs/room/VoipRoomSettingsTab.tsx

@@ -0,0 +1,97 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useCallback, useMemo, useState } from 'react';
+import { logger } from "matrix-js-sdk/src/logger";
+import { JoinRule } from "matrix-js-sdk/src/@types/partials";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+
+import { _t } from "../../../../../languageHandler";
+import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
+import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
+import SettingsSubsection from "../../shared/SettingsSubsection";
+import SettingsTab from "../SettingsTab";
+import Modal from "../../../../../Modal";
+import ErrorDialog from "../../../dialogs/ErrorDialog";
+import { ElementCall } from "../../../../../models/Call";
+import { useRoomState } from "../../../../../hooks/useRoomState";
+
+interface ElementCallSwitchProps {
+    roomId: string;
+}
+
+const ElementCallSwitch: React.FC<ElementCallSwitchProps> = ({ roomId }) => {
+    const room = useMemo(() => MatrixClientPeg.get().getRoom(roomId), [roomId]);
+    const isPublic = useMemo(() => room.getJoinRule() === JoinRule.Public, [room]);
+    const [content, events] = useRoomState(room, useCallback((state) => {
+        const content = state?.getStateEvents(EventType.RoomPowerLevels, "")?.getContent();
+        return [content ?? {}, content?.["events"] ?? {}];
+    }, []));
+
+    const [elementCallEnabled, setElementCallEnabled] = useState<boolean>(() => {
+        return events[ElementCall.MEMBER_EVENT_TYPE.name] === 0;
+    });
+
+    const onChange = useCallback((enabled: boolean): void => {
+        setElementCallEnabled(enabled);
+
+        if (enabled) {
+            events[ElementCall.CALL_EVENT_TYPE.name] = isPublic ? 50 : 0;
+            events[ElementCall.MEMBER_EVENT_TYPE.name] = 0;
+        } else {
+            events[ElementCall.CALL_EVENT_TYPE.name] = 100;
+            events[ElementCall.MEMBER_EVENT_TYPE.name] = 100;
+        }
+
+        MatrixClientPeg.get().sendStateEvent(roomId, EventType.RoomPowerLevels, {
+            "events": events,
+            ...content,
+        }).catch(e => {
+            logger.error(e);
+
+            Modal.createDialog(ErrorDialog, {
+                title: _t('Error changing power level requirement'),
+                description: _t(
+                    "An error occurred changing the room's power level requirements. Ensure you have sufficient " +
+                    "permissions and try again.",
+                ),
+            });
+        });
+    }, [roomId, content, events, isPublic]);
+
+    return <LabelledToggleSwitch
+        data-testid="element-call-switch"
+        label={_t("Enable Element Call as an additional calling option in this room")}
+        caption={_t(
+            "Element Call is end-to-end encrypted, " +
+                    "but is currently limited to smaller numbers of users.",
+        )}
+        value={elementCallEnabled}
+        onChange={onChange}
+    />;
+};
+
+interface Props {
+    roomId: string;
+}
+
+export const VoipRoomSettingsTab: React.FC<Props> = ({ roomId }) => {
+    return <SettingsTab heading={_t("Voice & Video")}>
+        <SettingsSubsection heading={_t("Call type")}>
+            <ElementCallSwitch roomId={roomId} />
+        </SettingsSubsection>
+    </SettingsTab>;
+};

src/createRoom.ts

@@ -168,6 +168,15 @@ export default async function createRoom(opts: IOpts): Promise<string | null> {
                 },
             };
         }
+    } else {
+        createOpts.power_level_content_override = {
+            events: {
+                // Element Call should be disabled by default
+                [ElementCall.MEMBER_EVENT_TYPE.name]: 100,
+                // Make sure only admins can enable it
+                [ElementCall.CALL_EVENT_TYPE.name]: 100,
+            },
+        };
     }
 
     // By default, view the room after creating it

src/i18n/strings/en_EN.json

@@ -1647,6 +1647,8 @@
     "Modify widgets": "Modify widgets",
     "Voice broadcasts": "Voice broadcasts",
     "Manage pinned events": "Manage pinned events",
+    "Start Element calls": "Start Element calls",
+    "Join Element calls": "Join Element calls",
     "Default role": "Default role",
     "Send messages": "Send messages",
     "Invite users": "Invite users",
@@ -1686,6 +1688,9 @@
     "Security & Privacy": "Security & Privacy",
     "Once enabled, encryption cannot be disabled.": "Once enabled, encryption cannot be disabled.",
     "Encrypted": "Encrypted",
+    "Enable Element Call as an additional calling option in this room": "Enable Element Call as an additional calling option in this room",
+    "Element Call is end-to-end encrypted, but is currently limited to smaller numbers of users.": "Element Call is end-to-end encrypted, but is currently limited to smaller numbers of users.",
+    "Call type": "Call type",
     "Unable to revoke sharing for email address": "Unable to revoke sharing for email address",
     "Unable to share email address": "Unable to share email address",
     "Your email address hasn't been verified yet": "Your email address hasn't been verified yet",

test/components/views/settings/tabs/room/RolesRoomSettingsTab-test.tsx

@@ -16,30 +16,35 @@ limitations under the License.
 
 import React from "react";
 import { fireEvent, render, RenderResult } from "@testing-library/react";
-import { EventType, MatrixClient } from "matrix-js-sdk/src/matrix";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { EventType } from "matrix-js-sdk/src/@types/event";
 
 import RolesRoomSettingsTab from "../../../../../../src/components/views/settings/tabs/room/RolesRoomSettingsTab";
 import { mkStubRoom, stubClient } from "../../../../../test-utils";
 import { MatrixClientPeg } from "../../../../../../src/MatrixClientPeg";
 import { VoiceBroadcastInfoEventType } from "../../../../../../src/voice-broadcast";
+import SettingsStore from "../../../../../../src/settings/SettingsStore";
+import { ElementCall } from "../../../../../../src/models/Call";
 
 describe("RolesRoomSettingsTab", () => {
     const roomId = "!room:example.com";
-    let rolesRoomSettingsTab: RenderResult;
     let cli: MatrixClient;
 
+    const renderTab = (): RenderResult => {
+        return render(<RolesRoomSettingsTab roomId={roomId} />);
+    };
+
     const getVoiceBroadcastsSelect = () => {
-        return rolesRoomSettingsTab.container.querySelector("select[label='Voice broadcasts']");
+        return renderTab().container.querySelector("select[label='Voice broadcasts']");
     };
 
     const getVoiceBroadcastsSelectedOption = () => {
-        return rolesRoomSettingsTab.container.querySelector("select[label='Voice broadcasts'] option:checked");
+        return renderTab().container.querySelector("select[label='Voice broadcasts'] option:checked");
     };
 
     beforeEach(() => {
         stubClient();
         cli = MatrixClientPeg.get();
-        rolesRoomSettingsTab = render(<RolesRoomSettingsTab roomId={roomId} />);
         mkStubRoom(roomId, "test room", cli);
     });
 
@@ -66,4 +71,96 @@ describe("RolesRoomSettingsTab", () => {
             );
         });
     });
+
+    describe("Element Call", () => {
+        const setGroupCallsEnabled = (val: boolean): void => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((name: string) => {
+                if (name === "feature_group_calls") return val;
+            });
+        };
+
+        const getStartCallSelect = (tab: RenderResult) => {
+            return tab.container.querySelector("select[label='Start Element calls']");
+        };
+
+        const getStartCallSelectedOption = (tab: RenderResult) => {
+            return tab.container.querySelector("select[label='Start Element calls'] option:checked");
+        };
+
+        const getJoinCallSelect = (tab: RenderResult) => {
+            return tab.container.querySelector("select[label='Join Element calls']");
+        };
+
+        const getJoinCallSelectedOption = (tab: RenderResult) => {
+            return tab.container.querySelector("select[label='Join Element calls'] option:checked");
+        };
+
+        describe("Element Call enabled", () => {
+            beforeEach(() => {
+                setGroupCallsEnabled(true);
+            });
+
+            describe("Join Element calls", () => {
+                it("defaults to moderator for joining calls", () => {
+                    expect(getJoinCallSelectedOption(renderTab())?.textContent).toBe("Moderator");
+                });
+
+                it("can change joining calls power level", () => {
+                    const tab = renderTab();
+
+                    fireEvent.change(getJoinCallSelect(tab), {
+                        target: { value: 0 },
+                    });
+
+                    expect(getJoinCallSelectedOption(tab)?.textContent).toBe("Default");
+                    expect(cli.sendStateEvent).toHaveBeenCalledWith(
+                        roomId,
+                        EventType.RoomPowerLevels,
+                        {
+                            events: {
+                                [ElementCall.MEMBER_EVENT_TYPE.name]: 0,
+                            },
+                        },
+                    );
+                });
+            });
+
+            describe("Start Element calls", () => {
+                it("defaults to moderator for starting calls", () => {
+                    expect(getStartCallSelectedOption(renderTab())?.textContent).toBe("Moderator");
+                });
+
+                it("can change starting calls power level", () => {
+                    const tab = renderTab();
+
+                    fireEvent.change(getStartCallSelect(tab), {
+                        target: { value: 0 },
+                    });
+
+                    expect(getStartCallSelectedOption(tab)?.textContent).toBe("Default");
+                    expect(cli.sendStateEvent).toHaveBeenCalledWith(
+                        roomId,
+                        EventType.RoomPowerLevels,
+                        {
+                            events: {
+                                [ElementCall.CALL_EVENT_TYPE.name]: 0,
+                            },
+                        },
+                    );
+                });
+            });
+        });
+
+        it("hides when group calls disabled", () => {
+            setGroupCallsEnabled(false);
+
+            const tab = renderTab();
+
+            expect(getStartCallSelect(tab)).toBeFalsy();
+            expect(getStartCallSelectedOption(tab)).toBeFalsy();
+
+            expect(getJoinCallSelect(tab)).toBeFalsy();
+            expect(getJoinCallSelectedOption(tab)).toBeFalsy();
+        });
+    });
 });