cleanup ipc + input controller

src/background/session.ts

@@ -68,8 +68,8 @@ const receiveMessage = (message: string): void => {
     const parsed: RenderMessage = JSON.parse(message);
     if (parsed.modifier === "sf") {
         backgroundMitt.emit('message-res', parsed);
-    } else if  (parsed.modifier === "ai"){
-         backgroundMitt.emit('ipc-renderer', {
+    } else if (parsed.modifier === "ai") {
+        backgroundMitt.emit('ipc-renderer', {
             endpoint: 'render-message',
             message: parsed
         });
@@ -77,16 +77,6 @@ const receiveMessage = (message: string): void => {
 
 };
 
-export const sendAudio = async (content: Buffer) => {
-
-    const res = await asyncSend(null, content);
-
-     backgroundMitt.emit('ipc-renderer', {
-        endpoint: 'render-message',
-        message: res
-    });
-}
-
 const asyncSend = (_event?, payload: TextMessage | Buffer): Promise<RenderMessage> => {
     return new Promise((resolve, reject) => {
 
@@ -109,6 +99,16 @@ const asyncSend = (_event?, payload: TextMessage | Buffer): Promise<RenderMessag
 
 }
 
+export const sendAudio = async (content: Buffer) => {
+
+    const res = await asyncSend(null, content);
+
+    backgroundMitt.emit('ipc-renderer', {
+        endpoint: 'render-message',
+        message: res
+    });
+}
+
 // Run every time we want to connect to backend.
 export const initSession = () => {
 
@@ -129,8 +129,8 @@ export const initSession = () => {
     ipcMain.handle('auth-session', authSession);
 
     // handle renderer send-message event
-    ipcMain.removeHandler('async-message'); // avoid setting duplicate handlers
-    ipcMain.handle('async-message', asyncSend);
+    ipcMain.removeHandler('message'); // avoid setting duplicate handlers
+    ipcMain.handle('message', asyncSend);
 
     // Connect to the backend.
     socket.on('open', () => {

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,

src/modules/ipc.ts

@@ -2,9 +2,7 @@ import { ref, computed } from 'vue'
 
 export const useIpc = (endpoint: string) => {
     const data = ref();
-    const loading = ref(false);
     const error = ref();
-    const listener = ref(false);
 
     const errorMessage = computed(() => {
         console.log('ERROR', error.value);
@@ -13,54 +11,36 @@ export const useIpc = (endpoint: string) => {
         }
     })
 
-    const invoke = (payload: any) => {
-        loading.value = true;
+    const invoke = async (payload: any) => {
         error.value = undefined;
-
-        return window.ipcRenderer.invoke(endpoint, payload).then(res => {
-            data.value = res;
-        }).catch(e => {
+        try {
+            const res = await window.ipcRenderer.invoke(endpoint, payload);
+            return data.value = res;
+        } catch (e) {
             error.value = e;
             throw e;
-        }).finally(() => {
-            loading.value = false;
-        })
+        }
+
+        // return window.ipcRenderer.invoke(endpoint, payload).then(res => {
+        //     data.value = res;
+        // }).catch(e => {
+        //     error.value = e;
+        //     throw e;
+        // })
     }
 
-    const send = (payload?: Record<string, any>, callback?: (arg: any) => void) => {
-        loading.value = true;
-        error.value = undefined;
-
-        window.ipcRenderer.on(endpoint + '-reply', (event: any, arg: any | Error) => {
-            if (arg instanceof Error) {
-                error.value = arg;
-                throw arg;
-            } else {
-                data.value = arg;
-                loading.value = false;
-            }
-        });
-        window.ipcRenderer.send(endpoint, payload);
-    };
-
-    const onEvent = (callback: (event: any, arg: any) => void) => {
-        listener.value = true;
-        window.ipcRenderer.on(endpoint, callback);
-    };
-
-    const post = (payload?: Record<string, any>) => {
+    const post = (payload: any) => {
         window.postMessage({
-            myTypeField: endpoint,
-            message: payload
+            endpoint: endpoint,
+            content: payload
         }, '*')
     };
 
     return {
-        loading,
         data,
         error,
         errorMessage,
-        send,
-        invoke
+        invoke,
+        post
     }
 }

src/modules/socket.ts

@@ -1,17 +0,0 @@
-interface SocketState {
-    connection: WebSocket | null;
-    auth: boolean;
-}
-
-// Create WebSocket connection.
-const socket = new WebSocket('ws://localhost:8080');
-
-// Connection opened
-socket.onopen = function (event) {
-    socket.send('Hello Server!');
-}
-
-socket.onmessage = function(event) {
-  console.debug("WebSocket message received:", event);
-}
-

src/preload.ts

@@ -17,12 +17,12 @@ process.once("loaded", () => {
     // do something with custom event
     const message = event.data;
 
-    if (message.myTypeField === "update-menu-bar") {
-      ipcRenderer.send("update-menu-bar", message);
+    if (message.endpoint === "update-menu-bar") {
+      ipcRenderer.send("update-menu-bar", message.content);
     }
 
-    if (message.myTypeField === "update-recorder") {
-      ipcRenderer.send("update-recorder", message.record);
+    if (message.endpoint === "update-recorder") {
+      ipcRenderer.send("update-recorder", message.content);
     }
 
   });