Add voice broadcast recording body (#9316)

* Add voice broadcast recording body

* Change icon element; update css variables

* Update Icon-test snapshots

src/components/views/messages/MessageEvent.tsx

@@ -42,6 +42,7 @@ import MLocationBody from "./MLocationBody";
 import MjolnirBody from "./MjolnirBody";
 import MBeaconBody from "./MBeaconBody";
 import { IEventTileOps } from "../rooms/EventTile";
+import { VoiceBroadcastBody, VoiceBroadcastInfoEventType, VoiceBroadcastInfoState } from '../../../voice-broadcast';
 
 // onMessageAllowed is handled internally
 interface IProps extends Omit<IBodyProps, "onMessageAllowed" | "mediaEventHelper"> {
@@ -74,6 +75,7 @@ const baseEvTypes = new Map<string, React.ComponentType<Partial<IBodyProps>>>([
     [M_POLL_START.altName, MPollBody],
     [M_BEACON_INFO.name, MBeaconBody],
     [M_BEACON_INFO.altName, MBeaconBody],
+    [VoiceBroadcastInfoEventType, VoiceBroadcastBody],
 ]);
 
 export default class MessageEvent extends React.Component<IProps> implements IMediaBody, IOperableEventTile {
@@ -171,6 +173,10 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
             ) {
                 BodyType = MLocationBody;
             }
+
+            if (type === VoiceBroadcastInfoEventType && content?.state === VoiceBroadcastInfoState.Started) {
+                BodyType = VoiceBroadcastBody;
+            }
         }
 
         if (SettingsStore.getValue("feature_mjolnir")) {

src/components/views/rooms/MessageComposer.tsx

@@ -54,6 +54,11 @@ import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { isLocalRoom } from '../../../utils/localRoom/isLocalRoom';
 import { Features } from '../../../settings/Settings';
 import { VoiceMessageRecording } from '../../../audio/VoiceMessageRecording';
+import {
+    VoiceBroadcastInfoEventContent,
+    VoiceBroadcastInfoEventType,
+    VoiceBroadcastInfoState,
+} from '../../../voice-broadcast';
 
 let instanceCount = 0;
 
@@ -503,12 +508,18 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                             showStickersButton={this.showStickersButton}
                             toggleButtonMenu={this.toggleButtonMenu}
                             showVoiceBroadcastButton={this.showVoiceBroadcastButton}
-                            onStartVoiceBroadcastClick={() => {
-                                // Sends a voice message. To be replaced by voice broadcast during development.
-                                this.voiceRecordingButton.current?.onRecordStartEndClick();
-                                if (this.context.narrow) {
-                                    this.toggleButtonMenu();
-                                }
+                            onStartVoiceBroadcastClick={async () => {
+                                const client = MatrixClientPeg.get();
+                                client.sendStateEvent(
+                                    this.props.room.roomId,
+                                    VoiceBroadcastInfoEventType,
+                                    {
+                                        state: VoiceBroadcastInfoState.Started,
+                                        chunk_length: 300,
+                                    } as VoiceBroadcastInfoEventContent,
+                                    client.getUserId(),
+                                );
+                                this.toggleButtonMenu();
                             }}
                         /> }
                         { showSendButton && (

src/components/views/rooms/SendMessageComposer.tsx

@@ -88,6 +88,7 @@ export function createMessageContent(
     model = unescapeMessage(model);
 
     const body = textSerialize(model);
+
     const content: IContent = {
         msgtype: isEmote ? "m.emote" : "m.text",
         body: body,