From 73c66c36dd540dbc7da74f6532b9445b8a4124e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 29 May 2021 21:16:02 +0200 Subject: [PATCH 01/70] Add basic CallEvent MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/CallEvent.tsx | 59 +++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 src/components/views/messages/CallEvent.tsx diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx new file mode 100644 index 00000000000..42b3ce6b0f9 --- /dev/null +++ b/src/components/views/messages/CallEvent.tsx @@ -0,0 +1,59 @@ +/* +Copyright 2021 Šimon Brandner + +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 } from '../../../languageHandler'; + +interface IProps { + mxEvent: MatrixEvent; +} + +interface IState { + +} + +export default class RoomCreate extends React.Component { + private isVoice(): boolean { + const event = this.props.mxEvent; + + // FIXME: Find a better way to determine this from the event? + let isVoice = true; + if (event.getContent().offer && event.getContent().offer.sdp && + event.getContent().offer.sdp.indexOf('m=video') !== -1) { + isVoice = false; + } + + return isVoice; + } + + render() { + const event = this.props.mxEvent; + const sender = event.sender ? event.sender.name : event.getSender(); + + return ( +
+
+ {sender} +
+
+ { this.isVoice() ? _t("Voice call") : _t("Video call") } +
+
+ ); + } +} From eaa3645238cf9b2f1b65cdd0c57181a702075f3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 29 May 2021 21:16:25 +0200 Subject: [PATCH 02/70] Hook up CallEvent MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/rooms/EventTile.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 67df5a84ba7..71a7e39ebac 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -52,10 +52,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 = { @@ -821,6 +818,7 @@ export default class EventTile extends React.Component { (eventType === EventType.RoomMessage && msgtype && msgtype.startsWith("m.key.verification")) || (eventType === EventType.RoomCreate) || (eventType === EventType.RoomEncryption) || + (eventType === EventType.CallInvite) || (tileHandler === "messages.MJitsiWidgetEvent"); let isInfoMessage = ( !isBubbleMessage && eventType !== EventType.RoomMessage && From cd67d50a85c668f3d1548875e8526e03852b69c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 29 May 2021 21:22:58 +0200 Subject: [PATCH 03/70] Add basic CallEvent styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 33 ++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 res/css/views/messages/_CallEvent.scss diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss new file mode 100644 index 00000000000..cc465555e8f --- /dev/null +++ b/res/css/views/messages/_CallEvent.scss @@ -0,0 +1,33 @@ +/* +Copyright 2021 Šimon Brandner + +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. +*/ + +.mx_CallEvent { + display: flex; + flex-direction: column; + + background-color: $dark-panel-bg-color; + padding: 10px; + border-radius: 8px; + margin: 10px auto; + max-width: 75%; + box-sizing: border-box; + + .mx_CallEvent_sender {} + + .mx_CallEvent_type { + + } +} From 3ac63b03a63a885ea21e0237a16927dd02a7e5ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 29 May 2021 21:23:15 +0200 Subject: [PATCH 04/70] Use styling for CallEvent MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/_components.scss | 1 + src/components/views/messages/CallEvent.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/res/css/_components.scss b/res/css/_components.scss index c8985cbb51a..8a6f9a9ab11 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -156,6 +156,7 @@ @import "./views/messages/_CreateEvent.scss"; @import "./views/messages/_DateSeparator.scss"; @import "./views/messages/_EventTileBubble.scss"; +@import "./views/messages/_CallEvent.scss"; @import "./views/messages/_MEmoteBody.scss"; @import "./views/messages/_MFileBody.scss"; @import "./views/messages/_MImageBody.scss"; diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index 42b3ce6b0f9..37a624222d7 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -46,7 +46,7 @@ export default class RoomCreate extends React.Component { const sender = event.sender ? event.sender.name : event.getSender(); return ( -
+
{sender}
From 320ceb50364c356561b4253afa6041c528bd68b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 30 May 2021 12:41:56 +0200 Subject: [PATCH 05/70] Add POC TimelineCallEventStore MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/stores/TimelineCallEventStore.ts | 95 ++++++++++++++++++++++++++++ 1 file changed, 95 insertions(+) create mode 100644 src/stores/TimelineCallEventStore.ts diff --git a/src/stores/TimelineCallEventStore.ts b/src/stores/TimelineCallEventStore.ts new file mode 100644 index 00000000000..4c2acbd34cd --- /dev/null +++ b/src/stores/TimelineCallEventStore.ts @@ -0,0 +1,95 @@ +/* +Copyright 2021 Šimon Brandner + +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 EventEmitter from "events"; +import { EventType } from "matrix-js-sdk/src/@types/event"; +import { MatrixEvent } from "matrix-js-sdk/src/models/event"; + +const IGNORED_EVENTS = [ + EventType.CallNegotiate, + EventType.CallCandidates, +]; + +export enum TimelineCallEventStoreEvent { + CallsChanged = "calls_changed" +} + +export enum TimelineCallState { + Invite = "invited", + Answered = "answered", + Ended = "ended", + Rejected = "rejected", + Unknown = "unknown" +} + +const EVENT_TYPE_TO_TIMELINE_CALL_STATE = new Map([ + [EventType.CallInvite, TimelineCallState.Invite], + [EventType.CallSelectAnswer, TimelineCallState.Answered], + [EventType.CallHangup, TimelineCallState.Ended], + [EventType.CallReject, TimelineCallState.Rejected], +]); + +export interface TimelineCall { + state: TimelineCallState; + date: Date; +} + +/** + * This gathers call events and creates objects for them accordingly, these can then be retrieved by CallEvent + */ +export default class TimelineCallEventStore extends EventEmitter { + private calls: Map = new Map(); + private static internalInstance: TimelineCallEventStore; + + public static get instance(): TimelineCallEventStore { + if (!TimelineCallEventStore.internalInstance) { + TimelineCallEventStore.internalInstance = new TimelineCallEventStore; + } + + return TimelineCallEventStore.internalInstance; + } + + public clear() { + this.calls.clear(); + } + + public getInfoByCallId(callId: string): TimelineCall { + return this.calls.get(callId); + } + + private getCallState(type: EventType): TimelineCallState { + return EVENT_TYPE_TO_TIMELINE_CALL_STATE.get(type); + } + + public addEvent(event: MatrixEvent) { + if (IGNORED_EVENTS.includes(event.getType())) return; + + const callId = event.getContent().call_id; + const date = event.getDate(); + const state = this.getCallState(event.getType()); + + + if (date < this.calls.get(callId)?.date) return; + if (!state) return; + + this.calls.set(callId, { + state: state, + date: date, + }); + + this.emit(TimelineCallEventStoreEvent.CallsChanged, this.calls) + } +} From 4ae92d8adc4b5d27695c3fccb0486f4c21bc0c14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 30 May 2021 12:42:23 +0200 Subject: [PATCH 06/70] Hook up TimelineCallEventStore and add Avatar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 14 ++++-- src/components/structures/MessagePanel.js | 3 ++ src/components/views/messages/CallEvent.tsx | 54 ++++++++++++++++++--- 3 files changed, 60 insertions(+), 11 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index cc465555e8f..dfff4847342 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/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 { + + } } } diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js index d1071a9e191..e2bb3135cf7 100644 --- a/src/components/structures/MessagePanel.js +++ b/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); diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index 37a624222d7..e8e66427761 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/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 { +export default class CallEvent extends React.Component { + 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) => { + 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 { render() { const event = this.props.mxEvent; const sender = event.sender ? event.sender.name : event.getSender(); + const state = this.state.callState; return ( -
-
- {sender} -
-
- { this.isVoice() ? _t("Voice call") : _t("Video call") } +
+ +
+
+ {sender} +
+
+ { this.isVoice() ? _t("Voice call") : _t("Video call") } + { state ? state : TimelineCallState.Unknown } +
); From 31d16d4277d2b8cd7d1821d95db47d81320f4e20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 30 May 2021 15:06:54 +0200 Subject: [PATCH 07/70] Fix ignoring events MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/stores/TimelineCallEventStore.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/stores/TimelineCallEventStore.ts b/src/stores/TimelineCallEventStore.ts index 4c2acbd34cd..4689183adfc 100644 --- a/src/stores/TimelineCallEventStore.ts +++ b/src/stores/TimelineCallEventStore.ts @@ -18,11 +18,6 @@ import EventEmitter from "events"; import { EventType } from "matrix-js-sdk/src/@types/event"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; -const IGNORED_EVENTS = [ - EventType.CallNegotiate, - EventType.CallCandidates, -]; - export enum TimelineCallEventStoreEvent { CallsChanged = "calls_changed" } @@ -75,7 +70,7 @@ export default class TimelineCallEventStore extends EventEmitter { } public addEvent(event: MatrixEvent) { - if (IGNORED_EVENTS.includes(event.getType())) return; + if (!Array.from(EVENT_TYPE_TO_TIMELINE_CALL_STATE.keys()).includes(event.getType())) return; const callId = event.getContent().call_id; const date = event.getDate(); From 8dc0e2a7abd52c11f7a8253a56879b89b3c6d0ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 30 May 2021 16:26:46 +0200 Subject: [PATCH 08/70] Add CallEventGrouper as a replacement for TimeLineCallEventStore MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../structures/CallEventGrouper.tsx | 53 +++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 src/components/structures/CallEventGrouper.tsx diff --git a/src/components/structures/CallEventGrouper.tsx b/src/components/structures/CallEventGrouper.tsx new file mode 100644 index 00000000000..5bc2fb4a032 --- /dev/null +++ b/src/components/structures/CallEventGrouper.tsx @@ -0,0 +1,53 @@ +/* +Copyright 2021 Šimon Brandner + +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; + + 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; + } + + public getState(): TimelineCallState { + return { + isVoice: this.isVoice(), + } + } +} From 85bcf8ed521e380718f6f018a7da75ee3b0c9208 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 30 May 2021 16:28:30 +0200 Subject: [PATCH 09/70] Hook up CallEventGrouper MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/MessagePanel.js | 23 +++++- src/components/views/messages/CallEvent.tsx | 51 +----------- src/components/views/rooms/EventTile.tsx | 5 ++ src/stores/TimelineCallEventStore.ts | 90 --------------------- 4 files changed, 29 insertions(+), 140 deletions(-) delete mode 100644 src/stores/TimelineCallEventStore.ts diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js index e2bb3135cf7..ab5fe01e47a 100644 --- a/src/components/structures/MessagePanel.js +++ b/src/components/structures/MessagePanel.js @@ -26,7 +26,6 @@ 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"; @@ -36,6 +35,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"; const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes const continuedTypes = ['m.sticker', 'm.room.message']; @@ -210,6 +210,9 @@ export default class MessagePanel extends React.Component { this._showTypingNotificationsWatcherRef = SettingsStore.watchSetting("showTypingNotifications", null, this.onShowTypingNotificationsChange); + + // A map of + this._callEventGroupers = new Map(); } componentDidMount() { @@ -530,7 +533,20 @@ 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 ( + 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)) { @@ -646,6 +662,8 @@ export default class MessagePanel extends React.Component { // it's successful: we received it. isLastSuccessful = isLastSuccessful && mxEv.getSender() === MatrixClientPeg.get().getUserId(); + const callState = this._callEventGroupers.get(mxEv.getContent().call_id)?.getState(); + // use txnId as key if available so that we don't remount during sending ret.push(
    • , diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index e8e66427761..182645c0489 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -18,62 +18,18 @@ 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'; +import { TimelineCallState } from '../../structures/CallEventGrouper'; interface IProps { mxEvent: MatrixEvent; -} - -interface IState { callState: TimelineCallState; } -export default class CallEvent extends React.Component { - 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) => { - 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; - - // FIXME: Find a better way to determine this from the event? - let isVoice = true; - if (event.getContent().offer && event.getContent().offer.sdp && - event.getContent().offer.sdp.indexOf('m=video') !== -1) { - isVoice = false; - } - - return isVoice; - } - +export default class CallEvent extends React.Component { render() { const event = this.props.mxEvent; const sender = event.sender ? event.sender.name : event.getSender(); - const state = this.state.callState; return (
    @@ -87,8 +43,7 @@ export default class CallEvent extends React.Component { {sender}
    - { this.isVoice() ? _t("Voice call") : _t("Video call") } - { state ? state : TimelineCallState.Unknown } + { this.props.callState.isVoice ? _t("Voice call") : _t("Video call") }
    diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 71a7e39ebac..eb763549759 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -46,6 +46,7 @@ import { EditorStateTransfer } from "../../../utils/EditorStateTransfer"; import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks'; import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState"; import NotificationBadge from "./NotificationBadge"; +import { TimelineCallState } from "../../structures/CallEventGrouper"; const eventTileTypes = { [EventType.RoomMessage]: 'messages.MessageEvent', @@ -274,6 +275,9 @@ interface IProps { // Helper to build permalinks for the room permalinkCreator?: RoomPermalinkCreator; + + // CallEventGrouper for this event + callState?: TimelineCallState; } interface IState { @@ -1139,6 +1143,7 @@ export default class EventTile extends React.Component { showUrlPreview={this.props.showUrlPreview} permalinkCreator={this.props.permalinkCreator} onHeightChanged={this.props.onHeightChanged} + callState={this.props.callState} /> { keyRequestInfo } { reactionsRow } diff --git a/src/stores/TimelineCallEventStore.ts b/src/stores/TimelineCallEventStore.ts deleted file mode 100644 index 4689183adfc..00000000000 --- a/src/stores/TimelineCallEventStore.ts +++ /dev/null @@ -1,90 +0,0 @@ -/* -Copyright 2021 Šimon Brandner - -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 EventEmitter from "events"; -import { EventType } from "matrix-js-sdk/src/@types/event"; -import { MatrixEvent } from "matrix-js-sdk/src/models/event"; - -export enum TimelineCallEventStoreEvent { - CallsChanged = "calls_changed" -} - -export enum TimelineCallState { - Invite = "invited", - Answered = "answered", - Ended = "ended", - Rejected = "rejected", - Unknown = "unknown" -} - -const EVENT_TYPE_TO_TIMELINE_CALL_STATE = new Map([ - [EventType.CallInvite, TimelineCallState.Invite], - [EventType.CallSelectAnswer, TimelineCallState.Answered], - [EventType.CallHangup, TimelineCallState.Ended], - [EventType.CallReject, TimelineCallState.Rejected], -]); - -export interface TimelineCall { - state: TimelineCallState; - date: Date; -} - -/** - * This gathers call events and creates objects for them accordingly, these can then be retrieved by CallEvent - */ -export default class TimelineCallEventStore extends EventEmitter { - private calls: Map = new Map(); - private static internalInstance: TimelineCallEventStore; - - public static get instance(): TimelineCallEventStore { - if (!TimelineCallEventStore.internalInstance) { - TimelineCallEventStore.internalInstance = new TimelineCallEventStore; - } - - return TimelineCallEventStore.internalInstance; - } - - public clear() { - this.calls.clear(); - } - - public getInfoByCallId(callId: string): TimelineCall { - return this.calls.get(callId); - } - - private getCallState(type: EventType): TimelineCallState { - return EVENT_TYPE_TO_TIMELINE_CALL_STATE.get(type); - } - - public addEvent(event: MatrixEvent) { - if (!Array.from(EVENT_TYPE_TO_TIMELINE_CALL_STATE.keys()).includes(event.getType())) return; - - const callId = event.getContent().call_id; - const date = event.getDate(); - const state = this.getCallState(event.getType()); - - - if (date < this.calls.get(callId)?.date) return; - if (!state) return; - - this.calls.set(callId, { - state: state, - date: date, - }); - - this.emit(TimelineCallEventStoreEvent.CallsChanged, this.calls) - } -} From 5e8df0372490b6ce594642c4789d3553184030e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 30 May 2021 16:56:53 +0200 Subject: [PATCH 10/70] Fix styling a bit MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 9 ++++----- src/components/views/messages/CallEvent.tsx | 2 +- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index dfff4847342..49ff5f08c06 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -29,13 +29,12 @@ limitations under the License. .mx_CallEvent_content { display: flex; flex-direction: column; - - .mx_CallEvent_sender { - - } + margin-right: 10px; // To match mx_CallEvent .mx_CallEvent_type { - + font-weight: 400; + color: gray; + line-height: $font-14px; } } } diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index 182645c0489..e419e87bd20 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -39,7 +39,7 @@ export default class CallEvent extends React.Component { height={32} />
    -
    +
    {sender}
    From f94230c29205e1fb0847641045ce936ca9c3d02e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 30 May 2021 16:59:24 +0200 Subject: [PATCH 11/70] Fix css MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 49ff5f08c06..907e99d3ea4 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -29,7 +29,7 @@ limitations under the License. .mx_CallEvent_content { display: flex; flex-direction: column; - margin-right: 10px; // To match mx_CallEvent + margin-left: 10px; // To match mx_CallEvent .mx_CallEvent_type { font-weight: 400; From 20c5735e96cc6d2ef338bf3f42ea70bec60ae535 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 30 May 2021 17:00:33 +0200 Subject: [PATCH 12/70] Add getCallById() MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/CallHandler.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx index 90a631ab7fb..c9a237f3005 100644 --- a/src/CallHandler.tsx +++ b/src/CallHandler.tsx @@ -301,6 +301,12 @@ export default class CallHandler extends EventEmitter { }, true); } + public getCallById(callId: string): MatrixCall { + for (const call of this.calls.values()) { + if (call.callId === callId) return call; + } + } + getCallForRoom(roomId: string): MatrixCall { return this.calls.get(roomId) || null; } From d05b1798b80266ea9ce7e05899d084d92cb938f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 30 May 2021 19:35:51 +0200 Subject: [PATCH 13/70] Add callId MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/CallEventGrouper.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/structures/CallEventGrouper.tsx b/src/components/structures/CallEventGrouper.tsx index 5bc2fb4a032..3b6d18310cb 100644 --- a/src/components/structures/CallEventGrouper.tsx +++ b/src/components/structures/CallEventGrouper.tsx @@ -19,12 +19,13 @@ import { EventType } from "matrix-js-sdk/src/@types/event"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; export interface TimelineCallState { - callId?: string; + callId: string; isVoice: boolean; } export default class CallEventGrouper { invite: MatrixEvent; + callId: string; private isVoice(): boolean { const invite = this.invite; @@ -43,11 +44,13 @@ export default class CallEventGrouper { 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, } } } From 5e4a10ab84d56f3b427738b17834cd34b997094d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 07:55:55 +0200 Subject: [PATCH 14/70] Reorganize HTML MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 19 +++++++++------ src/components/views/messages/CallEvent.tsx | 27 ++++++++++++--------- 2 files changed, 28 insertions(+), 18 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 907e99d3ea4..683cbb7331e 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -26,15 +26,20 @@ limitations under the License. max-width: 75%; box-sizing: border-box; - .mx_CallEvent_content { + .mx_CallEvent_info { display: flex; - flex-direction: column; - margin-left: 10px; // To match mx_CallEvent + flex-direction: row; - .mx_CallEvent_type { - font-weight: 400; - color: gray; - line-height: $font-14px; + .mx_CallEvent_info_basic { + display: flex; + flex-direction: column; + margin-left: 10px; // To match mx_CallEvent + + .mx_CallEvent_type { + font-weight: 400; + color: gray; + line-height: $font-14px; + } } } } diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index e419e87bd20..05b046f9396 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -31,21 +31,26 @@ export default class CallEvent extends React.Component { const event = this.props.mxEvent; const sender = event.sender ? event.sender.name : event.getSender(); + let content; + return (
    - -
    -
    - {sender} -
    -
    - { this.props.callState.isVoice ? _t("Voice call") : _t("Video call") } +
    + +
    +
    + { sender } +
    +
    + { this.props.callState.isVoice ? _t("Voice call") : _t("Video call") } +
    + { content }
    ); } From 8eb24d0d747ba9f5c20ad1ce2a05a7ca0593d46f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 08:01:34 +0200 Subject: [PATCH 15/70] Rename callState to timelineCallState MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/CallEvent.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index 05b046f9396..68e153546fd 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -23,7 +23,8 @@ import { TimelineCallState } from '../../structures/CallEventGrouper'; interface IProps { mxEvent: MatrixEvent; - callState: TimelineCallState; + timelineCallState: TimelineCallState; +} } export default class CallEvent extends React.Component { @@ -46,7 +47,7 @@ export default class CallEvent extends React.Component { { sender }
    - { this.props.callState.isVoice ? _t("Voice call") : _t("Video call") } + { this.props.timelineCallState.isVoice ? _t("Voice call") : _t("Video call") }
    From dac741d8b9b3cc6263d0e4f6068adf39663285a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 09:30:37 +0200 Subject: [PATCH 16/70] Another rewrite MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/CallEventGrouper.ts | 90 +++++++++++++++++++ .../structures/CallEventGrouper.tsx | 56 ------------ src/components/structures/MessagePanel.js | 4 +- src/components/views/messages/CallEvent.tsx | 32 ++++++- src/components/views/rooms/EventTile.tsx | 6 +- 5 files changed, 123 insertions(+), 65 deletions(-) create mode 100644 src/components/structures/CallEventGrouper.ts delete mode 100644 src/components/structures/CallEventGrouper.tsx diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts new file mode 100644 index 00000000000..41e67f580dc --- /dev/null +++ b/src/components/structures/CallEventGrouper.ts @@ -0,0 +1,90 @@ +/* +Copyright 2021 Šimon Brandner + +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(); + } +} diff --git a/src/components/structures/CallEventGrouper.tsx b/src/components/structures/CallEventGrouper.tsx deleted file mode 100644 index 3b6d18310cb..00000000000 --- a/src/components/structures/CallEventGrouper.tsx +++ /dev/null @@ -1,56 +0,0 @@ -/* -Copyright 2021 Šimon Brandner - -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, - } - } -} diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js index ab5fe01e47a..b6d9f619c82 100644 --- a/src/components/structures/MessagePanel.js +++ b/src/components/structures/MessagePanel.js @@ -662,7 +662,7 @@ export default class MessagePanel extends React.Component { // it's successful: we received it. 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 ret.push( @@ -696,7 +696,7 @@ export default class MessagePanel extends React.Component { layout={this.props.layout} enableFlair={this.props.enableFlair} showReadReceipts={this.props.showReadReceipts} - callState={callState} + callEventGrouper={callEventGrouper} /> , diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index 68e153546fd..88b14982729 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -19,15 +19,39 @@ import React from 'react'; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { _t } from '../../../languageHandler'; import MemberAvatar from '../avatars/MemberAvatar'; -import { TimelineCallState } from '../../structures/CallEventGrouper'; +import CallEventGrouper, { CallEventGrouperEvent, CallEventGrouperState } from '../../structures/CallEventGrouper'; +import FormButton from '../elements/FormButton'; interface IProps { mxEvent: MatrixEvent; - timelineCallState: TimelineCallState; + callEventGrouper: CallEventGrouper; } + +interface IState { + callState: CallEventGrouperState; } -export default class CallEvent extends React.Component { +export default class CallEvent extends React.Component { + 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() { const event = this.props.mxEvent; const sender = event.sender ? event.sender.name : event.getSender(); @@ -47,7 +71,7 @@ export default class CallEvent extends React.Component { { sender }
    - { this.props.timelineCallState.isVoice ? _t("Voice call") : _t("Video call") } + { this.props.callEventGrouper.isVoice() ? _t("Voice call") : _t("Video call") }
    diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index eb763549759..930be62fbf1 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -46,7 +46,7 @@ import { EditorStateTransfer } from "../../../utils/EditorStateTransfer"; import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks'; import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState"; import NotificationBadge from "./NotificationBadge"; -import { TimelineCallState } from "../../structures/CallEventGrouper"; +import CallEventGrouper from "../../structures/CallEventGrouper"; const eventTileTypes = { [EventType.RoomMessage]: 'messages.MessageEvent', @@ -277,7 +277,7 @@ interface IProps { permalinkCreator?: RoomPermalinkCreator; // CallEventGrouper for this event - callState?: TimelineCallState; + callEventGrouper?: CallEventGrouper; } interface IState { @@ -1143,7 +1143,7 @@ export default class EventTile extends React.Component { showUrlPreview={this.props.showUrlPreview} permalinkCreator={this.props.permalinkCreator} onHeightChanged={this.props.onHeightChanged} - callState={this.props.callState} + callEventGrouper={this.props.callEventGrouper} /> { keyRequestInfo } { reactionsRow } From 30365ca1ad2293562cc41ae926b483555353b6a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 10:03:17 +0200 Subject: [PATCH 17/70] Allow picking up calls from the timeline MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/CallEventGrouper.ts | 6 +++--- src/components/views/messages/CallEvent.tsx | 19 +++++++++++++++++++ 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts index 41e67f580dc..ab89e48ec63 100644 --- a/src/components/structures/CallEventGrouper.ts +++ b/src/components/structures/CallEventGrouper.ts @@ -35,15 +35,15 @@ export default class CallEventGrouper extends EventEmitter { call: MatrixCall; state: CallEventGrouperState; - public answerCall() { + public answerCall = () => { this.call?.answer(); } - public rejectCall() { + public rejectCall = () => { this.call?.reject(); } - public callBack() { + public callBack = () => { } diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index 88b14982729..08069344208 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -57,6 +57,25 @@ export default class CallEvent extends React.Component { const sender = event.sender ? event.sender.name : event.getSender(); let content; + if (this.state.callState === CallEventGrouperState.Incoming) { + content = ( +
    + +
    + +
    + ); + } return (
    From 86402e9788fa5b9fb6f65db8263ced9e241a2387 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 10:03:23 +0200 Subject: [PATCH 18/70] Add some styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 683cbb7331e..e41cb7becf5 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -18,6 +18,7 @@ limitations under the License. display: flex; flex-direction: row; align-items: center; + justify-content: space-between; background-color: $dark-panel-bg-color; padding: 10px; @@ -29,6 +30,7 @@ limitations under the License. .mx_CallEvent_info { display: flex; flex-direction: row; + align-items: center; .mx_CallEvent_info_basic { display: flex; @@ -42,4 +44,9 @@ limitations under the License. } } } + + .mx_CallEvent_content { + display: flex; + flex-direction: row; + } } From 6b72c13e34d8a3ea5d06d5823603f270b496d940 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 10:06:03 +0200 Subject: [PATCH 19/70] Add some call states MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/CallEventGrouper.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts index ab89e48ec63..2c08d7b047b 100644 --- a/src/components/structures/CallEventGrouper.ts +++ b/src/components/structures/CallEventGrouper.ts @@ -23,6 +23,11 @@ import { EventEmitter } from 'events'; export enum CallEventGrouperState { Incoming = "incoming", + Connecting = "connecting", + Connected = "connected", + Ringing = "ringing", + Missed = "missed", + Rejected = "rejected", Ended = "ended", } From f96e25d833d04cdfa2c3fb53e3b5560e392d86e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 10:11:48 +0200 Subject: [PATCH 20/70] Simply use call states MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/CallEventGrouper.ts | 16 ++-------------- src/components/views/messages/CallEvent.tsx | 7 ++++--- 2 files changed, 6 insertions(+), 17 deletions(-) diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts index 2c08d7b047b..5184ddc1bb3 100644 --- a/src/components/structures/CallEventGrouper.ts +++ b/src/components/structures/CallEventGrouper.ts @@ -21,16 +21,6 @@ import { CallEvent, CallState, MatrixCall } from "matrix-js-sdk/src/webrtc/call" import CallHandler from '../../CallHandler'; import { EventEmitter } from 'events'; -export enum CallEventGrouperState { - Incoming = "incoming", - Connecting = "connecting", - Connected = "connected", - Ringing = "ringing", - Missed = "missed", - Rejected = "rejected", - Ended = "ended", -} - export enum CallEventGrouperEvent { StateChanged = "state_changed", } @@ -38,7 +28,7 @@ export enum CallEventGrouperEvent { export default class CallEventGrouper extends EventEmitter { invite: MatrixEvent; call: MatrixCall; - state: CallEventGrouperState; + state: CallState; public answerCall = () => { this.call?.answer(); @@ -76,9 +66,7 @@ export default class CallEventGrouper extends EventEmitter { } private setCallState = () => { - if (this.call?.state === CallState.Ringing) { - this.state = CallEventGrouperState.Incoming; - } + this.state = this.call.state this.emit(CallEventGrouperEvent.StateChanged, this.state); } diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index 08069344208..c4126639a78 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -19,8 +19,9 @@ import React from 'react'; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { _t } from '../../../languageHandler'; import MemberAvatar from '../avatars/MemberAvatar'; -import CallEventGrouper, { CallEventGrouperEvent, CallEventGrouperState } from '../../structures/CallEventGrouper'; +import CallEventGrouper, { CallEventGrouperEvent } from '../../structures/CallEventGrouper'; import FormButton from '../elements/FormButton'; +import { CallState } from 'matrix-js-sdk/src/webrtc/call'; interface IProps { mxEvent: MatrixEvent; @@ -28,7 +29,7 @@ interface IProps { } interface IState { - callState: CallEventGrouperState; + callState: CallState; } export default class CallEvent extends React.Component { @@ -57,7 +58,7 @@ export default class CallEvent extends React.Component { const sender = event.sender ? event.sender.name : event.getSender(); let content; - if (this.state.callState === CallEventGrouperState.Incoming) { + if (this.state.callState === CallState.Ringing) { content = (
    Date: Tue, 1 Jun 2021 10:33:44 +0200 Subject: [PATCH 21/70] Manage some more call states MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/CallEventGrouper.ts | 14 +++++++++-- src/components/views/messages/CallEvent.tsx | 23 +++++++++++++++++-- 2 files changed, 33 insertions(+), 4 deletions(-) diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts index 5184ddc1bb3..c654c086362 100644 --- a/src/components/structures/CallEventGrouper.ts +++ b/src/components/structures/CallEventGrouper.ts @@ -25,6 +25,13 @@ export enum CallEventGrouperEvent { StateChanged = "state_changed", } +const SUPPORTED_STATES = [ + CallState.Connected, + CallState.Connecting, + CallState.Ended, + CallState.Ringing, +]; + export default class CallEventGrouper extends EventEmitter { invite: MatrixEvent; call: MatrixCall; @@ -66,12 +73,15 @@ export default class CallEventGrouper extends EventEmitter { } private setCallState = () => { - this.state = this.call.state - this.emit(CallEventGrouperEvent.StateChanged, this.state); + if (SUPPORTED_STATES.includes(this.call.state)) { + this.state = this.call.state; + this.emit(CallEventGrouperEvent.StateChanged, this.state); + } } public add(event: MatrixEvent) { if (event.getType() === EventType.CallInvite) this.invite = event; + if (event.getType() === EventType.CallHangup) this.state = CallState.Ended; if (this.call) return; const callId = event.getContent().call_id; diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index c4126639a78..d5f26389c29 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -32,6 +32,12 @@ interface IState { callState: CallState; } +const TEXTUAL_STATES = new Map([ + [CallState.Connected, _t("Connected")], + [CallState.Connecting, _t("Connecting")], + [CallState.Ended, _t("This call has ended")], +]); + export default class CallEvent extends React.Component { constructor(props: IProps) { super(props); @@ -49,7 +55,7 @@ export default class CallEvent extends React.Component { this.props.callEventGrouper.removeListener(CallEventGrouperEvent.StateChanged, this.onStateChanged); } - private onStateChanged = (newState: CallEventGrouperState) => { + private onStateChanged = (newState: CallState) => { this.setState({callState: newState}); } @@ -57,8 +63,9 @@ export default class CallEvent extends React.Component { const event = this.props.mxEvent; const sender = event.sender ? event.sender.name : event.getSender(); + const state = this.state.callState; let content; - if (this.state.callState === CallState.Ringing) { + if (state === CallState.Ringing) { content = (
    { />
    ); + } else if (Array.from(TEXTUAL_STATES.keys()).includes(state)) { + content = ( +
    + { TEXTUAL_STATES.get(state) } +
    + ); + } else { + content = ( +
    + { _t("The call is in an unknown state!") } +
    + ); } return ( From 8c67b96a0f3672edaea4e283b62f1caa777015e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 10:42:21 +0200 Subject: [PATCH 22/70] Save all events MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/CallEventGrouper.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts index c654c086362..84f178b75f9 100644 --- a/src/components/structures/CallEventGrouper.ts +++ b/src/components/structures/CallEventGrouper.ts @@ -33,10 +33,14 @@ const SUPPORTED_STATES = [ ]; export default class CallEventGrouper extends EventEmitter { - invite: MatrixEvent; + events: Array = []; call: MatrixCall; state: CallState; + private get invite(): MatrixEvent { + return this.events.find((event) => event.getType() === EventType.CallInvite); + } + public answerCall = () => { this.call?.answer(); } @@ -80,10 +84,11 @@ export default class CallEventGrouper extends EventEmitter { } public add(event: MatrixEvent) { - if (event.getType() === EventType.CallInvite) this.invite = event; - if (event.getType() === EventType.CallHangup) this.state = CallState.Ended; + this.events.push(event); + const type = event.getType(); - if (this.call) return; + if (type === EventType.CallHangup) this.state = CallState.Ended; + else if (type === EventType.CallReject) this.state = CallState.Ended; const callId = event.getContent().call_id; this.call = CallHandler.sharedInstance().getCallById(callId); if (!this.call) return; From 67a052e46ae9e40a175d84f9a702db8bd18e491c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 10:55:03 +0200 Subject: [PATCH 23/70] Reorganize things and do some fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/CallEventGrouper.ts | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts index 84f178b75f9..5bf7d45f59e 100644 --- a/src/components/structures/CallEventGrouper.ts +++ b/src/components/structures/CallEventGrouper.ts @@ -73,26 +73,30 @@ export default class CallEventGrouper extends EventEmitter { } private setCallListeners() { + if (!this.call) return; this.call.addListener(CallEvent.State, this.setCallState); } private setCallState = () => { - if (SUPPORTED_STATES.includes(this.call.state)) { + if (SUPPORTED_STATES.includes(this.call?.state)) { this.state = this.call.state; - this.emit(CallEventGrouperEvent.StateChanged, this.state); + } else { + const lastEvent = this.events[this.events.length - 1]; + const lastEventType = lastEvent.getType(); + + if (lastEventType === EventType.CallHangup) this.state = CallState.Ended; + else if (lastEventType === EventType.CallReject) this.state = CallState.Ended; } + this.emit(CallEventGrouperEvent.StateChanged, this.state); } public add(event: MatrixEvent) { - this.events.push(event); - const type = event.getType(); - - if (type === EventType.CallHangup) this.state = CallState.Ended; - else if (type === EventType.CallReject) this.state = CallState.Ended; const callId = event.getContent().call_id; - this.call = CallHandler.sharedInstance().getCallById(callId); - if (!this.call) return; - this.setCallListeners(); + this.events.push(event); + if (!this.call) { + this.call = CallHandler.sharedInstance().getCallById(callId); + this.setCallListeners(); + } this.setCallState(); } } From 79ec655e660aaf6b512f664abd996d3802727a7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 10:58:17 +0200 Subject: [PATCH 24/70] Fix translations MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/CallEvent.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index d5f26389c29..a048faf6b0f 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -17,7 +17,7 @@ limitations under the License. import React from 'react'; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; -import { _t } from '../../../languageHandler'; +import { _t, _td } from '../../../languageHandler'; import MemberAvatar from '../avatars/MemberAvatar'; import CallEventGrouper, { CallEventGrouperEvent } from '../../structures/CallEventGrouper'; import FormButton from '../elements/FormButton'; @@ -33,9 +33,9 @@ interface IState { } const TEXTUAL_STATES = new Map([ - [CallState.Connected, _t("Connected")], - [CallState.Connecting, _t("Connecting")], - [CallState.Ended, _t("This call has ended")], + [CallState.Connected, _td("Connected")], + [CallState.Connecting, _td("Connecting")], + [CallState.Ended, _td("This call has ended")], ]); export default class CallEvent extends React.Component { @@ -92,7 +92,7 @@ export default class CallEvent extends React.Component { } else { content = (
    - { _t("The call is in an unknown state!") } + { "The call is in an unknown state!" }
    ); } From 5b3967a486815fff26f508857ff5eb863a6ea3c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 11:01:10 +0200 Subject: [PATCH 25/70] Add handling for invite MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/CallEventGrouper.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts index 5bf7d45f59e..08f91f42bf2 100644 --- a/src/components/structures/CallEventGrouper.ts +++ b/src/components/structures/CallEventGrouper.ts @@ -86,6 +86,7 @@ export default class CallEventGrouper extends EventEmitter { if (lastEventType === EventType.CallHangup) this.state = CallState.Ended; else if (lastEventType === EventType.CallReject) this.state = CallState.Ended; + else if (lastEventType === EventType.CallInvite) this.state = CallState.Connecting; } this.emit(CallEventGrouperEvent.StateChanged, this.state); } From 078599798374551e11f8511037f62b44f6977e5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 11:28:45 +0200 Subject: [PATCH 26/70] Handle missed calls MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 5 ++++ src/components/structures/CallEventGrouper.ts | 23 +++++++++++++++---- src/components/views/messages/CallEvent.tsx | 21 ++++++++++++----- 3 files changed, 38 insertions(+), 11 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index e41cb7becf5..9f61295a5ab 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -48,5 +48,10 @@ limitations under the License. .mx_CallEvent_content { display: flex; flex-direction: row; + align-items: center; + + .mx_CallEvent_content_callBack { + margin-left: 10px; // To match mx_callEvent + } } } diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts index 08f91f42bf2..5a3e5720e34 100644 --- a/src/components/structures/CallEventGrouper.ts +++ b/src/components/structures/CallEventGrouper.ts @@ -17,9 +17,11 @@ 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 { CallEvent, CallState, CallType, MatrixCall } from "matrix-js-sdk/src/webrtc/call"; import CallHandler from '../../CallHandler'; import { EventEmitter } from 'events'; +import { MatrixClientPeg } from "../../MatrixClientPeg"; +import defaultDispatcher from "../../dispatcher/dispatcher"; export enum CallEventGrouperEvent { StateChanged = "state_changed", @@ -32,10 +34,14 @@ const SUPPORTED_STATES = [ CallState.Ringing, ]; +export enum CustomCallState { + Missed = "missed", +} + export default class CallEventGrouper extends EventEmitter { events: Array = []; call: MatrixCall; - state: CallState; + state: CallState | CustomCallState; private get invite(): MatrixEvent { return this.events.find((event) => event.getType() === EventType.CallInvite); @@ -50,7 +56,11 @@ export default class CallEventGrouper extends EventEmitter { } public callBack = () => { - + defaultDispatcher.dispatch({ + action: 'place_call', + type: this.isVoice ? CallType.Voice : CallType.Video, + room_id: this.events[0]?.getRoomId(), + }); } public isVoice(): boolean { @@ -68,7 +78,7 @@ export default class CallEventGrouper extends EventEmitter { return isVoice; } - public getState() { + public getState(): CallState | CustomCallState { return this.state; } @@ -86,7 +96,10 @@ export default class CallEventGrouper extends EventEmitter { if (lastEventType === EventType.CallHangup) this.state = CallState.Ended; else if (lastEventType === EventType.CallReject) this.state = CallState.Ended; - else if (lastEventType === EventType.CallInvite) this.state = CallState.Connecting; + else if (lastEventType === EventType.CallInvite && this.call) this.state = CallState.Connecting; + else if (this.invite?.sender?.userId !== MatrixClientPeg.get().getUserId()) { + this.state = CustomCallState.Missed; + } } this.emit(CallEventGrouperEvent.StateChanged, this.state); } diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index a048faf6b0f..fbc653a8ca5 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -19,7 +19,7 @@ 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 } from '../../structures/CallEventGrouper'; +import CallEventGrouper, { CallEventGrouperEvent, CustomCallState } from '../../structures/CallEventGrouper'; import FormButton from '../elements/FormButton'; import { CallState } from 'matrix-js-sdk/src/webrtc/call'; @@ -29,10 +29,10 @@ interface IProps { } interface IState { - callState: CallState; + callState: CallState | CustomCallState; } -const TEXTUAL_STATES = new Map([ +const TEXTUAL_STATES: Map = new Map([ [CallState.Connected, _td("Connected")], [CallState.Connecting, _td("Connecting")], [CallState.Ended, _td("This call has ended")], @@ -69,14 +69,11 @@ export default class CallEvent extends React.Component { content = (
    -
    { { TEXTUAL_STATES.get(state) }
    ); + } else if (state === CustomCallState.Missed) { + content = ( +
    + { _t("You missed this call") } + +
    + ); } else { content = (
    From 79f51adf2534e449d53e51c8a201fee8184ff6f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 11:38:17 +0200 Subject: [PATCH 27/70] Delete old call tile handlers that are replaced by CallEventGrouper and CallEvent MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/TextForEvent.js | 76 --------------------------------------------- 1 file changed, 76 deletions(-) diff --git a/src/TextForEvent.js b/src/TextForEvent.js index 86f9ff20f46..e8e75e196f9 100644 --- a/src/TextForEvent.js +++ b/src/TextForEvent.js @@ -288,78 +288,6 @@ function textForCanonicalAliasEvent(ev) { }); } -function textForCallAnswerEvent(event) { - const senderName = event.sender ? event.sender.name : _t('Someone'); - const supported = MatrixClientPeg.get().supportsVoip() ? '' : _t('(not supported by this browser)'); - return _t('%(senderName)s answered the call.', {senderName}) + ' ' + supported; -} - -function textForCallHangupEvent(event) { - const senderName = event.sender ? event.sender.name : _t('Someone'); - const eventContent = event.getContent(); - let reason = ""; - if (!MatrixClientPeg.get().supportsVoip()) { - reason = _t('(not supported by this browser)'); - } else if (eventContent.reason) { - if (eventContent.reason === "ice_failed") { - // We couldn't establish a connection at all - reason = _t('(could not connect media)'); - } else if (eventContent.reason === "ice_timeout") { - // We established a connection but it died - reason = _t('(connection failed)'); - } else if (eventContent.reason === "user_media_failed") { - // The other side couldn't open capture devices - reason = _t("(their device couldn't start the camera / microphone)"); - } else if (eventContent.reason === "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 error occurred)"); - } else if (eventContent.reason === "invite_timeout") { - reason = _t('(no answer)'); - } else if (eventContent.reason === "user hangup" || eventContent.reason === "user_hangup") { - // 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) - reason = ''; - } else { - reason = _t('(unknown failure: %(reason)s)', {reason: eventContent.reason}); - } - } - return _t('%(senderName)s ended the call.', {senderName}) + ' ' + reason; -} - -function textForCallRejectEvent(event) { - const senderName = event.sender ? event.sender.name : _t('Someone'); - return _t('%(senderName)s declined the call.', {senderName}); -} - -function textForCallInviteEvent(event) { - const senderName = event.sender ? event.sender.name : _t('Someone'); - // FIXME: Find a better way to determine this from the event? - let isVoice = true; - if (event.getContent().offer && event.getContent().offer.sdp && - event.getContent().offer.sdp.indexOf('m=video') !== -1) { - isVoice = false; - } - const isSupported = MatrixClientPeg.get().supportsVoip(); - - // This ladder could be reduced down to a couple string variables, however other languages - // can have a hard time translating those strings. In an effort to make translations easier - // and more accurate, we break out the string-based variables to a couple booleans. - if (isVoice && isSupported) { - return _t("%(senderName)s placed a voice call.", {senderName}); - } else if (isVoice && !isSupported) { - return _t("%(senderName)s placed a voice call. (not supported by this browser)", {senderName}); - } else if (!isVoice && isSupported) { - return _t("%(senderName)s placed a video call.", {senderName}); - } else if (!isVoice && !isSupported) { - return _t("%(senderName)s placed a video call. (not supported by this browser)", {senderName}); - } -} - function textForThreePidInviteEvent(event) { const senderName = event.sender ? event.sender.name : event.getSender(); @@ -573,10 +501,6 @@ function textForMjolnirEvent(event) { const handlers = { 'm.room.message': textForMessageEvent, - 'm.call.invite': textForCallInviteEvent, - 'm.call.answer': textForCallAnswerEvent, - 'm.call.hangup': textForCallHangupEvent, - 'm.call.reject': textForCallRejectEvent, }; const stateHandlers = { From 527723c63045fa108953be195d379725f690db83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 11:51:05 +0200 Subject: [PATCH 28/70] Remove unused import MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/TextForEvent.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/TextForEvent.js b/src/TextForEvent.js index e8e75e196f9..a89b2827531 100644 --- a/src/TextForEvent.js +++ b/src/TextForEvent.js @@ -13,7 +13,6 @@ 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 {MatrixClientPeg} from './MatrixClientPeg'; import { _t } from './languageHandler'; import * as Roles from './Roles'; import {isValid3pidInvite} from "./RoomInvite"; From 91288ab5259701d0c5fe0497c89d5952a7239695 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 11:51:34 +0200 Subject: [PATCH 29/70] i18n MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/i18n/strings/en_EN.json | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 3d6fcb86438..bcf1bdf6d71 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -533,20 +533,6 @@ "%(senderName)s changed the main and alternative addresses for this room.": "%(senderName)s changed the main and alternative addresses for this room.", "%(senderName)s changed the addresses for this room.": "%(senderName)s changed the addresses for this room.", "Someone": "Someone", - "(not supported by this browser)": "(not supported by this browser)", - "%(senderName)s answered the call.": "%(senderName)s answered the call.", - "(could not connect media)": "(could not connect media)", - "(connection failed)": "(connection failed)", - "(their device couldn't start the camera / microphone)": "(their device couldn't start the camera / microphone)", - "(an error occurred)": "(an error occurred)", - "(no answer)": "(no answer)", - "(unknown failure: %(reason)s)": "(unknown failure: %(reason)s)", - "%(senderName)s ended the call.": "%(senderName)s ended the call.", - "%(senderName)s declined the call.": "%(senderName)s declined the call.", - "%(senderName)s placed a voice call.": "%(senderName)s placed a voice call.", - "%(senderName)s placed a voice call. (not supported by this browser)": "%(senderName)s placed a voice call. (not supported by this browser)", - "%(senderName)s placed a video call.": "%(senderName)s placed a video call.", - "%(senderName)s placed a video call. (not supported by this browser)": "%(senderName)s placed a video call. (not supported by this browser)", "%(senderName)s revoked the invitation for %(targetDisplayName)s to join the room.": "%(senderName)s revoked the invitation for %(targetDisplayName)s to join the room.", "%(senderName)s sent an invitation to %(targetDisplayName)s to join the room.": "%(senderName)s sent an invitation to %(targetDisplayName)s to join the room.", "%(senderName)s made future room history visible to all room members, from the point they are invited.": "%(senderName)s made future room history visible to all room members, from the point they are invited.", @@ -1813,6 +1799,10 @@ "You cancelled verification.": "You cancelled verification.", "Verification cancelled": "Verification cancelled", "Compare emoji": "Compare emoji", + "Connected": "Connected", + "This call has ended": "This call has ended", + "You missed this call": "You missed this call", + "Call back": "Call back", "Sunday": "Sunday", "Monday": "Monday", "Tuesday": "Tuesday", From 9b904cdee897ed681d5a1c29941a29f3a8389e8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 13:39:05 +0200 Subject: [PATCH 30/70] Remove empty line MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/MessagePanel.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js index b6d9f619c82..1b2025848ce 100644 --- a/src/components/structures/MessagePanel.js +++ b/src/components/structures/MessagePanel.js @@ -543,7 +543,6 @@ export default class MessagePanel extends React.Component { } else { const callEventGrouper = new CallEventGrouper(); callEventGrouper.add(mxEv); - this._callEventGroupers.set(callId, callEventGrouper); } } From f1e780e6428b0c9f633e7039d50549da1acf3f4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 13:40:25 +0200 Subject: [PATCH 31/70] Improved missed calls MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/CallEventGrouper.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts index 5a3e5720e34..c53efadd7ad 100644 --- a/src/components/structures/CallEventGrouper.ts +++ b/src/components/structures/CallEventGrouper.ts @@ -82,6 +82,13 @@ export default class CallEventGrouper extends EventEmitter { return this.state; } + /** + * Returns true if there are only events from the other side - we missed the call + */ + private wasThisCallMissed(): boolean { + return !this.events.some((event) => event.sender?.userId === MatrixClientPeg.get().getUserId()); + } + private setCallListeners() { if (!this.call) return; this.call.addListener(CallEvent.State, this.setCallState); @@ -94,12 +101,10 @@ export default class CallEventGrouper extends EventEmitter { const lastEvent = this.events[this.events.length - 1]; const lastEventType = lastEvent.getType(); - if (lastEventType === EventType.CallHangup) this.state = CallState.Ended; + if (this.wasThisCallMissed()) this.state = CustomCallState.Missed; + else if (lastEventType === EventType.CallHangup) this.state = CallState.Ended; else if (lastEventType === EventType.CallReject) this.state = CallState.Ended; else if (lastEventType === EventType.CallInvite && this.call) this.state = CallState.Connecting; - else if (this.invite?.sender?.userId !== MatrixClientPeg.get().getUserId()) { - this.state = CustomCallState.Missed; - } } this.emit(CallEventGrouperEvent.StateChanged, this.state); } From 795dfa7206084a1b38d87cbddd269c6817fbfc83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 14:28:00 +0200 Subject: [PATCH 32/70] Allow custom classes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/InfoTooltip.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/views/elements/InfoTooltip.tsx b/src/components/views/elements/InfoTooltip.tsx index d49090dbae3..9eea0a96dcd 100644 --- a/src/components/views/elements/InfoTooltip.tsx +++ b/src/components/views/elements/InfoTooltip.tsx @@ -24,6 +24,7 @@ import {replaceableComponent} from "../../../utils/replaceableComponent"; interface ITooltipProps { tooltip?: React.ReactNode; + className?: string, tooltipClassName?: string; } @@ -53,7 +54,7 @@ export default class InfoTooltip extends React.PureComponent :
    ; return ( -
    +
    {children} {tip} From 3a0b6eb466f0872af9bd917530dc02ef4fec635f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 14:40:08 +0200 Subject: [PATCH 33/70] Add a warning icon MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/img/element-icons/warning.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 res/img/element-icons/warning.svg diff --git a/res/img/element-icons/warning.svg b/res/img/element-icons/warning.svg new file mode 100644 index 00000000000..eef51931408 --- /dev/null +++ b/res/img/element-icons/warning.svg @@ -0,0 +1,3 @@ + + + From 2a22f03a6ac920b4808c84e5107ade2badbe7595 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 14:40:27 +0200 Subject: [PATCH 34/70] Support InfoTooltip kinds MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/elements/_InfoTooltip.scss | 7 +++++++ src/components/views/elements/InfoTooltip.tsx | 14 ++++++++++++-- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/res/css/views/elements/_InfoTooltip.scss b/res/css/views/elements/_InfoTooltip.scss index 5858a60629c..5329e7f1f84 100644 --- a/res/css/views/elements/_InfoTooltip.scss +++ b/res/css/views/elements/_InfoTooltip.scss @@ -30,5 +30,12 @@ limitations under the License. mask-position: center; content: ''; vertical-align: middle; +} + +.mx_InfoTooltip_icon_info::before { mask-image: url('$(res)/img/element-icons/info.svg'); } + +.mx_InfoTooltip_icon_warning::before { + mask-image: url('$(res)/img/element-icons/warning.svg'); +} diff --git a/src/components/views/elements/InfoTooltip.tsx b/src/components/views/elements/InfoTooltip.tsx index 9eea0a96dcd..ca592b18492 100644 --- a/src/components/views/elements/InfoTooltip.tsx +++ b/src/components/views/elements/InfoTooltip.tsx @@ -22,10 +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 { @@ -54,8 +60,12 @@ export default class InfoTooltip extends React.PureComponent - + {children} {tip}
    From 70a5715b3d79438588b048692f4e9ad5f0fa1e41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 14:46:41 +0200 Subject: [PATCH 35/70] Support hangup reasons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 4 + src/components/structures/CallEventGrouper.ts | 4 + src/components/views/messages/CallEvent.tsx | 104 +++++++++++++----- 3 files changed, 87 insertions(+), 25 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 9f61295a5ab..2e36daccfab 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -53,5 +53,9 @@ limitations under the License. .mx_CallEvent_content_callBack { margin-left: 10px; // To match mx_callEvent } + + .mx_CallEvent_content_tooltip { + margin-right: 5px; + } } } diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts index c53efadd7ad..15de2dcaf7a 100644 --- a/src/components/structures/CallEventGrouper.ts +++ b/src/components/structures/CallEventGrouper.ts @@ -82,6 +82,10 @@ export default class CallEventGrouper extends EventEmitter { return this.state; } + public getHangupReason(): string | null { + return this.events.find((event) => event.getType() === EventType.CallHangup)?.getContent()?.reason; + } + /** * Returns true if there are only events from the other side - we missed the call */ diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index fbc653a8ca5..a4c0d027976 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -22,6 +22,7 @@ import MemberAvatar from '../avatars/MemberAvatar'; import CallEventGrouper, { CallEventGrouperEvent, CustomCallState } from '../../structures/CallEventGrouper'; import FormButton from '../elements/FormButton'; import { CallState } from 'matrix-js-sdk/src/webrtc/call'; +import InfoTooltip, { InfoTooltipKind } from '../elements/InfoTooltip'; interface IProps { mxEvent: MatrixEvent; @@ -35,7 +36,6 @@ interface IState { const TEXTUAL_STATES: Map = new Map([ [CallState.Connected, _td("Connected")], [CallState.Connecting, _td("Connecting")], - [CallState.Ended, _td("This call has ended")], ]); export default class CallEvent extends React.Component { @@ -59,53 +59,107 @@ export default class CallEvent extends React.Component { this.setState({callState: newState}); } - render() { - const event = this.props.mxEvent; - const sender = event.sender ? event.sender.name : event.getSender(); - - const state = this.state.callState; - let content; + private renderContent(state: CallState | CustomCallState): JSX.Element { if (state === CallState.Ringing) { - content = ( + return (
    +
    + ); + } + if (state === CallState.Ended) { + const hangupReason = this.props.callEventGrouper.getHangupReason(); + + if (["user_hangup", "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 ( +
    + { _t("This call has ended") } +
    + ); + } + + let reason; + if (hangupReason === "ice_failed") { + // 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 === "user_media_failed") { + // 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 === "invite_timeout") { + reason = _t("No answer"); + } else { + reason = _t('Unknown failure: %(reason)s)', {reason: hangupReason}); + } + + return ( +
    + + { _t("This call has failed") }
    ); - } else if (Array.from(TEXTUAL_STATES.keys()).includes(state)) { - content = ( + } + if (Array.from(TEXTUAL_STATES.keys()).includes(state)) { + return (
    { TEXTUAL_STATES.get(state) }
    ); - } else if (state === CustomCallState.Missed) { - content = ( + } + if (state === CustomCallState.Missed) { + return (
    { _t("You missed this call") }
    ); - } else { - content = ( -
    - { "The call is in an unknown state!" } -
    - ); } + // XXX: Should we translate this? + return ( +
    + { "The call is in an unknown state!" } +
    + ); + } + + render() { + const event = this.props.mxEvent; + const sender = event.sender ? event.sender.name : event.getSender(); + const callType = this.props.callEventGrouper.isVoice() ? _t("Voice call") : _t("Video call"); + const content = this.renderContent(this.state.callState); + return (
    @@ -119,7 +173,7 @@ export default class CallEvent extends React.Component { { sender }
    - { this.props.callEventGrouper.isVoice() ? _t("Voice call") : _t("Video call") } + { callType }
    From c03f0fb13df5a4e14c0801f69c70897bdca7114e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 14:47:46 +0200 Subject: [PATCH 36/70] i18n MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/i18n/strings/en_EN.json | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index bcf1bdf6d71..573f22a7f35 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1801,6 +1801,13 @@ "Compare emoji": "Compare emoji", "Connected": "Connected", "This call has ended": "This call has ended", + "Could not connect media": "Could not connect media", + "Connection failed": "Connection failed", + "Their device couldn't start the camera or microphone": "Their device couldn't start the camera or microphone", + "An unknown error occurred": "An unknown error occurred", + "No answer": "No answer", + "Unknown failure: %(reason)s)": "Unknown failure: %(reason)s)", + "This call has failed": "This call has failed", "You missed this call": "You missed this call", "Call back": "Call back", "Sunday": "Sunday", From 9db280bbe66c913541991f385c41f6b457bb70f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 15:31:46 +0200 Subject: [PATCH 37/70] Listen for CallsChanged MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This should avoid delays and such Signed-off-by: Šimon Brandner --- src/components/structures/CallEventGrouper.ts | 24 +++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts index 15de2dcaf7a..339b9359c2d 100644 --- a/src/components/structures/CallEventGrouper.ts +++ b/src/components/structures/CallEventGrouper.ts @@ -18,7 +18,7 @@ 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 from '../../CallHandler'; +import CallHandler, { CallHandlerEvent } from '../../CallHandler'; import { EventEmitter } from 'events'; import { MatrixClientPeg } from "../../MatrixClientPeg"; import defaultDispatcher from "../../dispatcher/dispatcher"; @@ -43,6 +43,12 @@ export default class CallEventGrouper extends EventEmitter { call: MatrixCall; state: CallState | CustomCallState; + constructor() { + super(); + + CallHandler.sharedInstance().addListener(CallHandlerEvent.CallsChanged, this.setCall) + } + private get invite(): MatrixEvent { return this.events.find((event) => event.getType() === EventType.CallInvite); } @@ -95,10 +101,10 @@ export default class CallEventGrouper extends EventEmitter { private setCallListeners() { if (!this.call) return; - this.call.addListener(CallEvent.State, this.setCallState); + this.call.addListener(CallEvent.State, this.setState); } - private setCallState = () => { + private setState = () => { if (SUPPORTED_STATES.includes(this.call?.state)) { this.state = this.call.state; } else { @@ -113,13 +119,17 @@ export default class CallEventGrouper extends EventEmitter { this.emit(CallEventGrouperEvent.StateChanged, this.state); } - public add(event: MatrixEvent) { - const callId = event.getContent().call_id; - this.events.push(event); + private setCall = () => { + const callId = this.events[0].getContent().call_id; if (!this.call) { this.call = CallHandler.sharedInstance().getCallById(callId); this.setCallListeners(); } - this.setCallState(); + this.setState(); + } + + public add(event: MatrixEvent) { + this.events.push(event); + this.setState(); } } From 6b9e2042c37e3a8fce251586dcff71859ca057a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 16:28:57 +0200 Subject: [PATCH 38/70] Use a Set instead of an Array MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/CallEventGrouper.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts index 339b9359c2d..267f8edacf3 100644 --- a/src/components/structures/CallEventGrouper.ts +++ b/src/components/structures/CallEventGrouper.ts @@ -39,7 +39,7 @@ export enum CustomCallState { } export default class CallEventGrouper extends EventEmitter { - events: Array = []; + events: Set = new Set(); call: MatrixCall; state: CallState | CustomCallState; @@ -50,7 +50,7 @@ export default class CallEventGrouper extends EventEmitter { } private get invite(): MatrixEvent { - return this.events.find((event) => event.getType() === EventType.CallInvite); + return [...this.events].find((event) => event.getType() === EventType.CallInvite); } public answerCall = () => { @@ -65,7 +65,7 @@ export default class CallEventGrouper extends EventEmitter { defaultDispatcher.dispatch({ action: 'place_call', type: this.isVoice ? CallType.Voice : CallType.Video, - room_id: this.events[0]?.getRoomId(), + room_id: [...this.events][0]?.getRoomId(), }); } @@ -89,14 +89,14 @@ export default class CallEventGrouper extends EventEmitter { } public getHangupReason(): string | null { - return this.events.find((event) => event.getType() === EventType.CallHangup)?.getContent()?.reason; + return [...this.events].find((event) => event.getType() === EventType.CallHangup)?.getContent()?.reason; } /** * Returns true if there are only events from the other side - we missed the call */ private wasThisCallMissed(): boolean { - return !this.events.some((event) => event.sender?.userId === MatrixClientPeg.get().getUserId()); + return ![...this.events].some((event) => event.sender?.userId === MatrixClientPeg.get().getUserId()); } private setCallListeners() { @@ -108,7 +108,7 @@ export default class CallEventGrouper extends EventEmitter { if (SUPPORTED_STATES.includes(this.call?.state)) { this.state = this.call.state; } else { - const lastEvent = this.events[this.events.length - 1]; + const lastEvent = [...this.events][this.events.size - 1]; const lastEventType = lastEvent.getType(); if (this.wasThisCallMissed()) this.state = CustomCallState.Missed; @@ -120,7 +120,7 @@ export default class CallEventGrouper extends EventEmitter { } private setCall = () => { - const callId = this.events[0].getContent().call_id; + const callId = [...this.events][0].getContent().call_id; if (!this.call) { this.call = CallHandler.sharedInstance().getCallById(callId); this.setCallListeners(); @@ -129,7 +129,7 @@ export default class CallEventGrouper extends EventEmitter { } public add(event: MatrixEvent) { - this.events.push(event); + this.events.add(event); this.setState(); } } From 3bf28e3a6bd0fba78d956b1aff3e46cd2de2af5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 1 Jun 2021 16:29:52 +0200 Subject: [PATCH 39/70] Remove Ended from SUPPORTED_STATES MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/CallEventGrouper.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts index 267f8edacf3..4d32d48fb3b 100644 --- a/src/components/structures/CallEventGrouper.ts +++ b/src/components/structures/CallEventGrouper.ts @@ -30,7 +30,6 @@ export enum CallEventGrouperEvent { const SUPPORTED_STATES = [ CallState.Connected, CallState.Connecting, - CallState.Ended, CallState.Ringing, ]; From 521b2445a8fe4c197a0655ec50bf08b0dd0e86dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 2 Jun 2021 10:18:32 +0200 Subject: [PATCH 40/70] Refactoring and fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/CallEventGrouper.ts | 72 +++++++++---------- src/components/views/messages/CallEvent.tsx | 6 +- 2 files changed, 36 insertions(+), 42 deletions(-) diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts index 4d32d48fb3b..8455eae0cda 100644 --- a/src/components/structures/CallEventGrouper.ts +++ b/src/components/structures/CallEventGrouper.ts @@ -14,7 +14,6 @@ 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"; @@ -38,9 +37,9 @@ export enum CustomCallState { } export default class CallEventGrouper extends EventEmitter { - events: Set = new Set(); - call: MatrixCall; - state: CallState | CustomCallState; + private events: Set = new Set(); + private call: MatrixCall; + public state: CallState | CustomCallState; constructor() { super(); @@ -52,6 +51,30 @@ export default class CallEventGrouper extends EventEmitter { return [...this.events].find((event) => event.getType() === EventType.CallInvite); } + private get hangup(): MatrixEvent { + return [...this.events].find((event) => event.getType() === EventType.CallHangup); + } + + 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()); + } + public answerCall = () => { this.call?.answer(); } @@ -68,35 +91,6 @@ export default class CallEventGrouper extends EventEmitter { }); } - 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(): CallState | CustomCallState { - return this.state; - } - - public getHangupReason(): string | null { - return [...this.events].find((event) => event.getType() === EventType.CallHangup)?.getContent()?.reason; - } - - /** - * Returns true if there are only events from the other side - we missed the call - */ - private wasThisCallMissed(): boolean { - return ![...this.events].some((event) => event.sender?.userId === MatrixClientPeg.get().getUserId()); - } private setCallListeners() { if (!this.call) return; @@ -110,7 +104,7 @@ export default class CallEventGrouper extends EventEmitter { const lastEvent = [...this.events][this.events.size - 1]; const lastEventType = lastEvent.getType(); - if (this.wasThisCallMissed()) this.state = CustomCallState.Missed; + if (this.callWasMissed) this.state = CustomCallState.Missed; else if (lastEventType === EventType.CallHangup) this.state = CallState.Ended; else if (lastEventType === EventType.CallReject) this.state = CallState.Ended; else if (lastEventType === EventType.CallInvite && this.call) this.state = CallState.Connecting; @@ -119,16 +113,16 @@ export default class CallEventGrouper extends EventEmitter { } private setCall = () => { + if (this.call) return; + const callId = [...this.events][0].getContent().call_id; - if (!this.call) { - this.call = CallHandler.sharedInstance().getCallById(callId); - this.setCallListeners(); - } + this.call = CallHandler.sharedInstance().getCallById(callId); + this.setCallListeners(); this.setState(); } public add(event: MatrixEvent) { this.events.add(event); - this.setState(); + this.setCall(); } } diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index a4c0d027976..597c2feba84 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -43,7 +43,7 @@ export default class CallEvent extends React.Component { super(props); this.state = { - callState: this.props.callEventGrouper.getState(), + callState: this.props.callEventGrouper.state, } } @@ -77,7 +77,7 @@ export default class CallEvent extends React.Component { ); } if (state === CallState.Ended) { - const hangupReason = this.props.callEventGrouper.getHangupReason(); + const hangupReason = this.props.callEventGrouper.hangupReason; if (["user_hangup", "user hangup"].includes(hangupReason) || !hangupReason) { // workaround for https://github.com/vector-im/element-web/issues/5178 @@ -157,7 +157,7 @@ export default class CallEvent extends React.Component { render() { const event = this.props.mxEvent; const sender = event.sender ? event.sender.name : event.getSender(); - const callType = this.props.callEventGrouper.isVoice() ? _t("Voice call") : _t("Video call"); + const callType = this.props.callEventGrouper.isVoice ? _t("Voice call") : _t("Video call"); const content = this.renderContent(this.state.callState); return ( From 78229a2fd0af3e11e05abc59040334d6d5bd8920 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 2 Jun 2021 10:20:11 +0200 Subject: [PATCH 41/70] Support user busy MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/CallEvent.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index 597c2feba84..e8e9afd2ee0 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -110,6 +110,8 @@ export default class CallEvent extends React.Component { reason = _t("An unknown error occurred"); } else if (hangupReason === "invite_timeout") { reason = _t("No answer"); + } else if (hangupReason === "user_busy") { + reason = _t("The user you called is busy."); } else { reason = _t('Unknown failure: %(reason)s)', {reason: hangupReason}); } From b202f997e33acd017511477ea98cc504b9589ee9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 2 Jun 2021 10:30:17 +0200 Subject: [PATCH 42/70] Refactor setState() MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/CallEventGrouper.ts | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts index 8455eae0cda..ab1444d4faa 100644 --- a/src/components/structures/CallEventGrouper.ts +++ b/src/components/structures/CallEventGrouper.ts @@ -55,6 +55,10 @@ export default class CallEventGrouper extends EventEmitter { 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; @@ -101,13 +105,10 @@ export default class CallEventGrouper extends EventEmitter { if (SUPPORTED_STATES.includes(this.call?.state)) { this.state = this.call.state; } else { - const lastEvent = [...this.events][this.events.size - 1]; - const lastEventType = lastEvent.getType(); - if (this.callWasMissed) this.state = CustomCallState.Missed; - else if (lastEventType === EventType.CallHangup) this.state = CallState.Ended; - else if (lastEventType === EventType.CallReject) this.state = CallState.Ended; - else if (lastEventType === EventType.CallInvite && this.call) this.state = CallState.Connecting; + 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); } From 3331e7bfbe8e5cf2b5b9b22779209636a23f6d15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 2 Jun 2021 10:42:58 +0200 Subject: [PATCH 43/70] Use enums where possible MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/CallEvent.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index e8e9afd2ee0..85b9e7f365e 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -21,7 +21,7 @@ import { _t, _td } from '../../../languageHandler'; import MemberAvatar from '../avatars/MemberAvatar'; import CallEventGrouper, { CallEventGrouperEvent, CustomCallState } from '../../structures/CallEventGrouper'; import FormButton from '../elements/FormButton'; -import { CallState } from 'matrix-js-sdk/src/webrtc/call'; +import { CallErrorCode, CallState } from 'matrix-js-sdk/src/webrtc/call'; import InfoTooltip, { InfoTooltipKind } from '../elements/InfoTooltip'; interface IProps { @@ -79,7 +79,7 @@ export default class CallEvent extends React.Component { if (state === CallState.Ended) { const hangupReason = this.props.callEventGrouper.hangupReason; - if (["user_hangup", "user hangup"].includes(hangupReason) || !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 :( @@ -94,13 +94,13 @@ export default class CallEvent extends React.Component { } let reason; - if (hangupReason === "ice_failed") { + 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 === "user_media_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") { @@ -108,9 +108,9 @@ export default class CallEvent extends React.Component { // (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 === "invite_timeout") { + } else if (hangupReason === CallErrorCode.InviteTimeout) { reason = _t("No answer"); - } else if (hangupReason === "user_busy") { + } else if (hangupReason === CallErrorCode.UserBusy) { reason = _t("The user you called is busy."); } else { reason = _t('Unknown failure: %(reason)s)', {reason: hangupReason}); From e0572acb14adff8ca84cf0725279bc2ff92be4eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 2 Jun 2021 19:22:22 +0200 Subject: [PATCH 44/70] Write tests for CallEventGrouper MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../structures/CallEventGrouper-test.ts | 124 ++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 test/components/structures/CallEventGrouper-test.ts diff --git a/test/components/structures/CallEventGrouper-test.ts b/test/components/structures/CallEventGrouper-test.ts new file mode 100644 index 00000000000..98a5a16a22f --- /dev/null +++ b/test/components/structures/CallEventGrouper-test.ts @@ -0,0 +1,124 @@ +import "../../skinned-sdk"; +import { stubClient } from '../../test-utils'; +import { MatrixClientPeg } from '../../../src/MatrixClientPeg'; +import { MatrixClient } from 'matrix-js-sdk'; +import { EventType } from "matrix-js-sdk/src/@types/event"; +import CallEventGrouper, { CustomCallState } from "../../../src/components/structures/CallEventGrouper"; +import { CallState } from "matrix-js-sdk/src/webrtc/call"; + +const MY_USER_ID = "@me:here"; +const THEIR_USER_ID = "@they:here"; + +let client: MatrixClient; + +describe('CallEventGrouper', () => { + beforeEach(() => { + stubClient(); + client = MatrixClientPeg.get(); + client.getUserId = () => { + return MY_USER_ID; + }; + }); + + it("detects a missed call", () => { + const grouper = new CallEventGrouper(); + + grouper.add({ + getContent: () => { + return { + call_id: "callId", + }; + }, + getType: () => { + return EventType.CallInvite; + }, + sender: { + userId: THEIR_USER_ID, + }, + }); + + expect(grouper.state).toBe(CustomCallState.Missed); + }); + + it("detects an ended call", () => { + const grouperHangup = new CallEventGrouper(); + const grouperReject = new CallEventGrouper(); + + grouperHangup.add({ + getContent: () => { + return { + call_id: "callId", + }; + }, + getType: () => { + return EventType.CallInvite; + }, + sender: { + userId: MY_USER_ID, + }, + }); + grouperHangup.add({ + getContent: () => { + return { + call_id: "callId", + }; + }, + getType: () => { + return EventType.CallHangup; + }, + sender: { + userId: THEIR_USER_ID, + }, + }); + + grouperReject.add({ + getContent: () => { + return { + call_id: "callId", + }; + }, + getType: () => { + return EventType.CallInvite; + }, + sender: { + userId: MY_USER_ID, + }, + }); + grouperReject.add({ + getContent: () => { + return { + call_id: "callId", + }; + }, + getType: () => { + return EventType.CallReject; + }, + sender: { + userId: THEIR_USER_ID, + }, + }); + + expect(grouperHangup.state).toBe(CallState.Ended); + expect(grouperReject.state).toBe(CallState.Ended); + }); + + it("detects call type", () => { + const grouper = new CallEventGrouper(); + + grouper.add({ + getContent: () => { + return { + call_id: "callId", + offer: { + sdp: "this is definitely an SDP m=video", + }, + }; + }, + getType: () => { + return EventType.CallInvite; + }, + }); + + expect(grouper.isVoice).toBe(false); + }); +}); From 1c92e3168394280eaafddad84a242338ffdd0284 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 2 Jun 2021 19:27:57 +0200 Subject: [PATCH 45/70] Add missing license header MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../structures/CallEventGrouper-test.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/test/components/structures/CallEventGrouper-test.ts b/test/components/structures/CallEventGrouper-test.ts index 98a5a16a22f..5719d92902b 100644 --- a/test/components/structures/CallEventGrouper-test.ts +++ b/test/components/structures/CallEventGrouper-test.ts @@ -1,3 +1,19 @@ +/* +Copyright 2021 Šimon Brandner + +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 "../../skinned-sdk"; import { stubClient } from '../../test-utils'; import { MatrixClientPeg } from '../../../src/MatrixClientPeg'; From ae54a8f5469ba1a55d0e5642f5cc8b738ee794b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 4 Jun 2021 07:42:17 +0200 Subject: [PATCH 46/70] Return null MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/CallHandler.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx index 15008a640a2..9a1c416cdb3 100644 --- a/src/CallHandler.tsx +++ b/src/CallHandler.tsx @@ -305,6 +305,7 @@ export default class CallHandler extends EventEmitter { for (const call of this.calls.values()) { if (call.callId === callId) return call; } + return null; } getCallForRoom(roomId: string): MatrixCall { From 3b2d6d442f96d80f4cb6f5de210e248545272eca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 4 Jun 2021 07:43:30 +0200 Subject: [PATCH 47/70] Translate unknown call state MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/CallEvent.tsx | 3 +-- src/i18n/strings/en_EN.json | 1 + 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index 85b9e7f365e..6139a2df6b5 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -148,10 +148,9 @@ export default class CallEvent extends React.Component { ); } - // XXX: Should we translate this? return (
    - { "The call is in an unknown state!" } + { _t("The call is in an unknown state!") }
    ); } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 573f22a7f35..2db181285a0 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1810,6 +1810,7 @@ "This call has failed": "This call has failed", "You missed this call": "You missed this call", "Call back": "Call back", + "The call is in an unknown state!": "The call is in an unknown state!", "Sunday": "Sunday", "Monday": "Monday", "Tuesday": "Tuesday", From 22567a16efb28c43a4e97befbbb4a4ce8965723a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 9 Jun 2021 20:10:55 +0200 Subject: [PATCH 48/70] i18n MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/i18n/strings/en_EN.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index bcd64b0ad77..8439afc57ed 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -534,8 +534,8 @@ "%(senderName)s changed the alternative addresses for this room.": "%(senderName)s changed the alternative addresses for this room.", "%(senderName)s changed the main and alternative addresses for this room.": "%(senderName)s changed the main and alternative addresses for this room.", "%(senderName)s changed the addresses for this room.": "%(senderName)s changed the addresses for this room.", - "Someone": "Someone", "%(senderName)s revoked the invitation for %(targetDisplayName)s to join the room.": "%(senderName)s revoked the invitation for %(targetDisplayName)s to join the room.", + "Someone": "Someone", "%(senderName)s sent an invitation to %(targetDisplayName)s to join the room.": "%(senderName)s sent an invitation to %(targetDisplayName)s to join the room.", "%(senderName)s made future room history visible to all room members, from the point they are invited.": "%(senderName)s made future room history visible to all room members, from the point they are invited.", "%(senderName)s made future room history visible to all room members, from the point they joined.": "%(senderName)s made future room history visible to all room members, from the point they joined.", From 7b6c3aec63e494e9a92bfaee6381ac3a04625154 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 17 Jun 2021 16:33:00 +0200 Subject: [PATCH 49/70] Change some styling to better match the designs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 11 +++++++++-- src/components/views/messages/CallEvent.tsx | 2 +- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 2e36daccfab..146bd0e8835 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -21,7 +21,7 @@ limitations under the License. justify-content: space-between; background-color: $dark-panel-bg-color; - padding: 10px; + padding: 12px 16px 12px 12px; border-radius: 8px; margin: 10px auto; max-width: 75%; @@ -37,10 +37,17 @@ limitations under the License. flex-direction: column; margin-left: 10px; // To match mx_CallEvent + .mx_CallEvent_sender { + font-weight: 600; + font-size: 1.5rem; + line-height: 1.8rem; + } + .mx_CallEvent_type { font-weight: 400; color: gray; - line-height: $font-14px; + font-size: 1.2rem; + line-height: 1.5rem; } } } diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index 6139a2df6b5..cff7a46931b 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -170,7 +170,7 @@ export default class CallEvent extends React.Component { height={32} />
    -
    +
    { sender }
    From 02e655933088e06eafc821f6f8e4964639b78aee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 17 Jun 2021 17:04:56 +0200 Subject: [PATCH 50/70] Set text color to secondary-fg-color MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 146bd0e8835..5168514110a 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -56,6 +56,7 @@ limitations under the License. display: flex; flex-direction: row; align-items: center; + color: $secondary-fg-color; .mx_CallEvent_content_callBack { margin-left: 10px; // To match mx_callEvent From 512c05465698f839b79da373effe86b56759638e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 17 Jun 2021 17:55:18 +0200 Subject: [PATCH 51/70] Add call type icon MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 28 ++++++++++++++++++++- src/components/views/messages/CallEvent.tsx | 10 +++++++- 2 files changed, 36 insertions(+), 2 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 5168514110a..b4e2c15dbd9 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -45,9 +45,35 @@ limitations under the License. .mx_CallEvent_type { font-weight: 400; - color: gray; + color: $secondary-fg-color; font-size: 1.2rem; line-height: 1.5rem; + display: flex; + align-items: center; + + .mx_CallEvent_type_icon { + height: 13px; + width: 13px; + margin-right: 5px; + + &::before { + content: ''; + position: absolute; + height: 13px; + width: 13px; + background-color: $tertiary-fg-color; + mask-repeat: no-repeat; + mask-size: contain; + } + } + + .mx_CallEvent_type_icon_voice::before { + mask-image: url('$(res)/img/element-icons/call/voice-call.svg'); + } + + .mx_CallEvent_type_icon_video::before { + mask-image: url('$(res)/img/element-icons/call/video-call.svg'); + } } } } diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index cff7a46931b..00b62e44827 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -23,6 +23,7 @@ import CallEventGrouper, { CallEventGrouperEvent, CustomCallState } from '../../ import FormButton from '../elements/FormButton'; import { CallErrorCode, CallState } from 'matrix-js-sdk/src/webrtc/call'; import InfoTooltip, { InfoTooltipKind } from '../elements/InfoTooltip'; +import classNames from 'classnames'; interface IProps { mxEvent: MatrixEvent; @@ -158,8 +159,14 @@ export default class CallEvent extends React.Component { render() { const event = this.props.mxEvent; const sender = event.sender ? event.sender.name : event.getSender(); - const callType = this.props.callEventGrouper.isVoice ? _t("Voice call") : _t("Video call"); + const isVoice = this.props.callEventGrouper.isVoice; + const callType = isVoice ? _t("Voice call") : _t("Video call"); const content = this.renderContent(this.state.callState); + const callTypeIconClass = classNames({ + mx_CallEvent_type_icon: true, + mx_CallEvent_type_icon_voice: isVoice, + mx_CallEvent_type_icon_video: !isVoice, + }) return (
    @@ -174,6 +181,7 @@ export default class CallEvent extends React.Component { { sender }
    +
    { callType }
    From a781d6f1283f4558d8f65d1a776effbb41ae527d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 17 Jun 2021 18:13:52 +0200 Subject: [PATCH 52/70] Adjust padding and line-height a bit MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index b4e2c15dbd9..d3405c74928 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -21,7 +21,7 @@ limitations under the License. justify-content: space-between; background-color: $dark-panel-bg-color; - padding: 12px 16px 12px 12px; + padding: 10px 16px 12px 10px; border-radius: 8px; margin: 10px auto; max-width: 75%; @@ -40,7 +40,7 @@ limitations under the License. .mx_CallEvent_sender { font-weight: 600; font-size: 1.5rem; - line-height: 1.8rem; + line-height: 1.9rem; } .mx_CallEvent_type { From 9b6195317ec1445c6d86e183409132d3cc88f36a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 18 Jun 2021 16:14:54 +0200 Subject: [PATCH 53/70] Improve padding MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index d3405c74928..1597cf4b87b 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -40,14 +40,15 @@ limitations under the License. .mx_CallEvent_sender { font-weight: 600; font-size: 1.5rem; - line-height: 1.9rem; + line-height: 1.8rem; + margin-bottom: 3px; } .mx_CallEvent_type { font-weight: 400; color: $secondary-fg-color; font-size: 1.2rem; - line-height: 1.5rem; + line-height: $font-13px; display: flex; align-items: center; From 62de75ab0077b55b526f0e5d6682aca4a7ef9ace Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 18 Jun 2021 16:19:57 +0200 Subject: [PATCH 54/70] Increase height MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 1597cf4b87b..1804462d4f3 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -21,16 +21,17 @@ limitations under the License. justify-content: space-between; background-color: $dark-panel-bg-color; - padding: 10px 16px 12px 10px; border-radius: 8px; margin: 10px auto; max-width: 75%; box-sizing: border-box; + height: 60px; .mx_CallEvent_info { display: flex; flex-direction: row; align-items: center; + margin-left: 12px; .mx_CallEvent_info_basic { display: flex; @@ -84,6 +85,7 @@ limitations under the License. flex-direction: row; align-items: center; color: $secondary-fg-color; + margin-right: 16px; .mx_CallEvent_content_callBack { margin-left: 10px; // To match mx_callEvent From 707ecd8786da8897877c1a950492b41a931242b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 18 Jun 2021 17:03:48 +0200 Subject: [PATCH 55/70] Don't highlight bubble events MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_EventTile.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 3af266caeef..fdf933626fa 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -130,6 +130,13 @@ $hover-select-border: 4px; .mx_EventTile_msgOption { grid-column: 2; } + + &:hover { + .mx_EventTile_line { + // To avoid bubble events being highlighted + background-color: inherit !important; + } + } } .mx_EventTile_reply { From ccfc7fe42119eb9986ab01d3d3efa69ea0297888 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 19 Jun 2021 19:30:19 +0200 Subject: [PATCH 56/70] Make call silencing more flexible MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/CallHandler.tsx | 36 ++++++++++++++++++- src/components/views/voip/IncomingCallBox.tsx | 20 ++++++++--- 2 files changed, 51 insertions(+), 5 deletions(-) diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx index 2f508191d61..131b2ac5790 100644 --- a/src/CallHandler.tsx +++ b/src/CallHandler.tsx @@ -99,7 +99,7 @@ const CHECK_PROTOCOLS_ATTEMPTS = 3; // (and store the ID of their native room) export const VIRTUAL_ROOM_EVENT_TYPE = 'im.vector.is_virtual_room'; -export enum AudioID { +enum AudioID { Ring = 'ringAudio', Ringback = 'ringbackAudio', CallEnd = 'callendAudio', @@ -142,6 +142,7 @@ export enum PlaceCallType { export enum CallHandlerEvent { CallsChanged = "calls_changed", CallChangeRoom = "call_change_room", + SilencedCallsChanged = "silenced_calls_changed", } export default class CallHandler extends EventEmitter { @@ -164,6 +165,8 @@ export default class CallHandler extends EventEmitter { // do the async lookup when we get new information and then store these mappings here private assertedIdentityNativeUsers = new Map(); + private silencedCalls = new Map(); // callId -> silenced + static sharedInstance() { if (!window.mxCallHandler) { window.mxCallHandler = new CallHandler() @@ -224,6 +227,33 @@ export default class CallHandler extends EventEmitter { } } + public silenceCall(callId: string) { + this.silencedCalls.set(callId, true); + this.emit(CallHandlerEvent.SilencedCallsChanged, this.silencedCalls); + + // Don't pause audio if we have calls which are still ringing + if (this.areAnyCallsUnsilenced()) return; + this.pause(AudioID.Ring); + } + + public unSilenceCall(callId: string) { + this.silencedCalls.set(callId, false); + this.emit(CallHandlerEvent.SilencedCallsChanged, this.silencedCalls); + this.play(AudioID.Ring); + } + + public isCallSilenced(callId: string): boolean { + return this.silencedCalls.get(callId); + } + + /** + * Returns true if there is at least one unsilenced call + * @returns {boolean} + */ + private areAnyCallsUnsilenced(): boolean { + return [...this.silencedCalls.values()].includes(false); + } + private async checkProtocols(maxTries) { try { const protocols = await MatrixClientPeg.get().getThirdpartyProtocols(); @@ -616,6 +646,8 @@ export default class CallHandler extends EventEmitter { private removeCallForRoom(roomId: string) { console.log("Removing call for room ", roomId); + this.silencedCalls.delete(this.calls.get(roomId).callId); + this.emit(CallHandlerEvent.SilencedCallsChanged, this.silencedCalls); this.calls.delete(roomId); this.emit(CallHandlerEvent.CallsChanged, this.calls); } @@ -825,6 +857,8 @@ export default class CallHandler extends EventEmitter { console.log("Adding call for room ", mappedRoomId); this.calls.set(mappedRoomId, call) this.emit(CallHandlerEvent.CallsChanged, this.calls); + this.silencedCalls.set(call.callId, false); + this.emit(CallHandlerEvent.SilencedCallsChanged, this.silencedCalls); this.setCallListeners(call); // get ready to send encrypted events in the room, so if the user does answer diff --git a/src/components/views/voip/IncomingCallBox.tsx b/src/components/views/voip/IncomingCallBox.tsx index a0660318bca..cce4687f909 100644 --- a/src/components/views/voip/IncomingCallBox.tsx +++ b/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 FormButton from '../elements/FormButton'; import { CallState } from 'matrix-js-sdk/src/webrtc/call'; @@ -51,8 +51,13 @@ export default class IncomingCallBox extends React.Component { }; } + 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 { } }; + 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 { 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() { From 401fe1d05bc8ab9f9086bbcd8e5e1daa6ca469da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 19 Jun 2021 20:02:51 +0200 Subject: [PATCH 57/70] Add call silencing to CallEvent MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 24 +++++++++++++++++++ src/components/structures/CallEventGrouper.ts | 22 ++++++++++++++--- src/components/views/messages/CallEvent.tsx | 22 ++++++++++++++++- 3 files changed, 64 insertions(+), 4 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 1804462d4f3..1bf62af22ef 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -94,5 +94,29 @@ limitations under the License. .mx_CallEvent_content_tooltip { margin-right: 5px; } + + .mx_CallEvent_iconButton { + display: inline-flex; + margin-right: 16px; + + &::before { + content: ''; + + height: 16px; + width: 16px; + background-color: $icon-button-color; + mask-repeat: no-repeat; + mask-size: contain; + mask-position: center; + } + } + + .mx_CallEvent_silence::before { + mask-image: url('$(res)/img/voip/silence.svg'); + } + + .mx_CallEvent_unSilence::before { + mask-image: url('$(res)/img/voip/un-silence.svg'); + } } } diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts index ab1444d4faa..c71d1a032a4 100644 --- a/src/components/structures/CallEventGrouper.ts +++ b/src/components/structures/CallEventGrouper.ts @@ -24,6 +24,7 @@ import defaultDispatcher from "../../dispatcher/dispatcher"; export enum CallEventGrouperEvent { StateChanged = "state_changed", + SilencedChanged = "silenced_changed", } const SUPPORTED_STATES = [ @@ -44,7 +45,8 @@ export default class CallEventGrouper extends EventEmitter { constructor() { super(); - CallHandler.sharedInstance().addListener(CallHandlerEvent.CallsChanged, this.setCall) + CallHandler.sharedInstance().addListener(CallHandlerEvent.CallsChanged, this.setCall); + CallHandler.sharedInstance().addListener(CallHandlerEvent.SilencedCallsChanged, this.onSilencedCallsChanged); } private get invite(): MatrixEvent { @@ -79,6 +81,15 @@ export default class CallEventGrouper extends EventEmitter { 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(); } @@ -95,6 +106,12 @@ export default class CallEventGrouper extends EventEmitter { }); } + 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; @@ -116,8 +133,7 @@ export default class CallEventGrouper extends EventEmitter { private setCall = () => { if (this.call) return; - const callId = [...this.events][0].getContent().call_id; - this.call = CallHandler.sharedInstance().getCallById(callId); + this.call = CallHandler.sharedInstance().getCallById(this.callId); this.setCallListeners(); this.setState(); } diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index 00b62e44827..47103910508 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -24,6 +24,7 @@ import FormButton from '../elements/FormButton'; 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; @@ -32,6 +33,7 @@ interface IProps { interface IState { callState: CallState | CustomCallState; + silenced: boolean; } const TEXTUAL_STATES: Map = new Map([ @@ -45,25 +47,43 @@ export default class CallEvent extends React.Component { 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 (
    + Date: Mon, 21 Jun 2021 16:49:10 +0200 Subject: [PATCH 58/70] Migrate from FormButton to AccessibleButton MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/CallEvent.tsx | 23 ++++++++++++--------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index 47103910508..a6263e408fa 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -20,7 +20,7 @@ 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 FormButton from '../elements/FormButton'; +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'; @@ -84,16 +84,18 @@ export default class CallEvent extends React.Component { onClick={this.props.callEventGrouper.toggleSilenced} title={this.state.silenced ? _t("Sound on"): _t("Silence call")} /> - - + { _t("Decline") } + + + > + { _t("Accept") } +
    ); } @@ -159,12 +161,13 @@ export default class CallEvent extends React.Component { return (
    { _t("You missed this call") } - + > + { _t("Call back") } +
    ); } From 202cb0f5d81b971148b2375af32424d853940c35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 21 Jun 2021 17:05:36 +0200 Subject: [PATCH 59/70] Fix styling of buttons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 7 ++++++- src/components/views/messages/CallEvent.tsx | 4 +++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 1bf62af22ef..d83dfb39ad0 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -87,7 +87,12 @@ limitations under the License. color: $secondary-fg-color; margin-right: 16px; - .mx_CallEvent_content_callBack { + .mx_CallEvent_content_button { + height: 24px; + padding: 0px 12px; + } + + .mx_CallEvent_content_button_callBack { margin-left: 10px; // To match mx_callEvent } diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index a6263e408fa..bb219c458db 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -85,12 +85,14 @@ export default class CallEvent extends React.Component { title={this.state.silenced ? _t("Sound on"): _t("Silence call")} /> { _t("Decline") } @@ -162,7 +164,7 @@ export default class CallEvent extends React.Component {
    { _t("You missed this call") } From 85399e8edfbbaeb5dd2ac239e5e72865099122d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 2 Jul 2021 13:16:45 +0200 Subject: [PATCH 60/70] Match code style MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/MessagePanel.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx index dcad9f8ce25..c575dd4d478 100644 --- a/src/components/structures/MessagePanel.tsx +++ b/src/components/structures/MessagePanel.tsx @@ -229,6 +229,9 @@ export default class MessagePanel extends React.Component { private readonly showTypingNotificationsWatcherRef: string; private eventNodes: Record; + // A map of + private callEventGroupers = new Map(); + constructor(props, context) { super(props, context); @@ -245,9 +248,6 @@ export default class MessagePanel extends React.Component { this.showTypingNotificationsWatcherRef = SettingsStore.watchSetting("showTypingNotifications", null, this.onShowTypingNotificationsChange); - - // A map of - this._callEventGroupers = new Map(); } componentDidMount() { @@ -576,12 +576,12 @@ export default class MessagePanel extends React.Component { mxEv.getType().indexOf("org.matrix.call.") === 0 ) { const callId = mxEv.getContent().call_id; - if (this._callEventGroupers.has(callId)) { - this._callEventGroupers.get(callId).add(mxEv); + if (this.callEventGroupers.has(callId)) { + this.callEventGroupers.get(callId).add(mxEv); } else { const callEventGrouper = new CallEventGrouper(); callEventGrouper.add(mxEv); - this._callEventGroupers.set(callId, callEventGrouper); + this.callEventGroupers.set(callId, callEventGrouper); } } @@ -698,7 +698,7 @@ export default class MessagePanel extends React.Component { // it's successful: we received it. isLastSuccessful = isLastSuccessful && mxEv.getSender() === MatrixClientPeg.get().getUserId(); - const callEventGrouper = this._callEventGroupers.get(mxEv.getContent().call_id); + 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( From 9383ecc46f9f5304a6602ff33aa74e1b07f0e146 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 2 Jul 2021 13:20:02 +0200 Subject: [PATCH 61/70] Delint MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/CallEventGrouper.ts | 16 ++++++++-------- src/components/views/messages/CallEvent.tsx | 8 ++++---- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts index c71d1a032a4..384f20cd4e9 100644 --- a/src/components/structures/CallEventGrouper.ts +++ b/src/components/structures/CallEventGrouper.ts @@ -87,16 +87,16 @@ export default class CallEventGrouper extends EventEmitter { private onSilencedCallsChanged = () => { const newState = CallHandler.sharedInstance().isCallSilenced(this.callId); - this.emit(CallEventGrouperEvent.SilencedChanged, newState) - } + this.emit(CallEventGrouperEvent.SilencedChanged, newState); + }; public answerCall = () => { this.call?.answer(); - } + }; public rejectCall = () => { this.call?.reject(); - } + }; public callBack = () => { defaultDispatcher.dispatch({ @@ -104,14 +104,14 @@ export default class CallEventGrouper extends EventEmitter { 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; @@ -128,7 +128,7 @@ export default class CallEventGrouper extends EventEmitter { else if (this.invite && this.call) this.state = CallState.Connecting; } this.emit(CallEventGrouperEvent.StateChanged, this.state); - } + }; private setCall = () => { if (this.call) return; @@ -136,7 +136,7 @@ export default class CallEventGrouper extends EventEmitter { this.call = CallHandler.sharedInstance().getCallById(this.callId); this.setCallListeners(); this.setState(); - } + }; public add(event: MatrixEvent) { this.events.add(event); diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index bb219c458db..d4781a78721 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -48,7 +48,7 @@ export default class CallEvent extends React.Component { this.state = { callState: this.props.callEventGrouper.state, silenced: false, - } + }; } componentDidMount() { @@ -66,7 +66,7 @@ export default class CallEvent extends React.Component { }; private onStateChanged = (newState: CallState) => { - this.setState({callState: newState}); + this.setState({ callState: newState }); }; private renderContent(state: CallState | CustomCallState): JSX.Element { @@ -138,7 +138,7 @@ export default class CallEvent extends React.Component { } else if (hangupReason === CallErrorCode.UserBusy) { reason = _t("The user you called is busy."); } else { - reason = _t('Unknown failure: %(reason)s)', {reason: hangupReason}); + reason = _t('Unknown failure: %(reason)s)', { reason: hangupReason }); } return ( @@ -191,7 +191,7 @@ export default class CallEvent extends React.Component { mx_CallEvent_type_icon: true, mx_CallEvent_type_icon_voice: isVoice, mx_CallEvent_type_icon_video: !isVoice, - }) + }); return (
    From 297116a3b760a4f2c1d91ce882f00b5d367aad78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 2 Jul 2021 13:23:18 +0200 Subject: [PATCH 62/70] MORE DELINT! MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/InfoTooltip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/InfoTooltip.tsx b/src/components/views/elements/InfoTooltip.tsx index 4639e23fcb5..58b17488b7c 100644 --- a/src/components/views/elements/InfoTooltip.tsx +++ b/src/components/views/elements/InfoTooltip.tsx @@ -29,7 +29,7 @@ export enum InfoTooltipKind { interface ITooltipProps { tooltip?: React.ReactNode; - className?: string, + className?: string; tooltipClassName?: string; kind?: InfoTooltipKind; } From 6f1fc3fc7ed8ec9e93c8fd667a151e0e37731837 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 8 Jul 2021 13:43:59 +0200 Subject: [PATCH 63/70] Fix call button spacing issues MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index d83dfb39ad0..c700eec42e7 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -90,6 +90,7 @@ limitations under the License. .mx_CallEvent_content_button { height: 24px; padding: 0px 12px; + margin-left: 8px; } .mx_CallEvent_content_button_callBack { @@ -102,7 +103,7 @@ limitations under the License. .mx_CallEvent_iconButton { display: inline-flex; - margin-right: 16px; + margin-right: 8px; &::before { content: ''; From 9ec3d93402222a83883424ceddbaa09214c0f077 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 8 Jul 2021 14:19:02 +0200 Subject: [PATCH 64/70] Better handling of call types MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 20 ++++++++++++-------- src/components/views/messages/CallEvent.tsx | 12 ++++++------ 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index c700eec42e7..9c5de99aba8 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -27,6 +27,18 @@ limitations under the License. box-sizing: border-box; height: 60px; + &.mx_CallEvent_voice { + .mx_CallEvent_type_icon::before { + mask-image: url('$(res)/img/element-icons/call/voice-call.svg'); + } + } + + &.mx_CallEvent_video { + .mx_CallEvent_type_icon::before { + mask-image: url('$(res)/img/element-icons/call/video-call.svg'); + } + } + .mx_CallEvent_info { display: flex; flex-direction: row; @@ -68,14 +80,6 @@ limitations under the License. mask-size: contain; } } - - .mx_CallEvent_type_icon_voice::before { - mask-image: url('$(res)/img/element-icons/call/voice-call.svg'); - } - - .mx_CallEvent_type_icon_video::before { - mask-image: url('$(res)/img/element-icons/call/video-call.svg'); - } } } } diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index d4781a78721..edbfdff6ded 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -187,14 +187,14 @@ export default class CallEvent extends React.Component { const isVoice = this.props.callEventGrouper.isVoice; const callType = isVoice ? _t("Voice call") : _t("Video call"); const content = this.renderContent(this.state.callState); - const callTypeIconClass = classNames({ - mx_CallEvent_type_icon: true, - mx_CallEvent_type_icon_voice: isVoice, - mx_CallEvent_type_icon_video: !isVoice, + const className = classNames({ + mx_CallEvent: true, + mx_CallEvent_voice: isVoice, + mx_CallEvent_video: !isVoice, }); return ( -
    +
    { { sender }
    -
    +
    { callType }
    From 2615ea7f3f162dafa97868077d4a22217b0b773c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 8 Jul 2021 14:35:06 +0200 Subject: [PATCH 65/70] Add icons to buttons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 30 ++++++++++++++++++--- src/components/views/messages/CallEvent.tsx | 10 +++---- 2 files changed, 31 insertions(+), 9 deletions(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 9c5de99aba8..fec5114a1cd 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -28,13 +28,17 @@ limitations under the License. height: 60px; &.mx_CallEvent_voice { - .mx_CallEvent_type_icon::before { + .mx_CallEvent_type_icon::before, + .mx_CallEvent_content_button_callBack span::before, + .mx_CallEvent_content_button_answer span::before { mask-image: url('$(res)/img/element-icons/call/voice-call.svg'); } } &.mx_CallEvent_video { - .mx_CallEvent_type_icon::before { + .mx_CallEvent_type_icon::before, + .mx_CallEvent_content_button_callBack span::before, + .mx_CallEvent_content_button_answer span::before { mask-image: url('$(res)/img/element-icons/call/video-call.svg'); } } @@ -95,10 +99,28 @@ limitations under the License. height: 24px; padding: 0px 12px; margin-left: 8px; + + span { + padding: 8px 0; + display: flex; + align-items: center; + + &::before { + content: ''; + display: inline-block; + background-color: $button-fg-color; + mask-position: center; + mask-repeat: no-repeat; + mask-size: 16px; + width: 16px; + height: 16px; + margin-right: 8px; + } + } } - .mx_CallEvent_content_button_callBack { - margin-left: 10px; // To match mx_callEvent + .mx_CallEvent_content_button_reject span::before { + mask-image: url('$(res)/img/element-icons/call/hangup.svg'); } .mx_CallEvent_content_tooltip { diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index edbfdff6ded..2d40d8cac12 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -85,18 +85,18 @@ export default class CallEvent extends React.Component { title={this.state.silenced ? _t("Sound on"): _t("Silence call")} /> - { _t("Decline") } + { _t("Decline") } - { _t("Accept") } + { _t("Accept") }
    ); @@ -168,7 +168,7 @@ export default class CallEvent extends React.Component { onClick={ this.props.callEventGrouper.callBack } kind="primary" > - { _t("Call back") } + { _t("Call back") }
    ); From 722c360de0a0cb13688a42219d1142a182ea61b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 8 Jul 2021 14:42:05 +0200 Subject: [PATCH 66/70] Use the correct color for silence button MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/messages/_CallEvent.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index fec5114a1cd..54c7df3e0bc 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -136,7 +136,7 @@ limitations under the License. height: 16px; width: 16px; - background-color: $icon-button-color; + background-color: $tertiary-fg-color; mask-repeat: no-repeat; mask-size: contain; mask-position: center; From 8f0d72335d381ad870c61ade9fcbe4edbacd272e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 8 Jul 2021 17:16:02 +0200 Subject: [PATCH 67/70] Rework call silencing once again MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/CallHandler.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx index 3125f114404..24efdd7ab5a 100644 --- a/src/CallHandler.tsx +++ b/src/CallHandler.tsx @@ -165,7 +165,7 @@ export default class CallHandler extends EventEmitter { // do the async lookup when we get new information and then store these mappings here private assertedIdentityNativeUsers = new Map(); - private silencedCalls = new Map(); // callId -> silenced + private silencedCalls = new Set(); // callIds static sharedInstance() { if (!window.mxCallHandler) { @@ -228,7 +228,7 @@ export default class CallHandler extends EventEmitter { } public silenceCall(callId: string) { - this.silencedCalls.set(callId, true); + this.silencedCalls.add(callId); this.emit(CallHandlerEvent.SilencedCallsChanged, this.silencedCalls); // Don't pause audio if we have calls which are still ringing @@ -237,13 +237,13 @@ export default class CallHandler extends EventEmitter { } public unSilenceCall(callId: string) { - this.silencedCalls.set(callId, false); + this.silencedCalls.delete(callId); this.emit(CallHandlerEvent.SilencedCallsChanged, this.silencedCalls); this.play(AudioID.Ring); } public isCallSilenced(callId: string): boolean { - return this.silencedCalls.get(callId); + return this.silencedCalls.has(callId); } /** @@ -251,7 +251,7 @@ export default class CallHandler extends EventEmitter { * @returns {boolean} */ private areAnyCallsUnsilenced(): boolean { - return [...this.silencedCalls.values()].includes(false); + return this.calls.size > this.silencedCalls.size; } private async checkProtocols(maxTries) { @@ -478,6 +478,10 @@ export default class CallHandler extends EventEmitter { break; } + if (newState !== CallState.Ringing) { + this.silencedCalls.delete(call.callId); + } + switch (newState) { case CallState.Ringing: this.play(AudioID.Ring); @@ -646,8 +650,6 @@ export default class CallHandler extends EventEmitter { private removeCallForRoom(roomId: string) { console.log("Removing call for room ", roomId); - this.silencedCalls.delete(this.calls.get(roomId).callId); - this.emit(CallHandlerEvent.SilencedCallsChanged, this.silencedCalls); this.calls.delete(roomId); this.emit(CallHandlerEvent.CallsChanged, this.calls); } @@ -857,8 +859,6 @@ export default class CallHandler extends EventEmitter { console.log("Adding call for room ", mappedRoomId); this.calls.set(mappedRoomId, call); this.emit(CallHandlerEvent.CallsChanged, this.calls); - this.silencedCalls.set(call.callId, false); - this.emit(CallHandlerEvent.SilencedCallsChanged, this.silencedCalls); this.setCallListeners(call); // get ready to send encrypted events in the room, so if the user does answer From 313964e7965212abb0b996c8c17fc76cc2d59c2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 17 Jul 2021 08:12:53 +0200 Subject: [PATCH 68/70] Fix call event tile not behaving MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/utils/EventUtils.ts | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/utils/EventUtils.ts b/src/utils/EventUtils.ts index 849e5464858..e2af1c74641 100644 --- a/src/utils/EventUtils.ts +++ b/src/utils/EventUtils.ts @@ -111,14 +111,19 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent): { let tileHandler = getHandlerTile(mxEvent); // Info messages are basically information about commands processed on a room - let isBubbleMessage = eventType.startsWith("m.key.verification") || - (eventType === EventType.RoomMessage && msgtype && msgtype.startsWith("m.key.verification")) || - (eventType === EventType.RoomCreate) || - (eventType === EventType.RoomEncryption) || - (tileHandler === "messages.MJitsiWidgetEvent"); + let isBubbleMessage = ( + eventType.startsWith("m.key.verification") || + (eventType === EventType.RoomMessage && msgtype && msgtype.startsWith("m.key.verification")) || + (eventType === EventType.RoomCreate) || + (eventType === EventType.RoomEncryption) || + (eventType === EventType.CallInvite) || + (tileHandler === "messages.MJitsiWidgetEvent") + ); let isInfoMessage = ( - !isBubbleMessage && eventType !== EventType.RoomMessage && - eventType !== EventType.Sticker && eventType !== EventType.RoomCreate + !isBubbleMessage && + eventType !== EventType.RoomMessage && + eventType !== EventType.Sticker && + eventType !== EventType.RoomCreate ); // If we're showing hidden events in the timeline, we should use the From 6cb1c5d9180054ca600a78d49574f34f7f93ba87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 20 Jul 2021 13:20:30 +0200 Subject: [PATCH 69/70] Delint MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/CallEvent.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index 2d40d8cac12..c0be3b46bbe 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -86,14 +86,14 @@ export default class CallEvent extends React.Component { /> { _t("Decline") } { _t("Accept") } @@ -165,7 +165,7 @@ export default class CallEvent extends React.Component { { _t("You missed this call") } { _t("Call back") } From 9e5b14929138f1510775e5d8b0d80a4d22141b11 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 20 Jul 2021 14:23:28 +0200 Subject: [PATCH 70/70] Fix event highlighthing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_EventTile.scss | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 489db615a06..72328fab77e 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -204,14 +204,6 @@ $hover-select-border: 4px; margin-right: 10px; } - &:hover { - .mx_EventTile_line { - // To avoid bubble events being highlighted - background-color: inherit !important; - } - } - - .mx_EventTile_msgOption a { text-decoration: none; } @@ -341,6 +333,13 @@ $hover-select-border: 4px; .mx_EventTile_msgOption { grid-column: 2; } + + &:hover { + .mx_EventTile_line { + // To avoid bubble events being highlighted + background-color: inherit !important; + } + } } .mx_EventTile_readAvatars {