Use MatrixRTC slots behind labs flag (#34392)

* Use MatrixRTC slots behind labs flag

* Remove superfluous act's

* Remove outdated ensureSlotOpen wrapper

* Add description for labs togglec

* Add doc strings for slot methods

* Throw from the slot functions when the feature flag is off

* Log when opening slot fails

* Assert on slot ID

* Adapt to JS SDK changes

Author: Johennes

.github/workflows/static_analysis.yaml

@@ -115,6 +115,8 @@ jobs:
                           console_dev_note
                           labs|element_call_video_rooms
                           labs|feature_disable_call_per_sender_encryption
+                          labs|feature_matrixrtc_slots
+                          labs|feature_matrixrtc_slots_description
                           voip|element_call
                           error|invalid_json
                           error|misconfigured

apps/web/src/components/views/settings/tabs/room/VoipRoomSettingsTab.test.tsx

@@ -9,14 +9,17 @@ Please see LICENSE files in the repository root for full details.
 // @vitest-environment happy-dom
 
 import React from "react";
-import { describe, it, expect, beforeEach, vi } from "vitest";
-import { fireEvent, render, type RenderResult, waitFor } from "test-utils-rtl";
+import { describe, it, expect, beforeEach, afterEach, type Mock, vi } from "vitest";
+import { act, fireEvent, render, type RenderResult, waitFor } from "test-utils-rtl";
 import { type MatrixClient, type Room, type MatrixEvent, EventType, JoinRule } from "matrix-js-sdk/src/matrix";
+import { RTC_SLOT_ENCRYPTION_PER_MEMBER } from "matrix-js-sdk/src/matrixrtc";
 import { mkStubRoom, stubClient } from "test-utils";
 
 import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
 import { VoipRoomSettingsTab } from "./VoipRoomSettingsTab";
 import { ElementCallEventType, ElementCallMemberEventType } from "../../../../../call-types";
+import SettingsStore from "../../../../../settings/SettingsStore";
+import { SettingLevel } from "../../../../../settings/SettingLevel";
 
 describe("VoipRoomSettingsTab", () => {
     const roomId = "!room:example.com";
@@ -134,5 +137,163 @@ describe("VoipRoomSettingsTab", () => {
                 );
             });
         });
