From c1bb0bb0b8866a9b4fb8cdcfff5569ac9a0ad306 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Mon, 26 Apr 2021 21:08:51 -0600
Subject: [PATCH] Add a delete button

---
 .../views/rooms/_VoiceRecordComposerTile.scss | 11 ++++++++
 .../views/rooms/VoiceRecordComposerTile.tsx   | 25 +++++++++++++++++--
 src/i18n/strings/en_EN.json                   |  1 +
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_VoiceRecordComposerTile.scss b/res/css/views/rooms/_VoiceRecordComposerTile.scss
index 1975cf943f..cb77878666 100644
--- a/res/css/views/rooms/_VoiceRecordComposerTile.scss
+++ b/res/css/views/rooms/_VoiceRecordComposerTile.scss
@@ -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
diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx
index 53dc7cc9c5..b02c6a4bae 100644
--- a/src/components/views/rooms/VoiceRecordComposerTile.tsx
+++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx
@@ -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}
         </>);
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 943b2291b3..264c35144e 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -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.",