Support new MatrixRTC implementations with Element Call

res/css/_common.pcss

@@ -593,7 +593,7 @@ legend {
 .mx_Dialog
     button:not(
         .mx_EncryptionUserSettingsTab button,
-        .mx_EncryptionCard button,
+        .mx_InformationCard button,
         .mx_UserProfileSettings button,
         .mx_ShareDialog button,
         .mx_UnpinAllDialog button,

res/css/views/dialogs/_ConfirmKeyStorageOffDialog.pcss

@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
         width: 600px;
     }
 
-    .mx_EncryptionCard {
+    .mx_InformationCard {
         text-align: center;
     }
 }

res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_AccessSecretStorageDialog {
-    &.mx_EncryptionCard {
+    &.mx_InformationCard {
         /* override some styles that we don't need */
         border: 0px none;
         box-shadow: none;
@@ -56,7 +56,7 @@ Please see LICENSE files in the repository root for full details.
         }
     }
 
-    .mx_EncryptionCard_buttons {
+    .mx_InformationCard_buttons {
         margin-top: var(--cpd-space-20x);
     }
 }

res/css/views/settings/encryption/_EncryptionCard.pcss

@@ -5,17 +5,18 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-.mx_EncryptionCard {
+.mx_InformationCard {
     display: flex;
     flex-direction: column;
     gap: var(--cpd-space-8x);
-    padding: var(--cpd-space-10x);
     border-radius: var(--cpd-space-4x);
     /* From figma */
-    box-shadow: 0 1.2px 2.4px 0 rgb(27, 29, 34, 0.15);
-    border: 1px solid var(--cpd-color-gray-400);
 
-    .mx_EncryptionCard_header {
+    border: 0px none;
+    box-shadow: none;
+    padding: 0px;
+
+    .mx_InformationCard_header {
         display: flex;
         flex-direction: column;
         gap: var(--cpd-space-4x);
@@ -31,15 +32,14 @@
         }
     }
 
-    /* extra class for specifying that we don't need a border */
-    &.mx_EncryptionCard_noBorder {
-        border: 0px none;
-        box-shadow: none;
-        padding: 0px;
+    &.mx_InformationCard_border {
+        padding: var(--cpd-space-10x);
+        box-shadow: 0 1.2px 2.4px 0 rgb(27, 29, 34, 0.15);
+        border: 1px solid var(--cpd-color-gray-400);
     }
 }
 
-.mx_EncryptionCard_buttons {
+.mx_InformationCard_buttons {
     display: flex;
     flex-direction: column;
     gap: var(--cpd-space-4x);

res/css/views/settings/encryption/_EncryptionCardEmphasisedContent.pcss

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-.mx_EncryptionCard_emphasisedContent {
+.mx_InformationCard_emphasisedContent {
     span {
         font: var(--cpd-font-body-md-medium);
         text-align: center;

src/@types/matrix-js-sdk.d.ts

@@ -1,4 +1,5 @@
 /*
+Copyright 2025 Element Creations Ltd.
 Copyright 2024, 2025 New Vector Ltd.
 Copyright 2024 The Matrix.org Foundation C.I.C.
 
@@ -36,6 +37,7 @@ declare module "matrix-js-sdk/src/types" {
     export interface StateEvents {
         // Jitsi-backed video room state events
         [JitsiCallMemberEventType]: JitsiCallMemberContent;
+        "org.matrix.msc4143.rtc.slot": any;
 
         // Unstable widgets state events
         "im.vector.modular.widgets": IWidget | EmptyObject;

src/Notifier.ts

@@ -25,7 +25,11 @@ import {
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type PermissionChanged as PermissionChangedEvent } from "@matrix-org/analytics-events/types/typescript/PermissionChanged";
-import { type IRTCNotificationContent, MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
+import {
+    DefaultCallApplicationSlot,
+    type IRTCNotificationContent,
+    MatrixRTCSession,
+} from "matrix-js-sdk/src/matrixrtc";
 
 import { MatrixClientPeg } from "./MatrixClientPeg";
 import { PosthogAnalytics } from "./PosthogAnalytics";
@@ -487,7 +491,10 @@ class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents
         const cli = MatrixClientPeg.safeGet();
         const room = cli.getRoom(ev.getRoomId());
         const thisUserHasConnectedDevice =
-            room && MatrixRTCSession.callMembershipsForRoom(room).some((m) => m.sender === cli.getUserId());
+            room &&
+            MatrixRTCSession.sessionMembershipsForSlot(room, DefaultCallApplicationSlot).some(
+                (m) => m.sender === cli.getUserId(),
+            );
 
         if (EventType.RTCNotification === ev.getType() && !thisUserHasConnectedDevice) {
             const content = ev.getContent() as IRTCNotificationContent;

src/components/views/settings/encryption/EncryptionCard.tsx → src/components/structures/InformationCard.tsx

@@ -9,7 +9,7 @@ import React, { type JSX, type PropsWithChildren, type ComponentType, type SVGAt
 import { BigIcon, Heading } from "@vector-im/compound-web";
 import classNames from "classnames";
 
-interface EncryptionCardProps {
+interface InformationCardProps {
     /**
      * CSS class name to apply to the card.
      */
@@ -26,26 +26,41 @@ interface EncryptionCardProps {
      * Whether this icon shows a destructive action.
      */
     destructive?: boolean;
+    /**
+     * Whether the component should have a border
+     */
+    border?: boolean;
     /**
      * The icon to display.
      */
     Icon: ComponentType<SVGAttributes<SVGElement>>;
 }
 
+/**
+ * A component to present action buttons at the bottom of an {@link EncryptionCard}
+ * (mostly as somewhere for the common CSS to live).
+ */
+export function InformationCardButtons({ children }: PropsWithChildren): JSX.Element {
+    return <div className="mx_InformationCard_buttons">{children}</div>;
+}
+
+
 /**
  * A styled card for encryption settings.
+ * Note: This was previously known as the EncryptionCard
  */
-export function EncryptionCard({
+export function InformationCard({
     title,
     description,
     className,
+    border = true,
     destructive = false,
     Icon,
     children,
-}: PropsWithChildren<EncryptionCardProps>): JSX.Element {
+}: PropsWithChildren<InformationCardProps>): JSX.Element {
     return (
-        <div className={classNames("mx_EncryptionCard", className)}>
-            <div className="mx_EncryptionCard_header">
+        <div className={classNames("mx_InformationCard", className, border && "mx_InformationCard_border")}>
+            <div className="mx_InformationCard_header">
                 <BigIcon destructive={destructive}>
                     <Icon />
                 </BigIcon>

src/components/structures/auth/SetupEncryptionBody.tsx

@@ -22,8 +22,7 @@ import EncryptionPanel from "../../views/right_panel/EncryptionPanel";
 import AccessibleButton from "../../views/elements/AccessibleButton";
 import Spinner from "../../views/elements/Spinner";
 import { ResetIdentityDialog } from "../../views/dialogs/ResetIdentityDialog";
-import { EncryptionCard } from "../../views/settings/encryption/EncryptionCard";
-import { EncryptionCardButtons } from "../../views/settings/encryption/EncryptionCardButtons";
+import { InformationCard, InformationCardButtons } from "../../structures/InformationCard";
 import { EncryptionCardEmphasisedContent } from "../../views/settings/encryption/EncryptionCardEmphasisedContent";
 import ExternalLink from "../../views/elements/ExternalLink";
 import dispatcher from "../../../dispatcher/dispatcher";
@@ -196,10 +195,11 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
             }
 
             return (
-                <EncryptionCard
+                <InformationCard
                     title={_t("encryption|verification|confirm_identity_title")}
                     Icon={LockIcon}
-                    className="mx_EncryptionCard_noBorder mx_SetupEncryptionBody"
+                    className="mx_SetupEncryptionBody"
+                    border={false}
                 >
                     <EncryptionCardEmphasisedContent>
                         <span>{_t("encryption|verification|confirm_identity_description")}</span>
@@ -209,15 +209,15 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
                             </ExternalLink>
                         </span>
                     </EncryptionCardEmphasisedContent>
-                    <EncryptionCardButtons>
+                    <InformationCardButtons>
                         {verifyButton}
                         {useRecoveryKeyButton}
                         <Button kind="secondary" onClick={this.onCantConfirmClick}>
                             {_t("encryption|verification|cant_confirm")}
                         </Button>
                         {signOutButton}
-                    </EncryptionCardButtons>
-                </EncryptionCard>
+                    </InformationCardButtons>
+                </InformationCard>
             );
         } else if (phase === Phase.Done) {
             let message: JSX.Element;

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -23,8 +23,7 @@ import Field from "../elements/Field";
 import Spinner from "../elements/Spinner";
 import CaptchaForm from "./CaptchaForm";
 import { pickBestPolicyLanguage } from "../../../Terms.ts";
-import { EncryptionCardButtons } from "../settings/encryption/EncryptionCardButtons.tsx";
-import { EncryptionCard } from "../settings/encryption/EncryptionCard.tsx";
+import { InformationCard, InformationCardButtons } from "../../structures/InformationCard.tsx";
 
 /* This file contains a collection of components which are used by the
  * InteractiveAuth to prompt the user to enter the information needed
@@ -973,14 +972,14 @@ export class MasUnlockCrossSigningAuthEntry extends FallbackAuthEntry<{
 
     public render(): React.ReactNode {
         return (
-            <EncryptionCard
+            <InformationCard
                 Icon={UserProfileSolidIcon}
                 title={_t("auth|uia|mas_cross_signing_reset_title")}
                 description={_t("auth|uia|mas_cross_signing_reset_description", {
                     serverName: this.props.matrixClient.getDomain(),
                 })}
             >
-                <EncryptionCardButtons>
+                <InformationCardButtons>
                     <Button
                         Icon={PopOutIcon}
                         onClick={this.onGoToAccountClick}
@@ -993,8 +992,8 @@ export class MasUnlockCrossSigningAuthEntry extends FallbackAuthEntry<{
                     <Button onClick={this.onRetryClick} kind="tertiary" className="mx_Dialog_nonDialogButton">
                         {_t("action|retry")}
                     </Button>
-                </EncryptionCardButtons>
-            </EncryptionCard>
+                </InformationCardButtons>
+            </InformationCard>
         );
     }
 }

src/components/views/dialogs/ConfirmEnableCallDialog.tsx

@@ -0,0 +1,26 @@
+import React, { ReactElement } from "react";
+import { _t } from "../../../languageHandler";
+import BaseDialog from "./BaseDialog";
+import { InformationCard, InformationCardButtons } from "../../structures/InformationCard";
+import { VideoCallSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Button } from "@vector-im/compound-web";
+
+export default function({onFinished}: {onFinished: (confirmed: boolean) => void}): ReactElement {
+    return  <BaseDialog
+            onFinished={() => onFinished(false)}
+            contentId="mx_Dialog_content"
+            hasCancel={true}
+            fixedWidth={true}
+        >
+        <InformationCard title={_t("voip|enable_call_dialog|title")} description={_t("voip|enable_call_dialog|description")} Icon={VideoCallSolidIcon} border={false}>
+            <InformationCardButtons>
+                <Button onClick={() => onFinished(true)} autoFocus kind="primary" className="">
+                    {_t("voip|enable_call_dialog|accept_button")}
+                </Button>
+                <Button onClick={() => onFinished(false)} kind="secondary">
+                    {_t("action|cancel")}
+                </Button>
+            </InformationCardButtons>
+        </InformationCard>
+    </BaseDialog>
+}

src/components/views/dialogs/ConfirmKeyStorageOffDialog.tsx

@@ -12,8 +12,7 @@ import { PopOutIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import { EncryptionCard } from "../settings/encryption/EncryptionCard";
-import { EncryptionCardButtons } from "../settings/encryption/EncryptionCardButtons";
+import { InformationCard, InformationCardButtons } from "../../structures/InformationCard";
 import { type OpenToTabPayload } from "../../../dispatcher/payloads/OpenToTabPayload";
 import { Action } from "../../../dispatcher/actions";
 import { UserTab } from "./UserTab";
@@ -52,7 +51,7 @@ export default class ConfirmKeyStorageOffDialog extends React.Component<Props> {
 
     public render(): React.ReactNode {
         return (
-            <EncryptionCard
+            <InformationCard
                 Icon={ErrorIcon}
                 destructive={true}
                 title={_t("settings|encryption|confirm_key_storage_off")}
@@ -67,15 +66,15 @@ export default class ConfirmKeyStorageOffDialog extends React.Component<Props> {
                         </>
                     ),
                 })}
-                <EncryptionCardButtons>
+                <InformationCardButtons>
                     <Button onClick={this.onGoToSettingsClick} autoFocus kind="primary" className="">
                         {_t("common|go_to_settings")}
                     </Button>
                     <Button onClick={this.onDismissClick} kind="secondary">
                         {_t("action|yes_dismiss")}
                     </Button>
-                </EncryptionCardButtons>
-            </EncryptionCard>
+                </InformationCardButtons>
+            </InformationCard>
         );
     }
 }

src/components/views/dialogs/security/AccessSecretStorageDialog.tsx

@@ -15,8 +15,7 @@ import { type SecretStorage } from "matrix-js-sdk/src/matrix";
 
 import { Flex } from "../../../../../packages/shared-components/src/utils/Flex";
 import { _t } from "../../../../languageHandler";
-import { EncryptionCard } from "../../settings/encryption/EncryptionCard";
-import { EncryptionCardButtons } from "../../settings/encryption/EncryptionCardButtons";
+import { InformationCard, InformationCardButtons } from "../../../structures/InformationCard";
 import BaseDialog from "../BaseDialog";
 
 // Don't shout at the user that their key is invalid every time they type a key: wait a short time
@@ -192,14 +191,14 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
                         />
                     </div>
                     {recoveryKeyFeedback}
-                    <EncryptionCardButtons>
+                    <InformationCardButtons>
                         <Button disabled={!this.state.recoveryKeyCorrect} onClick={this.onRecoveryKeyNext}>
                             {_t("action|continue")}
                         </Button>
                         <Button kind="tertiary" onClick={this.onCancel}>
                             {_t("action|cancel")}
                         </Button>
-                    </EncryptionCardButtons>
+                    </InformationCardButtons>
                 </form>
             </div>
         );
@@ -208,14 +207,14 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
         // SettingsDialog is open, then the `FocusLock` in *that* stops us getting the focus.
         return (
             <BaseDialog fixedWidth={false} hasCancel={false}>
-                <EncryptionCard
+                <InformationCard
                     Icon={LockSolidIcon}
                     className="mx_AccessSecretStorageDialog"
                     title={title}
                     description={_t("encryption|access_secret_storage_dialog|privacy_warning")}
                 >
                     {content}
-                </EncryptionCard>
+                </InformationCard>
             </BaseDialog>
         );
     }