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/elements/AccessibleButton.tsx

@@ -72,7 +72,7 @@ type IProps<T extends keyof JSX.IntrinsicElements> = DynamicHtmlElementProps<T>
     disabled?: boolean;
     className?: string;
     triggerOnMouseDown?: boolean;
-    onClick(e?: ButtonEvent): void | Promise<void>;
+    onClick: ((e: ButtonEvent) => void | Promise<void>) | null;
 };
 
 interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {
@@ -106,9 +106,9 @@ export default function AccessibleButton<T extends keyof JSX.IntrinsicElements>(
         newProps["disabled"] = true;
     } else {
         if (triggerOnMouseDown) {
-            newProps.onMouseDown = onClick;
+            newProps.onMouseDown = onClick ?? undefined;
         } else {
-            newProps.onClick = onClick;
+            newProps.onClick = onClick ?? undefined;
         }
         // We need to consume enter onKeyDown and space onKeyUp
         // otherwise we are risking also activating other keyboard focusable elements
@@ -124,7 +124,7 @@ export default function AccessibleButton<T extends keyof JSX.IntrinsicElements>(
                 case KeyBindingAction.Enter:
                     e.stopPropagation();
                     e.preventDefault();
-                    return onClick(e);
+                    return onClick?.(e);
                 case KeyBindingAction.Space:
                     e.stopPropagation();
                     e.preventDefault();
@@ -144,7 +144,7 @@ export default function AccessibleButton<T extends keyof JSX.IntrinsicElements>(
                 case KeyBindingAction.Space:
                     e.stopPropagation();
                     e.preventDefault();
-                    return onClick(e);
+                    return onClick?.(e);
                 default:
                     onKeyUp?.(e);
                     break;

src/components/views/messages/CallEvent.tsx

@@ -0,0 +1,176 @@
+/*
+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, { forwardRef, useCallback, useContext, useMemo } from "react";
+
+import type { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import type { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { Call, ConnectionState } from "../../../models/Call";
+import { _t } from "../../../languageHandler";
+import { useCall, useConnectionState, useParticipants } from "../../../hooks/useCall";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import type { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
+import { Action } from "../../../dispatcher/actions";
+import type { ButtonEvent } from "../elements/AccessibleButton";
+import MemberAvatar from "../avatars/MemberAvatar";
+import { LiveContentSummary, LiveContentType } from "../rooms/LiveContentSummary";
+import FacePile from "../elements/FacePile";
+import AccessibleButton from "../elements/AccessibleButton";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { CallDuration, CallDurationFromEvent } from "../voip/CallDuration";
+
+const MAX_FACES = 8;
+
+interface ActiveCallEventProps {
+    mxEvent: MatrixEvent;
+    participants: Set<RoomMember>;
+    buttonText: string;
+    buttonKind: string;
+    onButtonClick: ((ev: ButtonEvent) => void) | null;
+}
+
+const ActiveCallEvent = forwardRef<any, ActiveCallEventProps>(
+    (
+        {
+            mxEvent,
+            participants,
+            buttonText,
+            buttonKind,
+            onButtonClick,
+        },
+        ref,
+    ) => {
+        const senderName = useMemo(() => mxEvent.sender?.name ?? mxEvent.getSender(), [mxEvent]);
+
+        const facePileMembers = useMemo(() => [...participants].slice(0, MAX_FACES), [participants]);
+        const facePileOverflow = participants.size > facePileMembers.length;
+
+        return <div className="mx_CallEvent_wrapper" ref={ref}>
+            <div className="mx_CallEvent mx_CallEvent_active">
+                <MemberAvatar
+                    member={mxEvent.sender}
+                    fallbackUserId={mxEvent.getSender()}
+                    viewUserOnClick
+                    width={24}
+                    height={24}
+                />
+                <div className="mx_CallEvent_infoRows">
+                    <span className="mx_CallEvent_title">
+                        { _t("%(name)s started a video call", { name: senderName }) }
+                    </span>
+                    <LiveContentSummary
+                        type={LiveContentType.Video}
+                        text={_t("Video call")}
+                        active={false}
+                        participantCount={participants.size}
+                    />
+                    <FacePile members={facePileMembers} faceSize={24} overflow={facePileOverflow} />
+                </div>
+                <CallDurationFromEvent mxEvent={mxEvent} />
+                <AccessibleButton
+                    className="mx_CallEvent_button"
+                    kind={buttonKind}
+                    disabled={onButtonClick === null}
+                    onClick={onButtonClick}
+                >
+                    { buttonText }
+                </AccessibleButton>
+            </div>
+        </div>;
+    },
+);
+
+interface ActiveLoadedCallEventProps {
+    mxEvent: MatrixEvent;
+    call: Call;
+}
+
+const ActiveLoadedCallEvent = forwardRef<any, ActiveLoadedCallEventProps>(({ mxEvent, call }, ref) => {
+    const connectionState = useConnectionState(call);
+    const participants = useParticipants(call);
+
+    const connect = useCallback((ev: ButtonEvent) => {
+        ev.preventDefault();
+        defaultDispatcher.dispatch<ViewRoomPayload>({
+            action: Action.ViewRoom,
+            room_id: mxEvent.getRoomId()!,
+            view_call: true,
+            metricsTrigger: undefined,
+        });
+    }, [mxEvent]);
+
+    const disconnect = useCallback((ev: ButtonEvent) => {
+        ev.preventDefault();
+        call.disconnect();
+    }, [call]);
+
+    const [buttonText, buttonKind, onButtonClick] = useMemo(() => {
+        switch (connectionState) {
+            case ConnectionState.Disconnected: return [_t("Join"), "primary", connect];
+            case ConnectionState.Connecting: return [_t("Join"), "primary", null];
+            case ConnectionState.Connected: return [_t("Leave"), "danger", disconnect];
+            case ConnectionState.Disconnecting: return [_t("Leave"), "danger", null];
+        }
+    }, [connectionState, connect, disconnect]);
+
+    return <ActiveCallEvent
+        ref={ref}
+        mxEvent={mxEvent}
+        participants={participants}
+        buttonText={buttonText}
+        buttonKind={buttonKind}
+        onButtonClick={onButtonClick}
+    />;
+});
+
+interface CallEventProps {
+    mxEvent: MatrixEvent;
+}
+
+/**
+ * An event tile representing an active or historical Element call.
+ */
+export const CallEvent = forwardRef<any, CallEventProps>(({ mxEvent }, ref) => {
+    const noParticipants = useMemo(() => new Set<RoomMember>(), []);
+    const client = useContext(MatrixClientContext);
+    const call = useCall(mxEvent.getRoomId()!);
+    const latestEvent = client.getRoom(mxEvent.getRoomId())!.currentState
+        .getStateEvents(mxEvent.getType(), mxEvent.getStateKey()!);
+
+    if ("m.terminated" in latestEvent.getContent()) {
+        // The call is terminated
+        return <div className="mx_CallEvent_wrapper" ref={ref}>
+            <div className="mx_CallEvent mx_CallEvent_inactive">
+                <span className="mx_CallEvent_title">{ _t("Video call ended") }</span>
+                <CallDuration delta={latestEvent.getTs() - mxEvent.getTs()} />
+            </div>
+        </div>;
+    }
+
+    if (call === null) {
+        // There should be a call, but it hasn't loaded yet
+        return <ActiveCallEvent
+            ref={ref}
+            mxEvent={mxEvent}
+            participants={noParticipants}
+            buttonText={_t("Join")}
+            buttonKind="primary"
+            onButtonClick={null}
+        />;
+    }
+
+    return <ActiveLoadedCallEvent mxEvent={mxEvent} call={call} ref={ref} />;
+});

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}
+    />;
 };

src/components/views/voip/CallDuration.tsx

@@ -0,0 +1,51 @@
+/*
+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, useState, useEffect } from "react";
+
+import type { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { formatCallTime } from "../../../DateUtils";
+
+interface CallDurationProps {
+    delta: number;
+}
+
+/**
+ * A call duration counter.
+ */
+export const CallDuration: FC<CallDurationProps> = ({ delta }) => {
+    // Clock desync could lead to a negative duration, so just hide it if that happens
+    if (delta <= 0) return null;
+    return <div className="mx_CallDuration">{ formatCallTime(new Date(delta)) }</div>;
+};
+
+interface CallDurationFromEventProps {
+    mxEvent: MatrixEvent;
+}
+
+/**
+ * A call duration counter that automatically counts up, given the event that
+ * started the call.
+ */
+export const CallDurationFromEvent: FC<CallDurationFromEventProps> = ({ mxEvent }) => {
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        const timer = setInterval(() => setNow(Date.now()), 1000);
+        return () => clearInterval(timer);
+    }, []);
+
+    return <CallDuration delta={now - mxEvent.getTs()} />;
+};