Update UI for two calls in the PiP view

and also merge hold_ui changes

res/css/views/voip/_CallView.scss

@@ -16,7 +16,7 @@ limitations under the License.
 */
 
 .mx_CallView {
-    border-radius: 10px;
+    border-radius: 8px;
     background-color: $voipcall-plinth-color;
     padding-left: 8px;
     padding-right: 8px;
@@ -49,6 +49,11 @@ limitations under the License.
             height: 36px;
         }
     }
+
+    .mx_CallView_voice_holdText {
+        padding-top: 10px;
+        padding-bottom: 25px;
+    }
 }
 
 .mx_CallView_voice {
@@ -58,6 +63,7 @@ limitations under the License.
     align-items: center;
     justify-content: center;
     background-color: $inverted-bg-color;
+    border-radius: 8px;
 }
 
 .mx_CallView_voice_hold {
@@ -69,18 +75,19 @@ limitations under the License.
         &::after {
             position: absolute;
             content: '';
-            width: 40px;
+            width: 100%;
-            height: 40px;
+            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: cover;
+            background-size: 40px;
+            background-repeat: no-repeat;
         }
         .mx_CallView_pip &::after {
-            width: 30px;
+            background-size: 30px;
-            height: 30px;
         }
     }
     .mx_BaseAvatar {
@@ -91,7 +98,7 @@ limitations under the License.
 
 .mx_CallView_voice_holdText {
     height: 20px;
-    padding-top: 10px;
+    padding-top: 20px;
     padding-bottom: 15px;
     color: $accent-fg-color;
     font-weight: bold;
@@ -104,6 +111,8 @@ limitations under the License.
     width: 100%;
     position: relative;
     z-index: 30;
+    border-radius: 8px;
+    overflow: hidden;
 }
 
 .mx_CallView_video_hold {
@@ -126,6 +135,16 @@ limitations under the License.
     background-size: cover;
     background-position: center;
     filter: blur(20px);
+    &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        right: 0;
+        background-color: rgba(0, 0, 0, 0.6);
+    }
 }
 
 .mx_CallView_video_holdContent {
@@ -163,10 +182,6 @@ limitations under the License.
     flex-direction: row;
     align-items: center;
     justify-content: left;
-
-    .mx_BaseAvatar {
-        margin-right: 12px;
-    }
 }
 
 .mx_CallView_header_callType {
@@ -175,33 +190,15 @@ limitations under the License.
 }
 
 .mx_CallView_header_secondaryCallInfo {
-    margin-left: auto;
+    &::before {
-    display: flex;
+        content: '·';
-    flex-direction: row;
+        margin-left: 6px;
-    align-items: center;
+        margin-right: 6px;
-    justify-content: left;
-    .mx_AccessibleButton_hasKind {
-        padding: 0px;
-    }
-}
-
-.mx_CallView_header_secondaryCallInfo_avatarContainer {
-    width: 32px;
-    height: 32px;
-    margin-right: 12px;
-
-    border-radius: 2000px;
-    overflow: hidden;
-    position: relative;
-
-    .mx_BaseAvatar {
-        filter: blur(3px);
-        overflow: hidden;
     }
 }
 
 .mx_CallView_header_controls {
-    margin-left: 12px;
+    margin-left: auto;
 }
 
 .mx_CallView_header_button {
@@ -235,6 +232,7 @@ limitations under the License.
 }
 
 .mx_CallView_header_callInfo {
+    margin-left: 12px;
     margin-right: 16px;
 }
 
@@ -243,16 +241,21 @@ limitations under the License.
     font-size: 12px;
     line-height: initial;
     height: 15px;
-    overflow: hidden;
+}
-    white-space: nowrap;
+
-    text-overflow: ellipsis;
+.mx_CallView_secondaryCall_roomName {
-    max-width: 116px;
+    margin-left: 4px;
 }
 
 .mx_CallView_header_callTypeSmall {
     font-size: 12px;
     color: $secondary-fg-color;
     line-height: initial;
+    height: 15px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 240px;
 }
 
 .mx_CallView_header_phoneIcon {

src/components/views/voip/CallView.tsx

@@ -463,7 +463,7 @@ export default class CallView extends React.Component<IProps, IState> {
                 {callControls}
             </div>;
         } else {
-            const avatarSize = this.props.pipMode ? 75 : 200;
+            const avatarSize = this.props.pipMode ? 76 : 160;
             const classes = classNames({
                 mx_CallView_voice: true,
                 mx_CallView_voice_hold: isOnHold,
@@ -515,22 +515,14 @@ export default class CallView extends React.Component<IProps, IState> {
             let secondaryCallInfo;
             if (this.props.secondaryCall) {
                 const secCallRoom = client.getRoom(this.props.secondaryCall.roomId);
-                secondaryCallInfo = <div className="mx_CallView_header_secondaryCallInfo">
+                secondaryCallInfo = <span className="mx_CallView_header_secondaryCallInfo">
-                    <div className="mx_CallView_header_secondaryCallInfo_avatarContainer">
+                    <AccessibleButton element='span' onClick={this.onSecondaryRoomAvatarClick}>
-                        <AccessibleButton onClick={this.onSecondaryRoomAvatarClick}>
+                        <RoomAvatar room={secCallRoom} height={16} width={16} />
-                            <RoomAvatar room={secCallRoom} height={32} width={32} />
+                        <span className="mx_CallView_secondaryCall_roomName">
-                        </AccessibleButton>
+                            {_t("%(name)s paused", { name: secCallRoom.name })}
-                    </div>
+                        </span>
-                    <div>
+                    </AccessibleButton>
-                        <div className="mx_CallView_header_roomName">{secCallRoom.name}</div>
+                </span>;
-                        <AccessibleButton kind="link" onClick={this.onSecondaryCallResumeClick}>
-                            {_t("Resume")}
-                        </AccessibleButton>
-                    </div>
-                </div>;
-            } else {
-                // keeps it present but empty because it has the margin-left: auto to make the alignment correct
-                secondaryCallInfo = <div className="mx_CallView_header_secondaryCallInfo" />;
             }
 
             header = <div className="mx_CallView_header">
@@ -539,9 +531,11 @@ export default class CallView extends React.Component<IProps, IState> {
                 </AccessibleButton>
                 <div className="mx_CallView_header_callInfo">
                     <div className="mx_CallView_header_roomName">{callRoom.name}</div>
-                    <div className="mx_CallView_header_callTypeSmall">{callTypeText}</div>
+                    <div className="mx_CallView_header_callTypeSmall">
+                        {callTypeText}
+                        {secondaryCallInfo}
+                    </div>
                 </div>
-                {secondaryCallInfo}
                 {headerControls}
             </div>;
             myClassName = 'mx_CallView_pip';

src/i18n/strings/en_EN.json

@@ -850,7 +850,7 @@
     "Voice Call": "Voice Call",
     "Fill Screen": "Fill Screen",
     "Return to call": "Return to call",
-    "Resume": "Resume",
+    "%(name)s paused": "%(name)s paused",
     "Unknown caller": "Unknown caller",
     "Incoming voice call": "Incoming voice call",
     "Incoming video call": "Incoming video call",
@@ -2260,6 +2260,7 @@
     "<b>Warning</b>: You should only set up key backup from a trusted computer.": "<b>Warning</b>: You should only set up key backup from a trusted computer.",
     "Access your secure message history and set up secure messaging by entering your recovery key.": "Access your secure message history and set up secure messaging by entering your recovery key.",
     "If you've forgotten your recovery key you can <button>set up new recovery options</button>": "If you've forgotten your recovery key you can <button>set up new recovery options</button>",
+    "Resume": "Resume",
     "Hold": "Hold",
     "Reject invitation": "Reject invitation",
     "Are you sure you want to reject the invitation?": "Are you sure you want to reject the invitation?",