From 86a1460ad2e44c468aec51ee0b9a17d0ec85d677 Mon Sep 17 00:00:00 2001
From: riqo <hernandeze2@xavier.edu>
Date: Tue, 16 Feb 2021 17:00:24 -0600
Subject: [PATCH] implement message view render queue

---
 src/background/run.ts                         |  2 +-
 src/background/session.ts                     |  1 -
 src/components/messageView/index.vue          | 45 +++++++----
 .../messageView/viewDetails/anime.ts          | 53 +++++++------
 .../messageView/viewDetails/transitions.ts    | 24 ++++--
 src/components/taInput/inputController.ts     | 15 +---
 .../taInput/textDetails/textVisualizer.ts     |  2 +-
 src/modules/ipc.ts                            |  7 --
 src/modules/queue.ts                          | 78 +++++++++++++++++++
 src/views/home.vue                            | 16 +---
 {src/views => tests}/mockMessages.ts          |  0
 11 files changed, 160 insertions(+), 83 deletions(-)
 create mode 100644 src/modules/queue.ts
 rename {src/views => tests}/mockMessages.ts (100%)

diff --git a/src/background/run.ts b/src/background/run.ts
index dc3e150..d3ab521 100644
--- a/src/background/run.ts
+++ b/src/background/run.ts
@@ -23,6 +23,6 @@ export async function main() {
     socket = true;
 
     // Begin audio stream.
-    // initRecorder();
+    initRecorder();
 
 }
