60 lines
1.3 KiB
Vue
60 lines
1.3 KiB
Vue
<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>
|