noby/workadventure
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added an animation when audio message played

Browse Source
This commit is contained in:
David Négrier 2021-06-02 16:52:25 +02:00
parent f4880cc1d0
commit d43633e936
1 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
front/src/Components/UI/AudioPlaying.svelte
View File

@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { fly } from 'svelte/transition';
import megaphoneImg from "./images/megaphone.svg"; import megaphoneImg from "./images/megaphone.svg";
import {soundPlayingStore} from "../../Stores/SoundPlayingStore"; import {soundPlayingStore} from "../../Stores/SoundPlayingStore";
import {afterUpdate, onMount} from "svelte"; import {afterUpdate, onMount} from "svelte";
@ -15,7 +16,7 @@
}); });
</script> </script>
<div class="audio-playing"> <div class="audio-playing" transition:fly="{{ x: 210, duration: 500 }}">
<img src={megaphoneImg} alt="Audio playing" /> <img src={megaphoneImg} alt="Audio playing" />
<p>Audio message</p> <p>Audio message</p>
<audio bind:this={audio} src={url} on:ended={soundEnded} > <audio bind:this={audio} src={url} on:ended={soundEnded} >
@ -29,7 +30,6 @@
position: absolute; position: absolute;
width: 200px; width: 200px;
height: 54px; height: 54px;
/*right: -210px;*/
right: 0; right: 0;
top: 40px; top: 40px;
transition: all 0.1s ease-out; transition: all 0.1s ease-out;