input item enhancements

src/components/inputItem/controllers/audioCtrl.ts

@@ -1,44 +1,62 @@
-import { onMounted } from "vue";
+import anime from "animejs";
+import { onMounted, onUnmounted, ref, Ref } from "vue";
 import useMitt from "@/modules/mitt";
 import { useIpc } from '@/modules/ipc';
 import keyboardNameMap from "../keyBoardMaps/keyboardNameMap";
 import { renderMessage } from '@/modules/message';
 
 
+function showRecIcon () {
+
+    anime({
+        targets: '#recIcon',
+        opacity: [0, 0.75],
+        scale: [0.0, 1],
+        duration: 250,
+        easing: 'linear', 
+    })
+
+}
+
+function hideRecIcon () {
+
+    anime({
+        targets: '#recIcon',
+        opacity: [0.75, 0],
+        scale: [1, 0],
+        duration: 250,
+        easing: 'linear', 
+    })
+
+}
 
 
-
-
-export default function useAudioInputController () {
+export default function useAudioInputController (typing: Ref) {
 
     // For sending messages.
     const { post } = useIpc();
     const { emitter } = useMitt();
 
     // Keepp track of when we are recording.
-    let recording = false;
-
-    // Utility function to render message.
-    const render = (text: string, audio: boolean | string, context: string, modifier: string): string => {
-        const m = renderMessage({ text, audio, context, modifier });
-        emitter.emit("self-message", m);
-        return m.uid;
-    }
+    const recording = ref(false);
 
     //---Callbacks-----------------------------------------------
 
     const onKeyDown = (e: KeyboardEvent) => {
         const cmd = keyboardNameMap[e.keyCode];
+        // console.log(cmd)
 
         // Start recording on space bar.
-        if (cmd == "SPACE" && !recording) {
+        if (cmd == "SPACE" && !recording.value && !typing.value) {
 
             post('update-recorder', {
                 isRecording: true,
                 uid: null
             });
 
-            recording = true;
+            showRecIcon()
+            recording.value = true;
+            console.log("Recording...")
 
         }
 
@@ -48,17 +66,20 @@ export default function useAudioInputController () {
         const cmd = keyboardNameMap[e.keyCode];
 
         // Stop recording on space up.
-        if (cmd == "SPACE" && recording) {
+        if (cmd == "SPACE" && recording.value) {
 
             // Render audio immediately.
-            const uid = render("", "", "", "sf");
+            const message = renderMessage("", "", "", "sf")
+            emitter.emit("self-message", message);
 
             post('update-recorder', {
                 isRecording: false,
-                uid: uid
+                uid: message.uid
             });
 
-            recording = false;
+            hideRecIcon()
+            recording.value = false;
+            console.log("Stopping record...")
 
         }
 
@@ -71,6 +92,12 @@ export default function useAudioInputController () {
         window.addEventListener("keyup", onKeyUp);
     })
 
+    onUnmounted(() => {
+        window.removeEventListener("keydown", onKeyDown);
+        window.removeEventListener("keyup", onKeyUp);
+    });
+
+
     return {
         recording
     }

src/components/inputItem/controllers/textCtrl.ts

@@ -1,18 +1,13 @@
 import anime from "animejs";
 import useMitt from "@/modules/mitt";
 import { useIpc } from '@/modules/ipc';
-import { Ref, watch, onMounted } from "vue";
+import { Ref, ref, watch, onMounted, onUnmounted } from "vue";
 import keyboardNameMap from "../keyBoardMaps/keyboardNameMap";
 import { clientMessage, renderMessage } from '@/modules/message';
 
-// Post a message to the backend.
-const { post } = useIpc();
-
-
 //---Animations-----------------------------------------------
 
 let side = "right"; // Side of parent we are on.
-let visible = false; // Whether textInput is visible.
 
 function showTextInput () {
     const t1 = (side === "right") ? 50 : -70;
@@ -27,7 +22,6 @@ function showTextInput () {
         easing: 'easeOutExpo', 
     })
 
-    visible = true
 }
 
 function hideTextInput() {
@@ -35,14 +29,13 @@ function hideTextInput() {
 
     anime({
         targets: '#textInput',
-        opacity: 0,
+        opacity: [1, 0],
         translateX: t,
         scale: 0.3,
         duration: 500,
         easing: 'easeOutExpo', 
     })
 
-    visible = false
 }
 
 function switchSide(currentSide: string) {
@@ -63,27 +56,29 @@ function switchSide(currentSide: string) {
 export default function useTextInputController(elementX: Ref) {
     let textInput: HTMLInputElement | null;
 
-    let length: number;
-
-    // For sending messages.
     const { post } = useIpc();
     const { emitter } = useMitt();
 
-    // Keep track of first key press.
     let firstKey = true;
+    const typing = ref(false);
 
-    // Clear text input.
-    const clearInput = () => {
-        if (textInput) textInput.value = "";
-        hideTextInput()
-        firstKey = true;
+    // Prep inputItem for typing.
+    const prepInput = () => {
+        showTextInput()
+        typing.value = true
     }
 
-    // Utility function to render message.
-    const render = (text: string, audio: boolean | string, context: string, modifier: string): string => {
-        const m = renderMessage({ text, audio, context, modifier });
-        emitter.emit("self-message", m);
-        return m.uid;
+    // Clear and hide inputItem after done typing.
+    const clearInput = () => {
+
+        if (textInput) {
+            textInput.value = "";
+            textInput.blur();
+        }
+        
+        hideTextInput()
+        firstKey = true;
+        typing.value = false;
     }
 
     // Send a message and clean up after.
@@ -91,50 +86,53 @@ export default function useTextInputController(elementX: Ref) {
         if (textInput) {
 
             // Render message
-            const uid = render(textInput.value, false, "", "sf");
+            const message = renderMessage(textInput.value, false, "", "sf")
+            emitter.emit("self-message", message);
 
             // Send it to the backend for processing.
-            const clientM = clientMessage(textInput.value, false, uid);
+            const clientM = clientMessage(textInput.value, false, message.uid);
             post('client-message', clientM);
+
+            clearInput()
         }
     }
 
     //---Callbacks-----------------------------------------------
 
     const onKeyDown = (e: KeyboardEvent) => {
+        const key = keyboardNameMap[e.keyCode]
+        console.log(key)
         
         if (textInput) {
-            const key = keyboardNameMap[e.keyCode]
-
-            // Reveal textInput on first key press.
+           
+            // First-key handler.
             if (firstKey) {
-
-                // Handle for space bar
-                if (key == "SPACE") {
-                    return
-                }
-
-                showTextInput()
-                firstKey = false
+                if (key == "SPACE") return
+                prepInput()
             }
 
             textInput.focus();
 
+            // Close input when no text or on ESC.
             if (textInput.value == "" && !firstKey) {
                 clearInput()
+                return
             }
 
-            if (key == "ENTER") {
+            if (key === "ESCAPE") {
+                clearInput()
+                return
+            }
+
+            // Close and send on enter.
+            if (key === "ENTER") {
                 if (textInput.value) {
                     sendMessage()
-                    clearInput()
+                    return
                 }
             }
 
-            if (key == "ESCAPE") {
-                clearInput()
-
-            }
+            if (firstKey) firstKey = false
         }
     }
 
@@ -166,8 +164,12 @@ export default function useTextInputController(elementX: Ref) {
         window.addEventListener("keydown", onKeyDown);
     })
 
-    return {
+    onUnmounted(() => {
+        window.removeEventListener("keydown", onKeyDown);
+    });
 
+    return {
+        typing
     }
 
 }

src/components/inputItem/inputItem.vue

@@ -7,14 +7,9 @@
   >
     AG
 
-    <!-- Show audio input on spacebar -->
-    <AudioInput />
-
-
+    <!-- Recording animation on space bar -->
     <span v-if="recording" class="play"></span>
-    <span v-if="recording" class="pause">
-      <div class="rec-icon"></div>
-    </span>
+    <span v-if="recording" class="pause"></span>
 
     <!-- Show text input on key-down -->
     <TextInput />
@@ -43,12 +38,19 @@ export default defineComponent({
   },
   setup() {
 
+    // Initial position.
+    const xStart = 15;
+    const yStart = window.innerHeight - 200;
+
     // Calculate position of inputItem on drag.
-    const { elementX, elementY } = draggify({ elementId: "inputItem" });
+    const { elementX, elementY } = draggify(
+      { elementId: "inputItem" }, 
+      { x: xStart, y: yStart }
+    );
 
     // Controllers for text and audio.
-    useTextInputController(elementX)
-    const { recording } = useAudioInputController()
+    const { typing } = useTextInputController(elementX)
+    const { recording } = useAudioInputController(typing)
 
     return {
       elementX,
@@ -64,8 +66,6 @@ export default defineComponent({
 .input-item {
   position: absolute;
 
-  opacity: 1.0;
-
   display: flex;
   align-items: center;
   justify-content: center;
@@ -80,7 +80,8 @@ export default defineComponent({
   // border: 4px solid #C6C6C6;
   border-radius: 20px;
 
-  background-color: #EBEBEB;
+  // Set opacity here to not affect child.
+  background-color: rgba(235, 235, 235, 0.75);
 
   cursor: pointer;
 

src/components/inputItem/textInput.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watch } from "vue";
+import { defineComponent } from "vue";
 
 export default defineComponent({
   name: "TextInput",
@@ -46,15 +46,4 @@ export default defineComponent({
 
 }
 
-@keyframes appear {
-  from {
-    opacity: 0;
-    transform: translateX(50px) scale(0.3);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(110px) scale(1.0);
-  }
-}
-
 </style>