add textAudioInput component

diff --git a/src/components/messenger/index.vue b/src/components/messenger/index.vue
index a79e2acff4e0b2d49c6dcc0d5f82664bb13d5abf..c382f3ac47f19ebcf093344c3befd04e98d08044 100644 (file)
--- 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 09a395afdaf315016f6994be1bf01d68789b860a..896a896211b4b2eaa6481eefcf25d7718e9ec1f4 100644 (file)
--- 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 549b348cbb7db76832c85ba17852633f4af6e2ef..20f2318b6a0b81ee800a5b860928c093ca66cfea 100644 (file)
--- 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 a1cc9552818d96bf730d27e0db2b02d292fdcd06..91fb57074540acfeda601d065683f08a88130d01 100644 (file)
--- 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 63f6b337347d15e50041751e950218970e338256..f1623d1e2be2b6bfe0f6a80ddd2a9474d36e3d78 100644 (file)
--- 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