Create component for add a record audio as a document

assets/vue/components/basecomponents/ChamiloIcons.js

@@ -16,6 +16,7 @@ export const chamiloIconToClass = {
     "record-generic": "mdi mdi-microphone",
     "record-add": "mdi mdi-microphone-plus",
     "download": "mdi mdi-download-box",
+    "restart": "mdi mdi-restart",
     "hammer-wrench": "",
     "account-multiple-plus": "",
     "cursor-move": "",
@@ -46,7 +47,6 @@ export const chamiloIconToClass = {
     "text-box-plus": "",
     "rocket-launch": "",
     "content-save": "",
-    "send": "",
     "dots-vertical": "",
     "information": "mdi mdi-information",
     "account-key": "",
@@ -72,6 +72,7 @@ export const chamiloIconToClass = {
     "multiple-marked": "mdi mdi-checkbox-multiple-marked-outline",
     "email-unread": "mdi mdi-email-mark-as-unread",
     "inbox": "mdi mdi-inbox",
+    "send": "mdi mdi-send",
     "sent": "mdi mdi-send-check",
     "tag-outline": "mdi mdi-tag-outline",
     "microphone": "mdi mdi-microphone",

assets/vue/components/documents/DocumentAudioRecorder.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="flex flex-col flex-wrap justify-center content-center text-center">
+    <BaseInputText
+      v-if="audio"
+      v-model="recordName"
+      :label="t('Enter filename here')"
+      :help-text="recordError"
+      :is-invalid="recordError !== ''"
+      class="max-w-full self-center mb-4 w-60"
+    />
+
+    <audio v-if="audio" class="max-w-full self-center mb-4" controls>
+      <source :src="window.URL.createObjectURL(audio)"/>
+    </audio>
+
+    <AudioRecorder
+      ref="audioRecorder"
+      :multiple="false"
+      :show-buttons="showAudioRecorderButtons"
+      :show-recorded-audios="false"
+      class="self-center mr-2 mb-4"
+      @recorded-audio="processAudio($event)"
+    />
+
+    <div v-if="audio" class="flex">
+      <BaseButton
+        :label="t('Start recording')"
+        type="black"
+        icon="restart"
+        class="mr-2"
+        @click="recordAudio"
+      />
+      <BaseButton
+        :label="t('Save recorded audio')"
+        type="secondary"
+        icon="send"
+        class="mr-2"
+        @click="saveAudio"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref} from "vue";
+import { useStore } from "vuex";
+import {useI18n} from "vue-i18n";
+import BaseInputText from "../basecomponents/BaseInputText.vue";
+import AudioRecorder from "../AudioRecorder.vue";
+import BaseButton from "../basecomponents/BaseButton.vue";
+import {RESOURCE_LINK_PUBLISHED} from "../resource_links/visibility";
+import {useCidReq} from "../../composables/cidReq";
+
+const {t} = useI18n()
+const queryParams = useCidReq()
+const store = useStore()
+
+const props = defineProps({
+  parentResourceNodeId: {
+    type: Object,
+    required: true,
+  }
+})
+
+const emit = defineEmits(['document-saved', 'document-not-saved'])
+
+const recordName = ref('')
+const recordError = ref('')
+const audioRecorder = ref(null)
+const showAudioRecorderButtons = ref(true)
+const audio = ref()
+
+const processAudio = (recordedAudio) => {
+  audio.value = recordedAudio
+  showAudioRecorderButtons.value = false
+}
+
+const recordAudio = () => {
+  recordError.value = ''
+  audio.value = null
+  showAudioRecorderButtons.value = true
+  audioRecorder.value.record()
+}
+
+const saveAudio = () => {
+  if (recordName.value === '') {
+    recordError.value = t('It is necessary a file name before save recorded audio')
+    return
+  }
+
+  let fileName = recordName.value + '.wav';
+  let uploadFile = new File([audio.value], fileName)
+  let data = {
+    title: fileName,
+    filetype: 'file',
+    uploadFile: uploadFile,
+    parentResourceNodeId: props.parentResourceNodeId,
+    resourceLinkList: JSON.stringify([{
+      ...queryParams,
+      visibility: RESOURCE_LINK_PUBLISHED,
+    }]),
+  }
+  store
+    .dispatch("documents/createWithFormData", data)
+    .then(() => emit('document-saved'))
+    .catch((error) => emit('document-not-saved', error))
+}
+</script>

assets/vue/views/documents/DocumentsList.vue

@@ -23,11 +23,11 @@
       icon="drawing"
     />
     <BaseButton
-      :disabled="true"
       :label="t('Record audio')"
       class="mr-2 mb-2"
       type="black"
       icon="record-add"
+      @click="showRecordAudioDialog"
     />
     <BaseButton
       :label="t('Upload')"
@@ -268,6 +268,18 @@
       :data="usageData"
     />
   </BaseDialog>
+
+  <BaseDialog
+    v-model:is-visible="isRecordAudioDialogVisible"
+    :title="t('Record audio')"
+    header-icon="record-add"
+  >
+    <DocumentAudioRecorder
+      :parent-resource-node-id="route.params.node"
+      @document-saved="recordedAudioSaved"
+      @document-not-saved="recordedAudioNotSaved"
+    />
+  </BaseDialog>
 </template>
 
 <script setup>
@@ -290,6 +302,7 @@ import BaseDialogConfirmCancel from "../../components/basecomponents/BaseDialogC
 import {useFileUtils} from "../../composables/fileUtils";
 import BaseDialog from "../../components/basecomponents/BaseDialog.vue";
 import BaseChart from "../../components/basecomponents/BaseChart.vue";
+import DocumentAudioRecorder from "../../components/documents/DocumentAudioRecorder.vue";
 
 const store = useStore()
 const route = useRoute()
@@ -318,6 +331,7 @@ const isNewFolderDialogVisible = ref(false)
 const isDeleteItemDialogVisible = ref(false)
 const isDeleteMultipleDialogVisible = ref(false)
 const isFileUsageDialogVisible = ref(false)
+const isRecordAudioDialogVisible = ref(false)
 
 const submitted = ref(false)
 
@@ -584,4 +598,18 @@ function showUsageDialog() {
   }
   isFileUsageDialogVisible.value = true
 }
+
+function showRecordAudioDialog() {
+  isRecordAudioDialogVisible.value = true
+}
+
+function recordedAudioSaved() {
+  // TODO show a notification about upload success
+  isRecordAudioDialogVisible.value = false
+  onUpdateOptions(options.value)
+}
+
+function recordedAudioNotSaved() {
+  // TODO show a notification about upload failure
+}
 </script>