+
+        describe("slot handling", () => {
+            interface MockSlotSession {
+                ensureRtcSlotOpen: Mock;
+                ensureRtcSlotClosed: Mock;
+            }
+
+            /**
+             * Mocks the room's MatrixRTC session with the given slot status (`undefined` for no slot).
+             * @returns the mocked session for asserting on the slot methods.
+             */
+            const mockSlotSession = (slotStatus?: "open" | "closed"): MockSlotSession => {
+                const session: MockSlotSession = {
+                    ensureRtcSlotOpen: vi.fn().mockResolvedValue(undefined),
+                    ensureRtcSlotClosed: vi.fn().mockResolvedValue(undefined),
+                };
+                vi.mocked(cli.matrixRTC.getRoomSession).mockReturnValue(
+                    session as unknown as ReturnType<typeof cli.matrixRTC.getRoomSession>,
+                );
+                vi.mocked(cli.matrixRTC.isSlotClosed).mockReturnValue(
+                    slotStatus === undefined ? undefined : slotStatus === "closed",
+                );
+                return session;
+            };
+
+            beforeEach(() => {
+                SettingsStore.setValue("feature_matrixrtc_slots", null, SettingLevel.DEVICE, true);
+            });
+
+            afterEach(() => {
+                SettingsStore.setValue("feature_matrixrtc_slots", null, SettingLevel.DEVICE, false);
+            });
+
+            it("opens/creates the slot when enabling Element calls", async () => {
+                mockPowerLevels({ [ElementCallMemberEventType.name]: 100 });
+                const session = mockSlotSession();
+
+                const tab = renderTab();
+                fireEvent.click(getElementCallSwitch(tab));
+
+                await waitFor(() => expect(session.ensureRtcSlotOpen).toHaveBeenCalledWith({ encryption: undefined }));
+                expect(session.ensureRtcSlotClosed).not.toHaveBeenCalled();
+            });
+
+            it("reopens the slot when enabling Element calls", async () => {
+                mockPowerLevels({ [ElementCallMemberEventType.name]: 100 });
+                const session = mockSlotSession("closed");
+
+                const tab = renderTab();
+                fireEvent.click(getElementCallSwitch(tab));
+
+                await waitFor(() => expect(session.ensureRtcSlotOpen).toHaveBeenCalledWith({ encryption: undefined }));
+                expect(session.ensureRtcSlotClosed).not.toHaveBeenCalled();
+            });
+
+            it("declares per-member encryption when opening the slot in an encrypted room", async () => {
+                vi.mocked(room.hasEncryptionStateEvent).mockReturnValue(true);
+                mockPowerLevels({ [ElementCallMemberEventType.name]: 100 });
+                const session = mockSlotSession();
+
+                const tab = renderTab();
+                fireEvent.click(getElementCallSwitch(tab));
+
+                await waitFor(() =>
+                    expect(session.ensureRtcSlotOpen).toHaveBeenCalledWith({
+                        encryption: { type: RTC_SLOT_ENCRYPTION_PER_MEMBER },
+                    }),
+                );
+            });
+
+            it("closes the slot when disabling Element calls", async () => {
+                mockPowerLevels({ [ElementCallMemberEventType.name]: 0 });
+                const session = mockSlotSession("open");
+
+                const tab = renderTab();
+                fireEvent.click(getElementCallSwitch(tab));
+
+                await waitFor(() => expect(session.ensureRtcSlotClosed).toHaveBeenCalled());
+                expect(session.ensureRtcSlotOpen).not.toHaveBeenCalled();
+            });
+
+            it("renders the switch as off when no slot has ever been created, even though power levels say enabled", () => {
+                mockPowerLevels({ [ElementCallMemberEventType.name]: 0 });
+                mockSlotSession();
+
+                const tab = renderTab();
+
+                expect(getElementCallSwitch(tab)).not.toBeChecked();
+            });
+
+            it("does not touch the slot when the labs flag is disabled", async () => {
+                SettingsStore.setValue("feature_matrixrtc_slots", null, SettingLevel.DEVICE, false);
+                mockPowerLevels({ [ElementCallMemberEventType.name]: 100 });
+                const session = mockSlotSession();
+
+                const tab = renderTab();
+                fireEvent.click(getElementCallSwitch(tab));
+
+                await waitFor(() =>
+                    expect(cli.sendStateEvent).toHaveBeenCalledWith(
+                        room.roomId,
+                        EventType.RoomPowerLevels,
+                        expect.anything(),
+                    ),
+                );
+                expect(session.ensureRtcSlotOpen).not.toHaveBeenCalled();
+                expect(session.ensureRtcSlotClosed).not.toHaveBeenCalled();
+            });
+
+            it("does not touch power levels or the slot when the user cannot send RTCSlot state events", () => {
+                vi.spyOn(room.currentState, "maySendStateEvent").mockImplementation(
+                    (eventType) => eventType !== EventType.RTCSlot,
+                );
+                mockPowerLevels({ [ElementCallMemberEventType.name]: 100 });
+                const session = mockSlotSession();
+
+                const tab = renderTab();
+                fireEvent.click(getElementCallSwitch(tab));
+
+                expect(cli.sendStateEvent).not.toHaveBeenCalled();
+                expect(session.ensureRtcSlotOpen).not.toHaveBeenCalled();
+                expect(session.ensureRtcSlotClosed).not.toHaveBeenCalled();
+            });
+
+            it("disables the switch when the feature is on and the user cannot send RTCSlot state events", () => {
+                vi.spyOn(room.currentState, "maySendStateEvent").mockImplementation(
+                    (eventType) => eventType !== EventType.RTCSlot,
+                );
+                mockPowerLevels({ [ElementCallMemberEventType.name]: 100 });
+
+                const tab = renderTab();
+
+                expect(getElementCallSwitch(tab)).toBeDisabled();
+            });
+
+            it("does not disable the switch for missing RTCSlot permission when the feature is off", () => {
+                act(() => {
+                    SettingsStore.setValue("feature_matrixrtc_slots", null, SettingLevel.DEVICE, false);
+                });
+                vi.spyOn(room.currentState, "maySendStateEvent").mockImplementation(
+                    (eventType) => eventType !== EventType.RTCSlot,
+                );
+                mockPowerLevels({ [ElementCallMemberEventType.name]: 100 });
+
+                const tab = renderTab();
+
+                expect(getElementCallSwitch(tab)).not.toBeDisabled();
+            });
+
+            it("renders the switch as off when the slot is closed, even though power levels say enabled", () => {
+                mockPowerLevels({ [ElementCallMemberEventType.name]: 0 });
+                mockSlotSession("closed");
+
+                const tab = renderTab();
+
+                expect(getElementCallSwitch(tab)).not.toBeChecked();
+            });
+        });
     });
 });

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

