cleaning some things up

src/components/messenger/index.vue

@@ -12,8 +12,6 @@
 </template>
 
 <script lang="ts">
-// mock messages
-import Messages from "./mockMessages";
 
 // child components
 import MessageVisualizer from "./messageVisualizer/index.vue";
@@ -23,44 +21,40 @@ import TextAudioInput from "@/components/taInput/index.vue";
 import { Mitt } from "@/types/mitt/index";
 
 import { defineComponent, ref, inject } from "vue";
+
 export default defineComponent({
+
   name: "Messenger",
   components: { MessageVisualizer, TextAudioInput },
+  
   setup() {
-    const messages = Messages;
     const count = ref(0);
 
     // imports mitt Emitter safely
     let emitter: Mitt;
     const emitterInject: Mitt | undefined = inject("mitt");
-    if (emitterInject) emitter = emitterInject;
 
-    function emittMessage() {
-      if (count.value < messages.length) {
-        emitter.emit("renderMessage", messages[count.value]);
-        count.value++;
-        return;
-      }
+    if (emitterInject) {
+      emitter = emitterInject;
     }
 
+    // Render message when render-message event called.
     window.ipcRenderer.on("render-message", (event, payload) => {
       console.log(payload.message);
       emitter.emit("renderMessage", payload.message);
     });
 
-    return {
-      emittMessage,
-    };
   },
 });
+
 </script>
 
 <style lang="scss" scoped>
-#messenger {
-  width: 350px;
-  height: 500px;
-  background-color: #e6e6e6;
-  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
-  // border-radius: 20px;
-}
+  #messenger {
+    width: 350px;
+    height: 500px;
+    background-color: #e6e6e6;
+    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
+    // border-radius: 20px;
+  }
 </style>

src/components/voiceBackground/index.vue

@@ -1,127 +0,0 @@
-<template>
-  <defs>
-    <radialGradient
-      id="radial-gradient"
-      cx="0.5"
-      cy="0.7"
-      :r="radius"
-      gradientTransform="translate(-1.489 1.5) rotate(-90) scale(1 1.989)"
-      gradientUnits="objectBoundingBox"
-    >
-      <stop offset="0" stop-color="#fff" />
-      <stop id="sound" offset="1" stop-color="rgb(230, 230, 230)" />
-    </radialGradient>
-    <filter id="Rectangle_410" x="0" y="0" width="380" height="530" filterUnits="userSpaceOnUse">
-      <feOffset dy="3" input="SourceAlpha" />
-      <feGaussianBlur stdDeviation="5" result="blur" />
-      <feFlood flood-opacity="0.129" />
-      <feComposite operator="in" in2="blur" />
-      <feComposite in="SourceGraphic" />
-    </filter>
-  </defs>
-
-  <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#Rectangle_410)">
-    <rect
-      id="Rectangle_410-2"
-      data-name="Rectangle 410"
-      width="350"
-      height="500"
-      fill="url(#radial-gradient)"
-    />
-  </g>
-</template>
-
-<script>
-import { defineComponent, onMounted, ref, inject, watch } from "vue";
-export default defineComponent({
-  name: "voiceBackground",
-  setup() {
-    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-    const analyzer = audioCtx.createAnalyser();
-    analyzer.fftSize = 2048;
-    const xInitial = 24;
-    const xFinal = 640;
-    // analyzer.minDecibels = -90;
-    analyzer.smoothingTimeConstant = 0.85;
-    const dataArray = new Uint8Array(analyzer.frequencyBinCount);
-    const sampleRate = 16000;
-    let gradient;
-    const radius = ref(0);
-    const think = ref(false);
-    const aiOffset = ref(0.7);
-
-    const anime = inject("animejs");
-    let thinkAnimation;
-
-    onMounted(() => {
-      gradient = document.getElementById("radial-gradient");
-
-      thinkAnimation = anime({
-        targets: gradient,
-        loop: true,
-        cy: "1.3",
-        direction: "alternate",
-        easing: "easeInOutCirc",
-      });
-    });
-
-    function convertBlock(buffer) {
-      // incoming data is an ArrayBuffer
-      const incomingData = new Uint8Array(buffer); // create a uint8 view on the ArrayBuffer
-      const l = incomingData.length; // length, we need this for the loop
-      const outputData = new Float32Array(incomingData.length); // create the Float32Array for output
-      for (let i = 0; i < l; i++) {
-        outputData[i] = (incomingData[i] - 128) / 128.0; // convert audio to float
-      }
-      return outputData; // return the Float32Array
-    }
-
-    window.ipcRenderer.on("render-audio", (event, payload) => {
-      const floatArray = convertBlock(payload.audio.buffer);
-      const buffer = audioCtx.createBuffer(1, floatArray.length, sampleRate);
-      buffer.copyToChannel(floatArray, 0, 0);
-      const source = audioCtx.createBufferSource();
-      source.buffer = buffer;
-      source.connect(analyzer);
-      source.start();
-      analyzer.getByteFrequencyData(dataArray);
-      const dataView = dataArray.slice(xInitial, xFinal);
-      const sum = dataView.reduce((a, b) => a + b);
-      const average = sum / dataView.length;
-      const scaled = average / 255;
-      const zeroed = scaled - 0.6;
-      if (zeroed > 0) {
-        radius.value = zeroed;
-      }
-      if (payload.speech === think.value) {
-        return;
-      } else {
-        think.value = payload.speech;
-      }
-    });
-
-    // watch(think, async (think, prevThink) => {
-    //   if (think) {
-    //     anime({
-    //       targets: gradient,
-    //       cy: "0.7",
-    //     });
-    //     thinkAnimation.play();
-    //   } else {
-    //     thinkAnimation.pause();
-    //     // thinkAnimation.reset();
-    //     anime({
-    //       targets: gradient,
-    //       cy: "1",
-    //     });
-    //
-    //     // thinkAnimation.reset();
-    //   }
-    // });
-    return {
-      radius,
-      aiOffset,
-    };
-  },
-});
-</script>