WIP:playback queue and tray icon states

src/render/components/context.vue

@@ -2,8 +2,8 @@
 
   <span :class="`context ${modifier}-context`">
 
-    <div v-if="context.img" class="avatar">      
-      <img v-if="context.img === 'crimata'" :src="require('@/render/assets/crimataAvatar.svg')">
+    <div v-if="context.img" class="avatar" @click="clickMethod">      
+      <img v-click="" v-if="context.img === 'crimata'" :src="require('@/render/assets/crimataAvatar.svg')">
       <div v-else>{{ context.img }}</div>
     </div>
 

src/render/components/controllers/helpers.ts

@@ -85,6 +85,14 @@ export function animateAudioInput () {
 
 }
 
+/* TODO: animation function that takes in a message ID, and data about the
+ * playedback audio. We target the element with the UID and animate it according
+ * to the data. - still very hypothetical...
+ */
+export function animatePlayback (uid: string, meta: number) {
+    console.log("animating playback!")
+}
+
 // Given index and length of content, return message child status.
 export function calcChild (index: number, len: number) {
   if (len === 1) {

src/render/components/controllers/inputItem.control.audio.ts

@@ -1,77 +0,0 @@
-import { onMounted, onUnmounted, ref, Ref } from "vue";
-import { postMessage } from "@/render/ipc";
-import { animateAudioInput } from "./helpers";
-import { invokeReturnAudio, postAudioChunk } from "@/render/ipc";
-
-export default function useAudioInputController (typing: Ref) {
-
-    const recording = ref(false);
-    let mediaRecorder: MediaRecorder;
-
-    const { show, hide } = animateAudioInput();
-
-    // initialize audio
-    const conf = {audio: true, video: false}
-    navigator.mediaDevices.getUserMedia(conf).then((stream: MediaStream) => {
-
-        const options = {mimeType: 'audio/webm'};
-        mediaRecorder = new MediaRecorder(stream, options);
-
-        // post any mew audio to backend
-        mediaRecorder.addEventListener('dataavailable', (e: BlobEvent) => {
-            e.data.arrayBuffer().then((buff: ArrayBuffer) => {
-                postAudioChunk(buff);
-            });
-        });
-
-        // get audio and post new message to backend
-        mediaRecorder.addEventListener('stop', (_e: Event) => {
-            invokeReturnAudio().then((audio: ArrayBuffer[] | Error) => {
-                console.log(audio);
-                // postMessage(newMessage({audio: audio}));
-            });
-        });
-
-    });
-
-    // start recording on space bar
-    const record = () => {
-        console.log("INPT:Capturing audio...")
-        mediaRecorder.start();
-        recording.value = true;
-        show()
-    }
-
-    // stop recording and send on release
-    const stop = () => {
-        console.log("INPT:Stopping record.")
-        mediaRecorder.stop();
-        recording.value = false;
-        hide();
-    }
-
-    const onKeyDown = (e: KeyboardEvent) => {
-        if (e.keyCode == 32 && !typing.value) record();
-    }
-
-    const onKeyUp = (e: KeyboardEvent) => {
-        if (e.keyCode == 32 && recording.value) stop();
-    }
-
-    //-----------------------------------------------------------
-
-    onMounted(() => {
-        window.addEventListener("keydown", onKeyDown);
-        window.addEventListener("keyup", onKeyUp);
-    });
-
-    onUnmounted(() => {
-        window.removeEventListener("keydown", onKeyDown);
-        window.removeEventListener("keyup", onKeyUp);
-    })
-
-    return {
-        recording
-    }
-
-}

src/render/components/inputItem.vue

@@ -19,21 +19,19 @@
       type="text"
     />
 
-    <!-- Show suggestions menu on click -->
-    <!-- <Menu /> -->
-
   </div>
 </template>
 
 <script lang="ts">
 
-import { defineComponent } from "vue";
+import { defineComponent, watch } from "vue";
 import draggify from "@/render/composables/useDraggify";
 import { profile } from "@/render/shared/profile";
+import { recording } from "@/render/shared/audio";
+import { animateAudioInput } from "@/render/components/controllers/helpers";
 
 import useTextInputController from
   "@/render/components/controllers/inputItem.control.text";
-// import useAudioInputController from
   "@/render/components/controllers/inputItem.control.audio";
 
 export default defineComponent({
@@ -50,8 +48,12 @@ export default defineComponent({
 
     // Controllers for text and audio.
     const { typing } = useTextInputController(elementX)
-    // const { recording } = useAudioInputController(typing)
-    const recording = false;
+
+    // Control rec icon (red dot upper right of UI)
+    const { show, hide } = animateAudioInput();
+    watch(recording, (val, _oldval) => {
+      recording ? show() : hide();
+    });
 
     return {
       profile,