Add notifications and toasts for Element Call calls

res/css/_components.pcss

@@ -337,6 +337,7 @@
 @import "./views/spaces/_SpacePublicShare.pcss";
 @import "./views/terms/_InlineTermsAgreement.pcss";
 @import "./views/toasts/_AnalyticsToast.pcss";
+@import "./views/toasts/_IncomingCallToast.pcss";
 @import "./views/toasts/_IncomingLegacyCallToast.pcss";
 @import "./views/toasts/_NonUrgentEchoFailureToast.pcss";
 @import "./views/typography/_Heading.pcss";

res/css/views/toasts/_IncomingCallToast.pcss

@@ -0,0 +1,89 @@
+/*
+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.
+*/
+
+.mx_IncomingCallToast {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    pointer-events: initial; /* restore pointer events so the user can accept/decline */
+
+    .mx_IncomingCallToast_content {
+        display: flex;
+        flex-direction: column;
+        margin-left: 8px;
+        width: 100%;
+
+        .mx_CallEvent_info {
+            margin-bottom: 52px;
+            margin-right: 40px;
+            width: 180px;
+
+            .mx_CallEvent_room {
+                font-weight: bold;
+                font-size: $font-15px;
+                line-height: $font-24px;
+
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+
+                margin-bottom: $spacing-4;
+            }
+
+            .mx_CallEvent_message {
+                margin-bottom: $spacing-4;
+            }
+        }
+    }
+
+    .mx_IncomingCallToast_joinButton {
+        position: absolute;
+
+        bottom: $spacing-4;
+        right: $spacing-4;
+
+        box-sizing: border-box;
+        min-width: 120px;
+
+        padding: $spacing-4 0;
+
+        line-height: $font-24px;
+    }
+
+    .mx_IncomingCallToast_closeButton {
+        position: absolute;
+
+        top: $spacing-4;
+        right: $spacing-4;
+
+        display: flex;
+        height: 16px;
+        width: 16px;
+
+        &::before {
+            content: '';
+
+            mask-image: url('$(res)/img/cancel.svg');
+
+            height: inherit;
+            width: inherit;
+            background-color: $secondary-content;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            mask-position: center;
+        }
+    }
+}

src/Notifier.ts

@@ -47,6 +47,9 @@ import ErrorDialog from "./components/views/dialogs/ErrorDialog";
 import LegacyCallHandler from "./LegacyCallHandler";
 import VoipUserMapper from "./VoipUserMapper";
 import { localNotificationsAreSilenced } from "./utils/notifications";
