Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Fix voice messages with multiple composers (#9208)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@grimhilt @justjanne
3 people authored Sep 5, 2022
1 parent 85f9230 commit 6d03cb3
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 24 deletions.
6 changes: 4 additions & 2 deletions src/components/views/rooms/MessageComposer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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,
});
Expand Down
16 changes: 9 additions & 7 deletions src/components/views/rooms/VoiceRecordComposerTile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,17 +64,20 @@ 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);

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");
Expand All @@ -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
Expand All @@ -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);

Expand Down Expand Up @@ -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 });
Expand Down Expand Up @@ -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);
Expand All @@ -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);
}
};

Expand Down
41 changes: 26 additions & 15 deletions src/stores/VoiceRecordingStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,19 @@ limitations under the License.
*/

import { Optional } from "matrix-events-sdk";
import { Room } from "matrix-js-sdk/src/models/room";
import { RelationType } from "matrix-js-sdk/src/@types/event";
import { IEventRelation } from "matrix-js-sdk/src/models/event";

import { AsyncStoreWithClient } from "./AsyncStoreWithClient";
import defaultDispatcher from "../dispatcher/dispatcher";
import { ActionPayload } from "../dispatcher/payloads";
import { VoiceRecording } from "../audio/VoiceRecording";

const SEPARATOR = "|";

interface IState {
[roomId: string]: Optional<VoiceRecording>;
[voiceRecordingId: string]: Optional<VoiceRecording>;
}

export class VoiceRecordingStore extends AsyncStoreWithClient<IState> {
Expand All @@ -45,48 +50,54 @@ export class VoiceRecordingStore extends AsyncStoreWithClient<IState> {
return;
}

public static getVoiceRecordingId(room: Room, relation?: IEventRelation): string {
if (relation?.rel_type === "io.element.thread" || relation?.rel_type === RelationType.Thread) {
return room.roomId + SEPARATOR + relation.event_id;
} else {
return room.roomId;
}
}

/**
* Gets the active recording instance, if any.
* @param {string} roomId The room ID to get the recording in.
* @param {string} voiceRecordingId The room ID (with optionally the thread ID if in one) to get the recording in.
* @returns {Optional<VoiceRecording>} The recording, if any.
*/
public getActiveRecording(roomId: string): Optional<VoiceRecording> {
return this.state[roomId];
public getActiveRecording(voiceRecordingId: string): Optional<VoiceRecording> {
return this.state[voiceRecordingId];
}

/**
* Starts a new recording if one isn't already in progress. Note that this simply
* creates a recording instance - whether or not recording is actively in progress
* can be seen via the VoiceRecording class.
* @param {string} roomId The room ID to start recording in.
* @param {string} voiceRecordingId The room ID (with optionally the thread ID if in one) to start recording in.
* @returns {VoiceRecording} The recording.
*/
public startRecording(roomId: string): VoiceRecording {
public startRecording(voiceRecordingId: string): VoiceRecording {
if (!this.matrixClient) throw new Error("Cannot start a recording without a MatrixClient");
if (!roomId) throw new Error("Recording must be associated with a room");
if (this.state[roomId]) throw new Error("A recording is already in progress");
if (!voiceRecordingId) throw new Error("Recording must be associated with a room");
if (this.state[voiceRecordingId]) throw new Error("A recording is already in progress");

const recording = new VoiceRecording(this.matrixClient);

// noinspection JSIgnoredPromiseFromCall - we can safely run this async
this.updateState({ ...this.state, [roomId]: recording });
this.updateState({ ...this.state, [voiceRecordingId]: recording });

return recording;
}

/**
* Disposes of the current recording, no matter the state of it.
* @param {string} roomId The room ID to dispose of the recording in.
* @param {string} voiceRecordingId The room ID (with optionally the thread ID if in one) to dispose of the recording in.
* @returns {Promise<void>} Resolves when complete.
*/
public disposeRecording(roomId: string): Promise<void> {
if (this.state[roomId]) {
this.state[roomId].destroy(); // stops internally
}
public disposeRecording(voiceRecordingId: string): Promise<void> {
this.state[voiceRecordingId]?.destroy(); // stops internally

const {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
[roomId]: _toDelete,
[voiceRecordingId]: _toDelete,
...newState
} = this.state;
// unexpectedly AsyncStore.updateState merges state
Expand Down

0 comments on commit 6d03cb3

Please sign in to comment.