beginnings of refactor

src/render/components/controllers/helpers.ts

@@ -0,0 +1,102 @@
+import { ref } from "vue";
+import anime from "animejs";
+import { v4 as uuidv4 } from 'uuid';
+
+
+export function animateTextInput () {
+
+    const side = ref("right");
+
+    function show () {
+        const t1 = (side.value === "right") ? 50 : -70;
+        const t2 = (side.value === "right") ? 110 : -130;
+
+        anime({
+            targets: '#textInput',
+            opacity: [0, 1],
+            translateX: [t1, t2],
+            scale: [0.3, 1],
+            duration: 500,
+            easing: 'easeOutExpo',
+        })
+
+    }
+
+    function hide () {
+        const t = (side.value === "right") ? 50 : -80;
+
+        anime({
+            targets: '#textInput',
+            opacity: [1, 0],
+            translateX: t,
+            scale: 0.3,
+            duration: 500,
+            easing: 'easeOutExpo',
+        })
+
+    }
+
+    function switchSide () {
+        const t = (side.value === "right") ? -130 : 110;
+
+        anime({
+            targets: '#textInput',
+            translateX: t,
+            duration: 500,
+            easing: 'easeOutExpo',
+        })
+
+    }
+
+    return {
+        side,
+        show,
+        hide,
+        switchSide
+    };
+
+}
+
+export function animateAudioInput () {
+
+    function show () {
+        anime({
+            targets: '#recIcon',
+            opacity: [0, 0.75],
+            scale: [0.0, 1],
+            duration: 250,
+            easing: 'linear',
+        })
+    }
+
+    function hide () {
+        anime({
+            targets: '#recIcon',
+            opacity: [0.75, 0],
+            scale: [1, 0],
+            duration: 250,
+            easing: 'linear',
+        })
+    }
+
+    return {
+        show,
+        hide
+    };
+
+}
+
+
+export function newMessage ({
+    text=false,
+    audio=false,
+    context=false,
+    uid=uuidv4()
+}): Message {
+    return {
+        text: text,
+        audio: audio,
+        context: context,
+        uid: uid
+    };
+}

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

