Fix voice messages with multiple composers (#9208)

* Allow having multiple voice messages in composers

Co-authored-by: grimhilt <grimhilt@users.noreply.github.com>
Co-authored-by: Janne Mareike Koschinski <janne@kuschku.de>
This commit is contained in:
grimhilt 2022-09-05 10:04:37 +00:00 committed by GitHub
parent 85f92308f9
commit 6d03cb35b7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 24 deletions

View file

@ -308,7 +308,8 @@ export default class MessageComposer extends React.Component<IProps, IState> {
};
private updateRecordingState() {
this.voiceRecording = VoiceRecordingStore.instance.getActiveRecording(this.props.room.roomId);
const voiceRecordingId = VoiceRecordingStore.getVoiceRecordingId(this.props.room, this.props.relation);
this.voiceRecording = VoiceRecordingStore.instance.getActiveRecording(voiceRecordingId);
if (this.voiceRecording) {
// If the recording has already started, it's probably a cached one.
if (this.voiceRecording.hasRecording && !this.voiceRecording.isRecording) {
@ -323,7 +324,8 @@ export default class MessageComposer extends React.Component<IProps, IState> {
private onRecordingStarted = () => {
// update the recording instance, just in case
this.voiceRecording = VoiceRecordingStore.instance.getActiveRecording(this.props.room.roomId);
const voiceRecordingId = VoiceRecordingStore.getVoiceRecordingId(this.props.room, this.props.relation);
this.voiceRecording = VoiceRecordingStore.instance.getActiveRecording(voiceRecordingId);
this.setState({
haveRecording: !!this.voiceRecording,
});

View file

@ -64,6 +64,7 @@ interface IState {
export default class VoiceRecordComposerTile extends React.PureComponent<IProps, IState> {
static contextType = RoomContext;
public context!: React.ContextType<typeof RoomContext>;
private voiceRecordingId: string;
public constructor(props: IProps) {
super(props);
@ -71,10 +72,12 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
this.state = {
recorder: null, // no recording started by default
};
this.voiceRecordingId = VoiceRecordingStore.getVoiceRecordingId(this.props.room, this.props.relation);
}
public componentDidMount() {
const recorder = VoiceRecordingStore.instance.getActiveRecording(this.props.room.roomId);
const recorder = VoiceRecordingStore.instance.getActiveRecording(this.voiceRecordingId);
if (recorder) {
if (recorder.isRecording || !recorder.hasRecording) {
logger.warn("Cached recording hasn't ended yet and might cause issues");
@ -87,7 +90,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
public async componentWillUnmount() {
// Stop recording, but keep the recording memory (don't dispose it). This is to let the user
// come back and finish working with it.
const recording = VoiceRecordingStore.instance.getActiveRecording(this.props.room.roomId);
const recording = VoiceRecordingStore.instance.getActiveRecording(this.voiceRecordingId);
await recording?.stop();
// Clean up our listeners by binding a falsy recorder
@ -106,7 +109,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
let upload: IUpload;
try {
upload = await this.state.recorder.upload(this.props.room.roomId);
upload = await this.state.recorder.upload(this.voiceRecordingId);
} catch (e) {
logger.error("Error uploading voice message:", e);
@ -179,7 +182,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
}
private async disposeRecording() {
await VoiceRecordingStore.instance.disposeRecording(this.props.room.roomId);
await VoiceRecordingStore.instance.disposeRecording(this.voiceRecordingId);
// Reset back to no recording, which means no phase (ie: restart component entirely)
this.setState({ recorder: null, recordingPhase: null, didUploadFail: false });
@ -232,8 +235,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
try {
// stop any noises which might be happening
PlaybackManager.instance.pauseAllExcept(null);
const recorder = VoiceRecordingStore.instance.startRecording(this.props.room.roomId);
const recorder = VoiceRecordingStore.instance.startRecording(this.voiceRecordingId);
await recorder.start();
this.bindNewRecorder(recorder);
@ -244,7 +246,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
accessError();
// noinspection ES6MissingAwait - if this goes wrong we don't want it to affect the call stack
VoiceRecordingStore.instance.disposeRecording(this.props.room.roomId);
VoiceRecordingStore.instance.disposeRecording(this.voiceRecordingId);
}
};