Add avatar when muted in lobby

src/room/LobbyView.jsx

@@ -9,6 +9,9 @@ import { getRoomUrl } from "../matrix-utils";
 import { OverflowMenu } from "./OverflowMenu";
 import { UserMenuContainer } from "../UserMenuContainer";
 import { Body, Link } from "../typography/Typography";
+import { Avatar } from "../Avatar";
+import { getAvatarUrl } from "../matrix-utils";
+import { useProfile } from "../profile/useProfile";
 
 export function LobbyView({
   client,
@@ -27,6 +30,8 @@ export function LobbyView({
 }) {
   const { stream } = useCallFeed(localCallFeed);
   const videoRef = useMediaStream(stream, true);
+  const { displayName, avatarUrl } = useProfile(client);
+  const avatarSize = 96;
 
   useEffect(() => {
     onInitLocalCallFeed();
@@ -58,6 +63,20 @@ export function LobbyView({
             )}
             {state === GroupCallState.LocalCallFeedInitialized && (
               <>
+                {localVideoMuted && (
+                  <div className={styles.avatarContainer}>
+                    <Avatar
+                      style={{
+                        width: avatarSize,
+                        height: avatarSize,
+                        borderRadius: avatarSize,
+                        fontSize: Math.round(avatarSize / 2),
+                      }}
+                      src={avatarUrl && getAvatarUrl(client, avatarUrl, 96)}
+                      fallback={displayName.slice(0, 1).toUpperCase()}
+                    />
+                  </div>
+                )}
                 <Button
                   className={styles.joinCallButton}
                   disabled={state !== GroupCallState.LocalCallFeedInitialized}

src/room/LobbyView.module.css

@@ -57,11 +57,24 @@ limitations under the License.
 }
 
 .preview video {
-  width: 100%;
+  width: calc(100% + 1px);
   height: 100%;
   object-fit: contain;
   background-color: black;
-  transform: scaleX(-1);
+  /* transform scale doesn't perfectly match width, so make -1.01 border issues */
+  transform: scaleX(-1.01);
+}
+
+.avatarContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 66px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--bgColor3);
 }
 
 .webcamPermissions {