import anime from "animejs";
-import { onMounted, onUnmounted, ref, Ref } from "vue";
import useMitt from "@/modules/mitt";
import { useIpc } from '@/modules/ipc';
+import { onMounted, onUnmounted, ref, Ref } from "vue";
import keyboardNameMap from "../keyBoardMaps/keyboardNameMap";
import { renderMessage, clientMessage } from '@/modules/message';
// Stop recording on space up.
if (cmd == "SPACE" && recording.value) {
- // Render audio immediately.
- const message = renderMessage("", "", "", "sf")
+ // Create a message.
+ const message = renderMessage(
+ "",
+ "",
+ "",
+ "sf"
+ )
+
+ // Render it immediately.
emitter.emit("self-message", message);
// Stop recording and get audio from recorder.
<!-- Shows when a new session is created with Crimata. -->
<div
- v-if="message.context === 'launch'"
+ v-if="message.context === 'Crimata'"
class="divider"
>
<div>new session</div>
class="messageBox"
>
- <!-- Render undo button for messages to friends. -->
- <button
- v-if="undoOption === true"
- class="undoButton"
- >
- undo
- </button>
-
<!-- message bubble -->
<div
class="bubble"
<span
v-if="message.isChild === 'last' || message.isChild === 'none'"
class="context"
- :class="{ 'context-undo-anim': undoOption }"
>
<!-- Render Crimata icon or friend's initials. -->
<script lang='ts'>
- import { defineComponent, ref, onMounted, onBeforeUpdate } from 'vue';
- import { clientRequest } from "@/modules/message";
- import { useIpc } from "@/modules/ipc";
+ import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
name: "MessageItem",
let addListener = false;
- const undoOption = ref(false);
-
const notify = ref(false)
const isPlaying = ref(false);
- const { post } = useIpc()
-
if (!props.message.seen) {
console.log("MSG:Checking...")
}
// Callback for window visibilityState.
- const onVisibilityChange = (event: any) => {
+ const onVisibilityChange = (_event: any) => {
if (document.visibilityState === "visible") {
console.log("MSG:Window visible, notifying.")
}
}
- const onUndo = () => {
- post("client-message", clientRequest("launch", {name: false}, "undo"))
- }
-
- const onStopPlayback = (e: any) => {
+ const onStopPlayback = (_event: any) => {
window.ipcRenderer.removeAllListeners("stop-playback-anim");
isPlaying.value = false
}
- onBeforeUpdate(() => {
-
- if (props.message.context.substring(0, 3) === 'To ') {
- console.log("MSG:Applying undo anim")
- undoOption.value = true;
- }
-
- })
-
onMounted(() => {
// Listen for window focus event.
})
return {
- onUndo,
notify,
- isPlaying,
- undoOption
+ isPlaying
}
}
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 {
display: flex;
justify-content: center;
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>
-<!--
- // 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;
- } -->
\ No newline at end of file