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
});
};
-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) => {
}
+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 = () => {
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', () => {
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) => {
-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;
-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) => {
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 = []
}
}
- // 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) {
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);
renderTextInput();
});
- // remove Event Listeners on component unMount
- onUnmounted(() => {
- window.removeEventListener("keydown", keyDownHandler);
- window.removeEventListener("keyup", keyupHandler);
- });
return {
input,
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);
}
})
- 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<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);
- };
+ // return window.ipcRenderer.invoke(endpoint, payload).then(res => {
+ // data.value = res;
+ // }).catch(e => {
+ // error.value = e;
+ // throw e;
+ // })
+ }
- 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
}
}
+++ /dev/null
-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);
-}
-
// 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);
}
});
projects / mime-chat / commitdiff