refactor core into composables & components

src/background.ts

@@ -6,8 +6,9 @@ import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
 const isDevelopment = process.env.NODE_ENV !== "production";
 import * as path from "path";
 const fs = require('fs');
-
+import WebSocket from "ws";
 const portAudio = require('naudiodon');
+console.log(portAudio.getDevices());
 
 // Create an instance of AudioIO with inOptions (defaults are as below), which will return a ReadableStream
 const audioOptions = {
@@ -18,12 +19,20 @@ const audioOptions = {
   closeOnError: true // Close the stream if an audio error is detected, if set false then just log the error
 }
 
+// Create an instance of AudioIO with outOptions (defaults are as below), which will return a WritableStream
+const ao = new portAudio.AudioIO({
+  outOptions: audioOptions 
+});
+
 let ai = new portAudio.AudioIO({
   inOptions: audioOptions
 });
 
-import WebSocket from "ws";
+const filename = "rawAudio.wav";
 
+// Create a write stream to write out to a raw audio file
+const writeStream = fs.createWriteStream(filename);
+ai.pipe(writeStream);
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let win: BrowserWindow | null;
@@ -88,15 +97,19 @@ function createWindow() {
     ipcMain.on('update-recorder', (Event: any, record: boolean) => {
      if (record) {
        ai.start();
-       ai.on('data', (buf: Buffer) => {
+       // ai.on('data', (buf: Buffer) => {
-          const base64Data = buf.toString('base64');
+       //    const base64Data = buf.toString('base64');
-          audioData += base64Data;
+       //    audioData += base64Data;
-       }); 
+       // }); 
      } else {
        ai.quit();
+
+       const audio = {
+         content: fs.readFileSync(filename).toString('base64'), 
+       }
        const message = {
          text: "",
-         audio: audioData
+         audio
        }
        ws.send(JSON.stringify(message))
        ai =  new portAudio.AudioIO({

src/components/UI/UIDetails/titleBar.vue

@@ -1,64 +0,0 @@
-<template>
-  <defs>
-    <linearGradient
-      id="linear-gradient"
-      x1="0.5"
-      y1="-1.438"
-      x2="0.5"
-      y2="0.633"
-      gradientUnits="objectBoundingBox"
-    >
-      <stop offset="0" stop-color="#fff33b" stop-opacity="0" />
-      <stop offset="0.152" stop-color="#ffde46" stop-opacity="0.141" />
-      <stop offset="0.467" stop-color="#ffa764" stop-opacity="0.435" />
-      <stop offset="0.581" stop-color="#ff916f" stop-opacity="0.541" />
-      <stop offset="1" stop-color="#ff5782" />
-    </linearGradient>
-    <linearGradient
-      id="linear-gradient-2"
-      x1="0.498"
-      y1="0.728"
-      x2="0.498"
-      y2="-0.433"
-      gradientUnits="objectBoundingBox"
-    >
-      <stop offset="0" stop-color="#f7cf83" />
-      <stop offset="1" stop-color="#fff" />
-    </linearGradient>
-    <rect id="rect" width="29" height="29" rx="10" />
-    <clipPath id="clip">
-      <use xlink:href="#rect" />
-    </clipPath>
-  </defs>
-
-  <g id="titlebar" transform="translate(0, 0)">
-    <g data-name="Group 73" transform="translate(20 20)">
-      <ellipse
-        id="Oval"
-        cx="8.134"
-        cy="8.134"
-        rx="8.134"
-        ry="8.134"
-        transform="translate(0 0)"
-        fill="url(#linear-gradient)"
-      />
-      <ellipse
-        id="Oval-2"
-        data-name="Oval"
-        cx="8.134"
-        cy="8.134"
-        rx="8.134"
-        ry="8.134"
-        transform="translate(27 0)"
-        fill="url(#linear-gradient-2)"
-      />
-    </g>
-  </g>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "TitleBar",
-});
-</script>

src/components/input/inputItem.vue

@@ -1,32 +0,0 @@
-<template>
-  <audio-input v-if="visualizeStream" :bubbleWidth="audioBubbleWidth" :paths="paths" />
-  <text-input v-else :input="input" :textXoffset="textInputXoffset" />
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import TextInput from "./inputDetails/textInput.vue";
-import AudioInput from "./inputDetails/audioInput.vue";
-import useInputController from "@/core/UI/input/useInputController";
-export default defineComponent({
-  name: "InputItem",
-  components: { TextInput, AudioInput },
-  setup() {
-    const {
-      input,
-      visualizeStream,
-      textInputXoffset,
-      audioBubbleWidth,
-      paths,
-    } = useInputController();
-
-    return {
-      input,
-      textInputXoffset,
-      visualizeStream,
-      audioBubbleWidth,
-      paths,
-    };
-  },
-});
-</script>

src/components/inputVisualizer/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <audio-stream v-if="visualizeStream" :bubbleWidth="audioBubbleWidth" :paths="paths" />
+  <text-input v-else :input="input" :textXoffset="textInputXoffset" />
+</template>
+
+<script lang="ts">
+// input child components
+import TextInput from "./visualizerDetails/text.vue";
+import AudioStream from "./visualizerDetails/audio.vue";
+
+import useInputVisualizer from "./visualizer";
+
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "InputVisualizer",
+  components: { TextInput, AudioStream },
+  setup() {
+    // get text input
+
+    // get audio stream
+
+    // use Input Handler
+
+    const {
+      input,
+      visualizeStream,
+      textInputXoffset,
+      audioBubbleWidth,
+      paths,
+    } = useInputVisualizer();
+
+    return {
+      input,
+      textInputXoffset,
+      visualizeStream,
+      audioBubbleWidth,
+      paths,
+    };
+  },
+});
+</script>

src/components/inputVisualizer/visualizer.ts

@@ -0,0 +1,92 @@
+import { ref, watch, onUnmounted, onMounted } from "vue";
+
+import useKeyDownHandler from "@/composables/keyDownHandler/useKeyDownHandler";
+
+import useMediaStream from "@/utils/mediaStream/useMediaStream";
+
+import useStreamVisualizer from './visualizerDetails/audioVisualizer';
+
+import useTextVisualizer from './visualizerDetails/textVisualizer';
+
+/*
+* Input visualizer
+* 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() {
+    const visualizeStream = ref(false);
+    const paths = ref([]);
+    const audioBubbleWidth = ref(10);
+    let stream: MediaStream;
+
+    const { keyDownHandler, input } = useKeyDownHandler();
+    const { textInputXoffset, renderTextInput } = useTextVisualizer(input);
+    const { visualizeStreamAsPaths, expandBubble } = useStreamVisualizer(visualizeStream);
+
+    // stops stream recording on space key up
+    function keyupHandler(e: any) {
+        if (e.key === " " && visualizeStream.value) {
+            console.log("stop recording");
+
+            // window.postMessage({
+            //   myTypeField: 'update-recorder',
+            //   record: false
+            // }, '*')
+
+            visualizeStream.value = false;
+            paths.value = []
+            audioBubbleWidth.value = 10;
+            input.value = ''
+        }
+    }
+
+    // add window event keyboard listeners
+    window.addEventListener("keydown", keyDownHandler);
+    window.addEventListener('keyup', keyupHandler);
+
+    // get stream & initialize recorder object on mount
+    onMounted(async () => {
+        stream = await useMediaStream();
+    })
+
+    // determine whether to render text or audio based one the keyboard input
+    watch(input, (input, prevInput) => {
+        if (prevInput !== "" || prevInput.length > 0) {
+            if (!visualizeStream.value) {
+                renderTextInput();
+            }
+            return;
+        }
+        if (input === " " && visualizeStream.value === false) {
+            console.log("record MediaStream");
+            visualizeStream.value = true;
+
+            // window.postMessage({
+            //   myTypeField: 'update-recorder',
+            //   record: true
+            // }, '*')
+
+            expandBubble(audioBubbleWidth);
+            visualizeStreamAsPaths(stream, paths, audioBubbleWidth);
+            return;
+        }
+        renderTextInput();
+    });
+
+    // remove Event Listeners on component unMount
+    onUnmounted(() => {
+        window.removeEventListener("keydown", keyDownHandler);
+        window.removeEventListener("keyup", keyupHandler);
+    });
+
+    return {
+        input,
+        visualizeStream,
+        textInputXoffset,
+        audioBubbleWidth,
+        paths
+    }
+
+}

src/components/inputVisualizer/visualizerDetails/audio.vue

@@ -1,19 +1,14 @@
 <template>
-  <svg 
+  <svg
-    xmlns="http://www.w3.org/2000/svg" 
+    xmlns="http://www.w3.org/2000/svg"
-    :width="bubbleWidth" 
+    :width="bubbleWidth"
-    height="34" 
+    height="34"
-    :x="center" 
+    :x="center"
-    y="440" 
+    y="440"
     rx="10"
     class="audioInput"
   >
-    <g 
+    <g id="Group_126" data-name="Group 126" transform="translate(0 0)" rx="10">
-      id="Group_126" 
-      data-name="Group 126" 
-      transform="translate(0 0)" 
-      rx="10"
-    >
       <rect
         id="Rectangle_478"
         data-name="Rectangle 478"
@@ -24,19 +19,19 @@
         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">
-        <path
+          <path
-          :key="index"
+            :key="index"
-          id="path"
+            id="path"
-          :data-name="path.identifier"
+            :data-name="path.identifier"
-          :d="path.d"
+            :d="path.d"
-          :transform="`translate(${path.offset} 0)`"
+            :transform="`translate(${path.offset} 0)`"
-          fill="none"
+            fill="none"
-          :stroke="path.color"
+            :stroke="path.color"
-          stroke-linecap="round"
+            stroke-linecap="round"
-          stroke-width="1.5"
+            stroke-width="1.5"
-        />
+          />
-      </g>
+        </g>
       </svg>
     </g>
   </svg>
@@ -45,17 +40,14 @@
 <script lang="ts">
 import { defineComponent, computed, inject } from "vue";
 export default defineComponent({
-  name: "AudioInput",
+  name: "AudioStream",
   props: {
     bubbleWidth: Number,
     paths: Array,
   },
   setup(props) {
-
     const emitter: any = inject("mitt");
-    function audioSend() {
+    function audioSend() {}
-
-    }
 
     const center = computed(() => {
       if (props.bubbleWidth) {

src/components/inputVisualizer/visualizerDetails/audioVisualizer.ts

@@ -24,7 +24,7 @@ export default function useStreamVisualizer(draw: Ref<boolean>) {
     /*
      * Draws MediaStream audioTrack as 'AudioPath' objects
      */
-    function drawStreamAs(paths: Ref<any>, bubbleWidth: Ref<number>): void {
+    function drawStream(paths: Ref<any>, bubbleWidth: Ref<number>): void {
         const xInitial = ref(10);
         const maxAmplitude = 15;
         const maxBubbleWidth = 300;
@@ -51,7 +51,7 @@ export default function useStreamVisualizer(draw: Ref<boolean>) {
                         opacity: 0,
                         duration: 0
                     })
-                } 
+                }
             }
 
         }
