Add secondary call avatar to main voice content view

res/css/views/voip/_CallView.scss

@@ -66,6 +66,17 @@ limitations under the License.
     border-radius: 8px;
 }
 
+.mx_CallView_voice_avatarsContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    div {
+        margin-left: 12px;
+        margin-right: 12px;
+    }
+}
+
 .mx_CallView_voice_hold {
     // This masks the avatar image so when it's blurred, the edge is still crisp
     .mx_CallView_voice_avatarContainer {
@@ -96,6 +107,29 @@ 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;

src/components/views/voip/CallView.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef, CSSProperties } from 'react';
+import React, { createRef, CSSProperties, ReactNode } from 'react';
 import dis from '../../../dispatcher/dispatcher';
 import CallHandler from '../../../CallHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
@@ -328,6 +328,7 @@ export default class CallView extends React.Component<IProps, IState> {
     public render() {
         const client = MatrixClientPeg.get();
         const callRoom = client.getRoom(this.props.call.roomId);
+        const secCallRoom = this.props.secondaryCall ? client.getRoom(this.props.secondaryCall.roomId) : null;
 
         let contextMenu;
 
@@ -468,13 +469,31 @@ export default class CallView extends React.Component<IProps, IState> {
                 mx_CallView_voice: true,
                 mx_CallView_voice_hold: isOnHold,
             });
-            contentView = <div className={classes} onMouseMove={this.onMouseMove}>
+            let secondaryCallAvatar: ReactNode;
-                <div className="mx_CallView_voice_avatarContainer" style={{width: avatarSize, height: avatarSize}}>
+
+            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={callRoom}
+                        room={secCallRoom}
-                        height={avatarSize}
+                        height={secAvatarSize}
-                        width={avatarSize}
+                        width={secAvatarSize}
                     />
+                </div>;
+            }
+
+            contentView = <div className={classes} onMouseMove={this.onMouseMove}>
+                <div className="mx_CallView_voice_avatarsContainer">
+                    <div className="mx_CallView_voice_avatarContainer" style={{width: avatarSize, height: avatarSize}}>
+                        <RoomAvatar
+                            room={callRoom}
+                            height={avatarSize}
+                            width={avatarSize}
+                        />
+                    </div>
+                    {secondaryCallAvatar}
                 </div>
                 <div className="mx_CallView_voice_holdText">{onHoldText}</div>
                 {callControls}
@@ -514,7 +533,6 @@ export default class CallView extends React.Component<IProps, IState> {
         } else {
             let secondaryCallInfo;
             if (this.props.secondaryCall) {
-                const secCallRoom = client.getRoom(this.props.secondaryCall.roomId);
                 secondaryCallInfo = <span className="mx_CallView_header_secondaryCallInfo">
                     <AccessibleButton element='span' onClick={this.onSecondaryRoomAvatarClick}>
                         <RoomAvatar room={secCallRoom} height={16} width={16} />