@@ -18,14 +18,16 @@ import { useRoomState } from "../../../../../hooks/useRoomState";
 import SdkConfig, { DEFAULTS } from "../../../../../SdkConfig";
 import { SettingsSection } from "../../shared/SettingsSection";
 import { ElementCallEventType, ElementCallMemberEventType } from "../../../../../call-types";
+import { ensureSlotOpen, ensureSlotClosed } from "../../../../../utils/room/rtcSlot";
+import { useSettingValue } from "../../../../../hooks/useSettings";
 
 interface ElementCallSwitchProps {
     room: Room;
 }
 
 const ElementCallSwitch: React.FC<ElementCallSwitchProps> = ({ room }) => {
     const isPublic = useMemo(() => room.getJoinRule() === JoinRule.Public, [room]);
-    const [content, maySend] = useRoomState(
+    const [content, maySendPowerLevels, maySendSlot] = useRoomState(
         room,
         useCallback(
             (state: RoomState) => {
@@ -35,18 +37,26 @@ const ElementCallSwitch: React.FC<ElementCallSwitchProps> = ({ room }) => {
                 return [
                     content ?? {},
                     state?.maySendStateEvent(EventType.RoomPowerLevels, room.client.getSafeUserId()),
+                    state?.maySendStateEvent(EventType.RTCSlot, room.client.getSafeUserId()),
                 ] as const;
             },
             [room.client],
         ),
     );
 
+    const matrixRtcSlotsEnabled = useSettingValue("feature_matrixrtc_slots");
+    const maySend = maySendPowerLevels && (!matrixRtcSlotsEnabled || maySendSlot);
+
     const [elementCallEnabled, setElementCallEnabled] = useState<boolean>(() => {
-        return content.events?.[ElementCallMemberEventType.name] === 0;
+        const anyoneCanSendCallMemberEvents = content.events?.[ElementCallMemberEventType.name] === 0;
+        const slotOpenOrNoSlotRequired = room.client.matrixRTC.isSlotClosed(room) === false || !matrixRtcSlotsEnabled;
+        return anyoneCanSendCallMemberEvents && slotOpenOrNoSlotRequired;
     });
 
     const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
         (evt): void => {
+            if (!maySend) return;
+
             const enabled = evt.target.checked;
             setElementCallEnabled(enabled);
 
@@ -67,8 +77,16 @@ const ElementCallSwitch: React.FC<ElementCallSwitchProps> = ({ room }) => {
             }
 
             void room.client.sendStateEvent(room.roomId, EventType.RoomPowerLevels, newContent);
+
+            if (matrixRtcSlotsEnabled) {
+                if (enabled) {
+                    void ensureSlotOpen(room);
+                } else {
+                    void ensureSlotClosed(room);
+                }
+            }
         },
-        [room.client, room.roomId, content, isPublic],
+        [room, content, isPublic, maySend, matrixRtcSlotsEnabled],
     );
 
     const brand = SdkConfig.get("element_call").brand ?? DEFAULTS.element_call.brand;

apps/web/src/hooks/room/useRoomCall.ts

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type Room } from "matrix-js-sdk/src/matrix";
+import { EventType, type Room } from "matrix-js-sdk/src/matrix";
 import { CallType } from "matrix-js-sdk/src/webrtc/call";
 import { type ReactNode, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { logger as rootLogger } from "matrix-js-sdk/src/logger";
@@ -39,6 +39,7 @@ import { LocalRoom, LocalRoomState } from "../../models/LocalRoom";
 import { useScopedRoomContext } from "../../contexts/ScopedRoomContext";
 import { SDKContext } from "../../contexts/SDKContext.ts";
 import SdkConfig from "../../SdkConfig";
+import { ensureSlotOpen } from "../../utils/room/rtcSlot";
 
 const logger = rootLogger.getChild("useRoomCall");
 
@@ -113,6 +114,7 @@ export const useRoomCall = (
     const widgetsFeatureEnabled = useSettingValue(UIFeature.Widgets);
     const voipFeatureEnabled = useSettingValue(UIFeature.Voip);
     const enableLegacyCallsVoip = useSettingValue("enableLegacyCallsVoip");
+    const matrixRtcSlotsEnabled = useSettingValue("feature_matrixrtc_slots");
     const sdkConfigEcOnly = useMemo(() => {
         return SdkConfig.get("element_call").use_exclusively;
     }, []);
@@ -166,12 +168,17 @@ export const useRoomCall = (
     // room
     const memberCount = useRoomMemberCount(room);
 
-    const [mayEditWidgets, mayCreateElementCallState] = useRoomState(room, () => [
+    const [mayEditWidgets, mayCreateElementCallState, maySendSlotState, isSlotClosed] = useRoomState(room, () => [
         room.currentState.mayClientSendStateEvent("im.vector.modular.widgets", room.client),
         room.currentState.mayClientSendStateEvent(ElementCallMemberEventType.name, room.client),
+        matrixRtcSlotsEnabled ? room.currentState.mayClientSendStateEvent(EventType.RTCSlot, room.client) : false,
+        matrixRtcSlotsEnabled ? room.client.matrixRTC.isSlotClosed(room) : undefined,
     ]);
 
-    const mayCreateElementCalls = mayCreateElementCallState && serverIsConfiguredForElementCall;
+    const mayOpenClosedSlotOrNoSlotExists = maySendSlotState || isSlotClosed !== true;
+    const mayCreateElementCalls =
+        mayCreateElementCallState && serverIsConfiguredForElementCall && mayOpenClosedSlotOrNoSlotExists;
+    const shouldEnsureSlotOpen = !hasGroupCall && maySendSlotState && isSlotClosed !== false;
 
     // The options provided to the RoomHeader.
     // If there are multiple options, the user will be prompted to choose.
@@ -264,42 +271,70 @@ export const useRoomCall = (
     ]);
 
     const voiceCallClick = useCallback(
-        (evt: React.MouseEvent | undefined, callPlatformType: PlatformCallType): void => {
+        async (evt: React.MouseEvent | undefined, callPlatformType: PlatformCallType): Promise<void> => {
             evt?.stopPropagation();
             if (widget && promptPinWidget) {
                 sdkContext.widgetLayoutStore.moveToContainer(room, widget, "top");
-            } else {
-                void placeCall(
-                    sdkContext.legacyCallHandler,
-                    room,
-                    CallType.Voice,
-                    callPlatformType,
-                    evt?.shiftKey || undefined,
-                    true,
-                );
+                return;
             }
+            if (callPlatformType === PlatformCallType.ElementCall && shouldEnsureSlotOpen) {
+                const slotOpen = await ensureSlotOpen(room);
+                if (!slotOpen) {
+                    logger.warn("Not placing voice call because the MatrixRTC slot could not be opened");
+                    return;
+                }
+            }
+            void placeCall(
+                sdkContext.legacyCallHandler,
+                room,
+                CallType.Voice,
+                callPlatformType,
+                evt?.shiftKey || undefined,
+                true,
+            );
         },
-        [promptPinWidget, room, widget, sdkContext.widgetLayoutStore, sdkContext.legacyCallHandler],
+        [
+            promptPinWidget,
+            room,
+            widget,
+            sdkContext.widgetLayoutStore,
+            sdkContext.legacyCallHandler,
+            shouldEnsureSlotOpen,
+        ],
     );
     const videoCallClick = useCallback(
-        (evt: React.MouseEvent | undefined, callPlatformType: PlatformCallType): void => {
+        async (evt: React.MouseEvent | undefined, callPlatformType: PlatformCallType): Promise<void> => {
             evt?.stopPropagation();
             if (widget && promptPinWidget) {
                 sdkContext.widgetLayoutStore.moveToContainer(room, widget, "top");
-            } else {
-                // If we have pressed shift then always skip the lobby, otherwise `undefined` will defer
-                // to the defaults of the call implementation.
-                void placeCall(
-                    sdkContext.legacyCallHandler,
-                    room,
-                    CallType.Video,
-                    callPlatformType,
-                    evt?.shiftKey || undefined,
-                    false,
-                );
+                return;
             }
+            if (callPlatformType === PlatformCallType.ElementCall && shouldEnsureSlotOpen) {
+                const slotOpen = await ensureSlotOpen(room);
+                if (!slotOpen) {
+                    logger.warn("Not placing video call because the MatrixRTC slot could not be opened");
+                    return;
+                }
+            }
+            // If we have pressed shift then always skip the lobby, otherwise `undefined` will defer
+            // to the defaults of the call implementation.
+            void placeCall(
+                sdkContext.legacyCallHandler,
+                room,
+                CallType.Video,
+                callPlatformType,
+                evt?.shiftKey || undefined,
+                false,
+            );
         },
-        [widget, promptPinWidget, room, sdkContext.widgetLayoutStore, sdkContext.legacyCallHandler],
+        [
+            widget,
+            promptPinWidget,
+            room,
+            sdkContext.widgetLayoutStore,
+            sdkContext.legacyCallHandler,
+            shouldEnsureSlotOpen,
+        ],
     );
 
     let voiceCallDisabledReason: string | null;