Merge pull request #5509 from matrix-org/dbkr/call_ui_fixups

Fixes for call UI

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;

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;
     }
 }
 

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',

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<IProps, IState> {
         const isOnHold = this.state.isLocalOnHold || this.state.isRemoteOnHold;
         let onHoldText = null;
         if (this.state.isRemoteOnHold) {
-            onHoldText = _t("You held the call <a>Resume</a>", {}, {
+            const holdString = CallHandler.sharedInstance().hasAnyUnheldCall() ?
+                _td("You held the call <a>Switch</a>") : _td("You held the call <a>Resume</a>");
+            onHoldText = _t(holdString, {}, {
                 a: sub => <AccessibleButton kind="link" onClick={this.onCallResumeClick}>
                     {sub}
                 </AccessibleButton>,
@@ -478,20 +480,6 @@ export default class CallView extends React.Component<IProps, IState> {
                 mx_CallView_voice: true,
                 mx_CallView_voice_hold: isOnHold,
             });
-            let secondaryCallAvatar: ReactNode;
-
-            if (this.props.secondaryCall) {
-                const secAvatarSize = this.props.pipMode ? 40 : 100;
-                secondaryCallAvatar = <div className="mx_CallView_voice_secondaryAvatarContainer"
-                    style={{width: secAvatarSize, height: secAvatarSize}}
-                >
-                    <RoomAvatar
-                        room={secCallRoom}
-                        height={secAvatarSize}
-                        width={secAvatarSize}
-                    />
-                </div>;
-            }
 
             contentView = <div className={classes} onMouseMove={this.onMouseMove}>
                 <div className="mx_CallView_voice_avatarsContainer">
@@ -502,7 +490,6 @@ export default class CallView extends React.Component<IProps, IState> {
                             width={avatarSize}
                         />
                     </div>
-                    {secondaryCallAvatar}
                 </div>
                 <div className="mx_CallView_voice_holdText">{onHoldText}</div>
                 {callControls}
@@ -546,7 +533,7 @@ export default class CallView extends React.Component<IProps, IState> {
                     <AccessibleButton element='span' onClick={this.onSecondaryRoomAvatarClick}>
                         <RoomAvatar room={secCallRoom} height={16} width={16} />
                         <span className="mx_CallView_secondaryCall_roomName">
-                            {_t("%(name)s paused", { name: secCallRoom.name })}
+                            {_t("%(name)s on hold", { name: secCallRoom.name })}
                         </span>
                     </AccessibleButton>
                 </span>;

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 <a>Switch</a>": "You held the call <a>Switch</a>",
     "You held the call <a>Resume</a>": "You held the call <a>Resume</a>",
     "%(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",