diff --git a/src/App.vue b/src/App.vue
index 165d108..96593de 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -67,76 +67,76 @@ export default defineComponent({
diff --git a/src/background/session.ts b/src/background/session.ts
index 0f71cf9..92609db 100644
--- a/src/background/session.ts
+++ b/src/background/session.ts
@@ -55,12 +55,7 @@ const onMessage = (messageStr: string): void => {
// Check to see if this is a Render Message.
if (m.content) {
- message = renderMessage({
- text: m.content.text,
- audio: m.content.audio,
- context: m.context,
- modifier: m.modifier,
- });
+ message = renderMessage(m.content.text, m.content.audio, m.context, m.modifier);
// Play audio if any.
if (message.content.audio) {
diff --git a/src/components/inputItem/controllers/audioCtrl.ts b/src/components/inputItem/controllers/audioCtrl.ts
index 723d31a..9b2df9f 100644
--- a/src/components/inputItem/controllers/audioCtrl.ts
+++ b/src/components/inputItem/controllers/audioCtrl.ts
@@ -1,44 +1,62 @@
-import { onMounted } from "vue";
+import anime from "animejs";
+import { onMounted, onUnmounted, ref, Ref } from "vue";
import useMitt from "@/modules/mitt";
import { useIpc } from '@/modules/ipc';
import keyboardNameMap from "../keyBoardMaps/keyboardNameMap";
import { renderMessage } from '@/modules/message';
+function showRecIcon () {
+
+ anime({
+ targets: '#recIcon',
+ opacity: [0, 0.75],
+ scale: [0.0, 1],
+ duration: 250,
+ easing: 'linear',
+ })
+
+}
+
+function hideRecIcon () {
+
+ anime({
+ targets: '#recIcon',
+ opacity: [0.75, 0],
+ scale: [1, 0],
+ duration: 250,
+ easing: 'linear',
+ })
+
+}
-
-
-export default function useAudioInputController () {
+export default function useAudioInputController (typing: Ref) {
// For sending messages.
const { post } = useIpc();
const { emitter } = useMitt();
// Keepp track of when we are recording.
- let recording = 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);
- return m.uid;
- }
+ const recording = ref(false);
//---Callbacks-----------------------------------------------
const onKeyDown = (e: KeyboardEvent) => {
const cmd = keyboardNameMap[e.keyCode];
+ // console.log(cmd)
// Start recording on space bar.
- if (cmd == "SPACE" && !recording) {
+ if (cmd == "SPACE" && !recording.value && !typing.value) {
post('update-recorder', {
isRecording: true,
uid: null
});
- recording = true;
+ showRecIcon()
+ recording.value = true;
+ console.log("Recording...")
}
@@ -48,17 +66,20 @@ export default function useAudioInputController () {
const cmd = keyboardNameMap[e.keyCode];
// Stop recording on space up.
- if (cmd == "SPACE" && recording) {
+ if (cmd == "SPACE" && recording.value) {
// Render audio immediately.
- const uid = render("", "", "", "sf");
+ const message = renderMessage("", "", "", "sf")
+ emitter.emit("self-message", message);
post('update-recorder', {
isRecording: false,
- uid: uid
+ uid: message.uid
});
- recording = false;
+ hideRecIcon()
+ recording.value = false;
+ console.log("Stopping record...")
}
@@ -71,6 +92,12 @@ export default function useAudioInputController () {
window.addEventListener("keyup", onKeyUp);
})
+ onUnmounted(() => {
+ window.removeEventListener("keydown", onKeyDown);
+ window.removeEventListener("keyup", onKeyUp);
+ });
+
+
return {
recording
}
diff --git a/src/components/inputItem/controllers/textCtrl.ts b/src/components/inputItem/controllers/textCtrl.ts
index 115e9c5..1958bad 100644
--- a/src/components/inputItem/controllers/textCtrl.ts
+++ b/src/components/inputItem/controllers/textCtrl.ts
@@ -1,18 +1,13 @@
import anime from "animejs";
import useMitt from "@/modules/mitt";
import { useIpc } from '@/modules/ipc';
-import { Ref, watch, onMounted } from "vue";
+import { Ref, ref, watch, onMounted, onUnmounted } from "vue";
import keyboardNameMap from "../keyBoardMaps/keyboardNameMap";
import { clientMessage, renderMessage } from '@/modules/message';
-// Post a message to the backend.
-const { post } = useIpc();
-
-
//---Animations-----------------------------------------------
let side = "right"; // Side of parent we are on.
-let visible = false; // Whether textInput is visible.
function showTextInput () {
const t1 = (side === "right") ? 50 : -70;
@@ -27,7 +22,6 @@ function showTextInput () {
easing: 'easeOutExpo',
})
- visible = true
}
function hideTextInput() {
@@ -35,14 +29,13 @@ function hideTextInput() {
anime({
targets: '#textInput',
- opacity: 0,
+ opacity: [1, 0],
translateX: t,
scale: 0.3,
duration: 500,
easing: 'easeOutExpo',
})
- visible = false
}
function switchSide(currentSide: string) {
@@ -63,27 +56,29 @@ function switchSide(currentSide: string) {
export default function useTextInputController(elementX: Ref) {
let textInput: HTMLInputElement | null;
- let length: number;
-
- // For sending messages.
const { post } = useIpc();
const { emitter } = useMitt();
- // Keep track of first key press.
let firstKey = true;
+ const typing = ref(false);
- // Clear text input.
- const clearInput = () => {
- if (textInput) textInput.value = "";
- hideTextInput()
- firstKey = true;
+ // Prep inputItem for typing.
+ const prepInput = () => {
+ showTextInput()
+ typing.value = true
}
- // 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);
- return m.uid;
+ // Clear and hide inputItem after done typing.
+ const clearInput = () => {
+
+ if (textInput) {
+ textInput.value = "";
+ textInput.blur();
+ }
+
+ hideTextInput()
+ firstKey = true;
+ typing.value = false;
}
// Send a message and clean up after.
@@ -91,50 +86,53 @@ export default function useTextInputController(elementX: Ref) {
if (textInput) {
// Render message
- const uid = render(textInput.value, false, "", "sf");
+ const message = renderMessage(textInput.value, false, "", "sf")
+ emitter.emit("self-message", message);
// Send it to the backend for processing.
- const clientM = clientMessage(textInput.value, false, uid);
+ const clientM = clientMessage(textInput.value, false, message.uid);
post('client-message', clientM);
+
+ clearInput()
}
}
//---Callbacks-----------------------------------------------
const onKeyDown = (e: KeyboardEvent) => {
+ const key = keyboardNameMap[e.keyCode]
+ console.log(key)
if (textInput) {
- const key = keyboardNameMap[e.keyCode]
-
- // Reveal textInput on first key press.
+
+ // First-key handler.
if (firstKey) {
-
- // Handle for space bar
- if (key == "SPACE") {
- return
- }
-
- showTextInput()
- firstKey = false
+ if (key == "SPACE") return
+ prepInput()
}
textInput.focus();
+ // Close input when no text or on ESC.
if (textInput.value == "" && !firstKey) {
clearInput()
+ return
}
- if (key == "ENTER") {
+ if (key === "ESCAPE") {
+ clearInput()
+ return
+ }
+
+ // Close and send on enter.
+ if (key === "ENTER") {
if (textInput.value) {
sendMessage()
- clearInput()
+ return
}
}
- if (key == "ESCAPE") {
- clearInput()
-
- }
+ if (firstKey) firstKey = false
}
}
@@ -166,8 +164,12 @@ export default function useTextInputController(elementX: Ref) {
window.addEventListener("keydown", onKeyDown);
})
- return {
+ onUnmounted(() => {
+ window.removeEventListener("keydown", onKeyDown);
+ });
+ return {
+ typing
}
}
diff --git a/src/components/inputItem/inputItem.vue b/src/components/inputItem/inputItem.vue
index 052e9dd..05b859c 100644
--- a/src/components/inputItem/inputItem.vue
+++ b/src/components/inputItem/inputItem.vue
@@ -7,14 +7,9 @@
>
AG
-
-
-
-
+
-
-
-
+
@@ -43,12 +38,19 @@ export default defineComponent({
},
setup() {
+ // Initial position.
+ const xStart = 15;
+ const yStart = window.innerHeight - 200;
+
// Calculate position of inputItem on drag.
- const { elementX, elementY } = draggify({ elementId: "inputItem" });
+ const { elementX, elementY } = draggify(
+ { elementId: "inputItem" },
+ { x: xStart, y: yStart }
+ );
// Controllers for text and audio.
- useTextInputController(elementX)
- const { recording } = useAudioInputController()
+ const { typing } = useTextInputController(elementX)
+ const { recording } = useAudioInputController(typing)
return {
elementX,
@@ -64,8 +66,6 @@ export default defineComponent({
.input-item {
position: absolute;
- opacity: 1.0;
-
display: flex;
align-items: center;
justify-content: center;
@@ -80,7 +80,8 @@ export default defineComponent({
// border: 4px solid #C6C6C6;
border-radius: 20px;
- background-color: #EBEBEB;
+ // Set opacity here to not affect child.
+ background-color: rgba(235, 235, 235, 0.75);
cursor: pointer;
diff --git a/src/components/inputItem/textInput.vue b/src/components/inputItem/textInput.vue
index d9c2dad..45e1af7 100644
--- a/src/components/inputItem/textInput.vue
+++ b/src/components/inputItem/textInput.vue
@@ -8,7 +8,7 @@