From 63e99ecf934d06b66d33fa2a1f0e7e3857c1eda6 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 18 Dec 2020 18:08:04 +0000 Subject: [PATCH 1/5] Visual fixups for call UI * Add bottom margin on PiP view * Remove avatar blurring & pause icon for held calls * Change background of incoming call box to match PiP view * Put drop shadow & border radius on PiP view & incoming call box rather than the CallContainer they're in (so they each have their own drop shadow / rounded corners). * Add margin between incoming call box and PiP view --- res/css/views/voip/_CallContainer.scss | 7 +++---- res/css/views/voip/_CallView.scss | 10 ++++++++++ 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/res/css/views/voip/_CallContainer.scss b/res/css/views/voip/_CallContainer.scss index eec8a1f188..ae1d37de71 100644 --- a/res/css/views/voip/_CallContainer.scss +++ b/res/css/views/voip/_CallContainer.scss @@ -18,10 +18,7 @@ limitations under the License. position: absolute; right: 20px; bottom: 72px; - border-radius: 8px; - overflow: hidden; z-index: 100; - box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08); // Disable pointer events for Jitsi widgets to function. Direct // calls have their own cursor and behaviour, but we need to make @@ -49,8 +46,10 @@ limitations under the License. .mx_IncomingCallBox { min-width: 250px; - background-color: $primary-bg-color; + background-color: $secondary-accent-color; padding: 8px; + box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08); + border-radius: 8px; pointer-events: initial; // restore pointer events so the user can accept/decline cursor: pointer; diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index dbe2c27e41..ad63604818 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -35,6 +35,10 @@ limitations under the License. .mx_CallView_pip { width: 320px; + padding-bottom: 8px; + margin-top: 10px; + box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08); + border-radius: 8px; .mx_CallView_voice { height: 180px; @@ -84,6 +88,7 @@ limitations under the License. border-radius: 2000px; overflow: hidden; position: relative; + /* Blurred avatar images & pause icon for on-hold removed for now &::after { position: absolute; content: ''; @@ -101,17 +106,21 @@ limitations under the License. .mx_CallView_pip &::after { background-size: 30px; } + */ } + /* .mx_BaseAvatar { filter: blur(20px); overflow: hidden; } + */ } .mx_CallView_voice_secondaryAvatarContainer { border-radius: 2000px; overflow: hidden; position: relative; + /* &::after { position: absolute; content: ''; @@ -129,6 +138,7 @@ limitations under the License. .mx_CallView_pip &::after { background-size: 24px; } + */ } .mx_CallView_voice_holdText { From eab764a3c8b4c76805571234d44b34e2c0f5d39b Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 18 Dec 2020 19:35:41 +0000 Subject: [PATCH 2/5] Vary resume link text Use 'Switch' if unholding that call would hold another --- src/CallHandler.tsx | 12 ++++++++++++ src/components/views/voip/CallView.tsx | 6 ++++-- src/i18n/strings/en_EN.json | 1 + 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx index fac4d6fc4e..8ce0da36dc 100644 --- a/src/CallHandler.tsx +++ b/src/CallHandler.tsx @@ -616,6 +616,18 @@ export default class CallHandler { } } + /** + * @returns true if we are currently in anu call where we haven't put the remote party on hold + */ + hasAnyUnheldCall() { + for (const call of this.calls.values()) { + if (call.state === CallState.Ended) continue; + if (!call.isRemoteOnHold()) return true; + } + + return false; + } + private async startCallApp(roomId: string, type: string) { dis.dispatch({ action: 'appsDrawer', diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 65ba693b58..495a99d53c 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -19,7 +19,7 @@ import React, { createRef, CSSProperties, ReactNode } from 'react'; import dis from '../../../dispatcher/dispatcher'; import CallHandler from '../../../CallHandler'; import {MatrixClientPeg} from '../../../MatrixClientPeg'; -import { _t } from '../../../languageHandler'; +import { _t, _td } from '../../../languageHandler'; import VideoFeed, { VideoFeedType } from "./VideoFeed"; import RoomAvatar from "../avatars/RoomAvatar"; import { CallState, CallType, MatrixCall } from 'matrix-js-sdk/src/webrtc/call'; @@ -423,7 +423,9 @@ export default class CallView extends React.Component { const isOnHold = this.state.isLocalOnHold || this.state.isRemoteOnHold; let onHoldText = null; if (this.state.isRemoteOnHold) { - onHoldText = _t("You held the call Resume", {}, { + const holdString = CallHandler.sharedInstance().hasAnyUnheldCall() ? + _td("You held the call Switch") : _td("You held the call Resume"); + onHoldText = _t(holdString, {}, { a: sub => {sub} , diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index eb1d0a632e..f91576bc4a 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -847,6 +847,7 @@ "This is your list of users/servers you have blocked - don't leave the room!": "This is your list of users/servers you have blocked - don't leave the room!", "Sends the given message with confetti": "Sends the given message with confetti", "sends confetti": "sends confetti", + "You held the call Switch": "You held the call Switch", "You held the call Resume": "You held the call Resume", "%(peerName)s held the call": "%(peerName)s held the call", "Video Call": "Video Call", From aee861956c45f9c7406a1f59fda27d5770fa7f9e Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 18 Dec 2020 19:40:57 +0000 Subject: [PATCH 3/5] Remove secondary call avatar and change 'paused' to 'on hold' --- res/css/views/voip/_CallView.scss | 25 ------------------------- src/components/views/voip/CallView.tsx | 17 +---------------- src/i18n/strings/en_EN.json | 2 +- 3 files changed, 2 insertions(+), 42 deletions(-) diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index ad63604818..9fcf47cf9e 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -116,31 +116,6 @@ limitations under the License. */ } -.mx_CallView_voice_secondaryAvatarContainer { - border-radius: 2000px; - overflow: hidden; - position: relative; - /* - &::after { - position: absolute; - content: ''; - width: 100%; - height: 100%; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: rgba(0, 0, 0, 0.6); - background-image: url('$(res)/img/voip/paused.svg'); - background-position: center; - background-size: 40px; - background-repeat: no-repeat; - } - .mx_CallView_pip &::after { - background-size: 24px; - } - */ -} - .mx_CallView_voice_holdText { height: 20px; padding-top: 20px; diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 495a99d53c..6748728278 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -480,20 +480,6 @@ export default class CallView extends React.Component { mx_CallView_voice: true, mx_CallView_voice_hold: isOnHold, }); - let secondaryCallAvatar: ReactNode; - - if (this.props.secondaryCall) { - const secAvatarSize = this.props.pipMode ? 40 : 100; - secondaryCallAvatar =
- -
; - } contentView =
@@ -504,7 +490,6 @@ export default class CallView extends React.Component { width={avatarSize} />
- {secondaryCallAvatar}
{onHoldText}
{callControls} @@ -548,7 +533,7 @@ export default class CallView extends React.Component { - {_t("%(name)s paused", { name: secCallRoom.name })} + {_t("%(name)s on hold", { name: secCallRoom.name })} ; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index f91576bc4a..0653aff4c3 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -854,7 +854,7 @@ "Voice Call": "Voice Call", "Fill Screen": "Fill Screen", "Return to call": "Return to call", - "%(name)s paused": "%(name)s paused", + "%(name)s on hold": "%(name)s on hold", "Unknown caller": "Unknown caller", "Incoming voice call": "Incoming voice call", "Incoming video call": "Incoming video call", From 68c5482c05e6f2cdbc7fbd221930518249516323 Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 21 Dec 2020 11:21:41 +0000 Subject: [PATCH 4/5] Comment typo Co-authored-by: J. Ryan Stinnett --- src/CallHandler.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx index c41ec6be05..504dae5c84 100644 --- a/src/CallHandler.tsx +++ b/src/CallHandler.tsx @@ -618,7 +618,7 @@ export default class CallHandler { } /** - * @returns true if we are currently in anu call where we haven't put the remote party on hold + * @returns true if we are currently in any call where we haven't put the remote party on hold */ hasAnyUnheldCall() { for (const call of this.calls.values()) { From 0d4b2f48dc29532a8863f9a35aadc5f13f2e9182 Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 21 Dec 2020 11:24:36 +0000 Subject: [PATCH 5/5] Probably better to just remove this --- res/css/views/voip/_CallView.scss | 25 ------------------------- 1 file changed, 25 deletions(-) diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index 9fcf47cf9e..a9b02ff5d8 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -88,32 +88,7 @@ limitations under the License. border-radius: 2000px; overflow: hidden; position: relative; - /* Blurred avatar images & pause icon for on-hold removed for now - &::after { - position: absolute; - content: ''; - width: 100%; - height: 100%; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: rgba(0, 0, 0, 0.6); - background-image: url('$(res)/img/voip/paused.svg'); - background-position: center; - background-size: 40px; - background-repeat: no-repeat; - } - .mx_CallView_pip &::after { - background-size: 30px; - } - */ } - /* - .mx_BaseAvatar { - filter: blur(20px); - overflow: hidden; - } - */ } .mx_CallView_voice_holdText {