import { BrowserWindow, ipcMain } from "electron";
import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
import { backgroundMitt } from './emitter';
-import { sendMessage } from './session';
import { updateRecorder } from './audio';
import * as path from "path";
resizable: boolean;
}
-interface TextMessage {
- audio: 0;
- content: string;
-}
-
interface RenderMessage {
- content: string;
- context: string;
- subContext: string;
- modifiers: string;
- time: string;
- id: string;
+ content: string;
+ context: string;
+ subContext: string;
+ modifiers: string;
+ time: string;
+ id: string;
}
interface IpcRendererPayload {
- endpoint: string;
- message: RenderMessage | null;
+ endpoint: string;
+ message: RenderMessage | null;
}
let win: BrowserWindow | null;
-const handleMessage = (_event, arg: TextMessage | Buffer ) => {
- sendMessage(arg);
-}
-
const windowMount = (): void => {
backgroundMitt.emit('window-active', true);
- ipcMain.on('send-message', handleMessage);
ipcMain.on('update-recorder', updateRecorder);
}
const windowDismount = (): void => {
- win = null;
- backgroundMitt.emit('window-active', false);
- ipcMain.removeAllListeners('send-message');
- ipcMain.removeAllListeners('update-recorder');
+ win = null;
+ backgroundMitt.emit('window-active', false);
+ ipcMain.removeAllListeners('update-recorder');
}
backgroundMitt.on('ipc-renderer', (payload: IpcRendererPayload) => {
- if (win)
+ if (win)
win.webContents.send(payload.endpoint, {
message: payload.message
});
if (win) resolve();
- win= new BrowserWindow({
+ win = new BrowserWindow({
width: options.width,
height: options.height,
resizable: options.resizable,
win.webContents.on('did-finish-load', () => {
windowMount();
- if (win)resolve();
+ resolve();
});
});
+++ /dev/null
-<template>
- <svg
- id="messenger"
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- @click="emittMessage"
- >
- <MessageVisualizer />
- <TextAudioInput />
- </svg>
-</template>
-
-<script lang="ts">
-
-// child components
-import MessageVisualizer from "./messageVisualizer/index.vue";
-import TextAudioInput from "@/components/taInput/index.vue";
-
-// event emitter
-import { Mitt } from "@/types/mitt/index";
-
-import { defineComponent, ref, inject } from "vue";
-
-export default defineComponent({
-
- name: "Messenger",
- components: { MessageVisualizer, TextAudioInput },
-
- setup() {
- const count = ref(0);
-
- // imports mitt Emitter safely
- let emitter: Mitt;
- const emitterInject: Mitt | undefined = inject("mitt");
-
- if (emitterInject) {
- emitter = emitterInject;
- }
-
- // Render message when render-message event called.
- window.ipcRenderer.on("render-message", (event, payload) => {
- console.log(payload.message);
- emitter.emit("renderMessage", payload.message);
- });
-
- },
-});
-
-</script>
-
-<style lang="scss" scoped>
- #messenger {
- width: 350px;
- height: 500px;
- background-color: #e6e6e6;
- box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
- // border-radius: 20px;
- }
-</style>
+++ /dev/null
-<template>
- <svg
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- :viewBox="scrollView"
- >
- <g id="messageVisualizer" transform="translate(0, 5)">
- <g
- v-for="(item, index) in renderArr"
- :key="index"
- class="messageList"
- transform="translate(0, 25)"
- preserverAspectRatio="none"
- >
- <transition
- appear
- v-on:before-appear="beforeEnter"
- v-on:appear="enter"
- v-on:after-enter="afterEnter"
- >
- <MessageItem :item="item" :key="index" />
- </transition>
- </g>
- </g>
- </svg>
-</template>
-
-<script lang="ts">
-import useMessageVisualizer from "./viewDetails/visualizer";
-import useScrollView from "@/modules/scrollView";
-import MessageItem from "../messageBubble/index.vue";
-import { Message } from "@/types/message/index";
-import {onMounted, defineComponent, reactive, inject, ref, watch, onUnmounted } from "vue";
-import useMitt from '@/modules/mitt';
-import { useIpc } from '@/modules/ipc';
-
-export default defineComponent({
- name: "MessageVisualizer",
- components: { MessageItem },
- setup() {
- const renderArr: Message[] = reactive([]);
- const { emitter } = useMitt();
- const { data, invoke } = useIpc('async-message')
- const rendering = ref(false)
-
- onMounted(() => {
-
- emitter.on("renderMessage", (payload: Message | undefined) => {
- if (payload) renderArr.push(payload);
- });
-
- emitter.on("animateSend", async (message) => {
- rendering.value = true;
- try {
- await invoke(message);
- renderArr.push(data.value);
- } catch(e) {
- console.log('No response. Do not render.')
- }
- rendering.value = true;
- })
-
- })
-
- onUnmounted(() => {
- emitter.all.clear();
- })
-
- const { beforeEnter, enter, afterEnter } = useMessageVisualizer();
- const { scrollView } = useScrollView({
- targetId: "messageVisualizer",
- });
-
- return {
- renderArr,
- beforeEnter,
- enter,
- afterEnter,
- scrollView,
- };
- },
-});
-</script>
-
-<style lang="scss" scoped>
-svg {
- height: 1%;
- overflow: hidden;
-}
-#messageRenderer {
- margin: 0;
-}
-</style>
--- /dev/null
+<template>
+ <svg
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ :viewBox="scrollView"
+ >
+ <g id="messageView" transform="translate(0, 5)">
+ <g
+ v-for="(item, index) in renderArr"
+ :key="index"
+ class="messageList"
+ transform="translate(0, 25)"
+ preserverAspectRatio="none"
+ >
+ <transition
+ appear
+ v-on:before-appear="beforeEnter"
+ v-on:appear="enter"
+ v-on:after-enter="afterEnter"
+ >
+ <TextBubble :item="item" :key="index" />
+ </transition>
+ </g>
+ </g>
+ </svg>
+</template>
+
+<script lang="ts">
+import useMessageView from "./viewDetails/visualizer";
+import useScrollView from "@/modules/scrollView";
+import TextBubble from "@/components/textBubble/index.vue";
+import { Message } from "@/types/message/index";
+import { defineComponent, reactive, onMounted, onUnmounted } from "vue";
+import useMitt from "@/modules/mitt";
+import { useIpc } from "@/modules/ipc";
+
+export default defineComponent({
+ name: "MessageView",
+ components: { TextBubble },
+ setup() {
+ const renderArr: Message[] = reactive([]);
+ const { emitter } = useMitt();
+ const { data, invoke } = useIpc("async-message");
+
+ onMounted(() => {
+ window.ipcRenderer.on("render-message", (event, payload) => {
+ const message = payload.message;
+ if (message) renderArr.push(message);
+ });
+
+ emitter.on("animateSend", async (message) => {
+ try {
+ await invoke(message);
+ renderArr.push(data.value);
+ } catch (e) {
+ console.log("No response. Do not render.");
+ }
+ });
+ });
+
+ onUnmounted(() => {
+ window.ipcRenderer.removeAllListeners("render-message");
+ emitter.all.clear();
+ });
+
+ const { beforeEnter, enter, afterEnter } = useMessageView();
+ const { scrollView } = useScrollView({
+ targetId: "messageView",
+ });
+
+ return {
+ renderArr,
+ beforeEnter,
+ enter,
+ afterEnter,
+ scrollView,
+ };
+ },
+});
+</script>
+
+<style lang="scss" scoped>
+svg {
+ height: 1%;
+ overflow: hidden;
+}
+#messageRenderer {
+ margin: 0;
+}
+</style>
* handles visualization of view messages through
* vue transition callbacks and anime-js animations
*/
-export default function useMessageVisualizer(): {
+export default function useMessageView(): {
beforeEnter: VueTransitionCallback;
enter: VueTransitionCallback;
afterEnter: VueTransitionCallback;
const paths = ref([]);
const audioBubbleWidth = ref(10);
let stream: MediaStream;
- const emitter: any = inject("mitt");
+ const emitter: any = inject("mitt");
// send message on ENTER
const enterCallback = (input: string) => {
const message = {
- audio: 0,
- text: input
+ audio: 0,
+ text: input
};
- console.log('emit message on enter', message);
emitter.emit("animateSend", message);
-
- // await response
- // window.postMessage({
- // myTypeField: 'send-message',
- // message: message
- // }, '*')
-
}
const { visualizeStreamAsPaths, expandBubble } = useAudioVisualizer(visualizeStream);
const { textInputXoffset, renderTextInput } = useTextVisualizer(input);
// stops stream recording on space key up
- function keyupHandler(e: any) {
+ function keyupHandler(_e) {
if (e.key === " " && visualizeStream.value) {
console.log("stop recording");
window.postMessage({
- myTypeField: 'update-recorder',
- record: false
+ myTypeField: 'update-recorder',
+ record: false
}, '*')
visualizeStream.value = false;
visualizeStream.value = true;
window.postMessage({
- myTypeField: 'update-recorder',
- record: true
+ myTypeField: 'update-recorder',
+ record: true
}, '*')
expandBubble(audioBubbleWidth);
}
const startingOffset = computed(() => {
- const parentView = document.getElementById('messageVisualizer');
+ const parentView = document.getElementById('messageView');
if (parentView) {
const rect = parentView.getBoundingClientRect();
let Y = 600;
<script lang="ts">
import useComputedBubble from "./bubbleDetails/computed";
import useBubbleDrawer from "./bubbleDetails/drawer";
-
-// text wrap composition
import useTextWrap from "@/modules/textWrap";
-
import { defineComponent, onMounted, ref, reactive } from "vue";
+
export default defineComponent({
- name: "MessageItem",
+ name: "TextBubble",
props: {
item: {
type: Object,
// do something with custom event
const message = event.data;
- if (message.myTypeField === "send-message") {
- ipcRenderer.send("send-message", message.message);
- }
-
if (message.myTypeField === "update-menu-bar") {
ipcRenderer.send("update-menu-bar", message);
}
ipcRenderer.send("update-recorder", message.record);
}
- if (message.myTypeField === "submit-creds") {
- ipcRenderer.send("submit-creds", message)
- }
-
});
-});
\ No newline at end of file
+});
<template>
- <HomeComponent />
+ <svg
+ id="messenger"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ @click="emittMessage"
+ >
+ <MessageView />
+ <TextAudioInput />
+ </svg>
</template>
<script lang="ts">
-
+import MessageView from "@/components/messageView/index.vue";
+import TextAudioInput from "@/components/taInput/index.vue";
import { defineComponent } from "vue";
-import HomeComponent from "@/components/home/index.vue";
export default defineComponent({
-
- name: "Home",
- components: { HomeComponent },
-
+ name: "Messenger",
+ components: { MessageView, TextAudioInput },
});
-
</script>
+
+<style lang="scss" scoped>
+#messenger {
+ width: 350px;
+ height: 500px;
+ background-color: #e6e6e6;
+ box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
+ // border-radius: 20px;
+}
+</style>
projects / mime-chat / commitdiff