From d43633e936448bc44740ebdb3f21164c2a135ebe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Wed, 2 Jun 2021 16:52:25 +0200
Subject: [PATCH] Added an animation when audio message played

---
 front/src/Components/UI/AudioPlaying.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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