From de6c3b23bca787987b30b3b03bd309481d4f467e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Gayoso=20Gonz=C3=A1lez?= <danigayosog@gmail.com>
Date: Fri, 2 Jun 2023 10:42:46 +0200
Subject: [PATCH] Improve browser check of microphone availability

* Display a nice message to the user if browser does not support
microphone. Show error in devlopment console as well for develpers.
---
 assets/vue/components/AudioRecorder.vue | 57 ++++++++++++++++---------
 1 file changed, 37 insertions(+), 20 deletions(-)

diff --git a/assets/vue/components/AudioRecorder.vue b/assets/vue/components/AudioRecorder.vue
index 11cc6464c9..a36bbaac9f 100644
--- a/assets/vue/components/AudioRecorder.vue
+++ b/assets/vue/components/AudioRecorder.vue
@@ -1,29 +1,38 @@
 <template>
-  <BaseButton v-if="recorderState.isRecording" :label="t('Stop recording')" icon="stop" type="danger" @click="stop" />
-  <BaseButton v-else :label="t('Start recording')" icon="microphone" type="primary" @click="record" />
-
-  <div v-for="(audio, index) in recorderState.audioList" :key="index" class="py-2">
-    <audio class="max-w-full" controls>
-      <source :src="window.URL.createObjectURL(audio)" />
-    </audio>
-
-    <BaseButton
-      :label="$t('Attach')"
-      class="my-1"
-      icon="attachment"
-      size="small"
-      type="success"
-      @click="attachAudio(audio)"
-    />
+  <div v-if="isMicrophoneSupported">
+    <BaseButton v-if="recorderState.isRecording" :label="t('Stop recording')" icon="stop" type="danger" @click="stop"/>
+    <BaseButton v-else :label="t('Start recording')" icon="microphone" type="primary" @click="record"/>
+
+    <div v-for="(audio, index) in recorderState.audioList" :key="index" class="py-2">
+      <audio class="max-w-full" controls>
+        <source :src="window.URL.createObjectURL(audio)"/>
+      </audio>
+
+      <BaseButton
+        :label="$t('Attach')"
+        class="my-1"
+        icon="attachment"
+        size="small"
+        type="success"
+        @click="attachAudio(audio)"
+      />
+    </div>
+  </div>
+  <div v-else>
+      <p>
+        {{ t('We\'re sorry, your browser does not support using a microphone') }}
+      </p>
   </div>
 </template>
 
 <script setup>
 import BaseButton from "./basecomponents/BaseButton.vue";
-import { reactive } from "vue";
+import { computed, reactive } from "vue";
 import { RecordRTCPromisesHandler, StereoAudioRecorder } from "recordrtc";
 import { useI18n } from "vue-i18n";
 
+const { t } = useI18n();
+
 const props = defineProps({
   multiple: {
     type: Boolean,
@@ -34,17 +43,25 @@ const props = defineProps({
 
 const emit = defineEmits(["attach-audio"]);
 
-const { t } = useI18n();
-
 const recorderState = reactive({
   isRecording: false,
   audioList: [],
 });
 
+
+const isMicrophoneSupported = computed(() => {
+  let isMediaDevicesSupported = navigator.mediaDevices && navigator.mediaDevices.getUserMedia
+  if (!isMediaDevicesSupported) {
+    console.warn('Either your browser does not support microphone or your are serving your site from not secure ' +
+      'context, check https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia for more information')
+  }
+  return isMediaDevicesSupported
+})
+
 let recorder = null;
 
 async function record() {
-  if (!navigator.mediaDevices.getUserMedia) {
+  if (!isMicrophoneSupported.value) {
     return;
   }