From d9b4b2dd9970ae1318f7668efebfdfa3d9c246d1 Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Sun, 20 Aug 2023 11:45:57 +0300
Subject: [PATCH] Audio imported: support pause/play and stop playing after
 send

---
 src/components/VoiceRecorder.vue | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/VoiceRecorder.vue b/src/components/VoiceRecorder.vue
index 1d1bc65..7d11336 100644
--- a/src/components/VoiceRecorder.vue
+++ b/src/components/VoiceRecorder.vue
@@ -25,6 +25,9 @@
             <v-btn v-show="state == states.IMPORTED" icon @click.stop="previewAudio">
               <v-icon color="white">$vuetify.icons.audio_import_play</v-icon>
             </v-btn>
+            <v-btn v-show="state == states.PLAYING" icon @click.stop="pauseAudio">
+              <v-icon color="white">pause</v-icon>
+            </v-btn>
           </v-col>
           <v-col cols="4" align="center">
             <v-btn
@@ -37,7 +40,7 @@
               <v-icon color="white">stop</v-icon>
             </v-btn>
             <v-btn
-              v-else-if="state == states.RECORDED || state == states.IMPORTED"
+              v-else-if="state == states.RECORDED || state == states.IMPORTED || state == states.PLAYING"
               id="btn-send"
               class="voice-recorder-btn recorded"
               icon
@@ -159,7 +162,8 @@ const State = {
   RECORDING: "recording",
   RECORDED: "recorded",
   ERROR: "error",
-  IMPORTED: "imported"
+  IMPORTED: "imported",
+  PLAYING: "playing"
 };
 import util from "../plugins/utils";
 import VoiceRecorderLock from "./VoiceRecorderLock";
@@ -253,6 +257,7 @@ export default {
         this.state = State.INITIAL;
         this.errorMessage = null;
         this.recordedFile = null;
+        this.previewPlayer = null;
         this.recordingTime = String.fromCharCode(160);
         if (this.usePTT) {
           document.addEventListener("mouseup", this.mouseUp, false);
@@ -321,6 +326,9 @@ export default {
       this.stopRecordTimer();
       this.recordingTime = String.fromCharCode(160); // nbsp;
       this.$emit("close");
+      this.previewPlayer = null;
+      this.recordedFile = null;
+      this.$refs.audio_import.value = null;
     },
     mouseUp(ignoredEvent) {
       document.removeEventListener("mouseup", this.mouseUp, false);
@@ -385,7 +393,7 @@ export default {
         });
     },
     screenLocked() {
-      if (document.visibilityState === "hidden" && this.state == State.RECORDING) { 
+      if (document.visibilityState === "hidden" && this.state == State.RECORDING) {
         this.pauseRecording();
       }
     },
@@ -451,6 +459,8 @@ export default {
     },
     send() {
       this.$emit("file", { file: this.recordedFile });
+      this.previewPlayer.pause();
+      this.$refs.audio_import.value = null;
     },
     getFile(send) {
       const duration = Date.now() - this.recordStartedAt;
@@ -532,6 +542,7 @@ export default {
     },
 
     previewAudio() {
+      this.state = State.PLAYING;
       if (this.recordedFile) {
         if (!this.previewPlayer) {
           this.previewPlayer = new Audio();
@@ -543,6 +554,10 @@ export default {
         };
         reader.readAsDataURL(this.recordedFile);
       }
+    },
+    pauseAudio() {
+      this.state = State.IMPORTED;
+      this.previewPlayer.pause();
     }
   },
 };