From 6d20af467e54045f39d92c1ce9136e4409a1104a Mon Sep 17 00:00:00 2001
From: Enrique Hernandez <hernandeze2@xavier.edu>
Date: Sun, 31 Jan 2021 17:19:35 -0600
Subject: [PATCH] add textAudioInput component

---
 src/components/messenger/index.vue                    |  6 +++---
 .../audioDetails}/audio.vue                           |  9 +++++++--
 .../audioDetails}/audioVisualizer.ts                  |  2 +-
 src/components/{inputVisualizer => taInput}/index.vue | 10 +++++-----
 .../visualizer.ts => taInput/inputController.ts}      | 11 ++++++-----
 .../textDetails}/text.vue                             |  0
 .../textDetails}/textAnime.ts                         |  0
 .../textDetails}/textVisualizer.ts                    |  0
 8 files changed, 22 insertions(+), 16 deletions(-)
 rename src/components/{inputVisualizer/visualizerDetails => taInput/audioDetails}/audio.vue (88%)
 rename src/components/{inputVisualizer/visualizerDetails => taInput/audioDetails}/audioVisualizer.ts (98%)
 rename src/components/{inputVisualizer => taInput}/index.vue (75%)
 rename src/components/{inputVisualizer/visualizer.ts => taInput/inputController.ts} (87%)
 rename src/components/{inputVisualizer/visualizerDetails => taInput/textDetails}/text.vue (100%)
 rename src/components/{inputVisualizer/visualizerDetails => taInput/textDetails}/textAnime.ts (100%)
 rename src/components/{inputVisualizer/visualizerDetails => taInput/textDetails}/textVisualizer.ts (100%)

diff --git a/src/components/messenger/index.vue b/src/components/messenger/index.vue
index a79e2ac..c382f3a 100644
--- a/src/components/messenger/index.vue
+++ b/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);
diff --git a/src/components/inputVisualizer/visualizerDetails/audio.vue b/src/components/taInput/audioDetails/audio.vue
similarity index 88%
rename from src/components/inputVisualizer/visualizerDetails/audio.vue
rename to src/components/taInput/audioDetails/audio.vue
index 09a395a..896a896 100644
--- a/src/components/inputVisualizer/visualizerDetails/audio.vue
+++ b/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) {
diff --git a/src/components/inputVisualizer/visualizerDetails/audioVisualizer.ts b/src/components/taInput/audioDetails/audioVisualizer.ts
similarity index 98%
rename from src/components/inputVisualizer/visualizerDetails/audioVisualizer.ts
rename to src/components/taInput/audioDetails/audioVisualizer.ts
index 549b348..20f2318 100644
--- a/src/components/inputVisualizer/visualizerDetails/audioVisualizer.ts
+++ b/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;
diff --git a/src/components/inputVisualizer/index.vue b/src/components/taInput/index.vue
similarity index 75%
rename from src/components/inputVisualizer/index.vue
rename to src/components/taInput/index.vue
index a1cc955..91fb570 100644
--- a/src/components/inputVisualizer/index.vue
+++ b/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,
diff --git a/src/components/inputVisualizer/visualizer.ts b/src/components/taInput/inputController.ts
similarity index 87%
rename from src/components/inputVisualizer/visualizer.ts
rename to src/components/taInput/inputController.ts
index 63f6b33..f1623d1 100644
--- a/src/components/inputVisualizer/visualizer.ts
+++ b/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) {
diff --git a/src/components/inputVisualizer/visualizerDetails/text.vue b/src/components/taInput/textDetails/text.vue
similarity index 100%
rename from src/components/inputVisualizer/visualizerDetails/text.vue
rename to src/components/taInput/textDetails/text.vue
diff --git a/src/components/inputVisualizer/visualizerDetails/textAnime.ts b/src/components/taInput/textDetails/textAnime.ts
similarity index 100%
rename from src/components/inputVisualizer/visualizerDetails/textAnime.ts
rename to src/components/taInput/textDetails/textAnime.ts
diff --git a/src/components/inputVisualizer/visualizerDetails/textVisualizer.ts b/src/components/taInput/textDetails/textVisualizer.ts
similarity index 100%
rename from src/components/inputVisualizer/visualizerDetails/textVisualizer.ts
rename to src/components/taInput/textDetails/textVisualizer.ts
-- 
2.43.0