From 804f5518a5d91f8faf77518e057b7c320d5e1386 Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn@googlemail.com>
Date: Sun, 26 Jan 2020 12:00:11 +0000
Subject: [PATCH] gifs should restart from the beginning

---
 src/components/ProfilePictureTemplate.vue | 30 ++++++++++++-----------
 src/components/app/ServerList.vue         | 13 ++++------
 2 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/components/ProfilePictureTemplate.vue b/src/components/ProfilePictureTemplate.vue
index a6f5884..f81a7f6 100644
--- a/src/components/ProfilePictureTemplate.vue
+++ b/src/components/ProfilePictureTemplate.vue
@@ -13,17 +13,20 @@
             '20px'}`
         "
       />
-      <div
-        :class="`inner-profile-picture ${$props.hover ? 'hoverable' : ''}`"
-        :style="
-          `${
-            status || status === 0
-              ? 'border: solid 3px ' + statusColor.statusColor
-              : ''
-          }; height: ${$props.size}; width: ${
-            $props.size
-          }; background-image: url(${$props.url})`
-        "
+
+      <img
+        class="inner-profile-picture"
+        :class="{ hoverable: $props.hover }"
+        :style="{
+          height: $props.size,
+          width: $props.size,
+          border: `${
+            statusColor === undefined
+              ? undefined
+              : 'solid 3px' + statusColor.statusColor
+          }`
+        }"
+        :src="$props.url"
       />
     </div>
   </div>
@@ -76,6 +79,7 @@ export default {
     },
     statusColor() {
       let status = this.status;
+      if (status === undefined) return undefined;
       return {
         statusName: statuses[parseInt(status)].name,
         statusURL: statuses[parseInt(status)].url,
@@ -101,9 +105,7 @@ export default {
   background-color: rgba(0, 0, 0, 0.315);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   border-radius: 50%;
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
+  object-fit: cover;
   display: flex;
   transition: 0.2s;
   backface-visibility: hidden;
diff --git a/src/components/app/ServerList.vue b/src/components/app/ServerList.vue
index 8e33f8d..4de6193 100644
--- a/src/components/app/ServerList.vue
+++ b/src/components/app/ServerList.vue
@@ -10,15 +10,13 @@
         :class="{ extendBanner: server && server.banner }"
         v-if="selectedServerID"
       >
-        <div
+        <img
           class="banner-image"
           @click="bannerImageClicked"
           v-if="server && server.banner"
-          :style="{
-            backgroundImage: `url(${bannerDomain}${server.banner}${
-              bannerHover ? '' : '?type=webp'
-            })`
-          }"
+          :src="
+            `${bannerDomain}${server.banner}${bannerHover ? '' : '?type=webp'}`
+          "
         />
         <div class="sub-banner">
           <div class="text" :title="servers[selectedServerID].name">
@@ -175,8 +173,7 @@ export default {
 }
 .banner-image {
   position: absolute;
-  background-position: center;
-  background-size: cover;
+  object-fit: cover;
   height: 100%;
   z-index: 2;
   width: 100%;