Update voice broadcast header to new design (#9415)

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();
     }
 }