@@ -77,7 +77,7 @@ export default function useStreamVisualizer(draw: Ref<boolean>) {
             paths.value.push(p);
         }
 
-            paths.value = [];
+        paths.value = [];
         function drawPathStream(): void {
 
             let streamPath;
@@ -94,11 +94,11 @@ export default function useStreamVisualizer(draw: Ref<boolean>) {
              * To Draw pathStream
              */
             if (bubbleWidth.value === 300) {
-              xInitial.value = bubbleWidth.value - 10;
+                xInitial.value = bubbleWidth.value - 10;
             } else if (bubbleWidth.value > 20) {
-              xInitial.value = bubbleWidth.value;
+                xInitial.value = bubbleWidth.value;
             } else {
-                xInitial.value +=3;
+                xInitial.value += 3;
             }
             streamPath = setTimeout(async () => {
                 const pathList = document.querySelectorAll('path');
@@ -106,8 +106,8 @@ export default function useStreamVisualizer(draw: Ref<boolean>) {
                 drawNewPath();
                 if (bubbleWidth.value === maxBubbleWidth) {
                     shiftPathStream(pathList);
-                } 
+                }
-             }, 200)
+            }, 200)
         }
         drawPathStream();
     }
@@ -123,9 +123,9 @@ export default function useStreamVisualizer(draw: Ref<boolean>) {
                 return;
             }
             animation = requestAnimationFrame(increase);
