imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Hook up TimelineCallEventStore and add Avatar

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-05-30 12:42:23 +02:00
parent 320ceb5036
commit 4ae92d8adc
No known key found for this signature in database
GPG key ID: 9760693FDD98A790
3 changed files with 60 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/components/views/messages/CallEvent.tsx
View file

@ -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>
);