stream path animation v4

update input items styling

add ipc event handler for message

add send-message ipc handler

add audio to send-message ipc

remove extra JSON stringify statement for audio message

add render bug fix for add contacts

src/core/UI/input/useInputController.ts

@@ -1,73 +1,77 @@
-import {ref, watch, onUnmounted, onMounted } from "vue";
+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 useStreamRender from './audio/useStreamRender';
+import useStreamVisualizer from './audio/useStreamVisualizer';
 import useTextRender from './text/useTextRender';
+import useAudioAnimations from './audio/audioDetails/useAnimations';
 
 /* 
 * Input controller logic
-* Will render text input by default as user types or
-* if user holds space bar down, audio media-stream 
-* will be rendered & recorded
+* 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 useInputController() {
-  // program ref varaiables
-  const renderAudio = ref(false);
-  const reactiveWidth = ref(10);
-  const pathOffset = ref(10);
+  const visualizeStream = ref(false);
   const paths = ref([]);
-  // audioStream variables
+  const audioBubbleWidth = ref(10);
   let stream: MediaStream;
   let recorder: MediaRecorder;
-  
-  // use input ref & keydown handler function
+
   const { keyDownHandler, input } = useKeyDownHandler();
-  // use text Offset computed prop and & textRender function
   const { textInputXoffset, renderTextInput } = useTextRender(input);
-  // use stream render and record logic
-  const { renderStream } =  useStreamRender(renderAudio);
+  const { visualizeStreamAsPaths, expandBubble } = useStreamVisualizer(visualizeStream);
   const { initRecorder } = useStreamRecord()
+  const { animateSend } = useAudioAnimations();
+
+  function audioSend() {
+      const domQuery = document.getElementsByClassName("audioInput");
+      const inputEl = domQuery[0];
+      animateSend(inputEl, visualizeStream);
+  }
+
+  // stops stream recording on space key up
+  function keyupHandler(e: any) {
+    if (e.key === " " && visualizeStream.value) {
+      console.log("stop recording");
+      recorder.stop();
+      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();
+    console.log(stream)
     recorder = initRecorder(stream);
   })
 
-  // callback function called on key up event
-  function keyupHandler(e: any) {
-    // stop stream recording on space key up
-    if (e.key === " " && renderAudio.value) {
-      console.log("stop recording");
-      recorder.stop();
-      // reset controller ref variables
-      renderAudio.value = false;
-      input.value = "";
-      reactiveWidth.value = 10;
-      pathOffset.value = 10;
-    }
-  }
 
-  // step 1: add window event keyboard listeners
-  window.addEventListener("keydown", keyDownHandler);
-  window.addEventListener('keyup', keyupHandler);
-
-  // step 2: determine whether to render text or audio based one the keyboard input
+  // determine whether to render text or audio based one the keyboard input
   watch(input, (input, prevInput) => {
     if (prevInput !== "" || prevInput.length > 0) {
-      if (!renderAudio.value) {
+      if (!visualizeStream.value) {
         renderTextInput();
       }
       return;
     }
-    if (input === " " && renderAudio.value === false) {
-      console.log("record");
-      renderAudio.value = true;
+    if (input === " " && visualizeStream.value === false) {
+      console.log("record MediaStream");
+      visualizeStream.value = true;
       recorder.start();
-      renderStream(stream, reactiveWidth, pathOffset, paths);
+      expandBubble(audioBubbleWidth);
+      visualizeStreamAsPaths(stream, paths, audioBubbleWidth);
       return;
-    }           
+    }
     renderTextInput();
   });
 
@@ -79,10 +83,10 @@ export default function useInputController() {
 
   return {
     input,
-    renderAudio,
-    reactiveWidth,
+    visualizeStream,
     textInputXoffset,
+    audioBubbleWidth,
     paths
   }
 
-}
+}