add record on input functionality

jsconfig.json

@@ -0,0 +1,6 @@
+{
+  "typeAcquisition": {
+
+    "enable": true
+  }
+}

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "crimata-messenger",
+  "name": "Crimata",
   "productName": "crimata-messenger",
   "description": "Cross-platform messenger application built with electron, vue3, and TS.",
   "version": "0.1.0",
@@ -22,6 +22,7 @@
   "dependencies": {
     "@types/animejs": "^3.1.2",
     "@types/bindings": "^1.3.0",
+    "@types/dom-mediacapture-record": "^1.0.7",
     "@types/uuid": "^8.3.0",
     "@types/ws": "^7.2.7",
     "animejs": "^3.2.0",

src/background.ts

@@ -33,8 +33,8 @@ protocol.registerSchemesAsPrivileged([
 function createWindow() {
   // Create the browser window.
   win = new BrowserWindow({
-    width: 350,
+    width: 450,
-    height: 525,
+    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;
-}

tsconfig.json

@@ -14,7 +14,9 @@
     "typeRoots": ["./node_modules/@types"],
     "types": [
       "webpack-env",
-      "jest"
+      "jest",
+      "animejs",
+      "dom-mediacapture-record"
     ],
     "paths": {
       "@/*": [

yarn.lock

@@ -1267,6 +1267,11 @@
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.5.tgz#b14efa8852b7768d898906613c23f688713e02cd"
   integrity sha512-Q1y515GcOdTHgagaVFhHnIFQ38ygs/kmxdNpvpou+raI9UO3YZcHDngBSYKQklcKlvA7iuQlmIKbzvmxcOE9CQ==
 
+"@types/dom-mediacapture-record@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@types/dom-mediacapture-record/-/dom-mediacapture-record-1.0.7.tgz#08bacca4296ef521d59049f43e65cf971bbf6be1"
+  integrity sha512-ddDIRTO1ajtbxaNo2o7fPJggpN54PZf1ZUJKOjto2ENMJE/9GKUvaw3ZRuQzlS/p0E+PnIcssxfoqYJ4yiXSBw==
+
 "@types/eslint-visitor-keys@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"