Merge remote-tracking branch 'origin/project_refactor'

src/components/taInput/inputController.ts

@@ -0,0 +1,93 @@
+import { ref, watch, onUnmounted, onMounted } from "vue";
+
+import useKeyDownHandler from "@/composables/keyDownHandler/useKeyDownHandler";
+
+import useMediaStream from "@/composables/mediaStream";
+
+import useAudioVisualizer from './audioDetails/audioVisualizer';
+
+import useTextVisualizer from './textDetails/textVisualizer';
+
+/*
+* 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
+*/
+// NOTE: input params should probably be input and MediaStream
+// TODO: visualize audio stream from nodeJS background process
+export default function useInputController() {
+    const visualizeStream = ref(false);
+    const paths = ref([]);
+    const audioBubbleWidth = ref(10);
+    let stream: MediaStream;
+
+    const { keyDownHandler, input } = useKeyDownHandler();
+    const { textInputXoffset, renderTextInput } = useTextVisualizer(input);
+    const { visualizeStreamAsPaths, expandBubble } = useAudioVisualizer(visualizeStream);
+
+    // stops stream recording on space key up
+    function keyupHandler(e: any) {
+        if (e.key === " " && visualizeStream.value) {
+            console.log("stop recording");
+
+            window.postMessage({
+              myTypeField: 'update-recorder',
+              record: false
+            }, '*')
+
+            visualizeStream.value = false;
+            paths.value = []
+            audioBubbleWidth.value = 10;
+            input.value = ''
+        }
+    }
+
+    // add window event keyboard listeners
+    window.addEventListener("keydown", keyDownHandler);
+    window.addEventListener('keyup', keyupHandler);
+
+    // get stream & initialize recorder object on mount
+    onMounted(async () => {
+        stream = await useMediaStream({ audio: true });
+    })
+
+    // determine whether to render text or audio based one the keyboard input
+    watch(input, (input, prevInput) => {
+        if (prevInput !== "" || prevInput.length > 0) {
+            if (!visualizeStream.value) {
+                renderTextInput();
+            }
+            return;
+        }
+        if (input === " " && visualizeStream.value === false) {
+            console.log("record MediaStream");
+            visualizeStream.value = true;
+
+            window.postMessage({
+              myTypeField: 'update-recorder',
+              record: true
+            }, '*')
+
+            expandBubble(audioBubbleWidth);
+            visualizeStreamAsPaths(stream, paths, audioBubbleWidth);
+            return;
+        }
+        renderTextInput();
+    });
+
+    // remove Event Listeners on component unMount
+    onUnmounted(() => {
+        window.removeEventListener("keydown", keyDownHandler);
+        window.removeEventListener("keyup", keyupHandler);
+    });
+
+    return {
+        input,
+        visualizeStream,
+        textInputXoffset,
+        audioBubbleWidth,
+        paths
+    }
+
+}