merging text input with message anim

src/components/helpers.ts

@@ -1,29 +0,0 @@
-
-// Update xShort or yShort value.
-export function calcSideProximity (inputItemX: number, winW: number) {
-    let short = winW - inputItemX
-
-    if (short > winW / 2) {
-        short = inputItemX
-    }
-
-    return short
-}
-
-
-// Update inputItemX or inputItemY value.
-export function calcPosition (inputItemPosition: number, percent: number, 
-    short: number, win: number) {
-
-    // Is it close to a side? If so, stay fixed.
-    if (percent > 0.75) { 
-        inputItemPosition = win - short
-    }
-
-    // Else move relativly.
-    if (percent < 0.75 && percent > 0.25) {
-        inputItemPosition = win * percent
-    }
-
-    return inputItemPosition
-}

src/components/inputItem.vue

@@ -1,31 +1,54 @@
 <template>
 
   <div id=inputItem
-    class="input-item playing"
-    :style="{ top: `${elementY}px`, left: `${elementX}px` }"
-  >
-
+    class="input-item"
+    :class="{ playing: isRecording }"
+    :style="{ top: `${elementY}px`, left: `${elementX}px` }">
     <span class="play"></span>
     <span class="pause"></span>
-
+    <TextInput :input="input"/>
   </div>
   
 </template>
 
 <script lang="ts">
 
-import { defineComponent } from "vue";
+import { defineComponent, onMounted, onUnmounted, ref, watch } from "vue";
 import draggify from '@/modules/draggify';
+import useMitt from "@/modules/mitt";
+import TextInput from '@/components/taInput/textDetails/text.vue';
+import useInputController from "@/components/taInput/inputController";
 
 export default defineComponent({
   name: "InputItem",
+  components: { TextInput },
   setup() {
 
-    const { elementX, elementY } = draggify({ elementId: 'inputItem'})
+    const isRecording = ref(false);
+
+    const { emitter } = useMitt();
+    const { elementX, elementY } = draggify({ elementId: 'inputItem'});
+
+    const {
+      input,
+      visualizeStream,
+      audioBubbleWidth,
+      paths,
+    } = useInputController();
+
+    onMounted(() => {
+      emitter.on('input-audio-record', (record) => isRecording.value = record);
+    })
+
+    onUnmounted(() => {
+      emitter.all.clear();
+    })
 
     return {
       elementX,
-      elementY
+      elementY,
+      isRecording,
+      input
     }
   }
 
@@ -53,6 +76,8 @@ export default defineComponent({
     background-color: white;
     border: 4px solid #C3C3C3;
 
+    cursor: pointer;
+
    .play, .pause {
       z-index: 5;  
       &::before, &::after {
@@ -95,11 +120,6 @@ export default defineComponent({
          }
       }
    }
-   &:hover {
-      .play::before {
-         box-shadow: 0 0 12px rgba(195, 195, 195, 0.8);
-      }
-   }
 }
 
 .animate-audio1 {

src/components/taInput/index.vue

@@ -7,11 +7,11 @@
     :paths="paths" 
   />
 
-  <TextInput 
+<!--   <TextInput 
     v-else 
     :input="input"
   />
-
+ -->
 </template>
 
 <script lang="ts">

src/components/taInput/inputController.ts

@@ -37,6 +37,13 @@ export default function useInputController() {
         if (input) post('message', message);
     }
 
+    function recordStream(record: boolean) {
+       // tell ipcMain to pause or resume stream recording.
+       post('update-recorder', record);
+       // toggle inputItem audio animation.
+       emitter.emit('input-audio-record', record);
+    }
+
     const {
         visualizeStreamAsPaths,
         expandBubble
@@ -54,7 +61,7 @@ export default function useInputController() {
     function keyupHandler(e: any) {
         if (e.key === " " && visualizeStream.value) {
 
-            post('update-recorder', false);
+            recordStream(false)
             visualizeStream.value = false;
             paths.value = []
             audioBubbleWidth.value = 10;
@@ -84,7 +91,7 @@ export default function useInputController() {
         }
         if (input === " " && visualizeStream.value === false) {
             visualizeStream.value = true;
-            post('update-recorder', true);
+            recordStream(true)
             expandBubble(audioBubbleWidth);
             visualizeStreamAsPaths(stream, paths, audioBubbleWidth);
             return;

src/components/taInput/textDetails/text.vue

@@ -25,17 +25,15 @@ export default defineComponent({
 <style lang="scss" scoped>
 
 .inputBox {
-  position: fixed;
-
-  width: 100vw;
+  position: absolute;
 
   display: flex;
   justify-content: center;
   align-items: center;
 
-  bottom: 0;
+  // bottom: 0;
 
-  z-index: 1;
+  // z-index: 1;
 }
 
 .inputBubble {

src/modules/keyDownHandler/useKeyDownHandler.ts

@@ -9,7 +9,7 @@ interface KeyDownEvent {
 
 // This catches keys from a physical keyboard, a soft keyboard on a tablet, or a
 // scanner attached via USB
-export default function useKeyDownHandler(enterCallback: (input: string) => void | null) {
+export default function useKeyDownHandler(enterCallback?: (input: string) => void) {
 
   const input = ref("");
 
@@ -31,7 +31,7 @@ export default function useKeyDownHandler(enterCallback: (input: string) => void
     const cmd = keyboardNameMap[e.keyCode];
     switch (cmd) {
       case "ENTER":
-        enterCallback(input.value);
+        if (enterCallback) enterCallback(input.value);
         break;
       case "BACK_SPACE":
         input.value = input.value.slice(0, -1);