add record on input functionality

diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644 (file)
index 0000000..5df65d0
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,6 @@
+{
+  "typeAcquisition": {
+
+    "enable": true
+  }
+}
\ No newline at end of file

diff --git a/package.json b/package.json
index 41a8d7730d3122ddae5208b5e6bc6bd00428fd37..2292dc977265a59c1fb33ac44c0a22939f0738c3 100644 (file)
--- a/package.json
+++ b/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",

diff --git a/src/background.ts b/src/background.ts
index c7a5e330c4881794ad1be552ba5a785d9d420aae..53227e031ca71fa1f42a12d229b9da14d7b0f86a 100644 (file)
--- a/src/background.ts
+++ b/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

diff --git a/src/components/UI/UIDetails/inputItem.vue b/src/components/UI/UIDetails/inputItem.vue
index f8fbc647f05b34a3748897a07781f7c67acadf63..f4e2f3600c02a02422c0a8e9421717f469fc8b71 100644 (file)
--- a/src/components/UI/UIDetails/inputItem.vue
+++ b/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,

diff --git a/src/composables/messageItem/useMessageItemComp.ts b/src/composables/messageItem/useMessageItemComp.ts
index 94efbb6628c61065d533748f90a97ce967942420..564736f9d81a5a13e1683472053a537b87f09d5e 100644 (file)
--- a/src/composables/messageItem/useMessageItemComp.ts
+++ b/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) {

diff --git a/src/composables/streamRecorder/useStreamRecorder.ts b/src/composables/streamRecorder/useStreamRecorder.ts
new file mode 100644 (file)
index 0000000..fe99561
--- /dev/null
+++ b/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
+    }
+}

diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index 11176548bf81a37e8220a0a14837caaf10426f24..35a61a97b0638028189dad9b0282895b0818d3a8 100644 (file)
--- a/src/shims-vue.d.ts
+++ b/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;
-}

diff --git a/tsconfig.json b/tsconfig.json
index 939bcacf75f5b0a596bf4e4e16d75d15cf7d8926..c9e770ca2fee235b92c1d38dec3d395336aff400 100644 (file)
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,7 +14,9 @@
     "typeRoots": ["./node_modules/@types"],
     "types": [
       "webpack-env",
-      "jest"
+      "jest",
+      "animejs",
+      "dom-mediacapture-record"
     ],
     "paths": {
       "@/*": [

diff --git a/yarn.lock b/yarn.lock
index ebc1126b08e62f82121567df917b20fcc14ce74e..ebae7d4b04160a4388387c10bc28edace92e8fc5 100644 (file)
--- a/yarn.lock
+++ b/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"