Merge pull request #6121 from SimonBrandner/feature/call-event-tile

Add VoIP event tiles

src/components/structures/CallEventGrouper.ts

@@ -0,0 +1,145 @@
+/*
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+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 { EventType } from "matrix-js-sdk/src/@types/event";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { CallEvent, CallState, CallType, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
+import CallHandler, { CallHandlerEvent } from '../../CallHandler';
+import { EventEmitter } from 'events';
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import defaultDispatcher from "../../dispatcher/dispatcher";
+
+export enum CallEventGrouperEvent {
+    StateChanged = "state_changed",
+    SilencedChanged = "silenced_changed",
+}
+
+const SUPPORTED_STATES = [
+    CallState.Connected,
+    CallState.Connecting,
+    CallState.Ringing,
+];
+
+export enum CustomCallState {
+    Missed = "missed",
+}
+
+export default class CallEventGrouper extends EventEmitter {
+    private events: Set<MatrixEvent> = new Set<MatrixEvent>();
+    private call: MatrixCall;
+    public state: CallState | CustomCallState;
+
+    constructor() {
+        super();
+
+        CallHandler.sharedInstance().addListener(CallHandlerEvent.CallsChanged, this.setCall);
+        CallHandler.sharedInstance().addListener(CallHandlerEvent.SilencedCallsChanged, this.onSilencedCallsChanged);
+    }
+
+    private get invite(): MatrixEvent {
+        return [...this.events].find((event) => event.getType() === EventType.CallInvite);
+    }
+
+    private get hangup(): MatrixEvent {
+        return [...this.events].find((event) => event.getType() === EventType.CallHangup);
+    }
+
+    private get reject(): MatrixEvent {
+        return [...this.events].find((event) => event.getType() === EventType.CallReject);
+    }
+
+    public get isVoice(): boolean {
+        const invite = this.invite;
+        if (!invite) return;
+
+        // FIXME: Find a better way to determine this from the event?
+        if (invite.getContent()?.offer?.sdp?.indexOf('m=video') !== -1) return false;
+        return true;
+    }
+
+    public get hangupReason(): string | null {
+        return this.hangup?.getContent()?.reason;
+    }
+
+    /**
+     * Returns true if there are only events from the other side - we missed the call
+     */
+    private get callWasMissed(): boolean {
+        return ![...this.events].some((event) => event.sender?.userId === MatrixClientPeg.get().getUserId());
+    }
+
+    private get callId(): string {
+        return [...this.events][0].getContent().call_id;
+    }
+
+    private onSilencedCallsChanged = () => {
+        const newState = CallHandler.sharedInstance().isCallSilenced(this.callId);
+        this.emit(CallEventGrouperEvent.SilencedChanged, newState);
+    };
+
+    public answerCall = () => {
+        this.call?.answer();
+    };
+
+    public rejectCall = () => {
+        this.call?.reject();
+    };
+
+    public callBack = () => {
+        defaultDispatcher.dispatch({
+            action: 'place_call',
+            type: this.isVoice ? CallType.Voice : CallType.Video,
+            room_id: [...this.events][0]?.getRoomId(),
+        });
+    };
+
+    public toggleSilenced = () => {
+        const silenced = CallHandler.sharedInstance().isCallSilenced(this.callId);
+        silenced ?
+            CallHandler.sharedInstance().unSilenceCall(this.callId) :
+            CallHandler.sharedInstance().silenceCall(this.callId);
+    };
+
+    private setCallListeners() {
+        if (!this.call) return;
+        this.call.addListener(CallEvent.State, this.setState);
+    }
+
+    private setState = () => {
+        if (SUPPORTED_STATES.includes(this.call?.state)) {
+            this.state = this.call.state;
+        } else {
+            if (this.callWasMissed) this.state = CustomCallState.Missed;
+            else if (this.reject) this.state = CallState.Ended;
+            else if (this.hangup) this.state = CallState.Ended;
+            else if (this.invite && this.call) this.state = CallState.Connecting;
+        }
+        this.emit(CallEventGrouperEvent.StateChanged, this.state);
+    };
+
+    private setCall = () => {
+        if (this.call) return;
+
+        this.call = CallHandler.sharedInstance().getCallById(this.callId);
+        this.setCallListeners();
+        this.setState();
+    };
+
+    public add(event: MatrixEvent) {
+        this.events.add(event);
+        this.setCall();
+    }
+}

