trigger inputItem audio animation on stream record

src/components/inputItem.vue

@@ -1,6 +1,7 @@
 <template>
   <div id=inputItem
-    class="input-item playing"
+    class="input-item"
+    :class="{ playing: isRecording }"
     :style="{ top: `${elementY}px`, left: `${elementX}px` }">
     <span class="play"></span>
     <span class="pause"></span>
@@ -9,18 +10,31 @@
 
 <script lang="ts">
 
-import { defineComponent } from "vue";
+import { defineComponent, onMounted, onUnmounted, ref } from "vue";
 import draggify from '@/modules/draggify';
+import useMitt from "@/modules/mitt";
 
 export default defineComponent({
   name: "InputItem",
   setup() {
 
-    const { elementX, elementY } = draggify({ elementId: 'inputItem'})
+    const isRecording = ref(false);
+    
+    const { emitter } = useMitt();
+    const { elementX, elementY } = draggify({ elementId: 'inputItem'});
+
+    onMounted(() => {
+      emitter.on('input-audio-record', (record) => isRecording.value = record);
+    })
+
+    onUnmounted(() => {
+      emitter.all.clear();
+    })
 
     return {
       elementX,
-      elementY
+      elementY,
+      isRecording
     }
   }
 

src/components/taInput/inputController.ts

@@ -37,6 +37,13 @@ export default function useInputController() {
         if (input) post('message', message);
     }
 
+    function recordStream(record: boolean) {
+       // tell ipcMain to pause or resume stream recording.
+       post('update-recorder', record);
+       // toggle inputItem audio animation.
+       emitter.emit('input-audio-record', record);
+    }
+
     const {
         visualizeStreamAsPaths,
         expandBubble
@@ -54,7 +61,7 @@ export default function useInputController() {
     function keyupHandler(e: any) {
         if (e.key === " " && visualizeStream.value) {
 
-            post('update-recorder', false);
+            recordStream(false)
             visualizeStream.value = false;
             paths.value = []
             audioBubbleWidth.value = 10;
@@ -84,7 +91,7 @@ export default function useInputController() {
         }
         if (input === " " && visualizeStream.value === false) {
             visualizeStream.value = true;
-            post('update-recorder', true);
+            recordStream(true)
             expandBubble(audioBubbleWidth);
             visualizeStreamAsPaths(stream, paths, audioBubbleWidth);
             return;