New group call experience: Call tiles (#9332)

* Add call tiles

* Factor CallDuration out into a reusable component

* Correct the separator character in LiveContentSummary

src/components/views/rooms/EventTile.tsx

@@ -83,6 +83,7 @@ import { ReadReceiptGroup } from './ReadReceiptGroup';
 import { useTooltip } from "../../../utils/useTooltip";
 import { ShowThreadPayload } from "../../../dispatcher/payloads/ShowThreadPayload";
 import { isLocalRoom } from '../../../utils/localRoom/isLocalRoom';
+import { ElementCall } from "../../../models/Call";
 
 export type GetRelationsForEvent = (eventId: string, relationType: string, eventType: string) => Relations;
 
@@ -937,7 +938,7 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
 
     public render() {
         const msgtype = this.props.mxEvent.getContent().msgtype;
-        const eventType = this.props.mxEvent.getType() as EventType;
+        const eventType = this.props.mxEvent.getType();
         const {
             hasRenderer,
             isBubbleMessage,
@@ -999,7 +1000,9 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
             mx_EventTile_sending: !isEditing && isSending,
             mx_EventTile_highlight: this.shouldHighlight(),
             mx_EventTile_selected: this.props.isSelectedEvent || this.state.contextMenu,
-            mx_EventTile_continuation: isContinuation || eventType === EventType.CallInvite,
+            mx_EventTile_continuation: isContinuation
+                || eventType === EventType.CallInvite
+                || ElementCall.CALL_EVENT_TYPE.matches(eventType),
             mx_EventTile_last: this.props.last,
             mx_EventTile_lastInSection: this.props.lastInSection,
             mx_EventTile_contextual: this.props.contextual,
@@ -1053,8 +1056,9 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
             avatarSize = 14;
             needsSenderProfile = true;
         } else if (
-            (this.props.continuation && this.context.timelineRenderingType !== TimelineRenderingType.File) ||
-            eventType === EventType.CallInvite
+            (this.props.continuation && this.context.timelineRenderingType !== TimelineRenderingType.File)
+            || eventType === EventType.CallInvite
+            || ElementCall.CALL_EVENT_TYPE.matches(eventType)
         ) {
             // no avatar or sender profile for continuation messages and call tiles
             avatarSize = 0;

src/components/views/rooms/LiveContentSummary.tsx

@@ -0,0 +1,57 @@
+/*
+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, { FC } from "react";
+import classNames from "classnames";
+
+import { _t } from "../../../languageHandler";
+
+export enum LiveContentType {
+    Video,
+    // More coming soon
+}
+
+interface Props {
+    type: LiveContentType;
+    text: string;
+    active: boolean;
+    participantCount: number;
+}
+
+/**
+ * Summary line used to call out live, interactive content such as calls.
+ */
+export const LiveContentSummary: FC<Props> = ({ type, text, active, participantCount }) => (
+    <span className="mx_LiveContentSummary">
+        <span
+            className={classNames("mx_LiveContentSummary_text", {
+                "mx_LiveContentSummary_text_video": type === LiveContentType.Video,
+                "mx_LiveContentSummary_text_active": active,
+            })}
+        >
+            { text }
+        </span>
+        { participantCount > 0 && <>
+            { " • " }
+            <span
+                className="mx_LiveContentSummary_participants"
+                aria-label={_t("%(count)s participants", { count: participantCount })}
+            >
+                { participantCount }
+            </span>
+        </> }
+    </span>
+);

src/components/views/rooms/RoomTileCallSummary.tsx

@@ -15,12 +15,12 @@ limitations under the License.
 */
 
 import React, { FC } from "react";
-import classNames from "classnames";
 
 import type { Call } from "../../../models/Call";
-import { _t, TranslatedString } from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import { useConnectionState, useParticipants } from "../../../hooks/useCall";
 import { ConnectionState } from "../../../models/Call";
+import { LiveContentSummary, LiveContentType } from "./LiveContentSummary";
 
 interface Props {
     call: Call;
@@ -30,7 +30,7 @@ export const RoomTileCallSummary: FC<Props> = ({ call }) => {
     const connectionState = useConnectionState(call);
     const participants = useParticipants(call);
 
-    let text: TranslatedString;
+    let text: string;
     let active: boolean;
 
     switch (connectionState) {
@@ -49,23 +49,10 @@ export const RoomTileCallSummary: FC<Props> = ({ call }) => {
             break;
     }
 
-    return <span className="mx_RoomTileCallSummary">
-        <span
-            className={classNames(
-                "mx_RoomTileCallSummary_text",
-                { "mx_RoomTileCallSummary_text_active": active },
-            )}
-        >
-            { text }
-        </span>
-        { participants.size ? <>
-            { " · " }
-            <span
-                className="mx_RoomTileCallSummary_participants"
-                aria-label={_t("%(count)s participants", { count: participants.size })}
-            >
-                { participants.size }
-            </span>
-        </> : null }
-    </span>;
+    return <LiveContentSummary
+        type={LiveContentType.Video}
+        text={text}
+        active={active}
+        participantCount={participants.size}
+    />;
 };