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

Add VoIP event tiles

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() {