diff --git a/src/background/session.ts b/src/background/session.ts
index bb14979..5959e2e 100644
--- a/src/background/session.ts
+++ b/src/background/session.ts
@@ -81,7 +81,6 @@ const asyncSend = (_event?, payload: TextMessage | Buffer): Promise<RenderMessag
     return new Promise((resolve, reject) => {
 
         backgroundMitt.once('message-res', (res: RenderMessage) => {
-            console.log(res)
             if (res.content) {
                 resolve(res);
             } else {
diff --git a/src/components/messageView/index.vue b/src/components/messageView/index.vue
index 9a31f27..d6938c7 100644
--- a/src/components/messageView/index.vue
+++ b/src/components/messageView/index.vue
@@ -4,7 +4,6 @@
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     :viewBox="scrollView"
-    id="test"
   >
     <g id="messageView" transform="translate(0, 20)">
       <g v-for="(item, index) in renderArr" :key="index" preserverAspectRatio="none">
@@ -22,33 +21,54 @@
 </template>
 
 <script lang="ts">
-import useTransitions from "./viewDetails/transitions";
-import useScrollView from "@/modules/scrollView";
 import TextBubble from "@/components/textBubble/index.vue";
 import { Message } from "@/types/message/index";
-import { defineComponent, reactive, onMounted, onUnmounted } from "vue";
+import useTransitions from "./viewDetails/transitions";
+import useScrollView from "@/modules/scrollView";
 import useMitt from "@/modules/mitt";
 import { useIpc } from "@/modules/ipc";
+import { Queue } from '@/modules/queue';
+import { defineComponent, reactive, onMounted, onUnmounted, watch } from "vue";
 
 export default defineComponent({
   name: "MessageView",
   components: { TextBubble },
   setup() {
-    const renderArr: Message[] = reactive([]);
     const { emitter } = useMitt();
+    const renderArr: Message[] = reactive([]);
+    const renderQ = new Queue();
+
     const { data, invoke } = useIpc("message");
+    const { beforeEnter, enter, afterEnter, rendering } = useTransitions();
+    const { scrollView } = useScrollView({
+      targetId: "messageView",
+    });
+
+    const render = (m: Message) => {
+      if (rendering.value) {
+        renderQ.enqueue(m);
+      } else {
+        renderArr.push(m);
+      }
+    }
+
+    watch(rendering, (rendering, _prevRendering) => {
+      if (!rendering) {
+          const m = renderQ.dequeue() as Message | null;
+          if (m) renderArr.push(m);
+      }
+    })
 
     onMounted(() => {
       window.ipcRenderer.on("render-message", (event, payload) => {
-        const message = payload.message;
-        if (message.content) renderArr.push(message);
+        const m = payload.message;
+        if (m.content) render(m);
       });
 
-      emitter.on("animateSend", async (message) => {
+      emitter.on("user-message", async (message) => {
         try {
-          // renderArr.push(message)
           await invoke(message);
-          renderArr.push(data.value);
+          render(data.value)
         } catch (e) {
           console.log("No response. Do not render.");
         }
@@ -60,11 +80,6 @@ export default defineComponent({
       emitter.all.clear();
     });
 
-    const { beforeEnter, enter, afterEnter } = useTransitions();
-    const { scrollView } = useScrollView({
-      targetId: "messageView",
-    });
-
     return {
       renderArr,
       beforeEnter,
diff --git a/src/components/messageView/viewDetails/anime.ts b/src/components/messageView/viewDetails/anime.ts
index 3b82d36..0e56eb4 100644
--- a/src/components/messageView/viewDetails/anime.ts
+++ b/src/components/messageView/viewDetails/anime.ts
@@ -1,9 +1,8 @@
 import { inject } from "vue";
 import AnimeFunc from "@/types/animejs/index";
-import { MessageAnimeFunc } from '@/types/message/index';
 
 /**
- * anime js animations used by message renderer
+ * anime js animations used by message view transitions
  */
 export default function useMessageViewAnims() {
     // imports animejs safely
@@ -11,37 +10,47 @@ export default function useMessageViewAnims() {
     const animeInject: AnimeFunc | undefined = inject("animejs");
     if (animeInject) anime = animeInject;
 
-    // adds new message at the bottom of the list and shifts existing message list
-    const shiftAnimate = (el: Element, transform: string, view: SVGGElement, viewTransform: string) => {
+    // update message View bottom bound
+    const shiftView = (el: SVGGElement, transform: string) => {
         anime({
             targets: el,
             transform: transform,
             easing: "easeInOutQuad",
-            duration: 800,
-            begin: function() {
-                shiftView(view, viewTransform);
-            },
+            duration: 500,
         });
     }
 
     // stacks message from top to bottom
     const stackAnimate = (el: Element, transform: string) => {
-        anime({
-            targets: el,
-            transform: transform,
-            easing: "easeInOutQuad",
-            duration: 1000,
-        });
+        return new Promise((resolve, _reject) => {
+            anime({
+                targets: el,
+                transform: transform,
+                easing: "easeInOutQuad",
+                duration: 1000,
+                complete: function() {
+                    resolve();
+                }
+            });
+        })
     }
 
-    // update message View bottom bound
-    const shiftView = (el: SVGGElement, transform: string) => {
-        anime({
-            targets: el,
-            transform: transform,
-            easing: "easeInOutQuad",
-            duration: 500,
-        });
+    // adds new message at the bottom of the list and shifts existing message list
+    const shiftAnimate = (el: Element, transform: string, view: SVGGElement, viewTransform: string) => {
+        return new Promise((resolve, _reject) => {
+            anime({
+                targets: el,
+                transform: transform,
+                easing: "easeInOutQuad",
+                duration: 800,
+                begin: function() {
+                    shiftView(view, viewTransform);
+                },
+                complete: function() {
+                    resolve();
+                }
+            });
+        })
     }
 
     return {
diff --git a/src/components/messageView/viewDetails/transitions.ts b/src/components/messageView/viewDetails/transitions.ts
index 2562dac..8d85701 100644
--- a/src/components/messageView/viewDetails/transitions.ts
+++ b/src/components/messageView/viewDetails/transitions.ts
@@ -1,11 +1,18 @@
 /**
- * handles visualization of view messages through
- * vue transition callbacks and anime-js animations
+ * Do stuff before, on, and after message enters the view.
+ * Rendering Process consists of the execution of the above 
+ * mentioned callbacks followed by the shift or stack animation. 
+ * The animation called depends on the height of the message view 
+ * relative to the window height. Additionally, the animation will
+ * always be called on the after enter callback, after all the neccesary 
+ * calculations have been completed. While all of this is hapenning,
+ * the rendering state is updated throughout the process.
  */
 
 import { VueTransitionCallback } from '@/types/vue3/vueTransitionCallback/index';
 import useMessageViewAnims from "./anime";
 import useOffsetCalculator from './offsetCalculator';
+import { ref } from 'vue';
 
 const wH = 500; // window Height
 const vP = 10;  // view padding
@@ -22,21 +29,23 @@ let messageView: SVGGElement;
 export default function useTransitions() {
     const { calculateMessageOffsets } = useOffsetCalculator();
     const { shiftAnimate, stackAnimate } = useMessageViewAnims();
+    const rendering = ref(false);
 
-    const animateMessage = (el: SVGGElement): void => {
+    const animateMessage = async (el: SVGGElement) => {
 
         const elTransform = `translate(${messageOffset.x} ${messageOffset.y})`;
         const viewTransform = `translate(0 ${-vB})`;
 
         if (shift) {
-            shiftAnimate(el, elTransform, messageView, viewTransform);
+            await shiftAnimate(el, elTransform, messageView, viewTransform);
         } else {
-            stackAnimate(el, elTransform)
+            await stackAnimate(el, elTransform)
         }
-
+        rendering.value = false;
     }
 
     const beforeEnter: VueTransitionCallback = () => {
+        rendering.value = true;
         // query DOM for messageView element
         const messageViewQuery = document.querySelectorAll("#messageView");
         messageView = messageViewQuery[0] as SVGGElement;
@@ -52,7 +61,7 @@ export default function useTransitions() {
         }
     }
 
-    const afterEnter: VueTransitionCallback = async (el) => {
+    const afterEnter: VueTransitionCallback = (el) => {
 
         if (message) messageOffset = calculateMessageOffsets(message);
 
@@ -71,5 +80,6 @@ export default function useTransitions() {
         beforeEnter,
         enter,
         afterEnter,
+        rendering
     };
 }
diff --git a/src/components/taInput/inputController.ts b/src/components/taInput/inputController.ts
index f3c4ca9..e7eda4c 100644
--- a/src/components/taInput/inputController.ts
+++ b/src/components/taInput/inputController.ts
@@ -29,7 +29,7 @@ export default function useInputController() {
             audio: 0,
             text: input
         };
-        emitter.emit("animateSend", message);
+        emitter.emit("user-message", message);
     }
 
     const { visualizeStreamAsPaths, expandBubble } = useAudioVisualizer(visualizeStream);
@@ -39,14 +39,8 @@ export default function useInputController() {
     // stops stream recording on space key up
     function keyupHandler(e: any) {
         if (e.key === " " && visualizeStream.value) {
-            console.log("stop recording");
 
             post(false);
-            // window.postMessage({
-            //     myTypeField: 'update-recorder',
-            //     record: false
-            // }, '*')
-
             visualizeStream.value = false;
             paths.value = []
             audioBubbleWidth.value = 10;
@@ -75,15 +69,8 @@ export default function useInputController() {
             return;
         }
         if (input === " " && visualizeStream.value === false) {
-            console.log("record MediaStream");
             visualizeStream.value = true;
-
             post(true);
-            // window.postMessage({
-            //     myTypeField: 'update-recorder',
-            //     record: true
-            // }, '*')
-
             expandBubble(audioBubbleWidth);
             visualizeStreamAsPaths(stream, paths, audioBubbleWidth);
             return;
diff --git a/src/components/taInput/textDetails/textVisualizer.ts b/src/components/taInput/textDetails/textVisualizer.ts
index 8dbda23..86ed1cc 100644
--- a/src/components/taInput/textDetails/textVisualizer.ts
+++ b/src/components/taInput/textDetails/textVisualizer.ts
@@ -32,7 +32,7 @@ export default function useTextVisualizer(input: Ref<string>) {
         }
     }
 
-    emitter.on("animateSend", async (payload: any) => {
+    emitter.on("user-message", () => {
         const inputEl = document.getElementsByClassName("inputContainer");
         const foreignEl = inputEl[0] as HTMLElement;
         animateSend(foreignEl, inputHeight.value, input);
diff --git a/src/modules/ipc.ts b/src/modules/ipc.ts
index 3018767..53c4288 100644
--- a/src/modules/ipc.ts
+++ b/src/modules/ipc.ts
@@ -20,13 +20,6 @@ export const useIpc = (endpoint: string) => {
             error.value = e;
             throw e;
         }
-
-        // return window.ipcRenderer.invoke(endpoint, payload).then(res => {
-        //     data.value = res;
-        // }).catch(e => {
-        //     error.value = e;
-        //     throw e;
-        // })
     }
 
     const post = (payload: any) => {
diff --git a/src/modules/queue.ts b/src/modules/queue.ts
new file mode 100644
index 0000000..8b734b9
--- /dev/null
+++ b/src/modules/queue.ts
@@ -0,0 +1,78 @@
+export interface DataNode<T> {
+    data: T;
+    next: DataNode<T> | null;
+}
+
+export interface QueueI<T> {
+  enqueue(data: T): void;
+  dequeue(): T | null;
+  peek(): T | null;
+  size(): number;
+}
+
+export class Queue<T> implements QueueI<T> {
+  private _size: number;
+  private head: DataNode<T> | null;
+  private tail: DataNode<T>  | null;
+  constructor() {
+     this._size = 0;
+     this.head = this.tail = null; 
+  }
+
+  enqueue(data: T) {
+
+      const node: DataNode<T> = {
+         data,
+         next: null 
+      }
+      if (this.head === null) {
+         this.head = this.tail = node; 
+      } else {
+        if (this.tail) {
+         this.tail.next = node; 
+         this.tail = this.tail.next;
+        }
+
+      }
+      ++this._size;
+  }
+
+  dequeue(): T | null {
+
+    let item: T | null = null; 
+
+    if (this._size === 0) {
+      return null;
+    }
+
+    if (this.head) {
+      item = this.head.data;
+      this.head = this.head.next;
+      --this._size;
+
+      if (!this._size) {
+       this.tail = null; 
+      }
+    }
+    return item;
+  }
+
+  peek(): T | null {
+
+    let item: T | null = null; 
+
+    if (this._size === 0) {
+     return null;
+    }
+
+    if (this.head) {
+       item = this.head.data; 
+    }
+    
+    return item;
+  }
+
+  size(): number {
+    return this._size;
+  }
+}
diff --git a/src/views/home.vue b/src/views/home.vue
index c502e36..677474b 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -13,25 +13,11 @@
 <script lang="ts">
 import MessageView from "@/components/messageView/index.vue";
 import TextAudioInput from "@/components/taInput/index.vue";
-import { defineComponent, ref } from "vue";
-import {Messages} from './mockMessages';
-import useMitt from "@/modules/mitt";
+import { defineComponent } from "vue";
 
 export default defineComponent({
   name: "Messenger",
   components: { MessageView, TextAudioInput },
-  setup() {
-     const { emitter } = useMitt();
-     const counter = ref(0);
-
-      const emittMessage = () => {
-            emitter.emit('animateSend', Messages[counter.value])
-            counter.value++;
-          }
-          return {
-                  emittMessage
-              }
-  }
 });
 </script>
 
diff --git a/src/views/mockMessages.ts b/tests/mockMessages.ts
similarity index 100%
rename from src/views/mockMessages.ts
rename to tests/mockMessages.ts
-- 
2.43.0