add textAudioInput component

src/components/messenger/index.vue

@@ -7,7 +7,7 @@
     @click="emittMessage"
   >
     <MessageVisualizer />
-    <InputVisualizer />
+    <TextAudioInput />
   </svg>
 </template>
 
@@ -17,7 +17,7 @@ import Messages from "./mockMessages";
 
 // child components
 import MessageVisualizer from "./messageVisualizer/index.vue";
-import InputVisualizer from "@/components/inputVisualizer/index.vue";
+import TextAudioInput from "@/components/taInput/index.vue";
 
 // event emitter
 import { Mitt } from "@/types/mitt/index";
@@ -25,7 +25,7 @@ import { Mitt } from "@/types/mitt/index";
 import { defineComponent, ref, inject } from "vue";
 export default defineComponent({
   name: "Messenger",
-  components: { MessageVisualizer, InputVisualizer },
+  components: { MessageVisualizer, TextAudioInput },
   setup() {
     const messages = Messages;
     const count = ref(0);

src/components/taInput/audioDetails/audio.vue

@@ -19,7 +19,13 @@
         fill="#b9b9b9"
       />
       <svg>
-        <g rx="20" id="Group_125" data-name="Group 125" v-for="(path, index) in paths">
+        <g
+          rx="20"
+          id="Group_125"
+          data-name="Group 125"
+          v-for="(path, index) in paths"
+          :key="path.identifier"
+        >
           <path
             :key="index"
             id="path"
@@ -47,7 +53,6 @@ export default defineComponent({
   },
   setup(props) {
     const emitter: any = inject("mitt");
-    function audioSend() {}
 
     const center = computed(() => {
       if (props.bubbleWidth) {

src/components/taInput/audioDetails/audioVisualizer.ts

@@ -9,7 +9,7 @@ interface AudioPath {
     color: string;
     draw: boolean;
 }
-export default function useStreamVisualizer(draw: Ref<boolean>) {
+export default function useAudioVisualizer(draw: Ref<boolean>) {
     const audioContext = new AudioContext();
     const analyzer = audioContext.createAnalyser();
     analyzer.fftSize = 128;

src/components/taInput/index.vue

@@ -5,14 +5,14 @@
 
 <script lang="ts">
 // input child components
-import TextInput from "./visualizerDetails/text.vue";
-import AudioStream from "./visualizerDetails/audio.vue";
+import TextInput from "./textDetails/text.vue";
+import AudioStream from "./audioDetails/audio.vue";
 
-import useInputVisualizer from "./visualizer";
+import useInputController from "./inputController";
 
 import { defineComponent } from "vue";
 export default defineComponent({
-  name: "InputVisualizer",
+  name: "TextAudioInput",
   components: { TextInput, AudioStream },
   setup() {
     // get text input
@@ -27,7 +27,7 @@ export default defineComponent({
       textInputXoffset,
       audioBubbleWidth,
       paths,
-    } = useInputVisualizer();
+    } = useInputController();
 
     return {
       input,

src/components/taInput/inputController.ts

@@ -4,18 +4,19 @@ import useKeyDownHandler from "@/composables/keyDownHandler/useKeyDownHandler";
 
 import useMediaStream from "@/utils/mediaStream/useMediaStream";
 
-import useStreamVisualizer from './visualizerDetails/audioVisualizer';
+import useAudioVisualizer from './audioDetails/audioVisualizer';
 
-import useTextVisualizer from './visualizerDetails/textVisualizer';
+import useTextVisualizer from './textDetails/textVisualizer';
 
 /*
-* Input visualizer
+* 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
-export default function useInputVisualizer() {
+// TODO: visualize audio stream from nodeJS background process
+export default function useInputController() {
     const visualizeStream = ref(false);
     const paths = ref([]);
     const audioBubbleWidth = ref(10);
@@ -23,7 +24,7 @@ export default function useInputVisualizer() {
 
     const { keyDownHandler, input } = useKeyDownHandler();
     const { textInputXoffset, renderTextInput } = useTextVisualizer(input);
-    const { visualizeStreamAsPaths, expandBubble } = useStreamVisualizer(visualizeStream);
+    const { visualizeStreamAsPaths, expandBubble } = useAudioVisualizer(visualizeStream);
 
     // stops stream recording on space key up
     function keyupHandler(e: any) {