add record on input functionality

src/background.ts

@@ -33,8 +33,8 @@ protocol.registerSchemesAsPrivileged([
 function createWindow() {
   // Create the browser window.
   win = new BrowserWindow({
-    width: 350,
-    height: 525,
+    width: 450,
+    height: 1025,
     resizable: true,
     webPreferences: {
       // Use pluginOptions.nodeIntegration, leave this alone
@@ -49,7 +49,7 @@ function createWindow() {
     // Load the url of the dev server if in development mode
     win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string);
     // NOTE uncomment for dev tools on app launch
-    // if (!process.env.IS_TEST) win.webContents.openDevTools();
+    if (!process.env.IS_TEST) win.webContents.openDevTools();
   } else {
     createProtocol("app");
     // Load the index.html when not in development

src/components/UI/UIDetails/inputItem.vue

@@ -10,13 +10,45 @@
 
 <script lang="ts">
 import useInputRenderer from "@/composables/inputItem/useInputRenderer";
+import useStreamRecorder from "@/composables/streamRecorder/useStreamRecorder";
 import {
   defineComponent,
+  watch,
+  onMounted
 } from "vue";
 export default defineComponent({
   name: "InputItem",
   setup() {
     const { inputXoffset, input } = useInputRenderer();
+    const { initRecorder } = useStreamRecorder();
+
+    onMounted(async () => {
+
+      // step get streamRecorder reference
+      const { streamRecorder } = await initRecorder();
+      
+      // add event listener for space keyup
+      window.addEventListener("keyup", (e) => {
+        if (e.key === " " && streamRecorder.state === "recording") {
+          console.log("stop recording")
+          streamRecorder.stop();
+          console.log('recorder is', streamRecorder.state);
+          input.value = "";
+        }
+      })
+
+      // begin recording on space
+      watch(input, (input, prevInput) => {
+        if (prevInput !== "" || prevInput.length > 0) {
+          return;
+        }
+        if (input === " ") {
+          console.log("record")
+          streamRecorder.start();
+          console.log('recorder is', streamRecorder.state);
+        }
+      })
+    })
 
    return {
       input,

src/composables/messageItem/useMessageItemComp.ts

@@ -5,6 +5,7 @@ export default function useMessageItemComp(m: string, id: string) {
   const winW = 350;
   const messageWidth = ref(0);
   const messageMarginTop = 75;
+  const test = ref("");
 
   const textFill = computed(() => {
     switch (m) {
@@ -44,15 +45,6 @@ export default function useMessageItemComp(m: string, id: string) {
     }
   }
 
-  // TODO implement func in order to reduce dual renderer height call startingOffset computed prop
-  const getRendererHeight = () => {
-    const messageRenderer = document.getElementById('messageRenderer');
-    if (messageRenderer) {
-      const rect = messageRenderer.getBoundingClientRect();
-      return rect.height;
-    }
-  }
-
   const startingOffset = computed(() => {
     const messageRenderer = document.getElementById('messageRenderer');
     if (messageRenderer) {

src/composables/streamRecorder/useStreamRecorder.ts

@@ -0,0 +1,20 @@
+export default function useStreamRecorder() {
+    let streamRecorder: MediaRecorder;
+    const chunks: Blob[] = [];
+    const initRecorder = async () => {
+           const stream = await  navigator.mediaDevices.getUserMedia({ audio: true });
+           streamRecorder = new MediaRecorder(stream);
+           streamRecorder.ondataavailable = (e: any) =>  { chunks.push(e.data) }
+           streamRecorder.onstop = (e: any) => {
+             const audioBlob = new Blob(chunks, {'type': 'audio/ogg; codecs=opus'} );
+             // do something with blob
+           }
+          return {
+            streamRecorder
+          }
+    }
+
+    return {
+      initRecorder
+    }
+}

src/shims-vue.d.ts

@@ -11,12 +11,3 @@ declare module "anime-js" {
     export = anime;
   }
 }
-
-interface Message {
-  content: string;
-  signature: string;
-  outgoing: boolean;
-  modifier: string;
-  imgURL: string;
-  id: string;
-}