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,48 +11,8 @@ export function useMicrophoneService() {
   const isPlaying = ref(false);
   const loudnessLevel = ref(0); // Observable for loudness
 
-  const startMicReplay = async () => {
-    if (!audioContext) {
-      audioContext = new (window.AudioContext || window.webkitAudioContext)();
-    }
-
-        try {
-          stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-        } catch (err) {
-          console.error('Microphone access denied:', err);
-          alert('Microphone access denied (the error is also in the console):', err);
-          return;
-        }
-
-        sourceNode = audioContext.createMediaStreamSource(stream);
-        delayNode = audioContext.createDelay(1.0);
-        delayNode.delayTime.value = 1.0;
-
-        analyserNode = audioContext.createAnalyser();
-        analyserNode.fftSize = 256;
-
-        // Connect nodes: mic -> delay -> speakers
-        sourceNode.connect(delayNode);
-        delayNode.connect(audioContext.destination);
-        sourceNode.connect(analyserNode);
-
-        isPlaying.value = true;
-        measureLoudness();
-  };
-
-  const stopMicReplay = () => {
-    if (audioContext && stream) {
-      const tracks = stream.getTracks();
-      tracks.forEach(track => track.stop());
-      audioContext.close();
-      audioContext = null;
-      isPlaying.value = false;
-      loudnessLevel.value = 0;
-    }
-  };
-
   // Measure loudness and update loudness bar
-  const measureLoudness = () => {
+  function measureLoudness() {
     const dataArray = new Uint8Array(analyserNode!.frequencyBinCount);
 
     const updateLoudness = () => {
@@ -69,10 +30,50 @@ export function useMicrophoneService() {
         requestAnimationFrame(updateLoudness);
       }
     };
-
     updateLoudness();
   };
 
+  const startMicReplay = async () => {
+    if (!audioContext) {
+      audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    }
+
+    try {
+      stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    }
+    catch (err) {
+      console.error('Microphone access denied:', err);
+      messageSender.error('Microphone access denied (the error is also in the console):', err);
+      return;
+    }
+
+    sourceNode = audioContext.createMediaStreamSource(stream);
+    delayNode = audioContext.createDelay(1.0);
+    delayNode.delayTime.value = 1.0;
+
+    analyserNode = audioContext.createAnalyser();
+    analyserNode.fftSize = 256;
+
+    // Connect nodes: mic -> delay -> speakers
+    sourceNode.connect(delayNode);
+    delayNode.connect(audioContext.destination);
+    sourceNode.connect(analyserNode);
+
+    isPlaying.value = true;
+    measureLoudness();
+  };
+
+  function stopMicReplay() {
+    if (audioContext && stream) {
+      const tracks = stream.getTracks();
+      tracks.forEach(track => track.stop());
+      audioContext.close();
+      audioContext = null;
+      isPlaying.value = false;
+      loudnessLevel.value = 0;
+    }
+  };
+
   // 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="loudnessMeter">
-          <div id="loudnessBar" :style="{ width: loudnessLevel + '%' }">
+        <div id="loudnessBar" :style="{ width: `${loudnessLevel}%` }" />
-        </div>
       </div>
     </c-card>
   </div>