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
     }