Use the room avatar as a placeholder in calls (#10231)

* Use the room avatar as a placeholder in calls

Rather than the image for the user we're in a call with. This makes
it work correctly with virtual rooms easily since we'll get the
avatar for the correct room.

* Prettier

* TS strict errors

* More TS strict fixes

* More strict TS

* Prettier

* Even more TS strict

* more stricter

Author: dbkr

src/components/views/voip/LegacyCallView.tsx

@@ -430,7 +430,8 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
         const { pipMode, call, onResize } = this.props;
         const { isLocalOnHold, isRemoteOnHold, sidebarShown, primaryFeed, secondaryFeed, sidebarFeeds } = this.state;
 
-        const callRoom = MatrixClientPeg.get().getRoom(call.roomId) ?? undefined;
+        const callRoomId = LegacyCallHandler.instance.roomIdForCall(call);
+        const callRoom = (callRoomId ? MatrixClientPeg.get().getRoom(callRoomId) : undefined) ?? undefined;
         const avatarSize = pipMode ? 76 : 160;
         const transfereeCall = LegacyCallHandler.instance.getTransfereeForCallId(call.callId);
         const isOnHold = isLocalOnHold || isRemoteOnHold;
@@ -527,23 +528,44 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
                 </div>
             );
         } else if (pipMode) {
+            // We've already checked that we have feeds so we cast away the optional when passing the feed
             return (
                 <div className="mx_LegacyCallView_content" onMouseMove={this.onMouseMove}>
-                    <VideoFeed feed={primaryFeed} call={call} pipMode={pipMode} onResize={onResize} primary={true} />
+                    <VideoFeed
+                        feed={primaryFeed as CallFeed}
+                        call={call}
+                        pipMode={pipMode}
+                        onResize={onResize}
+                        primary={true}
+                    />
                 </div>
             );
         } else if (secondaryFeed) {
             return (
                 <div className="mx_LegacyCallView_content" onMouseMove={this.onMouseMove}>
-                    <VideoFeed feed={primaryFeed} call={call} pipMode={pipMode} onResize={onResize} primary={true} />
+                    <VideoFeed
+                        feed={primaryFeed as CallFeed}
+                        call={call}
+                        pipMode={pipMode}
+                        onResize={onResize}
+                        primary={true}
+                    />
                     {secondaryFeedElement}
                 </div>
             );
         } else {
             return (
                 <div className="mx_LegacyCallView_content" onMouseMove={this.onMouseMove}>
-                    <VideoFeed feed={primaryFeed} call={call} pipMode={pipMode} onResize={onResize} primary={true} />
-                    {sidebarShown && <LegacyCallViewSidebar feeds={sidebarFeeds} call={call} pipMode={pipMode} />}
+                    <VideoFeed
+                        feed={primaryFeed as CallFeed}
+                        call={call}
+                        pipMode={pipMode}
+                        onResize={onResize}
+                        primary={true}
+                    />
+                    {sidebarShown && (
+                        <LegacyCallViewSidebar feeds={sidebarFeeds} call={call} pipMode={Boolean(pipMode)} />
+                    )}
                 </div>
             );
         }

src/components/views/voip/VideoFeed.tsx

@@ -23,7 +23,9 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventTypes";
 
 import SettingsStore from "../../../settings/SettingsStore";
-import MemberAvatar from "../avatars/MemberAvatar";
+import LegacyCallHandler from "../../../LegacyCallHandler";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import RoomAvatar from "../avatars/RoomAvatar";
 
 interface IProps {
     call: MatrixCall;
@@ -197,15 +199,16 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
 
         let content;
         if (this.state.videoMuted) {
-            const member = this.props.feed.getMember();
+            const callRoomId = LegacyCallHandler.instance.roomIdForCall(this.props.call);
+            const callRoom = (callRoomId ? MatrixClientPeg.get().getRoom(callRoomId) : undefined) ?? undefined;
 
             let avatarSize;
             if (pipMode && primary) avatarSize = 76;
             else if (pipMode && !primary) avatarSize = 16;
             else if (!pipMode && primary) avatarSize = 160;
             else; // TBD
 
-            content = <MemberAvatar member={member} height={avatarSize} width={avatarSize} />;
+            content = <RoomAvatar room={callRoom} height={avatarSize} width={avatarSize} />;
         } else {
             const videoClasses = classnames("mx_VideoFeed_video", {
                 mx_VideoFeed_video_mirror:

test/components/views/voip/VideoFeed-test.tsx

@@ -0,0 +1,69 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
+import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { Room } from "matrix-js-sdk/src/models/room";
+
+import * as AvatarModule from "../../../../src/Avatar";
+import VideoFeed from "../../../../src/components/views/voip/VideoFeed";
+import { stubClient, useMockedCalls } from "../../../test-utils";
+import LegacyCallHandler from "../../../../src/LegacyCallHandler";
+import DMRoomMap from "../../../../src/utils/DMRoomMap";
+
+const FAKE_AVATAR_URL = "http://fakeurl.dummy/fake.png";
+
+describe("VideoFeed", () => {
+    useMockedCalls();
+
+    let client: MatrixClient;
+
+    beforeAll(() => {
+        client = stubClient();
+        (AvatarModule as any).avatarUrlForRoom = jest.fn().mockReturnValue(FAKE_AVATAR_URL);
+
+        const dmRoomMap = new DMRoomMap(client);
+        jest.spyOn(dmRoomMap, "getUserIdForRoomId");
+        jest.spyOn(DMRoomMap, "shared").mockReturnValue(dmRoomMap);
+    });
+
+    afterAll(() => {
+        jest.restoreAllMocks();
+    });
+
+    it("Displays the room avatar when no video is available", () => {
+        window.mxLegacyCallHandler = {
+            roomIdForCall: jest.fn().mockReturnValue("!this:room.here"),
+        } as unknown as LegacyCallHandler;
+
+        const mockCall = {
+            room: new Room("!room:example.com", client, client.getSafeUserId()),
+        };
+
+        const feed = {
+            isAudioMuted: jest.fn().mockReturnValue(false),
+            isVideoMuted: jest.fn().mockReturnValue(true),
+            addListener: jest.fn(),
+            removeListener: jest.fn(),
+        };
+        render(<VideoFeed feed={feed as unknown as CallFeed} call={mockCall as unknown as MatrixCall} />);
+        const avatarImg = screen.getByRole("img");
+        expect(avatarImg).toHaveAttribute("src", FAKE_AVATAR_URL);
+    });
+});