me/mime-chat
Watch
1
0
Fork
You've already forked mime-chat
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

remove old message event listeners

Browse source
This commit is contained in:
Enrique Hernandez 2021-02-14 15:46:48 -06:00
commit 3cf22d61ac
13 changed files with 142 additions and 219 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/background/window.ts
View file

@ -3,7 +3,6 @@
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";
@ -13,46 +12,35 @@ interface WindowSettings {
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
});
@ -63,7 +51,7 @@ export const createWindow = async (options: WindowSettings): Promise<void> => {
if (win) resolve();
win= new BrowserWindow({
win = new BrowserWindow({
width: options.width,
height: options.height,
resizable: options.resizable,
@ -90,7 +78,7 @@ export const createWindow = async (options: WindowSettings): Promise<void> => {
win.webContents.on('did-finish-load', () => {
windowMount();
if (win)resolve();
resolve();
});
});

60
src/components/home/index.vue
View file

@ -1,60 +0,0 @@
<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>

94
src/components/home/messageVisualizer/index.vue
View file

@ -1,94 +0,0 @@
<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>

91
src/components/messageView/index.vue Normal file
View file

@ -0,0 +1,91 @@
<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>

0
src/components/home/messageVisualizer/viewDetails/anime.ts → src/components/messageView/viewDetails/anime.ts
View file

0
src/components/home/messageVisualizer/viewDetails/offsetCalculator.ts → src/components/messageView/viewDetails/offsetCalculator.ts
View file

2
src/components/home/messageVisualizer/viewDetails/visualizer.ts → src/components/messageView/viewDetails/visualizer.ts
View file

@ -6,7 +6,7 @@ import useOffsetCalculator from './offsetCalculator';
* 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;

24
src/components/taInput/inputController.ts
View file

@ -17,24 +17,16 @@ export default function useInputController() {
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);
@ -42,13 +34,13 @@ export default function useInputController() {
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;
@ -80,8 +72,8 @@ export default function useInputController() {
visualizeStream.value = true;
window.postMessage({
myTypeField: 'update-recorder',
record: true
myTypeField: 'update-recorder',
record: true
}, '*')
expandBubble(audioBubbleWidth);

2
src/components/home/messageBubble/bubbleDetails/computed.ts → src/components/textBubble/bubbleDetails/computed.ts
View file

@ -49,7 +49,7 @@ export default function useComputedBubble(m: string, id: string) {
}
const startingOffset = computed(() => {
const parentView = document.getElementById('messageVisualizer');
const parentView = document.getElementById('messageView');
if (parentView) {
const rect = parentView.getBoundingClientRect();
let Y = 600;

0
src/components/home/messageBubble/bubbleDetails/drawer.ts → src/components/textBubble/bubbleDetails/drawer.ts
View file

6
src/components/home/messageBubble/index.vue → src/components/textBubble/index.vue
View file

@ -29,13 +29,11 @@
<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,

10
src/preload.ts
View file

@ -17,10 +17,6 @@ process.once("loaded", () => {
// 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);
}
@ -29,10 +25,6 @@ process.once("loaded", () => {
ipcRenderer.send("update-recorder", message.record);
}
if (message.myTypeField === "submit-creds") {
ipcRenderer.send("submit-creds", message)
}
});
});
});

32
src/views/home.vue
View file

@ -1,17 +1,33 @@
<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>