feat: add download button for voice search page

darwintree · Feb 21, 2024 · e2928be · e2928be
1 parent 538a71e
commit e2928be
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 2024/02/22
+
+* feat: add download button for voice search page
+
 ## 2024/02/21
 
 * feat: support anim filter for voice search

diff --git a/src/components/search/VoiceSearchPanel.vue b/src/components/search/VoiceSearchPanel.vue
@@ -166,6 +166,8 @@ const createColumns = (): any => {
         return h(AudioLabel, {
           ...extractAudioLabelPropFromVoiceId(row._id),
           extraText: row.speaker,
+          displayDownload: true,
+          audioText: row.text,
         })
       },
       align: 'center',

diff --git a/src/components/translate/AudioLabel.vue b/src/components/translate/AudioLabel.vue
@@ -1,18 +1,28 @@
 <template>
   <label
     v-if="hasAudio"
-    class="audio-button"
+    class="audio-button clickable"
     :title="audioTitle"
     @click="playAudio"
     >{{ extraText }} {{ audioIcon }}</label
   >
+
+  <n-icon v-if="displayDownload" class="clickable" @click="downloadAudio">
+    <Download />
+  </n-icon>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { NIcon } from 'naive-ui'
+import { Download } from '@vicons/carbon'
 import { getAudioPath } from '../../helper/path'
 
 // define the props for the component
 export default defineComponent({
+  components: {
+    NIcon,
+    Download,
+  },
   props: {
     // the audio file URL
     id: {
@@ -23,12 +33,24 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    // the label text to display next to the audio button
     extraText: {
       type: String,
       required: false,
       default: '',
     },
-    // the label text to display next to the audio button
+    // use to change downlownded filename
+    // not in use at present
+    audioText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    displayDownload: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -54,6 +76,9 @@ export default defineComponent({
     },
   },
   methods: {
+    getBaseName(filePath: string) {
+      return filePath.split('/').pop()
+    },
     // define the "playAudio" function to play the audio file
     playAudio() {
       // create a new Audio object with the audio URL
@@ -72,16 +97,36 @@ export default defineComponent({
       // update the audio button title to indicate that the audio is playing
       this.isPlaying = true
     },
+    downloadAudio() {
+      // download the audio file
+      window.open(this.audioUrl, '_blank')
+      // const request = new XMLHttpRequest()
+      // request.open('GET', this.audioUrl, true)
+      // request.responseType = 'blob'
+      // request.onload = (e) => {
+      //   if (request.readyState === 4 && request.status === 200) {
+      //     const blob = new Blob([request.response], { type: 'audio/wav' })
+      //     saveAs(
+      //       blob,
+      //       this.audioText ? this.audioText : this.getBaseName(this.audioUrl)
+      //     )
+      //   }
+      // }
+      // request.send()
+    },
   },
 })
 </script>
 <style scoped>
 /* define the layout and styling for the "AudioLabel" component */
 
+.clickable {
+  cursor: pointer;
+}
+
 .audio-button {
   background: transparent;
   border: none;
-  cursor: pointer;
   font-size: 1em;
 }
 </style>