me/mime-chat
Watch
1
0
Fork
You've already forked mime-chat
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

message playback anim

Browse source
This commit is contained in:
Andrew Gundersen 2021-03-11 15:46:34 -06:00
commit 88d7029a5c
4 changed files with 80 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/components/inputItem/inputItem.vue
View file

@ -143,28 +143,22 @@ export default defineComponent({
.pause {
opacity: 1;
&::before {
-moz-animation: audio1 1.5s infinite ease-in-out;
-o-animation: audio1 1.5s infinite ease-in-out;
-webkit-animation: audio1 1.5s infinite ease-in-out;
animation: audio1 1.5s infinite ease-in-out;
-moz-animation: circle1 1.5s infinite ease-in-out;
-o-animation: circle1 1.5s infinite ease-in-out;
-webkit-animation: circle1 1.5s infinite ease-in-out;
animation: circle1 1.5s infinite ease-in-out;
}
&::after {
-moz-animation: audio2 2.2s infinite ease-in-out;
-o-animation: audio2 2.2s infinite ease-in-out;
-webkit-animation: audio2 2.2s infinite ease-in-out;
animation: audio2 2.2s infinite ease-in-out;
-moz-animation: circle2 2.2s infinite ease-in-out;
-o-animation: circle2 2.2s infinite ease-in-out;
-webkit-animation: circle2 2.2s infinite ease-in-out;
animation: circle2 2.2s infinite ease-in-out;
}
}
}
}
.animate-audio1 {
-moz-animation: audio1 1.5s infinite ease-in-out;
-o-animation: audio1 1.5s infinite ease-in-out;
-webkit-animation: audio1 1.5s infinite ease-in-out;
animation: audio1 1.5s infinite ease-in-out;
}
@keyframes audio1 {
@keyframes circle1 {
0%,
100% {
box-shadow: 0 0 0 0.4em rgba(195, 195, 195, 0.4);
@ -179,13 +173,8 @@ export default defineComponent({
box-shadow: 0 0 0 0.25em rgba(195, 195, 195, 0.25);
}
}
.animate-audio2 {
-moz-animation: audio2 2.2s infinite ease-in-out;
-o-animation: audio2 2.2s infinite ease-in-out;
-webkit-animation: audio2 2.2s infinite ease-in-out;
animation: audio2 2.2s infinite ease-in-out;
}
@keyframes audio2 {
@keyframes circle2 {
0%,
100% {
box-shadow: 0 0 0 0.25em rgba(195, 195, 195, 0.15);

62
src/components/messageItem.vue
View file

@ -50,7 +50,9 @@
</div>
<!-- Render Crimata icon or friend's initials. -->
<div v-if="message.modifier == 'fr'" class="photo">
<div v-if="message.modifier == 'fr'" class="photo"
:class="{ playing: isPlaying }"
>
{{ message.context[0] }}
</div>
@ -65,7 +67,7 @@
<script lang='ts'>
import {defineComponent} from 'vue';
import {defineComponent, ref, onMounted} from 'vue';
export default defineComponent({
name: "MessageItem",
@ -75,6 +77,29 @@
type: Object,
required: true
}
},
setup(props) {
let isPlaying = ref(false);
const onStopPlayback = (e: any) => {
window.ipcRenderer.removeAllListeners("stop-playback-anim");
isPlaying.value = false
}
onMounted(() => {
// Turn on audio playback animation if audio.
if (props.message.content.audio === true) {
window.ipcRenderer.on("stop-playback-anim", onStopPlayback);
isPlaying.value = true
}
})
return {
isPlaying
}
}
})
@ -152,6 +177,15 @@
animation-duration: 0.25s;
}
@keyframes appear {
from {
transform: scale(0.3);
}
to {
transform: scale(1);
}
}
#aiBubble {
background-color: white;
}
@ -191,12 +225,26 @@
border-radius: 15px;
}
@keyframes appear {
from {
transform: scale(0.3);
// Apply for audio message playback.
.playing {
animation-name: circle1;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes circle1 {
0%,
100% {
box-shadow: 0 0 0 0.4em rgba(195, 195, 195, 0.4), 0 0 0 0.25em rgba(195, 195, 195, 0.15);
}
to {
transform: scale(1);
25% {
box-shadow: 0 0 0 0.15em rgba(195, 195, 195, 0.15), 0 0 0 0.4em rgba(195, 195, 195, 0.3);
}
50% {
box-shadow: 0 0 0 0.55em rgba(195, 195, 195, 0.55), 0 0 0 0.15em rgba(195, 195, 195, 0.05);
}
75% {
box-shadow: 0 0 0 0.25em rgba(195, 195, 195, 0.25), 0 0 0 0.55em rgba(195, 195, 195, 0.45);
}
}