Update voice broadcast header to new design (#9415)

res/css/voice-broadcast/atoms/_PlaybackControlButton.pcss

@@ -21,5 +21,6 @@ limitations under the License.
     display: flex;
     height: 32px;
     justify-content: center;
+    margin-bottom: $spacing-8;
     width: 32px;
 }

res/css/voice-broadcast/atoms/_VoiceBroadcastHeader.pcss

@@ -16,20 +16,13 @@ limitations under the License.
     display: flex;
     gap: $spacing-8;
     line-height: 20px;
-    margin-bottom: $spacing-8;
+    margin-bottom: $spacing-16;
     width: 266px;
 }
 
-.mx_VoiceBroadcastHeader_sender {
-    font-size: $font-12px;
-    font-weight: $font-semi-bold;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
 .mx_VoiceBroadcastHeader_room {
     font-size: $font-12px;
+    font-weight: $font-semi-bold;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

src/components/atoms/Icon.tsx

@@ -17,17 +17,20 @@ limitations under the License.
 import React from "react";
 
 import liveIcon from "../../../res/img/element-icons/live.svg";
+import microphoneIcon from "../../../res/img/voip/call-view/mic-on.svg";
 import pauseIcon from "../../../res/img/element-icons/pause.svg";
 import playIcon from "../../../res/img/element-icons/play.svg";
 
 export enum IconType {
     Live,
+    Microphone,
     Pause,
     Play,
 }
 
 const iconTypeMap = new Map([
     [IconType.Live, liveIcon],
+    [IconType.Microphone, microphoneIcon],
     [IconType.Pause, pauseIcon],
     [IconType.Play, playIcon],
 ]);

src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx

@@ -12,24 +12,24 @@ limitations under the License.
 */
 
 import React from "react";
-import { RoomMember } from "matrix-js-sdk/src/matrix";
+import { Room, RoomMember } from "matrix-js-sdk/src/matrix";
 
-import MemberAvatar from "../../../components/views/avatars/MemberAvatar";
 import { LiveBadge } from "../..";
 import { Icon, IconColour, IconType } from "../../../components/atoms/Icon";
 import { _t } from "../../../languageHandler";
+import RoomAvatar from "../../../components/views/avatars/RoomAvatar";
 
 interface VoiceBroadcastHeaderProps {
     live: boolean;
     sender: RoomMember;
-    roomName: string;
+    room: Room;
     showBroadcast?: boolean;
 }
 
 export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
     live,
     sender,
-    roomName,
+    room,
     showBroadcast = false,
 }) => {
     const broadcast = showBroadcast
@@ -40,13 +40,14 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
         : null;
     const liveBadge = live ? <LiveBadge /> : null;
     return <div className="mx_VoiceBroadcastHeader">
-        <MemberAvatar member={sender} fallbackUserId={sender.userId} />
+        <RoomAvatar room={room} width={32} height={32} />
         <div className="mx_VoiceBroadcastHeader_content">
-            <div className="mx_VoiceBroadcastHeader_sender">
-                { sender.name }
-            </div>
             <div className="mx_VoiceBroadcastHeader_room">
-                { roomName }
+                { room.name }
+            </div>
+            <div className="mx_VoiceBroadcastHeader_line">
+                <Icon type={IconType.Microphone} colour={IconColour.CompoundSecondaryContent} />
+                { sender.name }
             </div>
             { broadcast }
         </div>

src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx

@@ -31,7 +31,7 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
     playback,
 }) => {
     const {
-        roomName,
+        room,
         sender,
         toggle,
         playbackState,
@@ -42,7 +42,7 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
             <VoiceBroadcastHeader
                 live={false}
                 sender={sender}
-                roomName={roomName}
+                room={room}
                 showBroadcast={true}
             />
             <div className="mx_VoiceBroadcastPlaybackBody_controls">

src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody.tsx

@@ -22,7 +22,7 @@ interface VoiceBroadcastRecordingBodyProps {
 export const VoiceBroadcastRecordingBody: React.FC<VoiceBroadcastRecordingBodyProps> = ({ recording }) => {
     const {
         live,
-        roomName,
+        room,
         sender,
         stopRecording,
     } = useVoiceBroadcastRecording(recording);
@@ -35,7 +35,7 @@ export const VoiceBroadcastRecordingBody: React.FC<VoiceBroadcastRecordingBodyPr
             <VoiceBroadcastHeader
                 live={live}
                 sender={sender}
-                roomName={roomName}
+                room={room}
             />
         </div>
     );

src/voice-broadcast/hooks/useVoiceBroadcastPlayback.ts

@@ -41,7 +41,7 @@ export const useVoiceBroadcastPlayback = (playback: VoiceBroadcastPlayback) => {
     );
 
     return {
-        roomName: room.name,
+        room: room,
         sender: playback.infoEvent.sender,
         toggle: playbackToggle,
         playbackState,

src/voice-broadcast/hooks/useVoiceBroadcastRecording.ts

@@ -44,7 +44,7 @@ export const useVoiceBroadcastRecording = (recording: VoiceBroadcastRecording) =
 
     return {
         live,
-        roomName: room.name,
+        room,
         sender: recording.infoEvent.sender,
         stopRecording,
     };

src/voice-broadcast/models/VoiceBroadcastPlayback.ts

@@ -70,7 +70,7 @@ export class VoiceBroadcastPlayback
         this.emit(VoiceBroadcastPlaybackEvent.StateChanged, state);
     }
 
-    public destroy(): void {
+    destroy(): void {
         this.removeAllListeners();
     }
 }

test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx

@@ -13,15 +13,25 @@ limitations under the License.
 
 import React from "react";
 import { Container } from "react-dom";
-import { RoomMember } from "matrix-js-sdk/src/matrix";
+import { MatrixClient, Room, RoomMember } from "matrix-js-sdk/src/matrix";
 import { render, RenderResult } from "@testing-library/react";
 
 import { VoiceBroadcastHeader } from "../../../../src/voice-broadcast";
+import { mkRoom, stubClient } from "../../../test-utils";
+
+// mock RoomAvatar, because it is doing too much fancy stuff
+jest.mock("../../../../src/components/views/avatars/RoomAvatar", () => ({
+    __esModule: true,
+    default: jest.fn().mockImplementation(({ room }) => {
+        return <div data-testid="room-avatar">room avatar: { room.name }</div>;
+    }),
+}));
 
 describe("VoiceBroadcastHeader", () => {
     const userId = "@user:example.com";
     const roomId = "!room:example.com";
-    const roomName = "test room";
+    let client: MatrixClient;
+    let room: Room;
     const sender = new RoomMember(roomId, userId);
     let container: Container;
 
@@ -29,12 +39,14 @@ describe("VoiceBroadcastHeader", () => {
         return render(<VoiceBroadcastHeader
             live={live}
             sender={sender}
-            roomName={roomName}
+            room={room}
             showBroadcast={showBroadcast}
         />);
     };
 
     beforeAll(() => {
+        client = stubClient();
+        room = mkRoom(client, roomId);
         sender.name = "test user";
     });
 

test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap

@@ -5,38 +5,30 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
   <div
     class="mx_VoiceBroadcastHeader"
   >
-    <span
+    <div
-      class="mx_BaseAvatar"
+      data-testid="room-avatar"
-      role="presentation"
     >
-      <span
+      room avatar: 
-        aria-hidden="true"
+      !room:example.com
-        class="mx_BaseAvatar_initial"
+    </div>
-        style="font-size: 26px; width: 40px; line-height: 40px;"
-      >
-        T
-      </span>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="mx_BaseAvatar_image"
-        src="data:image/png;base64,00"
-        style="width: 40px; height: 40px;"
-        title="@user:example.com"
-      />
-    </span>
     <div
       class="mx_VoiceBroadcastHeader_content"
     >
-      <div
-        class="mx_VoiceBroadcastHeader_sender"
-      >
-        test user
-      </div>
       <div
         class="mx_VoiceBroadcastHeader_room"
       >
-        test room
+        !room:example.com
+      </div>
+      <div
+        class="mx_VoiceBroadcastHeader_line"
+      >
+        <i
+          aria-hidden="true"
+          class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
+          role="presentation"
+          style="mask-image: url(\\"image-file-stub\\");"
+        />
+        test user
       </div>
       <div
         class="mx_VoiceBroadcastHeader_line"
@@ -70,38 +62,30 @@ exports[`VoiceBroadcastHeader when rendering a non-live broadcast header should
   <div
     class="mx_VoiceBroadcastHeader"
   >
-    <span
+    <div
-      class="mx_BaseAvatar"
+      data-testid="room-avatar"
-      role="presentation"
     >
-      <span
+      room avatar: 
-        aria-hidden="true"
+      !room:example.com
-        class="mx_BaseAvatar_initial"
+    </div>
-        style="font-size: 26px; width: 40px; line-height: 40px;"
-      >
-        T
-      </span>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="mx_BaseAvatar_image"
-        src="data:image/png;base64,00"
-        style="width: 40px; height: 40px;"
-        title="@user:example.com"
-      />
-    </span>
     <div
       class="mx_VoiceBroadcastHeader_content"
     >
-      <div
-        class="mx_VoiceBroadcastHeader_sender"
-      >
-        test user
-      </div>
       <div
         class="mx_VoiceBroadcastHeader_room"
       >
-        test room
+        !room:example.com
+      </div>
+      <div
+        class="mx_VoiceBroadcastHeader_line"
+      >
+        <i
+          aria-hidden="true"
+          class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
+          role="presentation"
+          style="mask-image: url(\\"image-file-stub\\");"
+        />
+        test user
       </div>
     </div>
   </div>

test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx

@@ -27,6 +27,14 @@ import {
 } from "../../../../src/voice-broadcast";
 import { mkEvent, stubClient } from "../../../test-utils";
 
+// mock RoomAvatar, because it is doing too much fancy stuff
+jest.mock("../../../../src/components/views/avatars/RoomAvatar", () => ({
+    __esModule: true,
+    default: jest.fn().mockImplementation(({ room }) => {
+        return <div data-testid="room-avatar">room avatar: { room.name }</div>;
+    }),
+}));
+
 describe("VoiceBroadcastPlaybackBody", () => {
     const userId = "@user:example.com";
     const roomId = "!room:example.com";

test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx

@@ -27,6 +27,14 @@ import {
 } from "../../../../src/voice-broadcast";
 import { mkEvent, stubClient } from "../../../test-utils";
 
+// mock RoomAvatar, because it is doing too much fancy stuff
+jest.mock("../../../../src/components/views/avatars/RoomAvatar", () => ({
+    __esModule: true,
+    default: jest.fn().mockImplementation(({ room }) => {
+        return <div data-testid="room-avatar">room avatar: { room.name }</div>;
+    }),
+}));
+
 describe("VoiceBroadcastRecordingBody", () => {
     const userId = "@user:example.com";
     const roomId = "!room:example.com";

test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap

@@ -8,39 +8,31 @@ exports[`VoiceBroadcastPlaybackBody when rendering a broadcast should render as
     <div
       class="mx_VoiceBroadcastHeader"
     >
-      <span
+      <div
-        class="mx_BaseAvatar"
+        data-testid="room-avatar"
-        role="presentation"
       >
-        <span
+        room avatar: 
-          aria-hidden="true"
+        My room
-          class="mx_BaseAvatar_initial"
+      </div>
-          style="font-size: 26px; width: 40px; line-height: 40px;"
-        >
-          U
-        </span>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="mx_BaseAvatar_image"
-          src="data:image/png;base64,00"
-          style="width: 40px; height: 40px;"
-          title="@user:example.com"
-        />
-      </span>
       <div
         class="mx_VoiceBroadcastHeader_content"
       >
-        <div
-          class="mx_VoiceBroadcastHeader_sender"
-        >
-          @user:example.com
-        </div>
         <div
           class="mx_VoiceBroadcastHeader_room"
         >
           My room
         </div>
+        <div
+          class="mx_VoiceBroadcastHeader_line"
+        >
+          <i
+            aria-hidden="true"
+            class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
+            role="presentation"
+            style="mask-image: url(\\"image-file-stub\\");"
+          />
+          @user:example.com
+        </div>
         <div
           class="mx_VoiceBroadcastHeader_line"
         >

test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap

@@ -8,39 +8,31 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
     <div
       class="mx_VoiceBroadcastHeader"
     >
-      <span
+      <div
-        class="mx_BaseAvatar"
+        data-testid="room-avatar"
-        role="presentation"
       >
-        <span
+        room avatar: 
-          aria-hidden="true"
+        My room
-          class="mx_BaseAvatar_initial"
+      </div>
-          style="font-size: 26px; width: 40px; line-height: 40px;"
-        >
-          U
-        </span>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="mx_BaseAvatar_image"
-          src="data:image/png;base64,00"
-          style="width: 40px; height: 40px;"
-          title="@user:example.com"
-        />
-      </span>
       <div
         class="mx_VoiceBroadcastHeader_content"
       >
-        <div
-          class="mx_VoiceBroadcastHeader_sender"
-        >
-          @user:example.com
-        </div>
         <div
           class="mx_VoiceBroadcastHeader_room"
         >
           My room
         </div>
+        <div
+          class="mx_VoiceBroadcastHeader_line"
+        >
+          <i
+            aria-hidden="true"
+            class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
+            role="presentation"
+            style="mask-image: url(\\"image-file-stub\\");"
+          />
+          @user:example.com
+        </div>
       </div>
       <div
         class="mx_LiveBadge"