cleanup ipc + input controller

src/components/messageView/index.vue

@@ -41,12 +41,12 @@ export default defineComponent({
   setup() {
     const renderArr: Message[] = reactive([]);
     const { emitter } = useMitt();
-    const { data, invoke } = useIpc("async-message");
+    const { data, invoke } = useIpc("message");
 
     onMounted(() => {
       window.ipcRenderer.on("render-message", (event, payload) => {
         const message = payload.message;
-        if (message) renderArr.push(message);
+        if (message.content) renderArr.push(message);
       });
 
       emitter.on("animateSend", async (message) => {

src/components/messageView/viewDetails/visualizer.ts

@@ -1,11 +1,12 @@
-import { VueTransitionCallback } from '@/types/vue3/vueTransitionCallback/index';
-import useMessageViewAnims from "./anime";
-import useOffsetCalculator from './offsetCalculator';
-
 /**
  * handles visualization of view messages through
  * vue transition callbacks and anime-js animations
  */
+
+import { VueTransitionCallback } from '@/types/vue3/vueTransitionCallback/index';
+import useMessageViewAnims from "./anime";
+import useOffsetCalculator from './offsetCalculator';
+
 export default function useMessageView(): {
     beforeEnter: VueTransitionCallback;
     enter: VueTransitionCallback;

src/components/taInput/inputController.ts

@@ -1,23 +1,26 @@
-import { ref, watch, onUnmounted, onMounted, inject } from "vue";
-import useKeyDownHandler from "@/modules/keyDownHandler/useKeyDownHandler";
-import useMediaStream from "@/modules/mediaStream";
-import useAudioVisualizer from './audioDetails/audioVisualizer';
-import useTextVisualizer from './textDetails/textVisualizer';
-
 /*
 * Controls which input to visualize
 * Will visualize text input by default as user types or
 * if user holds space bar down, input audio stream
 * will be visualized & recorded
 */
-// NOTE: input params should probably be input and MediaStream
-// TODO: visualize audio stream from nodeJS background process
+
+import { ref, watch, onUnmounted, onMounted } from "vue";
+import useKeyDownHandler from "@/modules/keyDownHandler/useKeyDownHandler";
+import useMediaStream from "@/modules/mediaStream";
+import useAudioVisualizer from './audioDetails/audioVisualizer';
+import useTextVisualizer from './textDetails/textVisualizer';
+import useMitt from "@/modules/mitt";
+import { useIpc } from '@/modules/ipc';
+
+let stream: MediaStream;
+
 export default function useInputController() {
     const visualizeStream = ref(false);
     const paths = ref([]);
     const audioBubbleWidth = ref(10);
-    let stream: MediaStream;
-    const emitter: any = inject("mitt");
+    const { emitter } = useMitt();
+    const { post } = useIpc('update-recorder');
 
     // send message on ENTER
     const enterCallback = (input: string) => {
@@ -34,14 +37,15 @@ export default function useInputController() {
     const { textInputXoffset, renderTextInput } = useTextVisualizer(input);
 
     // stops stream recording on space key up
-    function keyupHandler(_e) {
+    function keyupHandler(e: any) {
         if (e.key === " " && visualizeStream.value) {
             console.log("stop recording");
 
-            window.postMessage({
-                myTypeField: 'update-recorder',
-                record: false
-            }, '*')
+            post(false);
+            // window.postMessage({
+            //     myTypeField: 'update-recorder',
+            //     record: false
+            // }, '*')
 
             visualizeStream.value = false;
             paths.value = []
@@ -50,15 +54,18 @@ export default function useInputController() {
         }
     }
 
-    // add window event keyboard listeners
-    window.addEventListener("keydown", keyDownHandler);
-    window.addEventListener('keyup', keyupHandler);
-
-    // get stream & initialize recorder object on mount
     onMounted(async () => {
         stream = await useMediaStream({ audio: true });
+        // add window event keyboard listeners
+        window.addEventListener("keydown", keyDownHandler);
+        window.addEventListener('keyup', keyupHandler);
     })
 
+    onUnmounted(() => {
+        window.removeEventListener("keydown", keyDownHandler);
+        window.removeEventListener("keyup", keyupHandler);
+    });
+
     // determine whether to render text or audio based one the keyboard input
     watch(input, (input, prevInput) => {
         if (prevInput !== "" || prevInput.length > 0) {
@@ -71,10 +78,11 @@ export default function useInputController() {
             console.log("record MediaStream");
             visualizeStream.value = true;
 
-            window.postMessage({
-                myTypeField: 'update-recorder',
-                record: true
-            }, '*')
+            post(true);
+            // window.postMessage({
+            //     myTypeField: 'update-recorder',
+            //     record: true
+            // }, '*')
 
             expandBubble(audioBubbleWidth);
             visualizeStreamAsPaths(stream, paths, audioBubbleWidth);
@@ -83,11 +91,6 @@ export default function useInputController() {
         renderTextInput();
     });
 
-    // remove Event Listeners on component unMount
-    onUnmounted(() => {
-        window.removeEventListener("keydown", keyDownHandler);
-        window.removeEventListener("keyup", keyupHandler);
-    });
 
     return {
         input,