From 875b0828d09125231dfff339b562a44d196e8ad4 Mon Sep 17 00:00:00 2001
From: riqo <hernandeze2@xavier.edu>
Date: Sat, 12 Dec 2020 15:32:46 -0600
Subject: [PATCH] fix dual audioRenderer calls

---
 src/components/UI/UIDetails/audioInput.vue    | 20 -----
 src/components/UI/index.vue                   |  6 +-
 .../input/inputDetails/audioInput.vue         | 43 +++++++++
 .../inputDetails/textInput.vue}               | 22 ++---
 src/components/input/inputItem.vue            | 22 +++++
 src/composables/inputItem/useInputRenderer.ts | 87 +++++++------------
 ...{useTextInputRender.ts => useTextInput.ts} | 32 +++++--
 .../streamRecorder/useStreamRecorder.ts       | 36 +++-----
 8 files changed, 138 insertions(+), 130 deletions(-)
 delete mode 100644 src/components/UI/UIDetails/audioInput.vue
 create mode 100644 src/components/input/inputDetails/audioInput.vue
 rename src/components/{UI/UIDetails/inputItem.vue => input/inputDetails/textInput.vue} (61%)
 create mode 100644 src/components/input/inputItem.vue
 rename src/composables/inputItem/{useTextInputRender.ts => useTextInput.ts} (51%)

diff --git a/src/components/UI/UIDetails/audioInput.vue b/src/components/UI/UIDetails/audioInput.vue
deleted file mode 100644
index 8e3677f..0000000
--- a/src/components/UI/UIDetails/audioInput.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <foreignObject  x="100" y="450" width="55%" height="50%">
-    <div xmlns="http://www.w3.org/1999/xhtml">
-      <div>
-        <canvas width="640" height="100"></canvas>
-      </div>
-    </div>
-  </foreignObject>
-</template>
-
-<script lang="ts">
-import {defineComponent} from 'vue'
-import useStreamRecorder from "@/composables/streamRecorder/useStreamRecorder";
-export default defineComponent ({
-  name: 'AudioInput',
-  setup() {
-
-  }
-})
-</script>
\ No newline at end of file
diff --git a/src/components/UI/index.vue b/src/components/UI/index.vue
index 00896f3..4ad8647 100644
--- a/src/components/UI/index.vue
+++ b/src/components/UI/index.vue
@@ -8,7 +8,6 @@
   >
     <!-- <AI /> -->
     <MessageRenderer />
-    <AudioInput />
     <InputItem />
     <!-- <TitleBar /> -->
   </svg>
@@ -17,15 +16,14 @@
 <script lang="ts">
 import AI from "../AI/index.vue";
 import MessageRenderer from "./UIDetails/messageRenderer.vue";
-import InputItem from "./UIDetails/inputItem.vue";
+import InputItem from "@/components/input/inputItem.vue";
 import TitleBar from "./UIDetails/titleBar.vue";
 import Messages from "./UIDetails/messages";
