minor enhancements (e.g. idk what else to say)

This commit is contained in:
Andrew Gundersen 2021-04-09 08:30:34 -05:00
commit 7d97756d60
7 changed files with 37 additions and 105 deletions

View file

@ -1 +1 @@
{"key":"6cde67f6-6188-452d-a54e-9d38cabf2d63","newMessages":[]} {"key":"1099b966-d9e5-4f1a-876e-13535af32f26","newMessages":[]}

View file

@ -1,7 +1,7 @@
import anime from "animejs"; import anime from "animejs";
import { onMounted, onUnmounted, ref, Ref } from "vue";
import useMitt from "@/modules/mitt"; import useMitt from "@/modules/mitt";
import { useIpc } from '@/modules/ipc'; import { useIpc } from '@/modules/ipc';
import { onMounted, onUnmounted, ref, Ref } from "vue";
import keyboardNameMap from "../keyBoardMaps/keyboardNameMap"; import keyboardNameMap from "../keyBoardMaps/keyboardNameMap";
import { renderMessage, clientMessage } from '@/modules/message'; import { renderMessage, clientMessage } from '@/modules/message';
@ -65,8 +65,15 @@ export default function useAudioInputController (typing: Ref) {
// Stop recording on space up. // Stop recording on space up.
if (cmd == "SPACE" && recording.value) { if (cmd == "SPACE" && recording.value) {
// Render audio immediately. // Create a message.
const message = renderMessage("", "", "", "sf") const message = renderMessage(
"",
"",
"",
"sf"
)
// Render it immediately.
emitter.emit("self-message", message); emitter.emit("self-message", message);
// Stop recording and get audio from recorder. // Stop recording and get audio from recorder.

View file

@ -85,8 +85,14 @@ export default function useTextInputController(elementX: Ref) {
const sendMessage = () => { const sendMessage = () => {
if (textInput) { if (textInput) {
// Render message // Create the message.
const message = renderMessage(textInput.value, false, "", "sf") const message = renderMessage(
textInput.value,
false,
"",
"sf"
)
emitter.emit("self-message", message); emitter.emit("self-message", message);
// Send it to the backend for processing. // Send it to the backend for processing.

View file

@ -11,7 +11,7 @@
<!-- Shows when a new session is created with Crimata. --> <!-- Shows when a new session is created with Crimata. -->
<div <div
v-if="message.context === 'launch'" v-if="message.context === 'Crimata'"
class="divider" class="divider"
> >
<div>new session</div> <div>new session</div>
@ -23,14 +23,6 @@
class="messageBox" class="messageBox"
> >
<!-- Render undo button for messages to friends. -->
<button
v-if="undoOption === true"
class="undoButton"
>
undo
</button>
<!-- message bubble --> <!-- message bubble -->
<div <div
class="bubble" class="bubble"
@ -72,7 +64,6 @@
<span <span
v-if="message.isChild === 'last' || message.isChild === 'none'" v-if="message.isChild === 'last' || message.isChild === 'none'"
class="context" class="context"
:class="{ 'context-undo-anim': undoOption }"
> >
<!-- Render Crimata icon or friend's initials. --> <!-- Render Crimata icon or friend's initials. -->
@ -98,9 +89,7 @@
<script lang='ts'> <script lang='ts'>
import { defineComponent, ref, onMounted, onBeforeUpdate } from 'vue'; import { defineComponent, ref, onMounted } from 'vue';
import { clientRequest } from "@/modules/message";
import { useIpc } from "@/modules/ipc";
export default defineComponent({ export default defineComponent({
name: "MessageItem", name: "MessageItem",
@ -111,13 +100,9 @@
let addListener = false; let addListener = false;
const undoOption = ref(false);
const notify = ref(false) const notify = ref(false)
const isPlaying = ref(false); const isPlaying = ref(false);
const { post } = useIpc()
if (!props.message.seen) { if (!props.message.seen) {
console.log("MSG:Checking...") console.log("MSG:Checking...")
@ -146,7 +131,7 @@
} }
// Callback for window visibilityState. // Callback for window visibilityState.
const onVisibilityChange = (event: any) => { const onVisibilityChange = (_event: any) => {
if (document.visibilityState === "visible") { if (document.visibilityState === "visible") {
console.log("MSG:Window visible, notifying.") console.log("MSG:Window visible, notifying.")
@ -158,24 +143,11 @@
} }
} }
const onUndo = () => { const onStopPlayback = (_event: any) => {
post("client-message", clientRequest("launch", {name: false}, "undo"))
}
const onStopPlayback = (e: any) => {
window.ipcRenderer.removeAllListeners("stop-playback-anim"); window.ipcRenderer.removeAllListeners("stop-playback-anim");
isPlaying.value = false isPlaying.value = false
} }
onBeforeUpdate(() => {
if (props.message.context.substring(0, 3) === 'To ') {
console.log("MSG:Applying undo anim")
undoOption.value = true;
}
})
onMounted(() => { onMounted(() => {
// Listen for window focus event. // Listen for window focus event.
@ -192,10 +164,8 @@
}) })
return { return {
onUndo,
notify, notify,
isPlaying, isPlaying
undoOption
} }
} }
@ -389,20 +359,6 @@
margin-top: 5px; margin-top: 5px;
} }
.context-undo-anim {
animation-name: context-anim;
animation-duration: 3s;
}
@keyframes context-anim {
0%, 90% {
transform: translateX(-45px);
}
100% {
transform: translateX(0px);
}
}
.photo { .photo {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -460,48 +416,4 @@
color: #357CA2; color: #357CA2;
} }
.undoButton {
position: absolute;
bottom: 0px;
right: 0px;
opacity: 0;
border: none;
outline: none;
margin: 0px;
padding: 0px;
background-color: Transparent;
font-family: "SF Compact Display";
font-size: 12px;
font-weight: bold;
color: #9B9B9B;
animation-name: undo-anim;
animation-duration: 3s;
}
.undoButton:hover {
cursor: pointer;
}
@keyframes undo-anim {
0%, 90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style> </style>
<!--
// If this is a message to a friend, we render undo button.
if (props.message.context.substring(0, 3) === 'To ') {
console.log("MSG:Applying undo anim")
undoOption.value = true;
} -->

View file

@ -1,4 +1,11 @@
import { RenderMessage, ClientMessage, ClientRequest, AuthRequest, LogoutRequest } from "@/types"; import {
RenderMessage,
ClientMessage,
ClientRequest,
AuthRequest,
LogoutRequest
} from "@/types";
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
function getTimeStamp(): number { function getTimeStamp(): number {

View file

@ -19,10 +19,10 @@ export interface ClientMessage {
} }
export interface ClientRequest { export interface ClientRequest {
intent: string, intent: string;
params: object, params: object;
epic: string | boolean, epic: string | boolean;
confidence: number confidence: number;
} }
export interface SessionState { export interface SessionState {

View file

@ -1 +1 @@
{"width":609,"height":721,"x":1376,"y":517} {"width":395,"height":676,"x":1595,"y":542}