Add notifications and toasts for Element Call calls (#9337)

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.
@@ -798,6 +808,11 @@ for (const evType of ALL_RULE_TYPES) {
     stateHandlers[evType] = textForMjolnirEvent;
 }
 
+// Add both stable and unstable m.call events
+for (const evType of ElementCall.CALL_EVENT_TYPE.names) {
+    stateHandlers[evType] = textForCallEvent;
+}
+
 /**
  * Determines whether the given event has text to display.
  * @param ev The event