From 495c8f64132d920a60d9b3a1b3a2d588a4959b18 Mon Sep 17 00:00:00 2001
From: Terry Yin <terry.yinzhe@gmail.com>
Date: Fri, 25 Oct 2024 16:26:35 +0800
Subject: [PATCH] mtce

---
 e2e_test/start/pageObjects/notePage.ts        |  2 +-
 .../notes/accessory/NoteAudioTools.vue        | 51 ++++++++++---------
 .../components/notes/core/NoteCoreToolbar.vue |  2 +-
 frontend/src/models/recording.ts              | 17 +++++--
 4 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/e2e_test/start/pageObjects/notePage.ts b/e2e_test/start/pageObjects/notePage.ts
index 4c205ca03..00035d424 100644
--- a/e2e_test/start/pageObjects/notePage.ts
+++ b/e2e_test/start/pageObjects/notePage.ts
@@ -153,7 +153,7 @@ export const assumeNotePage = (noteTopic?: string) => {
       return this.toolbarButton('edit note image')
     },
     audioTools() {
-      this.toolbarButton('Upload audio').click()
+      this.toolbarButton('Audio tools').click()
       return audioToolsPage()
     },
     switchToRichContent() {
diff --git a/frontend/src/components/notes/accessory/NoteAudioTools.vue b/frontend/src/components/notes/accessory/NoteAudioTools.vue
index d41697fb5..5cbbcfdf5 100644
--- a/frontend/src/components/notes/accessory/NoteAudioTools.vue
+++ b/frontend/src/components/notes/accessory/NoteAudioTools.vue
@@ -36,11 +36,8 @@
 import useLoadingApi from "@/managedApi/useLoadingApi"
 import { onUnmounted, ref, type PropType } from "vue"
 import type { StorageAccessor } from "../../../store/createNoteStorage"
-import {
-  createAudioRecorder,
-  type AudioRecorder,
-} from "../../../models/recording"
-import { createWakeLocker, type WakeLocker } from "../../../models/wakeLocker"
+import { createAudioRecorder } from "../../../models/recording"
+import { createWakeLocker } from "../../../models/wakeLocker"
 import type { Note } from "@/generated/backend"
 import Waveform from "./Waveform.vue"
 
@@ -59,39 +56,45 @@ const audioFile = ref<Blob | undefined>()
 const errors = ref<Record<string, string | undefined>>()
 
 const isRecording = ref(false)
-const audioRecorder = ref<AudioRecorder>(createAudioRecorder())
-const wakeLocker = ref<WakeLocker>(createWakeLocker())
+const wakeLocker = createWakeLocker()
+
+const processAudio = async (file: Blob) => {
+  audioFile.value = file
+  try {
+    const response = await managedApi.restAiAudioController.audioToText({
+      previousNoteDetails: "Lets start",
+      uploadAudioFile: file,
+    })
+    storageAccessor
+      .storedApi()
+      .appendDetails(note.id, response?.completionMarkdownFromAudio)
+  } catch (error) {
+    errors.value = error as Record<string, string | undefined>
+  }
+}
+
+const audioRecorder = createAudioRecorder()
+audioRecorder.setProcessor(processAudio)
 
 const startRecording = async () => {
   errors.value = undefined
   try {
-    await wakeLocker.value.request() // Request wake lock
-    await audioRecorder.value.startRecording()
+    await wakeLocker.request() // Request wake lock
+    await audioRecorder.startRecording()
     isRecording.value = true
   } catch (error) {
     console.error("Error starting recording:", error)
     errors.value = { recording: "Failed to start recording" }
-    await wakeLocker.value.release() // Release wake lock if recording fails
+    await wakeLocker.release() // Release wake lock if recording fails
   }
 }
 
 const stopRecording = async () => {
   isRecording.value = false
-  const file = audioRecorder.value.stopRecording()
-  audioFile.value = file
-
   try {
-    const response = await managedApi.restAiAudioController.audioToText({
-      previousNoteDetails: "Lets start",
-      uploadAudioFile: audioFile.value,
-    })
-    storageAccessor
-      .storedApi()
-      .appendDetails(note.id, response?.completionMarkdownFromAudio)
-  } catch (error) {
-    errors.value = error as Record<string, string | undefined>
+    audioRecorder.stopRecording()
   } finally {
-    await wakeLocker.value.release() // Release wake lock when recording stops
+    await wakeLocker.release() // Release wake lock when recording stops
   }
 }
 
@@ -116,7 +119,7 @@ const closeDialog = () => {
 }
 
 onUnmounted(() => {
-  wakeLocker.value.release() // Ensure wake lock is released when component is unmounted
+  wakeLocker.release() // Ensure wake lock is released when component is unmounted
 })
 </script>
 
diff --git a/frontend/src/components/notes/core/NoteCoreToolbar.vue b/frontend/src/components/notes/core/NoteCoreToolbar.vue
index eed7bb12d..0a0a0c4d8 100644
--- a/frontend/src/components/notes/core/NoteCoreToolbar.vue
+++ b/frontend/src/components/notes/core/NoteCoreToolbar.vue
@@ -118,7 +118,7 @@
         </template>
       </PopButton>
 
-      <button class="btn" title="Upload audio" v-if="!audioTools" @click="$emit('show-audio-tools')">
+      <button class="btn" title="Audio tools" v-if="!audioTools" @click="$emit('show-audio-tools')">
         <SvgResume />
       </button>
     </div>
diff --git a/frontend/src/models/recording.ts b/frontend/src/models/recording.ts
index ff7102700..841de567f 100644
--- a/frontend/src/models/recording.ts
+++ b/frontend/src/models/recording.ts
@@ -2,7 +2,8 @@ import { getAudioRecordingWorkerURL } from "./audio/recorderWorklet"
 
 export interface AudioRecorder {
   startRecording: () => Promise<void>
-  stopRecording: () => File
+  stopRecording: () => void
+  setProcessor: (callback: (file: File) => void) => void
   getAudioData: () => Float32Array[]
 }
 
@@ -12,6 +13,7 @@ export const createAudioRecorder = (): AudioRecorder => {
   let audioInput: MediaStreamAudioSourceNode | null = null
   let workletNode: AudioWorkletNode | null = null
   let audioData: Float32Array[] = []
+  let processorCallback: ((file: File) => void) | null = null
 
   const audioRecorder: AudioRecorder = {
     startRecording: async function (): Promise<void> {
@@ -45,7 +47,7 @@ export const createAudioRecorder = (): AudioRecorder => {
       }
     },
 
-    stopRecording: function (): File {
+    stopRecording: function (): void {
       if (workletNode) {
         workletNode.disconnect()
       }
@@ -62,8 +64,17 @@ export const createAudioRecorder = (): AudioRecorder => {
 
       // Reset the audioData
       audioData = []
-      return file
+
+      // Call the callback with the file if it's set
+      if (processorCallback) {
+        processorCallback(file)
+      }
     },
+
+    setProcessor: function (callback: (file: File) => void): void {
+      processorCallback = callback
+    },
+
     getAudioData: function (): Float32Array[] {
       return audioData
     },