From 2b3f99c42187ec030b363e36fb510a72ec69d5ea Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Wed, 10 Mar 2021 17:24:48 +0100
Subject: [PATCH] Audio recording tweaks

---
 src/assets/css/chat.scss         | 13 ++++---
 src/components/Chat.vue          | 58 +++++++++++++++++++++-----------
 src/components/VoiceRecorder.vue | 24 +++++++++----
 3 files changed, 64 insertions(+), 31 deletions(-)

diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 1203c5c..e615480 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -625,11 +625,14 @@ $admin-fg: white;
 }
 
 .voice-recorder {
-    position: absolute;
-    //top: 0;
-    left: 10px;
-    bottom: 0px;
-    right: 10px;
+    position: relative;
+    margin-top: 14px !important;
+    &.ptt {
+        position: absolute;
+        left: 10px;
+        bottom: 0px;
+        right: 10px;
+    }
     border-radius: 10px;
     background-color: black;
     overflow: hidden;
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index 228ff8b..011a76e 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -127,7 +127,7 @@
             background-color="white"
             v-on:keydown.enter.prevent="
               () => {
-                sendMessage();
+                sendCurrentTextMessage();
               }
             "
           />
@@ -150,7 +150,7 @@
 
         <v-col
           class="input-area-button text-center flex-grow-0 flex-shrink-1"
-          v-if="!currentInput || currentInput.length == 0"
+          v-if="!currentInput || currentInput.length == 0 || showRecorder"
         >
           <v-btn
             class="mic-button"
@@ -160,7 +160,7 @@
             elevation="0"
             v-blur
             style="z-index: 10"
-            v-longTap:500="[showRecordingUI,startRecording]"
+            v-longTap:250="[showRecordingUI,startRecording]"
           >
             <v-icon :color="showRecorder ? 'white' : 'black'">mic</v-icon>
           </v-btn>
@@ -175,7 +175,7 @@
             small
             elevation="0"
             color="black"
-            @click.stop="sendMessage"
+            @click.stop="sendCurrentTextMessage"
             :disabled="sendButtonDisabled"
           >
             <v-icon color="white">{{
@@ -187,6 +187,7 @@
         <v-col class="input-area-button text-center flex-grow-0 flex-shrink-1">
           <label icon flat ref="attachmentLabel">
             <v-btn
+              v-if="!showRecorder"
               icon
               large
               color="black"
@@ -215,11 +216,12 @@
       />
     </v-container>
 
-    <div v-if="currentImageInput">
-      <v-dialog v-model="currentImageInput" class="ma-0 pa-0" width="50%">
+    <div v-if="currentImageInputPath">
+      <v-dialog v-model="currentImageInputPath" class="ma-0 pa-0" width="50%">
         <v-card class="ma-0 pa-0">
           <v-card-text class="ma-0 pa-0">
             <v-img
+              v-if="currentImageInput"
               :aspect-ratio="1"
               :src="currentImageInput"
               contain
@@ -238,6 +240,7 @@
               color="primary"
               text
               @click="sendAttachment"
+              v-if="currentSendShowSendButton"
               :disabled="currentSendOperation != null"
               >Send</v-btn
             >
@@ -374,6 +377,7 @@ export default {
       currentImageInputPath: null,
       currentSendOperation: null,
       currentSendProgress: null,
+      currentSendShowSendButton: true,
       currentSendError: null,
       showEmojiPicker: false,
       selectedEvent: null,
@@ -808,13 +812,23 @@ export default {
       console.log("Typing: ", this.typingMembers);
     },
 
-    sendMessage() {
-      if (this.currentInput.length > 0) {
+    sendCurrentTextMessage() {
+      // DOn't have "enter" send messages while in recorder.
+      if (this.currentInput.length > 0 && !this.showRecorder) {
+        this.sendMessage(this.currentInput);
+        this.currentInput = "";
+        this.editedEvent = null; //TODO - Is this a good place to reset this?
+        this.replyToEvent = null;
+      }
+    },
+
+    sendMessage(text) {
+      if (text && text.length > 0) {
         util
           .sendTextMessage(
             this.$matrix.matrixClient,
             this.roomId,
-            this.currentInput,
+            text,
             this.editedEvent,
             this.replyToEvent
           )
@@ -824,9 +838,6 @@ export default {
           .catch((err) => {
             console.log("Failed to send:", err);
           });
-        this.currentInput = "";
-        this.editedEvent = null; //TODO - Is this a good place to reset this?
-        this.replyToEvent = null;
       }
     },
 
@@ -850,6 +861,7 @@ export default {
       if (event.target.files && event.target.files[0]) {
         var reader = new FileReader();
         reader.onload = (e) => {
+          this.currentSendShowSendButton = true;
           this.currentImageInput = e.target.result;
           this.currentImageInputPath = event.target.files[0];
         };
@@ -866,7 +878,7 @@ export default {
       }
     },
 
-    sendAttachment() {
+    sendAttachment(withText) {
       if (this.currentImageInputPath) {
         this.currentSendProgress = null;
         this.currentSendOperation = util.sendImage(
@@ -879,7 +891,11 @@ export default {
           .then(() => {
             this.currentSendOperation = null;
             this.currentImageInput = null;
+            this.currentImageInputPath = null;
             this.currentSendProgress = null;
+            if (withText) {
+              this.sendMessage(withText);
+            }
           })
           .catch((err) => {
             this.currentSendError = err.toLocaleString();
@@ -895,6 +911,7 @@ export default {
       }
       this.currentSendOperation = null;
       this.currentImageInput = null;
+      this.currentImageInputPath = null;
       this.currentSendProgress = null;
       this.currentSendError = null;
     },
@@ -1175,12 +1192,15 @@ export default {
     },
 
     onVoiceRecording(event) {
-      util.sendImage(
-        this.$matrix.matrixClient,
-        this.roomId,
-        event.file,
-        undefined
-      );
+      this.currentSendShowSendButton = false;
+      this.currentImageInputPath = event.file;
+      var text = undefined;
+      if (this.currentInput && this.currentInput.length > 0) {
+        text = this.currentInput;
+        this.currentInput = "";
+      }
+      this.sendAttachment(text);
+      this.showRecorder = false;
     },
   },
 };
diff --git a/src/components/VoiceRecorder.vue b/src/components/VoiceRecorder.vue
index 7e8f361..a7556a1 100644
--- a/src/components/VoiceRecorder.vue
+++ b/src/components/VoiceRecorder.vue
@@ -1,11 +1,13 @@
 <template>
   <transition name="grow" mode="out-in">
-    <div v-show="show" class="voice-recorder" ref="vrroot">
+    <div v-show="show" :class="{'voice-recorder':true,'ptt':ptt,'row':!ptt}" ref="vrroot">
       <!-- <div style="background-color:red;height:60px;width:100%"/> -->
       <v-container v-if="!ptt" fluid fill-height>
-        <v-row align="center">
+        <v-row align="center" class="mt-3">
           <v-col cols="4" align="center">
-            <v-icon v-show="false" color="white">delete_outline</v-icon>
+            <v-btn v-show="state == states.RECORDED" icon @click.stop="redo">
+              <v-icon color="white">undo</v-icon>
+            </v-btn>
           </v-col>
           <v-col cols="4" align="center">
             <v-btn
@@ -18,12 +20,12 @@
             </v-btn>
             <v-btn
               v-else-if="state == states.RECORDED"
-              style="background-color: green; padding: 30px"
+              style="background-color: #3ae17d; padding: 30px"
               icon
               :disabled="!recordedFile"
               @click.stop="send"
             >
-              <v-icon color="white">arrow_upward</v-icon>
+              <v-icon color="black">arrow_upward</v-icon>
             </v-btn>
             <v-btn
               v-else
@@ -266,6 +268,7 @@ export default {
   methods: {
     close() {
       this.stopRecordTimer();
+      this.recordingTime = String.fromCharCode(160); // nbsp;
       this.$emit("close");
     },
     mouseUp(ignoredEvent) {
@@ -331,6 +334,7 @@ export default {
         this.recorder.stop();
       }
       this.stopRecordTimer();
+      this.recordingTime = String.fromCharCode(160); // nbsp;
       this.close();
     },
     pauseRecording() {
@@ -341,9 +345,15 @@ export default {
     stopRecording() {
       this.state = State.RECORDED;
       this.stopRecordTimer();
+      this.recordingTime = String.fromCharCode(160); // nbsp;
       this.close();
       this.getFile(true);
     },
+    redo() {
+      this.state = State.INITIAL;
+      this.recordedFile = null;
+      this.recordingTime = String.fromCharCode(160); // nbsp;
+    },
     send() {
       //console.log("Send:", this.recordedFile);
       this.$emit("file", {file: this.recordedFile});
@@ -376,6 +386,7 @@ export default {
     },
     startRecordTimer() {
       this.stopRecordTimer();
+      this.recordingTime = String.fromCharCode(160); // nbsp;
       this.recordTimer = setInterval(() => {
         const now = Date.now();
         this.recordingTime = util.formatRecordDuration(
@@ -387,7 +398,6 @@ export default {
       if (this.recordTimer) {
         clearInterval(this.recordTimer);
         this.recordTimer = null;
-        this.recordingTime = String.fromCharCode(160); // nbsp;
       }
     },
   },
@@ -401,7 +411,7 @@ export default {
 .grow-enter-active,
 .grow-leave-active {
   transition-timing-function: ease-out;
-  transition: opacity 0.5s, border-radius 0.7s, transform 0.7s;
+  transition: opacity 0.3s, border-radius 0.5s, transform 0.5s;
 }
 .grow-enter,
 .grow-leave-to {