From b61714fccfda52bc9dc96cc830052dd4e604c426 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Thu, 16 Feb 2023 15:20:30 +0100
Subject: [PATCH] Add import functionality to voice recorder

---
 src/assets/icons/audio_import.vue      |  9 ++++
 src/assets/icons/audio_import_play.vue |  7 +++
 src/components/VoiceRecorder.vue       | 62 ++++++++++++++++++++++++--
 3 files changed, 75 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/icons/audio_import.vue
 create mode 100644 src/assets/icons/audio_import_play.vue

diff --git a/src/assets/icons/audio_import.vue b/src/assets/icons/audio_import.vue
new file mode 100644
index 0000000..d43e655
--- /dev/null
+++ b/src/assets/icons/audio_import.vue
@@ -0,0 +1,9 @@
+<template>
+    <svg width="35" height="24" viewBox="0 0 35 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M34.5045 2.00009C34.4955 1.99996 34.4865 1.99996 34.4773 2.00022C34.472 2.00022 34.4667 2.00009 34.4614 2.00022V2.00009H34.4468L34.4321 2.00191C34.3889 2.00685 34.3463 2.01738 34.3055 2.03338L34.3047 2.03364L34.3042 2.0339L22.3976 6.75159L22.3971 6.75172L22.3966 6.75198C22.2004 6.83079 22.0788 7.01118 22.08 7.22109H22.0798V7.22369C22.0796 10.8211 22.0798 14.4168 22.0798 18.0165C21.4362 17.3614 20.5389 16.9551 19.5466 16.9551C17.595 16.9551 16 18.5363 16 20.4775C16 22.4169 17.5946 24 19.5466 24C21.4924 24 23.0798 22.4297 23.0932 20.5018C23.0932 20.4994 23.0933 20.497 23.0933 20.4946H23.0932C23.0933 20.489 23.0933 20.4833 23.0932 20.4777H23.0933V10.8472L33.9865 6.7827V13.6522C33.3419 12.9981 32.4433 12.5915 31.4533 12.5915C29.4988 12.5915 27.9067 14.1736 27.9067 16.1139C27.9067 18.0522 29.4987 19.6364 31.4533 19.6364C33.3813 19.6364 34.9586 18.0837 34.9999 16.1792L35 16.1764V2.50378V2.50365C35.0001 2.22209 34.7842 2.00541 34.5048 2.00035L34.5045 2.00009Z"
+            fill="white" />
+        <rect x="15" y="6" width="3" height="15" rx="1.3" transform="rotate(90 15 6)" fill="white" />
+        <rect x="6" width="3" height="15" rx="1.3" fill="white" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/assets/icons/audio_import_play.vue b/src/assets/icons/audio_import_play.vue
new file mode 100644
index 0000000..b940826
--- /dev/null
+++ b/src/assets/icons/audio_import_play.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M15.2035 11.7865L1.92305 20.668C0.860979 21.3783 0 20.9103 0 19.6316V1.36924C0 0.0865306 0.861044 -0.377469 1.92305 0.33277L15.2035 9.21432C16.2655 9.9246 16.2655 11.0762 15.2035 11.7865Z"
+            fill="white" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/VoiceRecorder.vue b/src/components/VoiceRecorder.vue
index d1debf6..48879ba 100644
--- a/src/components/VoiceRecorder.vue
+++ b/src/components/VoiceRecorder.vue
@@ -11,6 +11,20 @@
             <v-btn v-show="state == states.RECORDED" icon @click.stop="redo">
               <v-icon color="white">undo</v-icon>
             </v-btn>
+            <v-btn v-show="state == states.INITIAL" icon @click.stop="importAudio">
+              <v-icon color="white">$vuetify.icons.audio_import</v-icon>
+              <input
+              ref="audio_import"
+              type="file"
+              name="audio_import"
+              @change="handleAudioImport($event)"
+              accept="audio/*"
+              class="d-none"
+            />
+            </v-btn>
+            <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-col>
           <v-col cols="4" align="center">
             <v-btn
@@ -23,7 +37,7 @@
               <v-icon color="white">stop</v-icon>
             </v-btn>
             <v-btn
-              v-else-if="state == states.RECORDED"
+              v-else-if="state == states.RECORDED || state == states.IMPORTED"
               id="btn-send"
               class="voice-recorder-btn recorded"
               icon
@@ -145,6 +159,7 @@ const State = {
   RECORDING: "recording",
   RECORDED: "recorded",
   ERROR: "error",
+  IMPORTED: "imported"
 };
 import util from "../plugins/utils";
 import VoiceRecorderLock from "./VoiceRecorderLock";
@@ -192,7 +207,8 @@ export default {
       recordingLocked: false,
       recordedFile: null,
       errorMessage: null,
-      recorder: null
+      recorder: null,
+      previewPlayer: null,
     };
   },
   watch: {
@@ -242,8 +258,10 @@ export default {
           this.startRecording();
         } else {
           console.log("Not PTT");
+          if (this.micButtonRef) {
           //eslint-disable-next-line
           this.micButtonRef.$el.style.display = "none";
+          }
         }
       } else {
         // Remove listeners
@@ -257,10 +275,17 @@ export default {
         this.startCoordinateX = null;
         this.startCoordinateY = null;
         this.recordingLocked = false;
+        if (this.micButtonRef) {
         //eslint-disable-next-line
         this.micButtonRef.$el.style.display = "block";
+        }
       }
     },
+    state() {
+      if (this.state != State.IMPORTED && this.previewPlayer) {
+        this.previewPlayer.pause();
+      }
+    }
   },
   computed: {
     lockButtonStyle() {
@@ -351,10 +376,10 @@ export default {
     },
     cancelRecording() {
       if(this.recorder) {
-        this.state = State.INITIAL;
         this.recorder.stop();
         this.recorder = null;
       }
+      this.state = State.INITIAL;
       this.close();
     },
     pauseRecording() {
@@ -433,6 +458,37 @@ export default {
         }
       });
     },
+
+    /**
+     * Show import picker to select file
+     */
+     importAudio() {
+      this.$refs.audio_import.click();
+    },
+
+    /**
+     * Handle picked audio file
+     */
+    handleAudioImport(event) {
+      if (event.target.files && event.target.files[0]) {
+        this.recordedFile = event.target.files[0];
+        this.state = State.IMPORTED;
+      }
+    },
+
+    previewAudio() {
+      if (this.recordedFile) {
+        if (!this.previewPlayer) {
+          this.previewPlayer = new Audio();
+        }
+        var reader = new FileReader();
+        reader.onload = (e) => {
+        this.previewPlayer.src = e.target.result;
+        this.previewPlayer.play();
+        };
+        reader.readAsDataURL(this.recordedFile);
+      }
+    }
   },
 };
 </script>