rafactor input handler + renderer

src/components/UI/UIDetails/messageRenderer.vue

@@ -29,7 +29,7 @@
 
 <script lang="ts">
 import useMessageRenderer from "@/composables/messageRenderer/useMessageRenderer";
-import useScroller from "@/composables/scroller/useScroller";
+import useScrollView from "@/composables/scrollView/useScrollView";
 import {
   defineComponent,
   reactive,
@@ -55,7 +55,7 @@ export default defineComponent({
     }
 
     const { beforeEnter, enter, afterEnter } = useMessageRenderer();
-    const {scrollView} = useScroller({ targetId: "messageRenderer"});
+    const {scrollView} = useScrollView({ targetId: "messageRenderer"});
 
     return {
       renderArr,

src/components/input/inputDetails/audioInput.vue

@@ -1,7 +1,7 @@
 <template>
-<svg xmlns="http://www.w3.org/2000/svg" :width="reactiveWidth" height="34" x="50%" y="450" >
+<svg xmlns="http://www.w3.org/2000/svg" :width="bubbleWidth" height="34" :x="center" 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"/>
+    <rect id="Rectangle_478" data-name="Rectangle 478" :width="bubbleWidth" 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"/>
@@ -18,26 +18,19 @@
 </template>
 
 <script lang="ts">
-import {ref, defineComponent, onMounted, watch} from 'vue'
+import { defineComponent, computed } from 'vue'
-import useInputRenderer from "@/composables/inputItem/useInputRenderer";
 export default defineComponent ({
   name: 'AudioInput',
-  setup() {
+  props: {
-
+    bubbleWidth: Number
-  const { reactiveWidth, input } = useInputRenderer();
+  },
-
+  setup(props){
-
+    const center = computed(() => {
-
+      if (props.bubbleWidth) {
-    return {
+        return 175 - props.bubbleWidth / 2;
-      reactiveWidth
       }
-    // const { initRecorder } = useStreamRecorder(record);
+    })
-
+    return { center }
-    // onMounted(async () => {
-    //   // step get streamRecorder reference
-    //   const { streamRecorder } = await initRecorder();
-
-    // });
   }
 })
 </script>

src/components/input/inputDetails/textInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <foreignObject class="inputContainer" :x="inputXoffset" y="450" width="55%" height="50%">
+  <foreignObject class="inputContainer" :x="textXoffset" y="450" width="55%" height="50%">
     <div xmlns="http://www.w3.org/1999/xhtml">
       <div class="inputBubble" contenteditable v-show="input.length > 0">
         <p>{{ input }}</p>
@@ -9,20 +9,12 @@
 </template>
 
 <script lang="ts">
-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: "TextInput",
-  setup() {
+  props: {
-    const record = ref(false);
+    input: String,
-    const { inputXoffset, input } = useTextInput();
+    textXoffset: String
-
-    return {
-      input,
-      inputXoffset,
-    };
   },
 });
 </script>

src/components/input/inputItem.vue

@@ -1,6 +1,13 @@
 <template>
-  <audio-input v-if="renderAudio" />
+  <audio-input 
-  <text-input v-else />
+    v-if="renderAudio" 
+    :bubbleWidth="reactiveWidth" 
+  />
+  <text-input 
+    v-else 
+    :input="input" 
+    :textXoffset="textInputXoffset"  
+  />
 </template>
 
 <script lang="ts">
@@ -12,10 +19,14 @@ export default defineComponent({
   name: "InputItem",
   components: {TextInput, AudioInput},
   setup() {
-    const { renderAudio } = useInputRenderer();
+
+    const { input, renderAudio, reactiveWidth, textInputXoffset } = useInputRenderer();
 
     return {
-      renderAudio
+      input,
+      textInputXoffset,
+      renderAudio,
+      reactiveWidth
     }
   }
 })

src/composables/inputItem/useInputRenderer.ts

@@ -1,32 +1,35 @@
-import {ref, computed, inject, watch, onUnmounted, onMounted, render} from "vue";
+import {ref, watch, onUnmounted, onMounted } from "vue";
-import useInputAnims from "./useInputAnims";
 import useKeyDownHandler from "@/composables/keyDownHandler/useKeyDownHandler";
 import useMediaStream from "@/composables/mediaStream/useMediaStream";
 import useStreamRecorder from "@/composables/streamRecorder/useStreamRecorder";
+import useTextInput from '@/composables/inputItem/useTextInput';
+/* 
+* Renders input to the user
+*/
 export default function useInputRenderer() {
-  const { keyDownHandler, input } = useKeyDownHandler();
+  // program ref varaiables
-  let stream: any;
   const renderAudio = ref(false);
-  const {handleStream} = useStreamRecorder(renderAudio)
+  const reactiveWidth = ref(10);
   
+  // get input feedback & handler function
+  const { keyDownHandler, input } = useKeyDownHandler();
+  // get text Offset and & textRender function
+  const { textInputXoffset, renderTextInput } = useTextInput(input, renderAudio);
+
+  // why do we have audio stuff here 
+  let stream: any;
+  const {handleStream} = useStreamRecorder(renderAudio)
   onMounted(async () => {
     stream = await useMediaStream()
   })
 
+  // stop stream recording on space keyup event
   function keyupHandler(e: any) {
     if (e.key === " " && renderAudio.value) {
       console.log("stop recording");
       renderAudio.value = false;
-
-      // window.postMessage(
-      //   {
-      //     myTypeField: "audio-stream",
-      //     stream: false,
-      //   },
-      //   "*"
-      // );
       input.value = "";
-      reactiveWidth.value = 35;
+      reactiveWidth.value = 10;
     }
   }
 
@@ -34,49 +37,34 @@ export default function useInputRenderer() {
   window.addEventListener("keydown", keyDownHandler);
   window.addEventListener('keyup', keyupHandler);
 
-  // remove Event Listener on component unMount
+  // remove Event Listeners on component unMount
   onUnmounted(() => {
     window.removeEventListener("keydown", keyDownHandler);
     window.removeEventListener("keyup", keyupHandler);
   });
 
+  // determine whether to render text or audio based one the keyboard input
   watch(input, async (input, prevInput) => {
-    console.log(input)
+    if (prevInput !== "" || prevInput.length > 0) {
-    if (prevInput === '' && input === ' ') {
+      if (!renderAudio.value) {
-      // begin recording
+        renderTextInput();
-      console.log('record')
       }
-    // if (prevInput !== "" || prevInput.length > 0) {
+      return;
-    //   if (!renderAudio.value) {
+    }
-    //     // renderInput();
+    if (input === " " && renderAudio.value === false) {
-    //   }
+      console.log("record");
-    //   return;
+      renderAudio.value = true;
-    // }
+      handleStream(stream.stream, reactiveWidth);
-    // if (input === " " && renderAudio.value === false) {
+      return;
-    //   console.log("record");
+    }           
-    //   renderAudio.value = true;
+    renderTextInput();
-    //   // handleStream(stream.stream, reactiveWidth);
-    //   return;
-    //   // window.postMessage(
-    //   //   {
-    //   //     myTypeField: "audio-stream",
-    //   //     stream: true,
-    //   //   },
-    //   //   "*"
-    //   // );
-    // }           
-    // renderInput();
   });
 
-  const reactiveWidth = ref(35);
-  watch(reactiveWidth, (w) => {
-    console.log(w)
-  })
-
   return {
     input,
     renderAudio,
-    reactiveWidth
+    reactiveWidth,
+    textInputXoffset
   }
 
 }

src/composables/inputItem/useTextInput.ts

@@ -1,9 +1,7 @@
 import {ref, computed, watch, inject} from 'vue';
 import useInputAnims from "./useInputAnims";
 import useInputRenderer from './useInputRenderer';
-export default function useTextInput() {
+export default function useTextInput(input: any, audioRender: any) {
-
-  const {input, renderAudio} = useInputRenderer();
 
   const emitter: any = inject("mitt");
   const {animateSend, verticalShiftInput, inputAppear} = useInputAnims();
@@ -29,24 +27,18 @@ export default function useTextInput() {
       }
   }
 
-  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(() => {
+  const textInputXoffset = computed(() => {
     return `calc(50% - ${inputWidth.value / 2})`;
   });
 
   return {
-    input,
+    textInputXoffset,
-    inputXoffset,
+    renderTextInput
   }
 }