src/components/structures/MessagePanel.tsx

@@ -36,6 +36,7 @@ import DMRoomMap from "../../utils/DMRoomMap";
 import NewRoomIntro from "../views/rooms/NewRoomIntro";
 import { replaceableComponent } from "../../utils/replaceableComponent";
 import defaultDispatcher from '../../dispatcher/dispatcher';
+import CallEventGrouper from "./CallEventGrouper";
 import WhoIsTypingTile from '../views/rooms/WhoIsTypingTile';
 import ScrollPanel, { IScrollState } from "./ScrollPanel";
 import EventListSummary from '../views/elements/EventListSummary';
@@ -232,6 +233,9 @@ export default class MessagePanel extends React.Component<IProps, IState> {
     private readonly showTypingNotificationsWatcherRef: string;
     private eventNodes: Record<string, HTMLElement>;
 
+    // A map of <callId, CallEventGrouper>
+    private callEventGroupers = new Map<string, CallEventGrouper>();
+
     constructor(props, context) {
         super(props, context);
 
@@ -576,6 +580,20 @@ export default class MessagePanel extends React.Component<IProps, IState> {
             const last = (mxEv === lastShownEvent);
             const { nextEvent, nextTile } = this.getNextEventInfo(this.props.events, i);
 
+            if (
+                mxEv.getType().indexOf("m.call.") === 0 ||
+                mxEv.getType().indexOf("org.matrix.call.") === 0
+            ) {
+                const callId = mxEv.getContent().call_id;
+                if (this.callEventGroupers.has(callId)) {
+                    this.callEventGroupers.get(callId).add(mxEv);
+                } else {
+                    const callEventGrouper = new CallEventGrouper();
+                    callEventGrouper.add(mxEv);
+                    this.callEventGroupers.set(callId, callEventGrouper);
+                }
+            }
+
             if (grouper) {
                 if (grouper.shouldGroup(mxEv)) {
                     grouper.add(mxEv, this.showHiddenEvents);
@@ -692,6 +710,8 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         // it's successful: we received it.
         isLastSuccessful = isLastSuccessful && mxEv.getSender() === MatrixClientPeg.get().getUserId();
 
+        const callEventGrouper = this.callEventGroupers.get(mxEv.getContent().call_id);
+
         // use txnId as key if available so that we don't remount during sending
         ret.push(
             <TileErrorBoundary key={mxEv.getTxnId() || eventId} mxEvent={mxEv}>
@@ -722,6 +742,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
                     layout={this.props.layout}
                     enableFlair={this.props.enableFlair}
                     showReadReceipts={this.props.showReadReceipts}
+                    callEventGrouper={callEventGrouper}
                     hideSender={this.props.room.getMembers().length <= 2 && this.props.layout === Layout.Bubble}
                 />
             </TileErrorBoundary>,

src/components/views/elements/InfoTooltip.tsx

@@ -22,9 +22,16 @@ import Tooltip, { Alignment } from './Tooltip';
 import { _t } from "../../../languageHandler";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
+export enum InfoTooltipKind {
+    Info = "info",
+    Warning = "warning",
+}
+
 interface ITooltipProps {
     tooltip?: React.ReactNode;
+    className?: string;
     tooltipClassName?: string;
+    kind?: InfoTooltipKind;
 }
 
 interface IState {
@@ -53,8 +60,12 @@ export default class InfoTooltip extends React.PureComponent<ITooltipProps, ISta
     };
 
     render() {
-        const { tooltip, children, tooltipClassName } = this.props;
+        const { tooltip, children, tooltipClassName, className, kind } = this.props;
         const title = _t("Information");
+        const iconClassName = (
+            (kind !== InfoTooltipKind.Warning) ?
+                "mx_InfoTooltip_icon_info" : "mx_InfoTooltip_icon_warning"
+        );
 
         // Tooltip are forced on the right for a more natural feel to them on info icons
         const tip = this.state.hover ? <Tooltip
@@ -64,8 +75,12 @@ export default class InfoTooltip extends React.PureComponent<ITooltipProps, ISta
             alignment={Alignment.Right}
         /> : <div />;
         return (
-            <div onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} className="mx_InfoTooltip">
-                <span className="mx_InfoTooltip_icon" aria-label={title} />
+            <div
+                onMouseOver={this.onMouseOver}
+                onMouseLeave={this.onMouseLeave}
+                className={classNames("mx_InfoTooltip", className)}
+            >
+                <span className={classNames("mx_InfoTooltip_icon", iconClassName)} aria-label={title} />
                 { children }
                 { tip }
             </div>

src/components/views/messages/CallEvent.tsx

@@ -0,0 +1,218 @@
+/*
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+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 from 'react';
+
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { _t, _td } from '../../../languageHandler';
+import MemberAvatar from '../avatars/MemberAvatar';
+import CallEventGrouper, { CallEventGrouperEvent, CustomCallState } from '../../structures/CallEventGrouper';
+import AccessibleButton from '../elements/AccessibleButton';
+import { CallErrorCode, CallState } from 'matrix-js-sdk/src/webrtc/call';
+import InfoTooltip, { InfoTooltipKind } from '../elements/InfoTooltip';
+import classNames from 'classnames';
+import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
+
+interface IProps {
+    mxEvent: MatrixEvent;
+    callEventGrouper: CallEventGrouper;
+}
+
+interface IState {
+    callState: CallState | CustomCallState;
+    silenced: boolean;
+}
+
+const TEXTUAL_STATES: Map<CallState | CustomCallState, string> = new Map([
+    [CallState.Connected, _td("Connected")],
+    [CallState.Connecting, _td("Connecting")],
+]);
+
+export default class CallEvent extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            callState: this.props.callEventGrouper.state,
+            silenced: false,
+        };
+    }
+
+    componentDidMount() {
+        this.props.callEventGrouper.addListener(CallEventGrouperEvent.StateChanged, this.onStateChanged);
+        this.props.callEventGrouper.addListener(CallEventGrouperEvent.SilencedChanged, this.onSilencedChanged);
+    }
+
+    componentWillUnmount() {
+        this.props.callEventGrouper.removeListener(CallEventGrouperEvent.StateChanged, this.onStateChanged);
+        this.props.callEventGrouper.removeListener(CallEventGrouperEvent.SilencedChanged, this.onSilencedChanged);
+    }
+
+    private onSilencedChanged = (newState) => {
+        this.setState({ silenced: newState });
+    };
+
+    private onStateChanged = (newState: CallState) => {
+        this.setState({ callState: newState });
+    };
+
+    private renderContent(state: CallState | CustomCallState): JSX.Element {
+        if (state === CallState.Ringing) {
+            const silenceClass = classNames({
+                "mx_CallEvent_iconButton": true,
+                "mx_CallEvent_unSilence": this.state.silenced,
+                "mx_CallEvent_silence": !this.state.silenced,
+            });
+
+            return (
+                <div className="mx_CallEvent_content">
+                    <AccessibleTooltipButton
+                        className={silenceClass}
+                        onClick={this.props.callEventGrouper.toggleSilenced}
+                        title={this.state.silenced ? _t("Sound on"): _t("Silence call")}
+                    />
+                    <AccessibleButton
+                        className="mx_CallEvent_content_button mx_CallEvent_content_button_reject"
+                        onClick={this.props.callEventGrouper.rejectCall}
+                        kind="danger"
+                    >
+                        <span> { _t("Decline") } </span>
+                    </AccessibleButton>
+                    <AccessibleButton
+                        className="mx_CallEvent_content_button mx_CallEvent_content_button_answer"
+                        onClick={this.props.callEventGrouper.answerCall}
+                        kind="primary"
+                    >
+                        <span> { _t("Accept") } </span>
+                    </AccessibleButton>
+                </div>
+            );
+        }
+        if (state === CallState.Ended) {
+            const hangupReason = this.props.callEventGrouper.hangupReason;
+
+            if ([CallErrorCode.UserHangup, "user hangup"].includes(hangupReason) || !hangupReason) {
+                // workaround for https://github.com/vector-im/element-web/issues/5178
+                // it seems Android randomly sets a reason of "user hangup" which is
+                // interpreted as an error code :(
+                // https://github.com/vector-im/riot-android/issues/2623
+                // Also the correct hangup code as of VoIP v1 (with underscore)
+                // Also, if we don't have a reason
+                return (
+                    <div className="mx_CallEvent_content">
+                        { _t("This call has ended") }
+                    </div>
+                );
+            }
+
+            let reason;
+            if (hangupReason === CallErrorCode.IceFailed) {
+                // We couldn't establish a connection at all
+                reason = _t("Could not connect media");
+            } else if (hangupReason === "ice_timeout") {
+                // We established a connection but it died
+                reason = _t("Connection failed");
+            } else if (hangupReason === CallErrorCode.NoUserMedia) {
+                // The other side couldn't open capture devices
+                reason = _t("Their device couldn't start the camera or microphone");
+            } else if (hangupReason === "unknown_error") {
+                // An error code the other side doesn't have a way to express
+                // (as opposed to an error code they gave but we don't know about,
+                // in which case we show the error code)
+                reason = _t("An unknown error occurred");
+            } else if (hangupReason === CallErrorCode.InviteTimeout) {
+                reason = _t("No answer");
+            } else if (hangupReason === CallErrorCode.UserBusy) {
+                reason = _t("The user you called is busy.");
+            } else {
+                reason = _t('Unknown failure: %(reason)s)', { reason: hangupReason });
+            }
+
+            return (
+                <div className="mx_CallEvent_content">
+                    <InfoTooltip
+                        tooltip={reason}
+                        className="mx_CallEvent_content_tooltip"
+                        kind={InfoTooltipKind.Warning}
+                    />
+                    { _t("This call has failed") }
+                </div>
+            );
+        }
+        if (Array.from(TEXTUAL_STATES.keys()).includes(state)) {
+            return (
+                <div className="mx_CallEvent_content">
+                    { TEXTUAL_STATES.get(state) }
+                </div>
+            );
+        }
+        if (state === CustomCallState.Missed) {
+            return (
+                <div className="mx_CallEvent_content">
+                    { _t("You missed this call") }
+                    <AccessibleButton
+                        className="mx_CallEvent_content_button mx_CallEvent_content_button_callBack"
+                        onClick={this.props.callEventGrouper.callBack}
+                        kind="primary"
+                    >
+                        <span> { _t("Call back") } </span>
+                    </AccessibleButton>
+                </div>
+            );
+        }
+
+        return (
+            <div className="mx_CallEvent_content">
+                { _t("The call is in an unknown state!") }
+            </div>
+        );
+    }
+
+    render() {
+        const event = this.props.mxEvent;
+        const sender = event.sender ? event.sender.name : event.getSender();
+        const isVoice = this.props.callEventGrouper.isVoice;
+        const callType = isVoice ? _t("Voice call") : _t("Video call");
+        const content = this.renderContent(this.state.callState);
+        const className = classNames({
+            mx_CallEvent: true,
+            mx_CallEvent_voice: isVoice,
+            mx_CallEvent_video: !isVoice,
+        });
+
+        return (
+            <div className={className}>
+                <div className="mx_CallEvent_info">
+                    <MemberAvatar
+                        member={event.sender}
+                        width={32}
+                        height={32}
+                    />
+                    <div className="mx_CallEvent_info_basic">
+                        <div className="mx_CallEvent_sender">
+                            { sender }
+                        </div>
+                        <div className="mx_CallEvent_type">
+                            <div className="mx_CallEvent_type_icon"></div>
+                            { callType }
+                        </div>
+                    </div>
+                </div>
+                { content }
+            </div>
+        );
+    }
+}

src/components/views/rooms/EventTile.tsx

@@ -44,6 +44,7 @@ import EditorStateTransfer from "../../../utils/EditorStateTransfer";
 import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
 import NotificationBadge from "./NotificationBadge";
+import CallEventGrouper from "../../structures/CallEventGrouper";
 import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
 import { Action } from '../../../dispatcher/actions';
 import MemberAvatar from '../avatars/MemberAvatar';
@@ -60,10 +61,7 @@ const eventTileTypes = {
     [EventType.Sticker]: 'messages.MessageEvent',
     [EventType.KeyVerificationCancel]: 'messages.MKeyVerificationConclusion',
     [EventType.KeyVerificationDone]: 'messages.MKeyVerificationConclusion',
-    [EventType.CallInvite]: 'messages.TextualEvent',
-    [EventType.CallAnswer]: 'messages.TextualEvent',
-    [EventType.CallHangup]: 'messages.TextualEvent',
-    [EventType.CallReject]: 'messages.TextualEvent',
+    [EventType.CallInvite]: 'messages.CallEvent',
 };
 
 const stateEventTileTypes = {
@@ -290,6 +288,9 @@ interface IProps {
     // Helper to build permalinks for the room
     permalinkCreator?: RoomPermalinkCreator;
 
+    // CallEventGrouper for this event
+    callEventGrouper?: CallEventGrouper;
+
     // Symbol of the root node
     as?: string;
 
@@ -1154,6 +1155,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                                 showUrlPreview={this.props.showUrlPreview}
                                 permalinkCreator={this.props.permalinkCreator}
                                 onHeightChanged={this.props.onHeightChanged}
+                                callEventGrouper={this.props.callEventGrouper}
                             />
                             { keyRequestInfo }
                             { actionBar }

src/components/views/voip/IncomingCallBox.tsx

@@ -21,7 +21,7 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import { ActionPayload } from '../../../dispatcher/payloads';
-import CallHandler, { AudioID } from '../../../CallHandler';
+import CallHandler, { CallHandlerEvent } from '../../../CallHandler';
 import RoomAvatar from '../avatars/RoomAvatar';
 import AccessibleButton from '../elements/AccessibleButton';
 import { CallState } from 'matrix-js-sdk/src/webrtc/call';
@@ -51,8 +51,13 @@ export default class IncomingCallBox extends React.Component<IProps, IState> {
         };
     }
 
+    componentDidMount = () => {
+        CallHandler.sharedInstance().addListener(CallHandlerEvent.SilencedCallsChanged, this.onSilencedCallsChanged);
+    };
+
     public componentWillUnmount() {
         dis.unregister(this.dispatcherRef);
+        CallHandler.sharedInstance().removeListener(CallHandlerEvent.SilencedCallsChanged, this.onSilencedCallsChanged);
     }
 
     private onAction = (payload: ActionPayload) => {
@@ -73,6 +78,12 @@ export default class IncomingCallBox extends React.Component<IProps, IState> {
         }
     };
 
+    private onSilencedCallsChanged = () => {
+        const callId = this.state.incomingCall?.callId;
+        if (!callId) return;
+        this.setState({ silenced: CallHandler.sharedInstance().isCallSilenced(callId) });
+    };
+
     private onAnswerClick: React.MouseEventHandler = (e) => {
         e.stopPropagation();
         dis.dispatch({
@@ -91,9 +102,10 @@ export default class IncomingCallBox extends React.Component<IProps, IState> {
 
     private onSilenceClick: React.MouseEventHandler = (e) => {
         e.stopPropagation();
-        const newState = !this.state.silenced;
-        this.setState({ silenced: newState });
-        newState ? CallHandler.sharedInstance().pause(AudioID.Ring) : CallHandler.sharedInstance().play(AudioID.Ring);
+        const callId = this.state.incomingCall.callId;
+        this.state.silenced ?
+            CallHandler.sharedInstance().unSilenceCall(callId):
+            CallHandler.sharedInstance().silenceCall(callId);
     };
 
     public render() {