Add voice broadcast pre-recoding PiP (#9548)

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

@@ -19,19 +19,25 @@ import { Icon as LiveIcon } from "../../../../res/img/element-icons/live.svg";
 import { Icon as MicrophoneIcon } from "../../../../res/img/voip/call-view/mic-on.svg";
 import { _t } from "../../../languageHandler";
 import RoomAvatar from "../../../components/views/avatars/RoomAvatar";
+import AccessibleButton from "../../../components/views/elements/AccessibleButton";
+import { Icon as XIcon } from "../../../../res/img/element-icons/cancel-rounded.svg";
 
 interface VoiceBroadcastHeaderProps {
-    live: boolean;
-    sender: RoomMember;
+    live?: boolean;
+    onCloseClick?: () => void;
     room: Room;
+    sender: RoomMember;
     showBroadcast?: boolean;
+    showClose?: boolean;
 }
 
 export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
-    live,
-    sender,
+    live = false,
+    onCloseClick = () => {},
     room,
+    sender,
     showBroadcast = false,
+    showClose = false,
 }) => {
     const broadcast = showBroadcast
         ? <div className="mx_VoiceBroadcastHeader_line">
@@ -39,7 +45,15 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
             { _t("Voice broadcast") }
         </div>
         : null;
+
     const liveBadge = live ? <LiveBadge /> : null;
+
+    const closeButton = showClose
+        ? <AccessibleButton onClick={onCloseClick}>
+            <XIcon className="mx_Icon mx_Icon_16" />
+        </AccessibleButton>
+        : null;
+
     return <div className="mx_VoiceBroadcastHeader">
         <RoomAvatar room={room} width={32} height={32} />
         <div className="mx_VoiceBroadcastHeader_content">
@@ -53,5 +67,6 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
             { broadcast }
         </div>
         { liveBadge }
+        { closeButton }
     </div>;
 };