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..a9b02ff5d8 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,50 +88,6 @@ limitations under the License. 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: 30px; - } - } - .mx_BaseAvatar { - filter: blur(20px); - overflow: hidden; - } -} - -.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; } } diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx index 7160657c07..504dae5c84 100644 --- a/src/CallHandler.tsx +++ b/src/CallHandler.tsx @@ -617,6 +617,18 @@ export default class CallHandler { } } + /** + * @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()) { + 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..6748728278 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} , @@ -478,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 =
@@ -502,7 +490,6 @@ export default class CallView extends React.Component { width={avatarSize} />
- {secondaryCallAvatar}
{onHoldText}
{callControls} @@ -546,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 12d8171439..507f3e071f 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -853,13 +853,14 @@ "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", "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",