Hook up TimelineCallEventStore and add Avatar

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

res/css/views/messages/_CallEvent.scss

@@ -16,7 +16,8 @@ limitations under the License.
 
 .mx_CallEvent {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    align-items: center;
 
     background-color: $dark-panel-bg-color;
     padding: 10px;
@@ -25,9 +26,16 @@ limitations under the License.
     max-width: 75%;
     box-sizing: border-box;
 
-    .mx_CallEvent_sender {}
+    .mx_CallEvent_content {
+        display: flex;
+        flex-direction: column;
 
-    .mx_CallEvent_type {
+        .mx_CallEvent_sender {
 
+        }
+
+        .mx_CallEvent_type {
+
+        }
     }
 }

src/components/structures/MessagePanel.js

@@ -26,6 +26,7 @@ import * as sdk from '../../index';
 
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import SettingsStore from '../../settings/SettingsStore';
+import TimelineCallEventStore from "../../stores/TimelineCallEventStore";
 import {Layout, LayoutPropType} from "../../settings/Layout";
 import {_t} from "../../languageHandler";
 import {haveTileForEvent} from "../views/rooms/EventTile";
@@ -529,6 +530,8 @@ export default class MessagePanel extends React.Component {
             const last = (mxEv === lastShownEvent);
             const {nextEvent, nextTile} = this._getNextEventInfo(this.props.events, i);
 
+            TimelineCallEventStore.instance.addEvent(mxEv);
+
             if (grouper) {
                 if (grouper.shouldGroup(mxEv)) {
                     grouper.add(mxEv);

src/components/views/messages/CallEvent.tsx

@@ -18,16 +18,45 @@ import React from 'react';
 
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { _t } from '../../../languageHandler';
+import TimelineCallEventStore, {
+    TimelineCall as TimelineCallSt,
+    TimelineCallEventStoreEvent,
+    TimelineCallState,
+} from "../../../stores/TimelineCallEventStore";
+import MemberAvatar from '../avatars/MemberAvatar';
 
 interface IProps {
     mxEvent: MatrixEvent;
 }
 
 interface IState {
-
+    callState: TimelineCallState;
 }
 
-export default class RoomCreate extends React.Component<IProps, IState> {
+export default class CallEvent extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            callState: null,
+        }
+    }
+
+    componentDidMount() {
+        TimelineCallEventStore.instance.addListener(TimelineCallEventStoreEvent.CallsChanged, this.onCallsChanged);
+    }
+
+    componentWillUnmount() {
+        TimelineCallEventStore.instance.removeListener(TimelineCallEventStoreEvent.CallsChanged, this.onCallsChanged);
+    }
+
+    private onCallsChanged = (calls: Map<string, TimelineCallSt>) => {
+        const callId = this.props.mxEvent.getContent().call_id;
+        const call = calls.get(callId);
+        if (!call) return;
+        this.setState({callState: call.state});
+    }
+
     private isVoice(): boolean {
         const event = this.props.mxEvent;
 
@@ -44,14 +73,23 @@ export default class RoomCreate extends React.Component<IProps, IState> {
     render() {
         const event = this.props.mxEvent;
         const sender = event.sender ? event.sender.name : event.getSender();
+        const state = this.state.callState;
 
         return (
-            <div className={"mx_CallEvent"}>
-                <div className="mx_CallEvent_sender">
-                    {sender}
-                </div>
-                <div className="mx_CallEvent_type">
-                    { this.isVoice() ? _t("Voice call") : _t("Video call") }
+            <div className="mx_CallEvent">
+                <MemberAvatar
+                    member={event.sender}
+                    width={32}
+                    height={32}
+                />
+                <div className="mx_CallEvent_content">
+                    <div className="mx_CallEvent_sender">
+                        {sender}
+                    </div>
+                    <div className="mx_CallEvent_type">
+                        { this.isVoice() ? _t("Voice call") : _t("Video call") }
+                        { state ? state : TimelineCallState.Unknown }
+                    </div>
                 </div>
             </div>
         );