-         if (bubbleRef.value < 300) {
+            if (bubbleRef.value < 300) {
-             bubbleRef.value++;
+                bubbleRef.value++;
-         }
+            }
         }
         increase();
     }
@@ -137,7 +137,7 @@ export default function useStreamVisualizer(draw: Ref<boolean>) {
     function visualizeStreamAsPaths(s: MediaStream, paths: Ref<any>, bubbleWidth: Ref<number>): void {
         const source = audioContext.createMediaStreamSource(s);
         source.connect(analyzer);
-        drawStreamAs(paths, bubbleWidth);
+        drawStream(paths, bubbleWidth);
     }
 
     return {

src/components/inputVisualizer/visualizerDetails/text.vue

@@ -1,11 +1,5 @@
 <template>
-  <foreignObject 
+  <foreignObject class="inputContainer" :x="textXoffset" y="450" width="55%" height="50%">
-    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>
@@ -15,12 +9,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, watch, onMounted, ref } from "vue";
+import { defineComponent } from "vue";
 export default defineComponent({
   name: "TextInput",
   props: {
     input: String,
-    textXoffset: String
+    textXoffset: String,
   },
 });
 </script>

src/components/inputVisualizer/visualizerDetails/textAnime.ts

@@ -0,0 +1,57 @@
+import AnimeFunc from "@/types/animejs/index";
+import { inject } from "vue";
+import { Ref } from "@/types/vueRef/index";
+/*
+ * Anime js animations used by input textController
+*/
+export default function useTextInputAnims() {
+
+    // imports animejs safely
+    let anime: AnimeFunc;
+    const animeInject: AnimeFunc | undefined = inject("animejs");
+    if (animeInject) anime = animeInject;
+
+    const animateSend = (el: HTMLElement, elHeight: number, input: Ref<string>) => {
+        anime({
+            targets: el,
+            translateY: -elHeight + 15,
+            duration: 200,
+            easing: "easeInQuad",
+            complete: function() {
+                anime({
+                    targets: el,
+                    translateY: 50,
+                    duration: 200,
+                    easing: "easeOutQuad",
+                    complete: function() {
+                        input.value = "";
+                    }
+                })
+            }
+        })
+    }
+
+    const inputAppear = (el: HTMLElement) => {
+        anime({
+            targets: el,
+            translateY: -10,
+            duration: 0
+        });
+    }
+
+    const verticalShiftInput = (el: HTMLElement, yTrans: number) => {
+        anime({
+            targets: el,
+            translateY: yTrans,
+            easing: "easeOutQuad",
+            duration: 150,
+        });
+    }
+
+    return {
+        animateSend,
+        verticalShiftInput,
+        inputAppear
+    }
+
+}

src/components/inputVisualizer/visualizerDetails/textVisualizer.ts

@@ -0,0 +1,49 @@
+import { ref, computed, inject } from 'vue';
+import useTextInputAnims from "./textAnime";
+import { Ref } from "@/types/vueRef/index";
+/*
+ * text rendering logic used by inputController
+*/
+export default function useTextVisualizer(input: Ref<string>) {
+    const inputHeight = ref(42);
+    const inputWidth = ref(0);
+
+    const emitter: any = inject("mitt");
+    const { animateSend, verticalShiftInput, inputAppear } = useTextInputAnims();
+
+    async function renderTextInput() {
+        // first, get input dimensions
+        const inputDivs = await document.getElementsByClassName("inputBubble");
+        const height = inputDivs[0].getBoundingClientRect().height;
+        inputWidth.value = inputDivs[0].getBoundingClientRect().width;
+        // then, query for foreignObject div
+        const foreignObjectDiv = document.getElementsByClassName(
+            "inputContainer"
+        );
+        const foreignEl = foreignObjectDiv[0] as HTMLElement;
+        if (height !== inputHeight.value) {
+            inputHeight.value = height;
+        }
+        if (inputHeight.value === 0) {
+            inputAppear(foreignEl)
+        } else if (inputHeight.value > 36) {
+            const yTrans = -inputHeight.value + 30;
+            verticalShiftInput(foreignEl, yTrans);
+        }
+    }
+
+    emitter.on("newSelfMessage", async (payload: any) => {
+        const inputEl = document.getElementsByClassName("inputContainer");
+        const foreignEl = inputEl[0] as HTMLElement;
+        animateSend(foreignEl, inputHeight.value, input);
+    });
+
+    const textInputXoffset = computed(() => {
+        return `calc(50% - ${inputWidth.value / 2})`;
+    });
+
+    return {
+        textInputXoffset,
+        renderTextInput
+    }
+}

src/components/messenger/index.vue

@@ -6,24 +6,26 @@
     xmlns:xlink="http://www.w3.org/1999/xlink"
     @click="emittMessage"
   >
-    <!-- <AI /> -->
+    <MessageVisualizer />
-    <MessageRenderer />
+    <InputVisualizer />
-    <InputItem />
-    <!-- <TitleBar /> -->
   </svg>
 </template>
 
 <script lang="ts">
-import AI from "../AI/index.vue";
+// mock messages
-import MessageRenderer from "./UIDetails/messageRenderer.vue";
+import Messages from "./mockMessages";
-import InputItem from "@/components/input/inputItem.vue";
+
-import TitleBar from "./UIDetails/titleBar.vue";
+// child components
-import Messages from "./UIDetails/messages";
+import MessageVisualizer from "./messageVisualizer/index.vue";
+import InputVisualizer from "@/components/inputVisualizer/index.vue";
+
+// event emitter
 import { Mitt } from "@/types/mitt/index";
+
 import { defineComponent, ref, inject } from "vue";
 export default defineComponent({
-  name: "UI",
+  name: "Messenger",
-  components: {  MessageRenderer, InputItem },
+  components: { MessageVisualizer, InputVisualizer },
   setup() {
     const messages = Messages;
     const count = ref(0);
@@ -42,9 +44,9 @@ export default defineComponent({
     }
 
     window.ipcRenderer.on("render-message", (event, payload) => {
-      console.log(payload.message)
+      console.log(payload.message);
       emitter.emit("renderMessage", payload.message);
-    })
+    });
 
     return {
       emittMessage,

src/components/messenger/messageBubble/bubbleDetails/computed.ts

@@ -1,5 +1,9 @@
 import { computed, onMounted, ref } from "vue";
-export default function useMessageItemComp(m: string, id: string) {
+
+/**
+ * single message svg item computed properties
+ */
+export default function useComputedBubble(m: string, id: string) {
     const x = ref(0)
     const paddingLeft = 30;
     const winW = 350;
@@ -45,9 +49,9 @@ export default function useMessageItemComp(m: string, id: string) {
     }
 
     const startingOffset = computed(() => {
-        const messageRenderer = document.getElementById('messageRenderer');
+        const parentView = document.getElementById('messageVisualizer');
-        if (messageRenderer) {
+        if (parentView) {
-            const rect = messageRenderer.getBoundingClientRect();
+            const rect = parentView.getBoundingClientRect();
             let Y = 600;
             if (rect.height > 500) {
                 Y = rect.height + messageMarginTop;
@@ -57,10 +61,7 @@ export default function useMessageItemComp(m: string, id: string) {
     });
 
     onMounted(async () => {
-        // to calculate X offset:
-        // First: set message width ref
         await setMessageWidthRef();
-        // Then: calculate message X offset
         calculateXoffset();
     })
 

src/components/messenger/messageBubble/bubbleDetails/drawer.ts

@@ -1,6 +1,10 @@
 import { ref, onMounted } from "vue";
 import { Ref } from "@/types/vueRef/index";
-export default function useMessageItemAnims({
+
+/**
+ * handles visualization of single message svg items
+ */
+export default function useBubbleDrawer({
     mr,
     tr,
 }: {

src/components/messenger/messageBubble/index.vue

@@ -27,10 +27,13 @@
 </template>
 
 <script lang="ts">
+import useComputedBubble from "./bubbleDetails/computed";
+import useBubbleDrawer from "./bubbleDetails/drawer";
+
+// text wrap composition
+import useTextWrap from "@/composables/textWrap";
+
 import { defineComponent, onMounted, ref, reactive } from "vue";
-import useMessageItemComp from "@/core/messenger/message/messageDetails/useComputed";
-import useMessageItemAnims from "@/core/messenger/message/messageDetails/useAnimations";
-import useTextWrap from "@/utils/textWrap/useTextWrap";
 export default defineComponent({
   name: "MessageItem",
   props: {
@@ -46,12 +49,12 @@ export default defineComponent({
     const messageRect = ref(`message${msgID.value}`);
     const messageText = ref(`text${msgID.value}`);
 
-    const { textFill, bubbleFill, startingOffset } = useMessageItemComp(
+    const { textFill, bubbleFill, startingOffset } = useComputedBubble(
       props.item.modifier,
       props.item.id
     );
     const { textWrap } = useTextWrap();
-    const { drawMessage, signatureTranslate } = useMessageItemAnims({
+    const { drawMessage, signatureTranslate } = useBubbleDrawer({
       mr: messageRect,
       tr: messageText,
     });

src/components/messenger/messageVisualizer/index.vue

@@ -5,7 +5,7 @@
     xmlns:xlink="http://www.w3.org/1999/xlink"
     :viewBox="scrollView"
   >
-    <g id="messageRenderer" transform="translate(0, 5)">
+    <g id="messageVisualizer" transform="translate(0, 5)">
       <g
         v-for="(item, index) in renderArr"
         :key="index"
@@ -27,14 +27,18 @@
 </template>
 
 <script lang="ts">
-import useMessageView from "@/core/messenger/messageView/useMessageView";
+import useMessageVisualizer from "./viewDetails/visualizer";
-import useScrollView from "@/core/UI/scrollView/useScrollView";
+
-import { defineComponent, reactive, inject } from "vue";
+import useScrollView from "@/composables/scrollView";
-import MessageItem from "./messageItem.vue";
+
+import MessageItem from "../messageBubble/index.vue";
+
 import { Message } from "@/types/message/index";
+
 import { Mitt } from "@/types/mitt/index";
+import { defineComponent, reactive, inject } from "vue";
 export default defineComponent({
-  name: "MessageRenderer",
+  name: "MessageVisualizer",
   components: { MessageItem },
   setup() {
     const renderArr: Message[] = reactive([]);
@@ -49,9 +53,9 @@ export default defineComponent({
       });
     }
 
-    const { beforeEnter, enter, afterEnter } = useMessageView();
+    const { beforeEnter, enter, afterEnter } = useMessageVisualizer();
     const { scrollView } = useScrollView({
-      targetId: "messageRenderer",
+      targetId: "messageVisualizer",
     });
 
     return {

src/components/messenger/messageVisualizer/viewDetails/visualizer.ts

@@ -1,14 +1,12 @@
-import useMessageViewAnims from "./viewDetails/useAnimations";
-import useOffsetCalculator from './viewDetails/useOffsetCalculator';
 import { VueTransitionCallback } from '@/types/vue3/vueTransitionCallback/index';
-
+import useMessageViewAnims from "./anime";
+import useOffsetCalculator from './offsetCalculator';
 
 /**
- * messageView component logic
+ * handles visualization of view messages through 
- * handles visualization of exisiting user messages
+ * vue transition callbacks and anime-js animations
- * as well as incoming messages
  */
-export default function useMessageView(): {
+export default function useMessageVisualizer(): {
     beforeEnter: VueTransitionCallback;
     enter: VueTransitionCallback;
     afterEnter: VueTransitionCallback;
@@ -24,9 +22,8 @@ export default function useMessageView(): {
     let shift = false;
     let shiftOffset = 0;
 
-
     // animates message item to 'enter' renderView
-    const animateMessage = (el: SVGGElement) => {
+    const animateMessage = (el: SVGGElement): void => {
 
         const transform = {
             initialTranslate: `translate(${messageOffset.x} ${messageOffset.y})`,
@@ -35,13 +32,11 @@ export default function useMessageView(): {
         shift ? shiftAnimate(el, transform, shiftOffset, messageList) : stackAnimate(el, transform);
     }
 
-    // callback called before message enter
     const beforeEnter: VueTransitionCallback = () => {
         const queryResult = document.querySelectorAll(".messageList");
         if (queryResult.length) messageList = queryResult;
     }
 
-    // callback called on message enter
     const enter: VueTransitionCallback = (el) => {
         // query DOM for latest message as soon as it enters
         if (el) {
@@ -49,7 +44,6 @@ export default function useMessageView(): {
         }
     }
 
-    // callback called after message enter
     const afterEnter: VueTransitionCallback = (el) => {
         // get message positioning & shift state before animating
         if (message) {

src/components/messenger/mockMessages.ts

@@ -158,4 +158,4 @@ const Messages: Message[] = [
         time: ""
     },
 ];
-export default Messages;
+export default Messages;

src/components/voiceBackground/index.vue

@@ -34,7 +34,7 @@
 <script>
 import { defineComponent, onMounted, ref, inject, watch } from "vue";
 export default defineComponent({
-  name: "AI",
+  name: "voiceBackground",
   setup() {
     const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
     const analyzer = audioCtx.createAnalyser();

src/composables/mediaStream.ts

@@ -0,0 +1,6 @@
+export default async function useMediaStream() {
+   const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+   // var audioTrack = stream.getAudioTracks()[0]; 
+   // console.log(audioTrack.getSettings()) 
+   return stream;
+}

src/composables/scrollView.ts

@@ -1,5 +1,11 @@
-import { ref, computed, onMounted } from "vue";
+import { ref, computed, onMounted, onUnmounted } from "vue";
+
+/**
+ * handles visualization of view messages through 
+ * vue transition callbacks and anime-js animations
+ */
 export default function useScrollView({ targetId }: { targetId: string }) {
+
   const scroll = ref(0);
   let scrollTarget: HTMLElement | SVGElement | null;
   const targetHeight = ref(0);
@@ -27,7 +33,7 @@ export default function useScrollView({ targetId }: { targetId: string }) {
     }
   }
 
-  const handleScrollEvent = (verticalScroll: number) => {
+  const updateView = (verticalScroll: number) => {
     if (scrollTarget) {
       const heightResult = getHeight();
       if (heightResult) {
@@ -40,16 +46,22 @@ export default function useScrollView({ targetId }: { targetId: string }) {
     }
   }
 
+  const scrollUpdate = (e: any): void => {
+    const verticalScroll = e.deltaY * 0.25;
+    updateView(verticalScroll);
+  }
+
   onMounted(() => {
     scrollTarget = document.getElementById(targetId);
     if (scrollTarget) {
-      window.addEventListener("wheel", (e) => {
+      window.addEventListener("wheel", scrollUpdate);
-        const verticalScroll = e.deltaY * 0.25;
-        handleScrollEvent(verticalScroll);
-      })
     }
   });
 
+  onUnmounted(() => {
+     window.removeEventListener("wheel", scrollUpdate);
+  })
+
   return {
     scrollView
   }

src/core/UI/input/audio/audioDetails/useAnimations.ts

@@ -1,28 +0,0 @@
-import AnimeFunc from "@/types/animejs/index";
-import {inject} from "vue";
-import {Ref} from "@/types/vueRef/index";
-
-export default function useAudioAnimations() {
-  // imports animejs safely
-  let anime: AnimeFunc;
-  const animeInject: AnimeFunc | undefined = inject("animejs");
-  if (animeInject) anime = animeInject;
-
-  function animateSend(el: Element, trigger: Ref<boolean>) {  
-    console.log(el);
-    anime({
-      targets: el,
-      opacity: 0,
-      translateY: -100,
-      duration: 0,
-      complete: function() {
-        trigger.value = false;
-      }
-    })
-  }
-
-  return {
-    animateSend
-  }
-
-}

src/core/UI/input/audio/useAudioRecorder.ts

@@ -1,67 +0,0 @@
-
-interface Window {
-  AudioContext: any;
-  webkitAudioContext: any;
-}
-
-interface Event {
-  inputBuffer: AudioBuffer;
-}
-
-import { Ref } from '@/types/vueRef/index';
-import { watch } from 'vue';
-
-export default function useAudioRecorder(record: Ref<boolean>, stream: MediaStream) {
-
-  let audioArray: Int16Array[] = [];
-  const bufferLen = 4096;
-  const numChannels = 1;
-
-  //window.AudioContext = window.AudioContext;
-  const audioContext = new AudioContext({ sampleRate: 16000 });
-
-  const source = audioContext.createMediaStreamSource(stream);
-  const context = source.context;
-  const sampleRate = context.sampleRate;
-
-  const node = context.createScriptProcessor.call(
-    context,
-    bufferLen,
-    numChannels,
-    numChannels
-  );
-
-  node.onaudioprocess = (e: Event) => {
-    const inputBuffer = new Float32Array(bufferLen);
-
-    e.inputBuffer.copyFromChannel(inputBuffer, 0);
-    const int16 = new Int16Array(inputBuffer.buffer);
-    audioArray.push(int16);
-  };
-
-  watch(record, (beginRecording) => {
-    if (beginRecording) {
-      node.connect(context.destination);
-    } else {
-      node.disconnect(context.destination);
-
-      const message = {
-        text: '',
-        audio: {
-          sampleRate: sampleRate,
-          channelCount: numChannels,
-          audio: audioArray
-        }
-      }
-      window.postMessage({
-        myTypeField: 'send-message',
-        message: message
-      }, '*')
-
-      audioArray = [];
-    }
-  })
-
-  source.connect(node);
-
-}

src/core/UI/input/audio/useStreamRecord.ts

@@ -1,55 +0,0 @@
-import { inject } from 'vue';
-export default function useStreamRecord(): {
-    initRecorder: (stream: MediaStream) => MediaRecorder;
-} {
-    let streamRecorder: MediaRecorder;
-    const chunks: Blob[] = [];
-    const emitter: any = inject("mitt");
-    const options = {
-        mimeType: "audio/webm; codecs=opus",
-    }
-
-    // console.log('ogg supported',MediaRecorder.isTypeSupported('audio/mpeg; '))
-    const initRecorder = (stream: MediaStream) => {
-
-        const audioTrack = stream.getAudioTracks()[0];
-        const audioSettings = audioTrack.getSettings()
-
-        streamRecorder = new MediaRecorder(stream, options);
-        streamRecorder.ondataavailable = (e: any) => {
-            if (e.data.size > 0) {
-                chunks.push(e.data);
-            } else {
-                // ...
-            }
-            //chunks.push(e.data) 
-        }
-        streamRecorder.onstop = async (e: any) => {
-            const audioBlob = new Blob(chunks, {
-                type: options.mimeType
-            });
-            const arrayBuffer = await audioBlob.arrayBuffer()
-            console.log(arrayBuffer)
-            const message = {
-                text: '',
-                audio: {
-                    sampleRate: audioSettings.sampleRate,
-                    sampleSize: audioSettings.sampleSize,
-                    channelCount: audioSettings.channelCount,
-                    mimeType: options.mimeType,
-                    arrayBuffer: arrayBuffer
-                }
-            }
-            window.postMessage({
-                myTypeField: 'send-message',
-                message: message
-            }, '*')
-
-        }
-        return streamRecorder
-    }
-
-    return {
-        initRecorder,
-    }
-}

src/core/UI/input/text/textDetails/useAnimations.ts

@@ -1,57 +0,0 @@
-import AnimeFunc from "@/types/animejs/index";
-import {inject} from "vue";
-import {Ref} from "@/types/vueRef/index";
-/*
- * Anime js animations used by input textController
-*/
-export default function useTextInputAnims() {
-
-    // imports animejs safely
-    let anime: AnimeFunc;
-    const animeInject: AnimeFunc | undefined = inject("animejs");
-    if (animeInject) anime = animeInject;
-    
-    const animateSend = (el: HTMLElement, elHeight: number, input: Ref<string>) => {
-      anime({
-        targets: el,
-        translateY: -elHeight + 15,
-        duration: 200,
-        easing: "easeInQuad",
-        complete: function() {
-          anime({
-            targets: el,
-            translateY: 50,
-            duration: 200,
-            easing: "easeOutQuad",
-            complete: function () {
-              input.value = "";
-            }
-          })
-        }
-      })
-    }
-
-    const inputAppear = (el: HTMLElement) => {
-        anime({
-          targets: el,
-          translateY: -10,
-          duration: 0
-        });
-    }
-
-    const verticalShiftInput = (el: HTMLElement, yTrans: number) => {
-        anime({
-          targets: el,
-          translateY: yTrans,
-          easing: "easeOutQuad",
-          duration: 150,
-        });
-    }
-
-    return {
-      animateSend,
-      verticalShiftInput,
-      inputAppear
-    }
-
-}

src/core/UI/input/text/useTextRender.ts

@@ -1,49 +0,0 @@
-import { ref, computed, inject } from 'vue';
-import useTextInputAnims from "./textDetails/useAnimations";
-import { Ref } from "@/types/vueRef/index";
-/*
- * text rendering logic used by inputController
-*/
-export default function useTextRender(input: Ref<string>) {
-  const inputHeight = ref(42);
-  const inputWidth = ref(0);
-
-  const emitter: any = inject("mitt");
-  const { animateSend, verticalShiftInput, inputAppear } = useTextInputAnims();
-
-  async function renderTextInput() {
-    // first, get input dimensions
-    const inputDivs = await document.getElementsByClassName("inputBubble");
-    const height = inputDivs[0].getBoundingClientRect().height;
-    inputWidth.value = inputDivs[0].getBoundingClientRect().width;
-    // then, query for foreignObject div
-    const foreignObjectDiv = document.getElementsByClassName(
-      "inputContainer"
-    );
-    const foreignEl = foreignObjectDiv[0] as HTMLElement;
-    if (height !== inputHeight.value) {
-      inputHeight.value = height;
-    }
-    if (inputHeight.value === 0) {
-      inputAppear(foreignEl)
-    } else if (inputHeight.value > 36) {
-      const yTrans = -inputHeight.value + 30;
-      verticalShiftInput(foreignEl, yTrans);
-    }
-  }
-
-  emitter.on("newSelfMessage", async (payload: any) => {
-    const inputEl = document.getElementsByClassName("inputContainer");
-    const foreignEl = inputEl[0] as HTMLElement;
-    animateSend(foreignEl, inputHeight.value, input);
-  });
-
-  const textInputXoffset = computed(() => {
-    return `calc(50% - ${inputWidth.value / 2})`;
-  });
-
-  return {
-    textInputXoffset,
-    renderTextInput
-  }
-}

src/core/UI/input/useInputController.ts

@@ -1,14 +1,21 @@
 import { ref, watch, onUnmounted, onMounted } from "vue";
+
 import useKeyDownHandler from "@/utils/keyDownHandler/useKeyDownHandler";
+
 import useMediaStream from "@/utils/mediaStream/useMediaStream";
+
 import useStreamRecord from "./audio/useStreamRecord";
+
 import useStreamVisualizer from './audio/useStreamVisualizer';
+
 import useTextRender from './text/useTextRender';
+
 import useAudioAnimations from './audio/audioDetails/useAnimations';
+
 import useAudioRecorder from './audio/useAudioRecorder';
 
 /* 
-* Input controller logic
+* Input visualizer logic
 * Will visualize text input by default as user types or
 * if user holds space bar down, input audio stream
 * will be visualized & recorded

src/router/index.ts

@@ -6,7 +6,7 @@ const routes: Array<RouteRecordRaw> = [
     path: "/",
     name: "Home",
     component: HomeIndex
-  }
+  },
 ];
 
 const router = createRouter({

src/views/home/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <UI />
+  <Messenger />
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import UI from "@/components/UI/index.vue";
+import Messenger from "@/components/messenger/index.vue";
 export default defineComponent({
   name: "HomeIndex",
-  components: { UI },
+  components: { Messenger },
 });
 </script>

testAudio.js

@@ -0,0 +1,21 @@
+const fs = require('fs');
+const portAudio = require('naudiodon');
+
+// Create an instance of AudioIO with outOptions (defaults are as below), which will return a WritableStream
+const ao = new portAudio.AudioIO({
+  outOptions: {
+    channelCount: 2,
+    sampleFormat: portAudio.SampleFormat16Bit,
+    sampleRate: 48000,
+    deviceId: -1, // Use -1 or omit the deviceId to select the default device
+    closeOnError: true // Close the stream if an audio error is detected, if set false then just log the error
+  }
+});
+
+// Create a stream to pipe into the AudioOutput
+// Note that this does not strip the WAV header so a click will be heard at the beginning
+const rs = fs.createReadStream('rawAudio.wav');
+
+// Start piping data and start streaming
+rs.pipe(ao);
+ao.start();