mic-tester: use toasting service from naive-ui, and also lint it all up

src/tools/mic-tester/mic-tester.service.ts

@@ -1,6 +1,7 @@
-import { ref, onBeforeUnmount } from 'vue';
+import { onBeforeUnmount, ref } from 'vue';
 
-export function useMicrophoneService() {
+// messageSender has to support error(text) method for notifying the user of errors
+export function useMicrophoneService(messageSender) {
   let audioContext: AudioContext | null = null;
   let delayNode: DelayNode | null = null;
   let sourceNode: MediaStreamAudioSourceNode | null = null;
@@ -10,6 +11,28 @@ export function useMicrophoneService() {
   const isPlaying = ref(false);
   const loudnessLevel = ref(0); // Observable for loudness
 
+  // Measure loudness and update loudness bar
+  function measureLoudness() {
+    const dataArray = new Uint8Array(analyserNode!.frequencyBinCount);
+
+    const updateLoudness = () => {
+      analyserNode!.getByteFrequencyData(dataArray);
+
+      // Calculate average loudness
+      let sum = 0;
+      dataArray.forEach(value => sum += value);
+      const average = sum / dataArray.length;
+
+      // Update the observable loudness level
+      loudnessLevel.value = average;
+
+      if (isPlaying.value) {
+        requestAnimationFrame(updateLoudness);
+      }
+    };
+    updateLoudness();
+  };
+
   const startMicReplay = async () => {
     if (!audioContext) {
       audioContext = new (window.AudioContext || window.webkitAudioContext)();
@@ -17,9 +40,10 @@ export function useMicrophoneService() {
 
     try {
       stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-        } catch (err) {
+    }
+    catch (err) {
       console.error('Microphone access denied:', err);
-          alert('Microphone access denied (the error is also in the console):', err);
+      messageSender.error('Microphone access denied (the error is also in the console):', err);
       return;
     }
 
@@ -39,7 +63,7 @@ export function useMicrophoneService() {
     measureLoudness();
   };
 
-  const stopMicReplay = () => {
+  function stopMicReplay() {
     if (audioContext && stream) {
       const tracks = stream.getTracks();
       tracks.forEach(track => track.stop());
@@ -50,29 +74,6 @@ export function useMicrophoneService() {
     }
   };
 
-  // Measure loudness and update loudness bar
-  const measureLoudness = () => {
-    const dataArray = new Uint8Array(analyserNode!.frequencyBinCount);
-
-    const updateLoudness = () => {
-      analyserNode!.getByteFrequencyData(dataArray);
-
-      // Calculate average loudness
-      let sum = 0;
-      dataArray.forEach(value => sum += value);
-      const average = sum / dataArray.length;
-
-      // Update the observable loudness level
-      loudnessLevel.value = average;
-
-      if (isPlaying.value) {
-        requestAnimationFrame(updateLoudness);
-      }
-    };
-
-    updateLoudness();
-  };
-
   // Cleanup on service destruction
   onBeforeUnmount(() => {
     stopMicReplay();
@@ -82,6 +83,6 @@ export function useMicrophoneService() {
     startMicReplay,
     stopMicReplay,
     loudnessLevel,
-    isPlaying
+    isPlaying,
   };
 }

src/tools/mic-tester/mic-tester.vue

@@ -1,23 +1,29 @@
 <script setup lang="ts">
-import { useMicrophoneService } from './mic-tester.service';
 import { useI18n } from 'vue-i18n';
+import { useMessage } from 'naive-ui';
+import { useMicrophoneService } from './mic-tester.service';
+
+const message = useMessage();
 
 const { t } = useI18n();
-const { startMicReplay, stopMicReplay, loudnessLevel, isPlaying } = useMicrophoneService();
+const { startMicReplay, stopMicReplay, loudnessLevel, isPlaying } = useMicrophoneService(message);
 </script>
 
 <template>
   <div>
     <c-card>
       <div class="control-buttons">
-        <c-button @click="startMicReplay" :disabled="isPlaying">{{ t('tools.mic-tester.start-button-text') }}</c-button>
+        <c-button :disabled="isPlaying" @click="startMicReplay">
-        <c-button @click="stopMicReplay" :disabled="!isPlaying">{{ t('tools.mic-tester.stop-button-text') }}</c-button>
+          {{ t('tools.mic-tester.start-button-text') }}
+        </c-button>
+        <c-button :disabled="!isPlaying" @click="stopMicReplay">
+          {{ t('tools.mic-tester.stop-button-text') }}
+        </c-button>
       </div>
 
       <!-- Loudness Meter -->
       <div id="loudnessMeter">
-          <div id="loudnessBar" :style="{ width: loudnessLevel + '%' }">
+        <div id="loudnessBar" :style="{ width: `${loudnessLevel}%` }" />
-        </div>
       </div>
     </c-card>
   </div>