+import { getIncomingCallToastKey, IncomingCallToast } from "./toasts/IncomingCallToast";
+import ToastStore from "./stores/ToastStore";
+import { ElementCall } from "./models/Call";
 
 /*
  * Dispatches:
@@ -358,7 +361,7 @@ export const Notifier = {
 
     onEvent: function(ev: MatrixEvent) {
         if (!this.isSyncing) return; // don't alert for any messages initially
-        if (ev.getSender() === MatrixClientPeg.get().credentials.userId) return;
+        if (ev.getSender() === MatrixClientPeg.get().getUserId()) return;
 
         MatrixClientPeg.get().decryptEventIfNeeded(ev);
 
@@ -419,6 +422,8 @@ export const Notifier = {
 
         const actions = MatrixClientPeg.get().getPushActionsForEvent(ev);
         if (actions?.notify) {
+            this._performCustomEventHandling(ev);
+
             if (RoomViewStore.instance.getRoomId() === room.roomId &&
                 UserActivity.sharedInstance().userActiveRecently() &&
                 !Modal.hasDialogs()
@@ -436,6 +441,24 @@ export const Notifier = {
             }
         }
     },
+
+    /**
+     * Some events require special handling such as showing in-app toasts
+     */
+    _performCustomEventHandling: function(ev: MatrixEvent) {
+        if (
+            ElementCall.CALL_EVENT_TYPE.names.includes(ev.getType())
+            && SettingsStore.getValue("feature_group_calls")
+        ) {
+            ToastStore.sharedInstance().addOrReplaceToast({
+                key: getIncomingCallToastKey(ev.getStateKey()),
+                priority: 100,
+                component: IncomingCallToast,
+                bodyClassName: "mx_IncomingCallToast",
+                props: { callEvent: ev },
+            });
+        }
+    },
 };
 
 if (!window.mxNotifier) {

src/TextForEvent.tsx

@@ -45,6 +45,7 @@ import AccessibleButton from './components/views/elements/AccessibleButton';
 import RightPanelStore from './stores/right-panel/RightPanelStore';
 import { ViewRoomPayload } from "./dispatcher/payloads/ViewRoomPayload";
 import { isLocationEvent } from './utils/EventUtils';
+import { ElementCall } from "./models/Call";
 
 export function getSenderName(event: MatrixEvent): string {
     return event.sender?.name ?? event.getSender() ?? _t("Someone");
@@ -57,6 +58,15 @@ function getRoomMemberDisplayname(event: MatrixEvent, userId = event.getSender()
     return member?.name || member?.rawDisplayName || userId || _t("Someone");
 }
 
+function textForCallEvent(event: MatrixEvent): () => string {
+    const roomName = MatrixClientPeg.get().getRoom(event.getRoomId()!).name;
+    const isSupported = MatrixClientPeg.get().supportsVoip();
+
+    return isSupported
+        ? () => _t("Video call started in %(roomName)s.", { roomName })
+        : () => _t("Video call started in %(roomName)s. (not supported by this browser)", { roomName });
+}
+
 // These functions are frequently used just to check whether an event has
 // any text to display at all. For this reason they return deferred values
 // to avoid the expense of looking up translations when they're not needed.
@@ -787,6 +797,7 @@ const stateHandlers: IHandlers = {
     [EventType.RoomTombstone]: textForTombstoneEvent,
     [EventType.RoomJoinRules]: textForJoinRulesEvent,
     [EventType.RoomGuestAccess]: textForGuestAccessEvent,
+    [ElementCall.CALL_EVENT_TYPE.unstable]: textForCallEvent,
 
     // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111)
     'im.vector.modular.widgets': textForWidgetEvent,

src/hooks/useCall.ts

@@ -35,12 +35,12 @@ export const useConnectionState = (call: Call): ConnectionState =>
     useTypedEventEmitterState(
         call,
         CallEvent.ConnectionState,
-        useCallback(state => state ?? call.connectionState, [call]),
+        useCallback(state => state ?? call?.connectionState, [call]),
     );
 
 export const useParticipants = (call: Call): Set<RoomMember> =>
     useTypedEventEmitterState(
         call,
         CallEvent.Participants,
-        useCallback(state => state ?? call.participants, [call]),
+        useCallback(state => state ?? call?.participants, [call]),
     );

src/i18n/strings/en_EN.json

@@ -472,6 +472,8 @@
     "Converts the DM to a room": "Converts the DM to a room",
     "Displays action": "Displays action",
     "Someone": "Someone",
+    "Video call started in %(roomName)s.": "Video call started in %(roomName)s.",
+    "Video call started in %(roomName)s. (not supported by this browser)": "Video call started in %(roomName)s. (not supported by this browser)",
     "%(senderName)s placed a voice call.": "%(senderName)s placed a voice call.",
     "%(senderName)s placed a voice call. (not supported by this browser)": "%(senderName)s placed a voice call. (not supported by this browser)",
     "%(senderName)s placed a video call.": "%(senderName)s placed a video call.",
@@ -797,9 +799,13 @@
     "Don't miss a reply": "Don't miss a reply",
     "Notifications": "Notifications",
     "Enable desktop notifications": "Enable desktop notifications",
+    "Unknown room": "Unknown room",
+    "Video call started": "Video call started",
+    "Video call": "Video call",
+    "Join": "Join",
+    "Close": "Close",
     "Unknown caller": "Unknown caller",
     "Voice call": "Voice call",
-    "Video call": "Video call",
     "Decline": "Decline",
     "Accept": "Accept",
     "Sound on": "Sound on",
@@ -1052,7 +1058,6 @@
     "Video devices": "Video devices",
     "Turn off camera": "Turn off camera",
     "Turn on camera": "Turn on camera",
-    "Join": "Join",
     "%(count)s people joined|other": "%(count)s people joined",
     "%(count)s people joined|one": "%(count)s person joined",
     "Dial": "Dial",
@@ -1520,7 +1525,6 @@
     "Ban list rules - %(roomName)s": "Ban list rules - %(roomName)s",
     "Server rules": "Server rules",
     "User rules": "User rules",
-    "Close": "Close",
     "You have not ignored anyone.": "You have not ignored anyone.",
     "You are currently ignoring:": "You are currently ignoring:",
     "You are not subscribed to any lists": "You are not subscribed to any lists",

src/toasts/IncomingCallToast.tsx

@@ -0,0 +1,112 @@
+/*
+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, useEffect } from 'react';
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
+import { _t } from '../languageHandler';
+import RoomAvatar from '../components/views/avatars/RoomAvatar';
+import AccessibleButton from '../components/views/elements/AccessibleButton';
+import { MatrixClientPeg } from "../MatrixClientPeg";
+import defaultDispatcher from "../dispatcher/dispatcher";
+import { ViewRoomPayload } from "../dispatcher/payloads/ViewRoomPayload";
+import { Action } from "../dispatcher/actions";
+import ToastStore from "../stores/ToastStore";
+import AccessibleTooltipButton from "../components/views/elements/AccessibleTooltipButton";
+import { LiveContentSummary, LiveContentType } from "../components/views/rooms/LiveContentSummary";
+import { useCall, useParticipants } from "../hooks/useCall";
+import { useRoomState } from "../hooks/useRoomState";
+
+export const getIncomingCallToastKey = (stateKey: string) => `call_${stateKey}`;
+
+interface IProps {
+    callEvent: MatrixEvent;
+}
+
+export function IncomingCallToast({ callEvent }: IProps) {
+    const roomId = callEvent.getRoomId()!;
+    const room = MatrixClientPeg.get().getRoom(roomId);
+    const call = useCall(roomId);
+    const participants = useParticipants(call);
+
+    const dismissToast = useCallback((): void => {
+        ToastStore.sharedInstance().dismissToast(getIncomingCallToastKey(callEvent.getStateKey()!));
+    }, [callEvent]);
+
+    const latestEvent = useRoomState(room, (state) => {
+        return state.getStateEvents(callEvent.getType(), callEvent.getStateKey()!);
+    });
+
+    useEffect(() => {
+        if ("m.terminated" in latestEvent.getContent()) {
+            dismissToast();
+        }
+    }, [latestEvent, dismissToast]);
+
+    const onJoinClick = (e: React.MouseEvent): void => {
+        e.stopPropagation();
+
+        defaultDispatcher.dispatch<ViewRoomPayload>({
+            action: Action.ViewRoom,
+            room_id: room.roomId,
+            view_call: true,
+            metricsTrigger: undefined,
+        });
+        dismissToast();
+    };
+
+    const onCloseClick = (e: React.MouseEvent): void => {
+        e.stopPropagation();
+
+        dismissToast();
+    };
+
+    return <React.Fragment>
+        <RoomAvatar
+            room={room ?? undefined}
+            height={24}
+            width={24}
+        />
+        <div className="mx_IncomingCallToast_content">
+            <div className="mx_CallEvent_info">
+                <span className="mx_CallEvent_room">
+                    { room ? room.name : _t("Unknown room") }
+                </span>
+                <div className="mx_CallEvent_message">
+                    { _t("Video call started") }
+                </div>
+                <LiveContentSummary
+                    type={LiveContentType.Video}
+                    text={_t("Video call")}
+                    active={false}
+                    participantCount={participants?.size ?? 0}
+                />
+            </div>
+        </div>
+        <AccessibleButton
+            className="mx_IncomingCallToast_joinButton"
+            onClick={onJoinClick}
+            kind="primary"
+        >
+            { _t("Join") }
+        </AccessibleButton>
+        <AccessibleTooltipButton
+            className="mx_IncomingCallToast_closeButton"
+            onClick={onCloseClick}
+            title={_t("Close")}
+        />
+    </React.Fragment>;
+}