From 31240e9032d90b77443e4f1defe9e4476308a57a Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Sun, 5 May 2024 11:24:45 +0200
Subject: [PATCH] The Message-Component can now display GIFs as well

---
 src/components/MessageComponent.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/MessageComponent.vue b/src/components/MessageComponent.vue
index 1d25872..2e7fd6b 100644
--- a/src/components/MessageComponent.vue
+++ b/src/components/MessageComponent.vue
@@ -3,12 +3,15 @@
     ownMessage: Boolean,
     timestamp: String,
     message: String,
+    gif: Boolean,
+    url: String,
   })
 </script>
 
 <template>
   <div class="message" :class="{'sent' : props.ownMessage, 'received' : !props.ownMessage}">
-    <p style="margin-bottom: 0;">{{props.message}}</p>
+    <p v-if="!props.gif" style="margin-bottom: 0;">{{props.message}}</p>
+    <img v-if="props.gif" :src="props.url" alt="GIF" style="width: 100%;border-radius: 10px;" />
     <div style="text-align: right;">
       <small style="margin-top: 0;">{{props.timestamp}}</small>
     </div>
@@ -18,7 +21,7 @@
 <style scoped>
   .message {
     border-radius: 10px;
-    max-width: 15rem;
+    width: 15rem;
     padding: 7px;
     margin:3px;
     box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.15);