From f63572f02b1783940838ed7f2be586d6615f76a5 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 7cc00faeb33cd7366046d7381fde9173818a5955 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 556d217837..dcaffdfbcd 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -851,6 +851,7 @@ "sends fireworks": "sends fireworks", "Sends the given message with snowfall": "Sends the given message with snowfall", "sends snowfall": "sends snowfall", + "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 f325df3b6a587c11c205f8fdbefc524f961ea16d 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 dcaffdfbcd..470defd2f9 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -858,7 +858,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 189d5bf769253ad9516d0fd203b70c87f4c0f3fc Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 21 Dec 2020 11:21:50 +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 8ce0da36dc..0468a3917f 100644 --- a/src/CallHandler.tsx +++ b/src/CallHandler.tsx @@ -617,7 +617,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 d851c826e5fe1a43bbdf02776797b6bdca371ec7 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 {