Fix timing of voice message recording UI appearing

Fixes element-hq/element-web#18223

We delay the composer's state until a recording is truly ready here, preventing buttons from disappearing while we're still figuring things out.

Author: turt2live

src/components/views/rooms/MessageComposer.tsx

@@ -342,15 +342,20 @@ export default class MessageComposer extends React.Component<IProps, IState> {
 
     private onVoiceStoreUpdate = () => {
         const recording = VoiceRecordingStore.instance.activeRecording;
-        this.setState({ haveRecording: !!recording });
         if (recording) {
+            // Delay saying we have a recording until it is started, as we might not yet have A/V permissions
+            recording.on(RecordingState.Started, () => {
+                this.setState({ haveRecording: !!VoiceRecordingStore.instance.activeRecording });
+            });
             // We show a little heads up that the recording is about to automatically end soon. The 3s
             // display time is completely arbitrary. Note that we don't need to deregister the listener
             // because the recording instance will clean that up for us.
             recording.on(RecordingState.EndingSoon, ({ secondsLeft }) => {
                 this.setState({ recordingTimeLeftSeconds: secondsLeft });
                 setTimeout(() => this.setState({ recordingTimeLeftSeconds: null }), 3000);
             });
+        } else {
+            this.setState({ haveRecording: false });
         }
     };