From: riqo Date: Sat, 13 Mar 2021 21:31:13 +0000 (-0600) Subject: Merge remote-tracking branch 'origin/main' X-Git-Tag: v0.9~31^2 X-Git-Url: https://andrewgundersen.net/repos?a=commitdiff_plain;h=30529e407c854616a1f169039600e66ff8aaae53;p=mime-chat Merge remote-tracking branch 'origin/main' --- 30529e407c854616a1f169039600e66ff8aaae53 diff --cc src/background/session.ts index 5948978,861eaea..0f71cf9 --- a/src/background/session.ts +++ b/src/background/session.ts @@@ -4,9 -4,9 +4,8 @@@ import WebSocket from 'ws' import { backgroundMitt } from './emitter'; import { ipcMain } from "electron"; import { play } from './audio'; - import { UserCreds, ClientMessage } from "@/types/message/index"; - import { clientMessage } from '@/modules/message'; - import { v4 as uuidv4 } from 'uuid'; + import { UserCreds, ClientMessage, RenderMessage, Annotation } from "@/types/message/index"; -import { clientMessage, initRenderMessageFromString } from '@/modules/message'; -import { v4 as uuidv4 } from 'uuid'; ++import { clientMessage, renderMessage } from '@/modules/message'; const ip = 'ws://127.0.0.1'; const port = 8760; @@@ -43,21 -43,23 +42,28 @@@ const onAuthSession = async (e: any, pa }); }; - const onMessage = (message: string): void => { -const onMessage = (message_str: string): void => { ++const onMessage = (messageStr: string): void => { while (!auth) { - backgroundMitt.emit('auth-res', message); - backgroundMitt.emit('auth-res', message_str); ++ backgroundMitt.emit('auth-res', messageStr); return; } - // Parse the message. - const m = JSON.parse(message); + // Decode the message. - const m = JSON.parse(message_str) ++ const m = JSON.parse(messageStr) + let message: RenderMessage | Annotation; - // check to see if this is a Render Message. + // Check to see if this is a Render Message. if (m.content) { - message = initRenderMessageFromString(message_str) ++ message = renderMessage({ ++ text: m.content.text, ++ audio: m.content.audio, ++ context: m.context, ++ modifier: m.modifier, ++ }); - // If there is audio, play it. - if (m.content.audio) { + // Play audio if any. + if (message.content.audio) { const audioBytes = Buffer.from(m.content.audio as string, 'hex'); m.content.audio = true; play(audioBytes); diff --cc src/components/inputItem/inputController.ts index 87b811f,3b23dd2..0ef68ee --- a/src/components/inputItem/inputController.ts +++ b/src/components/inputItem/inputController.ts @@@ -10,37 -10,10 +10,33 @@@ import useMitt from "@/modules/mitt" import { useIpc } from '@/modules/ipc'; import keyboardNameMap from "./keyBoardMaps/keyboardNameMap"; import keyboardCharMap from "./keyBoardMaps/keyboardCharMap"; - import { RenderMessage, ClientMessage } from "@/types/message/index"; - import { v4 as uuidv4 } from 'uuid'; - import {clientMessage, renderMessage} from '@/modules/message'; -import {clientMessage, initRenderMessage} from '@/modules/message'; +import anime from "animejs"; ++import { clientMessage, renderMessage } from '@/modules/message'; let textInput: HTMLInputElement | null; - let m: RenderMessage | ClientMessage; - let uid: string; +// Animation functions for text input element. +function expandInput() { + anime({ + targets: textInput, + width: ['0px', '150px'], + duration: 500, + easing: 'easeOutExpo', + }) +} + +function retractInput() { + anime({ + targets: textInput, + width: ['150px', '0px'], + duration: 500, + easing: 'easeOutExpo', + begin: function() { + if (textInput) textInput.blur(); + } + }) +} + export default function useInputController() { const { emitter } = useMitt(); @@@ -48,26 -21,23 +44,29 @@@ const isRecording = ref(false); const isTyping = ref(false); const input = ref(""); + const capsLock = ref(false); + ++ // Utility function to render message. ++ const render = (text: string, audio: boolean | string, context: string, modifier: string): string => { ++ const m = renderMessage({ text, audio, context, modifier }); ++ emitter.emit("self-message", m); ++ console.log(m.time) ++ return m.uid; ++ } + // send message on ENTER. const onEnter = () => { if (input.value) { - // remove first character of input. - const text = input.value.substring(1); - uid = uuidv4(); - - m = renderMessage(input.value, false, "sf", uid); - - // render user message. - emitter.emit("self-message", m); - // Render the message immediately. - const message = initRenderMessage(text, "", "", "sf"); - emitter.emit("self-message", message); ++ // Render the message immediately and get its unique id. ++ const uid = render(input.value, false, "", "sf"); - m = clientMessage(m.content.text, m.content.audio, uid); + // Then send it to the backend for processing. - const clientM = clientMessage(text, false, message.uid); ++ const clientM = clientMessage(input.value, false, uid); + post('client-message', clientM); - // send message to main process. - post('client-message', m); - - // reset text input. + // Reset the text input. if (textInput) textInput.value = ''; input.value = " "; } @@@ -127,23 -90,19 +126,20 @@@ isRecording.value = false; - uid = uuidv4(); - - // render audio message. - m = renderMessage("", false, "sf", uid); - emitter.emit("self-message", m); - // Render the message immediately. - const audioMessage = initRenderMessage("", "", "", "sf") - emitter.emit("self-message", audioMessage); -- - // stop stream recording. - // Notify backend to stop recording and send audio to python backend for audio processing. ++ // // Render the message immediately and get its unique id. ++ const uid = render("", "", "", "sf"); ++ // Notify main process to stop recording and send send audio to backend for analysis. post('update-recorder', { isRecording: isRecording.value, - uid: audioMessage.uid + uid }); + // Reset input. input.value = '' } + else if (e.code === "CapsLock") { + capsLock.value = false; + } } onMounted(() => { @@@ -158,15 -117,13 +154,14 @@@ window.removeEventListener("keyup", onKeyUp); }); - - // watch keyboard input & update current state. + // watch keyboard input & update inputItem state. watch(input, (input, prevInput) => { + if (isTyping.value && input.length === 0) { + retractInput(); + } + // Do nothing if user is typing. if (prevInput !== "" || prevInput.length > 0) { - if (!isRecording.value) { - isTyping.value = true; - } return; } diff --cc src/modules/message.ts index 37c6ba9,069ef9d..0443509 --- a/src/modules/message.ts +++ b/src/modules/message.ts @@@ -1,16 -1,47 +1,32 @@@ import { RenderMessage, ClientMessage } from "@/types/message/index"; + import { v4 as uuidv4 } from 'uuid'; - export const renderMessage = (text: string, audio: string | boolean, modifier: string, uid: string): RenderMessage => ( -// Create a RenderMessage object directly from json string. -export function initRenderMessageFromString(messageStr: string) { - - // Parse the string. - const m = JSON.parse(messageStr); ++interface RenderParams { ++ text: string; ++ audio: boolean | string; ++ context: string; ++ modifier: string; ++} + - // Auto set uid and time. ++function getTimeStamp(): number { + const currentdate = new Date(); - - const message: RenderMessage = { - content: m.content, - context: m.context, - modifier: m.modifier, - time: currentdate.getTime(), - uid: uuidv4(), - isChild: "none" - } - - return message ++ return currentdate.getTime(); + } + + // Create a RenderMessage object. -export function initRenderMessage(text: string, audio: string, context: string, modifier: string) { - - // Auto set uid and time. - const currentdate = new Date(); - - const message: RenderMessage = { ++export const renderMessage = (params: RenderParams): RenderMessage => ( + { content: { - audio, - text - text: text, - audio: audio ++ text: params.text, ++ audio: params.audio }, - context: "", - modifier, - uid - context: context, - modifier: modifier, - time: currentdate.getTime(), ++ context: params.context, ++ modifier: params.modifier, ++ time: getTimeStamp(), + uid: uuidv4(), + isChild: "none" } - - return message -} +) export const clientMessage = (text: string, audio: string | boolean, uid: string): ClientMessage => ( {