Link voice broadcast avatar and room name to room (#9722)

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

@@ -21,17 +21,21 @@ import { Icon as MicrophoneIcon } from "../../../../res/img/voip/call-view/mic-o
 import { Icon as TimerIcon } from "../../../../res/img/element-icons/Timer.svg";
 import { _t } from "../../../languageHandler";
 import RoomAvatar from "../../../components/views/avatars/RoomAvatar";
-import AccessibleButton from "../../../components/views/elements/AccessibleButton";
+import AccessibleButton, { ButtonEvent } from "../../../components/views/elements/AccessibleButton";
 import { Icon as XIcon } from "../../../../res/img/element-icons/cancel-rounded.svg";
 import Clock from "../../../components/views/audio_messages/Clock";
 import { formatTimeLeft } from "../../../DateUtils";
 import Spinner from "../../../components/views/elements/Spinner";
+import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
+import { Action } from "../../../dispatcher/actions";
+import dis from "../../../dispatcher/dispatcher";
 import AccessibleTooltipButton from "../../../components/views/elements/AccessibleTooltipButton";
 
 interface VoiceBroadcastHeaderProps {
+    linkToRoom?: boolean;
     live?: VoiceBroadcastLiveness;
     onCloseClick?: () => void;
-    onMicrophoneLineClick?: () => void;
+    onMicrophoneLineClick?: ((e: ButtonEvent) => void | Promise<void>) | null;
     room: Room;
     microphoneLabel?: string;
     showBroadcast?: boolean;
@@ -41,9 +45,10 @@ interface VoiceBroadcastHeaderProps {
 }
 
 export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
+    linkToRoom = false,
     live = "not-live",
     onCloseClick = () => {},
-    onMicrophoneLineClick,
+    onMicrophoneLineClick = null,
     room,
     microphoneLabel,
     showBroadcast = false,
@@ -96,11 +101,28 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
         </AccessibleTooltipButton>
     );
 
+    const onRoomAvatarOrNameClick = (): void => {
+        dis.dispatch<ViewRoomPayload>({
+            action: Action.ViewRoom,
+            room_id: room.roomId,
+            metricsTrigger: undefined, // other
+        });
+    };
+
+    let roomAvatar = <RoomAvatar room={room} width={32} height={32} />;
+    let roomName = <div className="mx_VoiceBroadcastHeader_room">{room.name}</div>;
+
+    if (linkToRoom) {
+        roomAvatar = <AccessibleButton onClick={onRoomAvatarOrNameClick}>{roomAvatar}</AccessibleButton>;
+
+        roomName = <AccessibleButton onClick={onRoomAvatarOrNameClick}>{roomName}</AccessibleButton>;
+    }
+
     return (
         <div className="mx_VoiceBroadcastHeader">
-            <RoomAvatar room={room} width={32} height={32} />
+            {roomAvatar}
             <div className="mx_VoiceBroadcastHeader_content">
-                <div className="mx_VoiceBroadcastHeader_room">{room.name}</div>
+                {roomName}
                 {microphoneLine}
                 {timeLeftLine}
                 {broadcast}

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

@@ -98,6 +98,7 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
     return (
         <div className={classes}>
             <VoiceBroadcastHeader
+                linkToRoom={pip}
                 live={liveness}
                 microphoneLabel={sender?.name}
                 room={room}

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

@@ -41,6 +41,7 @@ export const VoiceBroadcastPreRecordingPip: React.FC<Props> = ({ voiceBroadcastP
     return (
         <div className="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip" ref={pipRef}>
             <VoiceBroadcastHeader
+                linkToRoom={true}
                 onCloseClick={voiceBroadcastPreRecording.cancel}
                 onMicrophoneLineClick={() => setShowDeviceSelect(true)}
                 room={voiceBroadcastPreRecording.room}

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

@@ -74,7 +74,7 @@ export const VoiceBroadcastRecordingPip: React.FC<VoiceBroadcastRecordingPipProp
 
     return (
         <div className="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip" ref={pipRef}>
-            <VoiceBroadcastHeader live={live ? "live" : "grey"} room={room} timeLeft={timeLeft} />
+            <VoiceBroadcastHeader linkToRoom={true} live={live ? "live" : "grey"} room={room} timeLeft={timeLeft} />
             <hr className="mx_VoiceBroadcastBody_divider" />
             <div className="mx_VoiceBroadcastBody_controls">
                 {toggleControl}