imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Keep unsent voice messages in memory until they are deleted or sent (#7840)

Browse source 
Fixes https://github.com/vector-im/element-web/issues/17979
This commit is contained in:
Travis Ralston 2022-02-18 07:29:08 -07:00 • committed by GitHub
parent 38a547b5d0
commit b756f03563
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 123 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

82
src/components/views/rooms/MessageComposer.tsx
View file

@ -20,6 +20,7 @@ import { MatrixEvent, IEventRelation } from "matrix-js-sdk/src/models/event";
import { Room } from "matrix-js-sdk/src/models/room";
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { EventType, RelationType } from 'matrix-js-sdk/src/@types/event';
import { Optional } from "matrix-events-sdk";
import { _t } from '../../../languageHandler';
import { MatrixClientPeg } from '../../../MatrixClientPeg';
@ -36,7 +37,7 @@ import { UPDATE_EVENT } from "../../../stores/AsyncStore";
import { replaceableComponent } from "../../../utils/replaceableComponent";
import VoiceRecordComposerTile from "./VoiceRecordComposerTile";
import { VoiceRecordingStore } from "../../../stores/VoiceRecordingStore";
import { RecordingState } from "../../../audio/VoiceRecording";
import { RecordingState, VoiceRecording } from "../../../audio/VoiceRecording";
import Tooltip, { Alignment } from "../elements/Tooltip";
import ResizeNotifier from "../../../utils/ResizeNotifier";
import { E2EStatus } from '../../../utils/ShieldUtils';
@ -100,14 +101,16 @@ export default class MessageComposer extends React.Component<IProps, IState> {
private ref: React.RefObject<HTMLDivElement> = createRef();
private instanceId: number;
static contextType = RoomContext;
private _voiceRecording: Optional<VoiceRecording>;
public static contextType = RoomContext;
public context!: React.ContextType<typeof RoomContext>;
static defaultProps = {
public static defaultProps = {
compact: false,
};
constructor(props: IProps) {
public constructor(props: IProps) {
super(props);
VoiceRecordingStore.instance.on(UPDATE_EVENT, this.onVoiceStoreUpdate);
@ -127,12 +130,36 @@ export default class MessageComposer extends React.Component<IProps, IState> {
SettingsStore.monitorSetting("MessageComposerInput.showStickersButton", null);
}
componentDidMount() {
private get voiceRecording(): Optional<VoiceRecording> {
return this._voiceRecording;
}
private set voiceRecording(rec: Optional<VoiceRecording>) {
if (this._voiceRecording) {
this._voiceRecording.off(RecordingState.Started, this.onRecordingStarted);
this._voiceRecording.off(RecordingState.EndingSoon, this.onRecordingEndingSoon);
}
this._voiceRecording = rec;
if (rec) {
// Delay saying we have a recording until it is started, as we might not yet
// have A/V permissions
rec.on(RecordingState.Started, this.onRecordingStarted);
// We show a little heads up that the recording is about to automatically end soon. The 3s
// display time is completely arbitrary.
rec.on(RecordingState.EndingSoon, this.onRecordingEndingSoon);
}
}
public componentDidMount() {
this.dispatcherRef = dis.register(this.onAction);
MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
this.waitForOwnMember();
UIStore.instance.trackElementDimensions(`MessageComposer${this.instanceId}`, this.ref.current);
UIStore.instance.on(`MessageComposer${this.instanceId}`, this.onResize);
this.updateRecordingState(); // grab any cached recordings
}
private onResize = (type: UI_EVENTS, entry: ResizeObserverEntry) => {
@ -191,7 +218,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
});
}
componentWillUnmount() {
public componentWillUnmount() {
if (MatrixClientPeg.get()) {
MatrixClientPeg.get().removeListener("RoomState.events", this.onRoomStateEvents);
}
@ -199,6 +226,9 @@ export default class MessageComposer extends React.Component<IProps, IState> {
dis.unregister(this.dispatcherRef);
UIStore.instance.stopTrackingElementDimensions(`MessageComposer${this.instanceId}`);
UIStore.instance.removeListener(`MessageComposer${this.instanceId}`, this.onResize);
// clean up our listeners by setting our cached recording to falsy (see internal setter)
this.voiceRecording = null;
}
private onRoomStateEvents = (ev, state) => {
@ -290,22 +320,34 @@ export default class MessageComposer extends React.Component<IProps, IState> {
};
private onVoiceStoreUpdate = () => {
const recording = VoiceRecordingStore.instance.activeRecording;
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);
});
this.updateRecordingState();
};
private updateRecordingState() {
this.voiceRecording = VoiceRecordingStore.instance.getActiveRecording(this.props.room.roomId);
if (this.voiceRecording) {
// If the recording has already started, it's probably a cached one.
if (this.voiceRecording.hasRecording && !this.voiceRecording.isRecording) {
this.setState({ haveRecording: true });
}
// Note: Listeners for recording states are set by the `this.voiceRecording` setter.
} else {
this.setState({ haveRecording: false });
}
}
private onRecordingStarted = () => {
// update the recording instance, just in case
this.voiceRecording = VoiceRecordingStore.instance.getActiveRecording(this.props.room.roomId);
this.setState({
haveRecording: !!this.voiceRecording,
});
};
private onRecordingEndingSoon = ({ secondsLeft }) => {
this.setState({ recordingTimeLeftSeconds: secondsLeft });
setTimeout(() => this.setState({ recordingTimeLeftSeconds: null }), 3000);
};
private setStickerPickerOpen = (isStickerPickerOpen: boolean) => {
@ -321,7 +363,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
});
};
render() {
public render() {
const controls = [
this.props.e2eStatus ?
<E2EIcon key="e2eIcon" status={this.props.e2eStatus} className="mx_MessageComposer_e2eIcon" /> :

48
src/components/views/rooms/VoiceRecordComposerTile.tsx
View file

@ -1,5 +1,5 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Copyright 2021 - 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -18,6 +18,7 @@ import React, { ReactNode } from "react";
import { Room } from "matrix-js-sdk/src/models/room";
import { MsgType } from "matrix-js-sdk/src/@types/event";
import { logger } from "matrix-js-sdk/src/logger";
import { Optional } from "matrix-events-sdk";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import { _t } from "../../../languageHandler";
@ -61,8 +62,25 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
};
}
public componentDidMount() {
const recorder = VoiceRecordingStore.instance.getActiveRecording(this.props.room.roomId);
if (recorder) {
if (recorder.isRecording || !recorder.hasRecording) {
logger.warn("Cached recording hasn't ended yet and might cause issues");
}
this.bindNewRecorder(recorder);
this.setState({ recorder, recordingPhase: RecordingState.Ended });
}
}
public async componentWillUnmount() {
await VoiceRecordingStore.instance.disposeRecording();
// 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);
await recording?.stop();
// Clean up our listeners by binding a falsy recorder
this.bindNewRecorder(null);
}
// called by composer
@ -128,7 +146,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
}
private async disposeRecording() {
await VoiceRecordingStore.instance.disposeRecording();
await VoiceRecordingStore.instance.disposeRecording(this.props.room.roomId);
// Reset back to no recording, which means no phase (ie: restart component entirely)
this.setState({ recorder: null, recordingPhase: null, didUploadFail: false });
@ -182,14 +200,10 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
// stop any noises which might be happening
await PlaybackManager.instance.pauseAllExcept(null);
const recorder = VoiceRecordingStore.instance.startRecording();
const recorder = VoiceRecordingStore.instance.startRecording(this.props.room.roomId);
await recorder.start();
// We don't need to remove the listener: the recorder will clean that up for us.
recorder.on(UPDATE_EVENT, (ev: RecordingState) => {
if (ev === RecordingState.EndingSoon) return; // ignore this state: it has no UI purpose here
this.setState({ recordingPhase: ev });
});
this.bindNewRecorder(recorder);
this.setState({ recorder, recordingPhase: RecordingState.Started });
} catch (e) {
@ -197,10 +211,24 @@ 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();
VoiceRecordingStore.instance.disposeRecording(this.props.room.roomId);
}
};
private bindNewRecorder(recorder: Optional<VoiceRecording>) {
if (this.state.recorder) {
this.state.recorder.off(UPDATE_EVENT, this.onRecordingUpdate);
}
if (recorder) {
recorder.on(UPDATE_EVENT, this.onRecordingUpdate);
}
}
private onRecordingUpdate = (ev: RecordingState) => {
if (ev === RecordingState.EndingSoon) return; // ignore this state: it has no UI purpose here
this.setState({ recordingPhase: ev });
};
private renderWaveformArea(): ReactNode {
if (!this.state.recorder) return null; // no recorder means we're not recording: no waveform