Resolve "press+hold audio recording is broken"

src/assets/css/chat.scss

@@ -1130,8 +1130,9 @@ body {
   &.ptt {
     position: absolute;
     left: 10px;
-    bottom: 0px;
+    bottom: 10px;
     right: 10px;
+    overflow: visible;
   }
   border-radius: 10px;
   background-color: black;
@@ -1148,6 +1149,7 @@ body {
   }
   .will-cancel {
     background-color: #ff3300;
+    border-radius: 10px;
   }
   .recording-time {
     color: white;
@@ -1157,9 +1159,11 @@ body {
   }
   .locked {
     background-color: black;
+    border-radius: 10px;
   }
   .error {
     background-color: orange;
+    border-radius: 10px;
   }
   .voice-recorder-lock {
     position: relative;

src/components/Chat.vue

@@ -138,7 +138,7 @@
             {{ typingMembersString }}
           </div>
         </v-row>
-        <v-row class="input-area-inner align-center" v-if="!showRecorder && !$matrix.currentRoomIsReadOnlyForUser">
+        <v-row class="input-area-inner align-center" v-show="!showRecorder" v-if="!$matrix.currentRoomIsReadOnlyForUser">
           <v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
             <v-textarea height="undefined" ref="messageInput" full-width auto-grow rows="1" v-model="currentInput"
               no-resize class="input-area-text" :placeholder="$t('message.your_message')" hide-details

src/components/VoiceRecorder.vue

@@ -113,12 +113,12 @@
                   {{ recordingTime }}
                 </div>
               </v-col>
-              <v-col cols="3">
+              <v-col cols="3" class="pa-0">
                 <v-btn id="btn-record-cancel" @click.stop="cancelRecording" text class="swipe-info">{{
                   $t("menu.cancel")
                 }}</v-btn>
               </v-col>
-              <v-col cols="3">
+              <v-col cols="3" class="pa-0">
                 <v-btn id="btn-record-stop" @click.stop="stopRecording" icon class="swipe-info"
                   ><v-icon color="white">stop</v-icon></v-btn
                 >
@@ -328,7 +328,9 @@ export default {
       this.$emit("close");
       this.previewPlayer = null;
       this.recordedFile = null;
-      this.$refs.audio_import.value = null;
+      if (this.$refs.audio_import) {
+        this.$refs.audio_import.value = null;
+      }
     },
     mouseUp(ignoredEvent) {
       document.removeEventListener("mouseup", this.mouseUp, false);
@@ -459,8 +461,12 @@ export default {
     },
     send() {
       this.$emit("file", { file: this.recordedFile });
-      this.previewPlayer.pause();
+      if (this.previewPlayer) {
-      this.$refs.audio_import.value = null;
+        this.previewPlayer.pause();
+      }
+      if (this.$refs.audio_import) {
+        this.$refs.audio_import.value = null;
+      }
     },
     getFile(send) {
       const duration = Date.now() - this.recordStartedAt;

src/components/messages/AudioPlayer.vue

@@ -34,8 +34,12 @@ export default {
       info: this.install(),
     };
   },
+  mounted() {
+    this.event.on("Event.localEventIdReplaced", this.onLocalEventIdReplaced);
+  },
   beforeDestroy() {
     this.$audioPlayer.removeListener(this._uid);
+    this.event.off("Event.localEventIdReplaced", this.onLocalEventIdReplaced);
   },
   computed: {
     currentTime() {
@@ -62,6 +66,12 @@ export default {
     },
     seeked(percent) {
       this.$audioPlayer.seek(this.event, percent);
+    },
+    onLocalEventIdReplaced() {
+      // This happens when we are the sending party and the message has been sent and the local echo has been updated with the new real id.
+      // Since we use the event id to register with the audio player, we need to update.
+      this.$audioPlayer.removeListener(this._uid);
+      this.info = this.$audioPlayer.addListener(this._uid, this.event);
     }
   },
 };