-import AudioInput from './UIDetails/audioInput.vue';
 import { Mitt } from "@/types/mitt/index";
 import { defineComponent, ref, inject } from "vue";
 export default defineComponent({
   name: "UI",
-  components: {  MessageRenderer, InputItem, AudioInput },
+  components: {  MessageRenderer, InputItem },
   setup() {
     const messages = Messages;
     const count = ref(0);
diff --git a/src/components/input/inputDetails/audioInput.vue b/src/components/input/inputDetails/audioInput.vue
new file mode 100644
index 0000000..7526e12
--- /dev/null
+++ b/src/components/input/inputDetails/audioInput.vue
@@ -0,0 +1,43 @@
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" :width="reactiveWidth" height="34" x="50%" y="450" >
+  <g id="Group_126" data-name="Group 126" transform="translate(0 0)">
+    <rect id="Rectangle_478" data-name="Rectangle 478" :width="reactiveWidth" height="34" rx="10" transform="translate(0 0)" fill="#b9b9b9"/>
+    <g id="Group_125" data-name="Group 125">
+      <!-- <path id="Path_328" data-name="Path 328" d="M0,25v-10" transform="translate(10 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
+      <path id="Path_328" data-name="Path 328" d="M0,25v-15" transform="translate(15 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
+      <path id="Path_328" data-name="Path 328" d="M0,25v-20" transform="translate(20 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
+
+      <path id="Path_328" data-name="Path 328" d="M0,25v-15" transform="translate(25 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
+      <path id="Path_328" data-name="Path 328" d="M0,25v-10" transform="translate(30 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
+
+      <path id="Path_328" data-name="Path 328" d="M0,25v-5" transform="translate(120 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/> -->
+    </g>
+  </g>
+</svg>
+
+</template>
+
+<script lang="ts">
+import {ref, defineComponent, onMounted, watch} from 'vue'
+import useInputRenderer from "@/composables/inputItem/useInputRenderer";
+export default defineComponent ({
+  name: 'AudioInput',
+  setup() {
+
+  const { reactiveWidth, input } = useInputRenderer();
+
+
+
+    return {
+      reactiveWidth
+    }
+    // const { initRecorder } = useStreamRecorder(record);
+
+    // onMounted(async () => {
+    //   // step get streamRecorder reference
+    //   const { streamRecorder } = await initRecorder();
+
+    // });
+  }
+})
+</script>
\ No newline at end of file
diff --git a/src/components/UI/UIDetails/inputItem.vue b/src/components/input/inputDetails/textInput.vue
similarity index 61%
rename from src/components/UI/UIDetails/inputItem.vue
rename to src/components/input/inputDetails/textInput.vue
index 8eb0aa5..06e8c3b 100644
--- a/src/components/UI/UIDetails/inputItem.vue
+++ b/src/components/input/inputDetails/textInput.vue
@@ -1,9 +1,8 @@
 <template>
-  <foreignObject class="inputContainer" :x="renderAudio? reactiveWidth: inputXoffset" y="450" width="55%" height="50%">
+  <foreignObject class="inputContainer" :x="inputXoffset" y="450" width="55%" height="50%">
     <div xmlns="http://www.w3.org/1999/xhtml">
       <div class="inputBubble" contenteditable v-show="input.length > 0">
-        <p v-if="!renderAudio">{{ input }}</p>
-        <canvas v-else class="audioCanvas" height="20" width="10" ></canvas>
+        <p>{{ input }}</p>
       </div>
     </div>
   </foreignObject>
@@ -13,24 +12,16 @@
 import useInputRenderer from "@/composables/inputItem/useInputRenderer";
 import useStreamRecorder from "@/composables/streamRecorder/useStreamRecorder";
 import { defineComponent, watch, onMounted, ref } from "vue";
+import useTextInput from '@/composables/inputItem/useTextInput';
 export default defineComponent({
-  name: "InputItem",
+  name: "TextInput",
   setup() {
     const record = ref(false);
-    const { inputXoffset, input, renderAudio, reactiveWidth } = useInputRenderer();
-    const { initRecorder } = useStreamRecorder(record);
-
-    onMounted(async () => {
-      // step get streamRecorder reference
-      const { streamRecorder } = await initRecorder();
-
-    });
+    const { inputXoffset, input } = useTextInput();
 
     return {
       input,
       inputXoffset,
-      renderAudio,
-      reactiveWidth
     };
   },
 });
@@ -50,9 +41,6 @@ div[contenteditable] {
   background-color: #585858;
   font-size: 14;
   text-align: left;
-  .audioCanvas {
-    max-width: 190px
-  }
   p {
     max-width: 150px;
     overflow-wrap: break-word;
diff --git a/src/components/input/inputItem.vue b/src/components/input/inputItem.vue
new file mode 100644
index 0000000..bd5612d
--- /dev/null
+++ b/src/components/input/inputItem.vue
@@ -0,0 +1,22 @@
+<template>
+  <audio-input v-if="renderAudio" />
+  <text-input v-else />
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue'
+import TextInput from './inputDetails/textInput.vue';
+import AudioInput from './inputDetails/audioInput.vue';
+import useInputRenderer from "@/composables/inputItem/useInputRenderer";
+export default defineComponent({
+  name: "InputItem",
+  components: {TextInput, AudioInput},
+  setup() {
+    const { renderAudio } = useInputRenderer();
+
+    return {
+      renderAudio
+    }
+  }
+})
+</script>
\ No newline at end of file
diff --git a/src/composables/inputItem/useInputRenderer.ts b/src/composables/inputItem/useInputRenderer.ts
index 9d69788..d722756 100644
--- a/src/composables/inputItem/useInputRenderer.ts
+++ b/src/composables/inputItem/useInputRenderer.ts
@@ -1,4 +1,4 @@
-import {ref, computed, inject, watch, onUnmounted, onMounted} from "vue";
+import {ref, computed, inject, watch, onUnmounted, onMounted, render} from "vue";
 import useInputAnims from "./useInputAnims";
 import useKeyDownHandler from "@/composables/keyDownHandler/useKeyDownHandler";
 import useMediaStream from "@/composables/mediaStream/useMediaStream";
@@ -26,7 +26,7 @@ export default function useInputRenderer() {
       //   "*"
       // );
       input.value = "";
-      reactiveWidth.value = 0;
+      reactiveWidth.value = 35;
     }
   }
 
@@ -40,67 +40,40 @@ export default function useInputRenderer() {
     window.removeEventListener("keyup", keyupHandler);
   });
 
-  const emitter: any = inject("mitt");
-  const {animateSend, verticalShiftInput, inputAppear} = useInputAnims();
-
-  const inputHeight = ref(42);
-  const inputWidth = ref(0);
-  const renderInput = async() => {
-      const inputDivs = await document.getElementsByClassName("inputBubble");
-      const height = inputDivs[0].getBoundingClientRect().height;
-      inputWidth.value = inputDivs[0].getBoundingClientRect().width;
-      const foreignObjectDiv = document.getElementsByClassName(
-        "inputContainer"
-      );
-      if (height !== inputHeight.value) {
-        inputHeight.value = height;
-      }
-      const foreignEl = foreignObjectDiv[0] as HTMLElement;
-      if (inputHeight.value === 0) {
-        inputAppear(foreignEl)
-      } else if (inputHeight.value > 36) {
-        const yTrans = -inputHeight.value + 30;
-        verticalShiftInput(foreignEl, yTrans);
-      }
-  }
-
-
-  const reactiveWidth = ref(0);
   watch(input, async (input, prevInput) => {
-    if (prevInput !== "" || prevInput.length > 0) {
-      renderInput();
-      return;
+    console.log(input)
+    if (prevInput === '' && input === ' ') {
+      // begin recording
+      console.log('record')
     }
-    if (input === " ") {
-      console.log("record");
-      renderAudio.value = true;
-      const canvas = await document.getElementsByClassName('audioCanvas'); 
-      const test = canvas[0] as HTMLCanvasElement;
-      handleStream(stream.stream, test, reactiveWidth);
-      // window.postMessage(
-      //   {
-      //     myTypeField: "audio-stream",
-      //     stream: true,
-      //   },
-      //   "*"
-      // );
-      //console.log("recorder is", streamRecorder.state);
-    }           
-    renderInput();
+    // if (prevInput !== "" || prevInput.length > 0) {
+    //   if (!renderAudio.value) {
+    //     // renderInput();
+    //   }
+    //   return;
+    // }
+    // if (input === " " && renderAudio.value === false) {
+    //   console.log("record");
+    //   renderAudio.value = true;
+    //   // handleStream(stream.stream, reactiveWidth);
+    //   return;
+    //   // window.postMessage(
+    //   //   {
+    //   //     myTypeField: "audio-stream",
+    //   //     stream: true,
+    //   //   },
+    //   //   "*"
+    //   // );
+    // }           
+    // renderInput();
   });
 
-  emitter.on("newSelfMessage", async (payload: any) => {
-    const inputEl = document.getElementsByClassName("inputContainer");
-    const foreignEl = inputEl[0] as HTMLElement;
-    animateSend(foreignEl, inputHeight.value, input);
-  });
-
-  const inputXoffset = computed(() => {
-    return `calc(50% - ${inputWidth.value / 2})`;
-  });
+  const reactiveWidth = ref(35);
+  watch(reactiveWidth, (w) => {
+    console.log(w)
+  })
 
   return {
-    inputXoffset,
     input,
     renderAudio,
     reactiveWidth
diff --git a/src/composables/inputItem/useTextInputRender.ts b/src/composables/inputItem/useTextInput.ts
similarity index 51%
rename from src/composables/inputItem/useTextInputRender.ts
rename to src/composables/inputItem/useTextInput.ts
index 78be890..97162d8 100644
--- a/src/composables/inputItem/useTextInputRender.ts
+++ b/src/composables/inputItem/useTextInput.ts
@@ -1,12 +1,15 @@
-import {ref} from 'vue';
+import {ref, computed, watch, inject} from 'vue';
 import useInputAnims from "./useInputAnims";
-export default function useTextRenderInput() {
+import useInputRenderer from './useInputRenderer';
+export default function useTextInput() {
 
-  const inputHeight = ref(42);
-  const inputWidth = ref(0);
+  const {input, renderAudio} = useInputRenderer();
 
-  const { verticalShiftInput, inputAppear } = useInputAnims();
+  const emitter: any = inject("mitt");
+  const {animateSend, verticalShiftInput, inputAppear} = useInputAnims();
 
+  const inputHeight = ref(42);
+  const inputWidth = ref(0);
   const renderTextInput = async() => {
       const inputDivs = await document.getElementsByClassName("inputBubble");
       const height = inputDivs[0].getBoundingClientRect().height;
@@ -26,7 +29,24 @@ export default function useTextRenderInput() {
       }
   }
 
+  watch(input, async (input, prevInput) => {
+    if (!renderAudio.value) {
+      renderTextInput();
+    }
+  });
+
+  emitter.on("newSelfMessage", async (payload: any) => {
+    const inputEl = document.getElementsByClassName("inputContainer");
+    const foreignEl = inputEl[0] as HTMLElement;
+    animateSend(foreignEl, inputHeight.value, input);
+  });
+
+  const inputXoffset = computed(() => {
+    return `calc(50% - ${inputWidth.value / 2})`;
+  });
+
   return {
-    renderTextInput
+    input,
+    inputXoffset,
   }
 }
\ No newline at end of file
diff --git a/src/composables/streamRecorder/useStreamRecorder.ts b/src/composables/streamRecorder/useStreamRecorder.ts
index 8f04618..c53d3d4 100644
--- a/src/composables/streamRecorder/useStreamRecorder.ts
+++ b/src/composables/streamRecorder/useStreamRecorder.ts
@@ -13,7 +13,7 @@ export default function useStreamRecorder(render: any) {
     window.AudioContext = window.AudioContext;
     let audio_context = new AudioContext();
     const analyzer = audio_context.createAnalyser();
-    analyzer.fftSize = 256;
+    analyzer.fftSize = 2048;
     var bufferLengthAlt = analyzer.frequencyBinCount;
     var dataArrayAlt = new Uint8Array(bufferLengthAlt);
 
@@ -32,48 +32,32 @@ export default function useStreamRecorder(render: any) {
         }
     }
 
-    function visualize(canvas:any, canvasCtx: any, w: any) {
-        const WIDTH = canvas.width;
-        const HEIGHT = canvas.height;
+    function visualize(w: any) {
+
         function drawAlt() {
             if (!render.value) {
                return;
             }
             const drawVisual = requestAnimationFrame(drawAlt);
-            analyzer.getByteFrequencyData(dataArrayAlt);
-
-            // canvasCtx.fillStyle = 'rgb(0, 0, 0)';
-            // canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
-            var barWidth = (WIDTH / bufferLengthAlt) * 5;
-            var barHeight;
-            var x = 0;
+            analyzer.getByteTimeDomainData(dataArrayAlt);
 
             // max-width
-            if (canvas.width === 190) {
+            if (w.value === 190) {
                 return;
             }
 
             // increase width and center as time passes
-            canvas.width++;
-            const center = 175 -  canvas.width / 2;
-            w.value= center;
-
-            // fill bubble with frequency bar
-            for(var i = 0; i < bufferLengthAlt; i++) {
-              barHeight = dataArrayAlt[i];
-              canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
-              canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
-              x += barWidth + 1;
-            }
+            w.value++;
+            const center = 175 -  w.value / 2;
+            // w.value= center;
         }
         drawAlt();
     }
 
-    function handleStream(s: MediaStream, c: HTMLCanvasElement, w: any) {
+    function handleStream(s: MediaStream, w: any) {
         source = audio_context.createMediaStreamSource(s);
         source.connect(analyzer);
-        const canvasCtx = c.getContext('2d');
-        visualize(c, canvasCtx, w);
+        visualize(w);
     }
 
     return {
-- 
2.43.0