add textAudioInput component

src/components/inputVisualizer/visualizer.ts

@@ -1,92 +0,0 @@
-import { ref, watch, onUnmounted, onMounted } from "vue";
-
-import useKeyDownHandler from "@/composables/keyDownHandler/useKeyDownHandler";
-
-import useMediaStream from "@/utils/mediaStream/useMediaStream";
-
-import useStreamVisualizer from './visualizerDetails/audioVisualizer';
-
-import useTextVisualizer from './visualizerDetails/textVisualizer';
-
-/*
-* Input visualizer
-* 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
-export default function useInputVisualizer() {
-    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 } = useStreamVisualizer(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();
-    })
-
-    // 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
-    }
-
-}