@@ -0,0 +1,79 @@
+import anime from "animejs";
+import { useIpc } from '@/modules/ipc';
+import { onMounted, onUnmounted, ref, Ref } from "vue";
+import { postMessage } from "@/ipc/session";
+import { newMessage, animateAudioInput } from "./helpers";
+import { invokeStopRecord, postAudioChunk } from "@/ipc/audio";
+
+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) => {
+            invokeStopRecord().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/controllers/inputItem.control.text.ts

@@ -0,0 +1,134 @@
+import { Ref, ref, watch, onMounted, onUnmounted } from "vue";
+import { postMessage } from "@/ipc/session";
+import { newMessage, animateTextInput } from "./helpers";
+
+
+export default function useTextInputController(elementX: Ref) {
+    
+    let textInput: HTMLInputElement | null;
+
+    const { side, show, hide, switchSide } = animateTextInput();
+
+    let firstKey = true;
+    const typing = ref(false);
+
+    // Prep inputItem for typing.
+    const prepInput = () => {
+        show()
+        typing.value = true
+    }
+
+    // Clear and hide inputItem after done typing.
+    const clearInput = () => {
+
+        if (textInput) {
+            textInput.value = "";
+            textInput.blur();
+        }
+
+        hide()
+        firstKey = true;
+        typing.value = false;
+    }
+
+    // Send a message and clean up after.
+    const sendMessage = () => {
+        if (textInput) {
+
+            // Send it to the backend for processing.
+            const message = newMessage({
+                text: textInput.value
+            });
+
+            postMessage(message);
+
+            clearInput()
+        }
+    }
+
+    // Keys that are capable of opening the text input (numbers and letters).
+    const isHotKey = (key: number) => {
+        if (key >= 47 && key <= 91) { // a letter
+            return true
+        }
+    }
+
+    //---Callbacks-----------------------------------------------
+
+    const onKeyDown = (e: KeyboardEvent) => {
+        const key = e.keyCode;
+
+        if (textInput) {
+
+            // Only runs on firstKey.
+            if (firstKey) {
+
+                if (!isHotKey(key)) {
+                    return
+                }
+
+                prepInput()
+            }
+
+            textInput.focus();
+
+            // Close input when no text or on ESC.
+            if ((textInput.value == "") && (!firstKey) && (key === 8)) { // backspace
+                clearInput()
+                return
+            }
+
+            if (key === 27) { // escape
+                clearInput()
+                return
+            }
+
+            // Close and send on enter.
+            if (key === 13) {
+                if (textInput.value) {
+                    sendMessage()
+                    return
+                }
+            }
+
+            if (firstKey) firstKey = false
+        }
+    }
+
+    //-----------------------------------------------------------
+
+    // Watch parent position and update side.
+    watch(elementX, (elementX, _previous) => {
+        const winW = window.innerWidth
+
+        // Logic depends on the side we are on.
+        if (side.value === "right") {
+            if (winW - elementX < 230) {
+                switchSide()
+                side.value = "left"
+            }
+        }
+
+        else {
+            if (winW - elementX > 230) {
+                switchSide()
+                side.value = "right"
+            }
+        }
+
+    });
+
+    onMounted(() => {
+        textInput = document.getElementById("textInput") as HTMLInputElement;
+        window.addEventListener("keydown", onKeyDown);
+    })
+
+    onUnmounted(() => {
+        window.removeEventListener("keydown", onKeyDown);
+    });
+
+    return {
+        typing
+    }
+
+}

src/render/components/controllers/messenger.control.ts

@@ -0,0 +1,143 @@
+import { ref } from 'vue';
+import invokeSavedMessages from "@/render/ipc";
+import useScroll from "@/render/composables/scroll";
+
+const messages = ref(new Map());
+
+function getTimeStamp(): number {  
+  const currentdate = new Date();
+  return currentdate.getTime();
+}
+
+const newViewMessage = (message: Message): ViewMessage => {
+  return {
+    text: message.text,
+    context: message.context,
+    audio: message.audio,
+    from: message.from,
+    uid: message.uid,
+    time: getTimeStamp(),
+    isChild: "none",
+    seen: false,
+    newMessage: false
+  };
+}
+
+const addMessage = (message: Message, newMessage=false) => {
+  const viewMessage = newViewMessage(message);
+  if (newMessage) viewMessage.newMessage = true;
+  messages.value.set(viewMessage.uid, viewMessage);
+}
+
+const updateMessage = (message: Message) => {
+  const viewMessage = messages.value.get(message.uid);
+  viewMessage.context = message.context;
+  viewMessage.text = message.text;
+}
+
+const loadSavedMessages = async () => {
+  const messageData = await invokeSavedMessages();
+  messages.value = new Map(Object.entries(messageData));
+}
+
+const saveMessages = () => {
+  const messageData = Object.fromEntries(messages.value);
+  // must save to json.
+}
+
+const pruneMessages = (limit=200) => {
+  if (messages.value.size >= limit) {
+    const oldest = Array.from(messages.value.keys()).shift();
+    messages.value.delete(oldest);
+  }
+}
+
+const updateGrouping = () => {
+
+  const isSimmilar = (messageA: ViewMessage, messageB: ViewMessage) => {
+    if ((Math.abs(messageA.time - messageB.time) < 20000) && (messageA.from == messageB.from) && (messageA.context == messageB.context)) {
+      return true
+    }
+    return false
+  }
+
+  const refs = Array.from(messages.value.keys())
+
+  // Get the last three messages.
+  const first = messages.value.get(refs[refs.length - 1])
+  const second = messages.value.get(refs[refs.length - 2])
+  const third = messages.value.get(refs[refs.length - 3])
+
+  // If messages are simmilar, update the classes.
+  if ((first) && (second)) {
+    if (isSimmilar(first, second)) {
+      first.isChild = "last" // i.e. last in group.
+      second.isChild = "first"
+
+      if (third) {
+        if ((third.isChild == "first") || (third.isChild == "middle")) {
+          second.isChild = "middle"
+        }
+      }
+    }
+  }
+}
+
+export default function useMessages() {
+
+  const { updateScrollRef, adjustScroll } = useScroll("messenger");
+
+  /* Given new message object, update the view accordingly */
+  const updateMessageView = (newMessages: Message[]) => {
+
+    const bottom = updateScrollRef(); // see if the user is scrolled down
+
+    // take each message and apply view
+    newMessages.forEach((message: Message) => {
+
+      // add or update message depending
+      if (messages.value.has(message.uid)) {
+        updateMessage(message);
+      } else addMessage(message);
+
+      pruneMessages(); // pop off old messages from view
+      updateGrouping(); // group like message together
+
+      if (bottom) adjustScroll(); // only scroll if user was at bottom
+      
+      saveMessages();
+
+    });
+
+  }
+
+  return {
+    messages,
+    updateMessageView,
+    loadSavedMessages
+  }
+
+}
+
+
+  // // Seed message view with message history.
+  // const prepMessageView = async (newMessages: Message[]) => {
+  //   console.log("MSGR:Prepping messenger view.")
+
+  //   // Load and render saved messages and immediately scroll to bottom.
+  //   await loadSavedMessages();
+  //   setTimeout(setScroll.bind(false), 10);
+
+  //   // Render new messages, then wait 1s to scroll.
+  //   if (newMessages.length) {
+
+  //     console.log("MSGR:Adding new messages")
+
+  //     newMessages.forEach(message => {
+  //       addMessage(message, true);
+  //     })
+
+  //     setTimeout(setScroll.bind(true), 1000);
+
+  //   }
+  // }