OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Add a delete button

pull/21833/head
Travis Ralston 2021-04-26 21:08:51 -06:00
parent 30e120284d
commit c1bb0bb0b8
3 changed files with 35 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
res/css/views/rooms/_VoiceRecordComposerTile.scss
View File

@ -35,6 +35,17 @@ limitations under the License.
}
}
.mx_VoiceRecordComposerTile_delete {
width: 14px; // w&h are size of icon
height: 18px;
vertical-align: middle;
margin-right: 7px; // distance from left edge of waveform container (container has some margin too)
background-color: $muted-fg-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/trashcan.svg');
}
.mx_VoiceRecordComposerTile_waveformContainer {
padding: 6px; // makes us 4px taller than the send/stop button
padding-right: 5px; // there's 1px from the waveform itself, so account for that

25
src/components/views/rooms/VoiceRecordComposerTile.tsx
View File

@ -97,10 +97,20 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
waveform: this.state.recorder.finalWaveform.map(v => Math.round(v * 1024)),
},
});
await VoiceRecordingStore.instance.disposeRecording();
this.setState({recorder: null});
await this.disposeRecording();
}
private async disposeRecording() {
await VoiceRecordingStore.instance.disposeRecording();
// Reset back to no recording, which means no phase (ie: restart component entirely)
this.setState({recorder: null, recordingPhase: null});
}
private onCancel = async () => {
await this.disposeRecording();
};
private onRecordStartEndClick = async () => {
if (this.state.recorder) {
await this.state.recorder.stop();
@ -134,6 +144,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
let playPause = null;
if (this.state.recordingPhase === RecordingState.Ended) {
// TODO: @@ TR: Should we disable this during upload? What does a failed upload look like?
playPause = <PlayPauseButton recorder={this.state.recorder} />;
}
@ -146,6 +157,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
public render() {
let recordingInfo;
let deleteButton;
if (!this.state.recordingPhase || this.state.recordingPhase === RecordingState.Started) {
const classes = classNames({
'mx_MessageComposer_button': !this.state.recorder,
@ -170,7 +182,16 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
recordingInfo = stopOrRecordBtn;
}
if (this.state.recorder && this.state.recordingPhase !== RecordingState.Uploading) {
deleteButton = <AccessibleTooltipButton
className='mx_VoiceRecordComposerTile_delete'
title={_t("Delete recording")}
onClick={this.onCancel}
/>;
}
return (<>
{deleteButton}
{this.renderWaveformArea()}
{recordingInfo}
</>);

1
src/i18n/strings/en_EN.json
View File

@ -1648,6 +1648,7 @@
"Mark all as read": "Mark all as read",
"Record a voice message": "Record a voice message",
"Stop the recording": "Stop the recording",
"Delete recording": "Delete recording",
"Error updating main address": "Error updating main address",
"There was an error updating the room's main address. It may not be allowed by the server or a temporary failure occurred.": "There was an error updating the room's main address. It may not be allowed by the server or a temporary failure occurred.",
"There was an error updating the room's alternative addresses. It may not be allowed by the server or a temporary failure occurred.": "There was an error updating the room's alternative addresses. It may not be allowed by the server or a temporary failure occurred.",