messenger v69

src/components/inputItem/inputController.ts

@@ -1,8 +1,8 @@
 /*
-* 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
+* Main logic used by inputItem component.
+* Will visualize text input by default as user types.
+* If user holds space bar down, input audio stream will
+* be recorded and sent to the backend for analysis.
 */
 
 import { ref, watch, onUnmounted, onMounted } from "vue";
@@ -10,8 +10,13 @@ import useMitt from "@/modules/mitt";
 import { useIpc } from '@/modules/ipc';
 import keyboardNameMap from "./keyBoardMaps/keyboardNameMap";
 import keyboardCharMap from "./keyBoardMaps/keyboardCharMap";
+import { RenderMessage, ClientMessage } from "@/types/message/index";
+import { v4 as uuidv4 } from 'uuid';
+import {clientMessage, renderMessage} from '@/modules/message';
 
 let textInput: HTMLInputElement | null;
+let m: RenderMessage | ClientMessage;
+let uid: string;
 
 export default function useInputController() {
 
@@ -21,19 +26,28 @@ export default function useInputController() {
     const isTyping = ref(false);
     const input = ref("");
 
-    // send message on ENTER
+    // send message on ENTER.
     const onEnter = () => {
+        if (input.value) {
+            // remove first character of input.
+            const text = input.value.substring(1);
 
-        const message = {
-            audio: 0,
-            text: input.value
-        };
+            uid = uuidv4();
 
-        // trigger send animation
-        emitter.emit("animate-send");
+            m = renderMessage(text, false, "sf", uid);
 
-        // send message to backend
-        if (input.value) post('message', message);
+            // render user message.
+            emitter.emit("self-message", m);
+
+            m = clientMessage(m.content.text, m.content.audio, uid);
+
+            // send message to backend.
+            post('client-message', m);
+
+            // reset text input.
+            if (textInput) textInput.value = ''; 
+            input.value = " ";
+        }
     }
 
     // update input on keydown event & listen for special commands.
@@ -59,8 +73,6 @@ export default function useInputController() {
         switch (cmd) {
           case "ENTER":
             onEnter();
-            if (textInput) textInput.value = ''
-            input.value = " ";
             break;
           case "BACK_SPACE":
             input.value = input.value.slice(0, -1);
@@ -74,12 +86,24 @@ export default function useInputController() {
         }
     }
 
-    // stops stream recording on space key up event.
+    // stop stream recording and render audio message on space key up event.
     const onKeyUp = (e: KeyboardEvent) => {
         if (e.key === " " && isRecording.value) {
 
             isRecording.value = false;
-            post('update-recorder', isRecording.value);
+
+            uid = uuidv4();
+
+            // render audio message.
+            m = renderMessage("", false, "sf", uid);
+            emitter.emit("self-message", m);
+
+            // stop stream recording.
+            post('update-recorder', {
+                isRecording: isRecording.value,
+                uid
+            }); 
+
             input.value = ''
         }
     }
@@ -107,7 +131,10 @@ export default function useInputController() {
         if (input === " " && isRecording.value === false) {
             isTyping.value = false;
             isRecording.value = true;
-            post('update-recorder', isRecording.value);
+            post('update-recorder', {
+                isRecording: isRecording.value,
+                uid: null
+            });
             return;
         }
         isTyping.value = true;