From a15a8650ded7b99110988b92387e16ad7f458b1d Mon Sep 17 00:00:00 2001 From: Enrique Hernandez Date: Mon, 15 Feb 2021 08:56:19 -0600 Subject: [PATCH] cleanup ipc + input controller --- src/background/session.ts | 28 ++++----- src/components/messageView/index.vue | 4 +- .../messageView/viewDetails/visualizer.ts | 9 +-- src/components/taInput/inputController.ts | 61 ++++++++++--------- src/modules/ipc.ts | 56 ++++++----------- src/modules/socket.ts | 17 ------ src/preload.ts | 8 +-- 7 files changed, 75 insertions(+), 108 deletions(-) delete mode 100644 src/modules/socket.ts diff --git a/src/background/session.ts b/src/background/session.ts index 36108c0..bb14979 100644 --- a/src/background/session.ts +++ b/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 => { return new Promise((resolve, reject) => { @@ -109,6 +99,16 @@ const asyncSend = (_event?, payload: TextMessage | Buffer): Promise { + + 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', () => { diff --git a/src/components/messageView/index.vue b/src/components/messageView/index.vue index 56f04f0..a93a69b 100644 --- a/src/components/messageView/index.vue +++ b/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) => { diff --git a/src/components/messageView/viewDetails/visualizer.ts b/src/components/messageView/viewDetails/visualizer.ts index f99ddf4..33024da 100644 --- a/src/components/messageView/viewDetails/visualizer.ts +++ b/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; diff --git a/src/components/taInput/inputController.ts b/src/components/taInput/inputController.ts index 8284999..f3c4ca9 100644 --- a/src/components/taInput/inputController.ts +++ b/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, diff --git a/src/modules/ipc.ts b/src/modules/ipc.ts index dbf191b..3018767 100644 --- a/src/modules/ipc.ts +++ b/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; - }) - } - - const send = (payload?: Record, 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); - }; + // return window.ipcRenderer.invoke(endpoint, payload).then(res => { + // data.value = res; + // }).catch(e => { + // error.value = e; + // throw e; + // }) + } - const post = (payload?: Record) => { + const post = (payload: any) => { window.postMessage({ - myTypeField: endpoint, - message: payload + endpoint: endpoint, + content: payload }, '*') }; return { - loading, data, error, errorMessage, - send, - invoke + invoke, + post } } diff --git a/src/modules/socket.ts b/src/modules/socket.ts deleted file mode 100644 index 07f3dbb..0000000 --- a/src/modules/socket.ts +++ /dev/null @@ -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); -} - diff --git a/src/preload.ts b/src/preload.ts index ce5f0bf..72760c0 100644 --- a/src/preload.ts +++ b/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); } }); -- 2.43.0