mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-15 20:41:30 +03:00
Another rewrite
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
parent
8eb24d0d74
commit
dac741d8b9
5 changed files with 124 additions and 66 deletions
90
src/components/structures/CallEventGrouper.ts
Normal file
90
src/components/structures/CallEventGrouper.ts
Normal file
|
@ -0,0 +1,90 @@
|
||||||
|
/*
|
||||||
|
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, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
|
||||||
|
import CallHandler from '../../CallHandler';
|
||||||
|
import { EventEmitter } from 'events';
|
||||||
|
|
||||||
|
export enum CallEventGrouperState {
|
||||||
|
Incoming = "incoming",
|
||||||
|
Ended = "ended",
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum CallEventGrouperEvent {
|
||||||
|
StateChanged = "state_changed",
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class CallEventGrouper extends EventEmitter {
|
||||||
|
invite: MatrixEvent;
|
||||||
|
call: MatrixCall;
|
||||||
|
state: CallEventGrouperState;
|
||||||
|
|
||||||
|
public answerCall() {
|
||||||
|
this.call?.answer();
|
||||||
|
}
|
||||||
|
|
||||||
|
public rejectCall() {
|
||||||
|
this.call?.reject();
|
||||||
|
}
|
||||||
|
|
||||||
|
public callBack() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
public isVoice(): boolean {
|
||||||
|
const invite = this.invite;
|
||||||
|
|
||||||
|
// FIXME: Find a better way to determine this from the event?
|
||||||
|
let isVoice = true;
|
||||||
|
if (
|
||||||
|
invite.getContent().offer && invite.getContent().offer.sdp &&
|
||||||
|
invite.getContent().offer.sdp.indexOf('m=video') !== -1
|
||||||
|
) {
|
||||||
|
isVoice = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return isVoice;
|
||||||
|
}
|
||||||
|
|
||||||
|
public getState() {
|
||||||
|
return this.state;
|
||||||
|
}
|
||||||
|
|
||||||
|
private setCallListeners() {
|
||||||
|
this.call.addListener(CallEvent.State, this.setCallState);
|
||||||
|
}
|
||||||
|
|
||||||
|
private setCallState = () => {
|
||||||
|
if (this.call?.state === CallState.Ringing) {
|
||||||
|
this.state = CallEventGrouperState.Incoming;
|
||||||
|
}
|
||||||
|
this.emit(CallEventGrouperEvent.StateChanged, this.state);
|
||||||
|
}
|
||||||
|
|
||||||
|
public add(event: MatrixEvent) {
|
||||||
|
if (event.getType() === EventType.CallInvite) this.invite = event;
|
||||||
|
|
||||||
|
if (this.call) return;
|
||||||
|
const callId = event.getContent().call_id;
|
||||||
|
this.call = CallHandler.sharedInstance().getCallById(callId);
|
||||||
|
if (!this.call) return;
|
||||||
|
this.setCallListeners();
|
||||||
|
this.setCallState();
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,56 +0,0 @@
|
||||||
/*
|
|
||||||
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";
|
|
||||||
|
|
||||||
export interface TimelineCallState {
|
|
||||||
callId: string;
|
|
||||||
isVoice: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class CallEventGrouper {
|
|
||||||
invite: MatrixEvent;
|
|
||||||
callId: string;
|
|
||||||
|
|
||||||
private isVoice(): boolean {
|
|
||||||
const invite = this.invite;
|
|
||||||
|
|
||||||
// FIXME: Find a better way to determine this from the event?
|
|
||||||
let isVoice = true;
|
|
||||||
if (
|
|
||||||
invite.getContent().offer && invite.getContent().offer.sdp &&
|
|
||||||
invite.getContent().offer.sdp.indexOf('m=video') !== -1
|
|
||||||
) {
|
|
||||||
isVoice = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return isVoice;
|
|
||||||
}
|
|
||||||
|
|
||||||
public add(event: MatrixEvent) {
|
|
||||||
if (event.getType() === EventType.CallInvite) this.invite = event;
|
|
||||||
this.callId = event.getContent().call_id;
|
|
||||||
}
|
|
||||||
|
|
||||||
public getState(): TimelineCallState {
|
|
||||||
return {
|
|
||||||
isVoice: this.isVoice(),
|
|
||||||
callId: this.callId,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -662,7 +662,7 @@ export default class MessagePanel extends React.Component {
|
||||||
// it's successful: we received it.
|
// it's successful: we received it.
|
||||||
isLastSuccessful = isLastSuccessful && mxEv.getSender() === MatrixClientPeg.get().getUserId();
|
isLastSuccessful = isLastSuccessful && mxEv.getSender() === MatrixClientPeg.get().getUserId();
|
||||||
|
|
||||||
const callState = this._callEventGroupers.get(mxEv.getContent().call_id)?.getState();
|
const callEventGrouper = this._callEventGroupers.get(mxEv.getContent().call_id);
|
||||||
|
|
||||||
// use txnId as key if available so that we don't remount during sending
|
// use txnId as key if available so that we don't remount during sending
|
||||||
ret.push(
|
ret.push(
|
||||||
|
@ -696,7 +696,7 @@ export default class MessagePanel extends React.Component {
|
||||||
layout={this.props.layout}
|
layout={this.props.layout}
|
||||||
enableFlair={this.props.enableFlair}
|
enableFlair={this.props.enableFlair}
|
||||||
showReadReceipts={this.props.showReadReceipts}
|
showReadReceipts={this.props.showReadReceipts}
|
||||||
callState={callState}
|
callEventGrouper={callEventGrouper}
|
||||||
/>
|
/>
|
||||||
</TileErrorBoundary>
|
</TileErrorBoundary>
|
||||||
</li>,
|
</li>,
|
||||||
|
|
|
@ -19,15 +19,39 @@ import React from 'react';
|
||||||
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
|
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
|
||||||
import { _t } from '../../../languageHandler';
|
import { _t } from '../../../languageHandler';
|
||||||
import MemberAvatar from '../avatars/MemberAvatar';
|
import MemberAvatar from '../avatars/MemberAvatar';
|
||||||
import { TimelineCallState } from '../../structures/CallEventGrouper';
|
import CallEventGrouper, { CallEventGrouperEvent, CallEventGrouperState } from '../../structures/CallEventGrouper';
|
||||||
|
import FormButton from '../elements/FormButton';
|
||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
mxEvent: MatrixEvent;
|
mxEvent: MatrixEvent;
|
||||||
timelineCallState: TimelineCallState;
|
callEventGrouper: CallEventGrouper;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class CallEvent extends React.Component<IProps> {
|
interface IState {
|
||||||
|
callState: CallEventGrouperState;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class CallEvent extends React.Component<IProps, IState> {
|
||||||
|
constructor(props: IProps) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
callState: this.props.callEventGrouper.getState(),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.props.callEventGrouper.addListener(CallEventGrouperEvent.StateChanged, this.onStateChanged);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
this.props.callEventGrouper.removeListener(CallEventGrouperEvent.StateChanged, this.onStateChanged);
|
||||||
|
}
|
||||||
|
|
||||||
|
private onStateChanged = (newState: CallEventGrouperState) => {
|
||||||
|
this.setState({callState: newState});
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const event = this.props.mxEvent;
|
const event = this.props.mxEvent;
|
||||||
const sender = event.sender ? event.sender.name : event.getSender();
|
const sender = event.sender ? event.sender.name : event.getSender();
|
||||||
|
@ -47,7 +71,7 @@ export default class CallEvent extends React.Component<IProps> {
|
||||||
{ sender }
|
{ sender }
|
||||||
</div>
|
</div>
|
||||||
<div className="mx_CallEvent_type">
|
<div className="mx_CallEvent_type">
|
||||||
{ this.props.timelineCallState.isVoice ? _t("Voice call") : _t("Video call") }
|
{ this.props.callEventGrouper.isVoice() ? _t("Voice call") : _t("Video call") }
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -46,7 +46,7 @@ import { EditorStateTransfer } from "../../../utils/EditorStateTransfer";
|
||||||
import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
|
import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
|
||||||
import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState";
|
import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState";
|
||||||
import NotificationBadge from "./NotificationBadge";
|
import NotificationBadge from "./NotificationBadge";
|
||||||
import { TimelineCallState } from "../../structures/CallEventGrouper";
|
import CallEventGrouper from "../../structures/CallEventGrouper";
|
||||||
|
|
||||||
const eventTileTypes = {
|
const eventTileTypes = {
|
||||||
[EventType.RoomMessage]: 'messages.MessageEvent',
|
[EventType.RoomMessage]: 'messages.MessageEvent',
|
||||||
|
@ -277,7 +277,7 @@ interface IProps {
|
||||||
permalinkCreator?: RoomPermalinkCreator;
|
permalinkCreator?: RoomPermalinkCreator;
|
||||||
|
|
||||||
// CallEventGrouper for this event
|
// CallEventGrouper for this event
|
||||||
callState?: TimelineCallState;
|
callEventGrouper?: CallEventGrouper;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface IState {
|
interface IState {
|
||||||
|
@ -1143,7 +1143,7 @@ export default class EventTile extends React.Component<IProps, IState> {
|
||||||
showUrlPreview={this.props.showUrlPreview}
|
showUrlPreview={this.props.showUrlPreview}
|
||||||
permalinkCreator={this.props.permalinkCreator}
|
permalinkCreator={this.props.permalinkCreator}
|
||||||
onHeightChanged={this.props.onHeightChanged}
|
onHeightChanged={this.props.onHeightChanged}
|
||||||
callState={this.props.callState}
|
callEventGrouper={this.props.callEventGrouper}
|
||||||
/>
|
/>
|
||||||
{ keyRequestInfo }
|
{ keyRequestInfo }
|
||||||
{ reactionsRow }
|
{ reactionsRow }
|
||||||
|
|
Loading…
Reference in a new issue