changed the way how avatars show

src/components/app/MemberTemplate.vue

@@ -2,13 +2,13 @@
   <div
     class="member"
     @click="openUserInformation()"
-    @mouseover="hover = true"
+    @mouseover="mouseOverEvent"
     @mouseleave="hover = false"
     @contextmenu.prevent="rightClickEvent"
   >
     <Profile-picture
       class="avatar"
-      :url="`${userAvatar}${hover ? '' : '?type=png'}`"
+      :url="`${userAvatar}${hover || !isGif ? '' : '?type=webp'}`"
       size="30px"
       :unique-i-d="user.uniqueID"
       :status="presense"
@@ -32,7 +32,8 @@ export default {
   props: ["user", "avatar", "type", "member"],
   data() {
     return {
-      hover: false
+      hover: false,
+      isGif: false,
     };
   },
   computed: {
@@ -87,6 +88,9 @@ export default {
       return false;
     }
   },
+  mounted() {
+    this.isGif = this.userAvatar.endsWith(".gif");
+  },
   methods: {
     openUserInformation() {
       this.$store.dispatch("setUserInformationPopout", this.user.uniqueID);
@@ -100,6 +104,11 @@ export default {
         x,
         y
       });
+    },
+    mouseOverEvent() {
+      if (this.isGif) {
+        this.hover = true;
+      }
     }
   }
 };

src/components/app/MessageTemplate.vue

@@ -14,7 +14,7 @@
       <div class="avatar">
         <profile-picture
           :admin="$props.admin"
-          :url="`${userAvatar}${hover ? '' : '?type=png'}`"
+          :url="`${userAvatar}${hover ? '' : '?type=webp'}`"
           size="50px"
           :hover="true"
           @click.native="openUserInformation"

src/components/app/MyMiniInformation.vue

@@ -2,10 +2,12 @@
   <div class="my-mini-information">
     <ProfilePicture
       class="avatar"
-      :url="`${avatar}${hover ? '' : '?type=png'}`"
+      :url="`${avatar}${hover ? '' : '?type=webp'}`"
       :admin="user.admin"
       size="35px"
       :hover="true"
+      @mouseenter.native="hover = true"
+      @mouseleave.native="hover = false"
       @click.native="openUserInformation"
     />
     <div class="information">

src/components/app/ServerList.vue

@@ -16,7 +16,7 @@
           v-if="server && server.banner"
           :style="{
             backgroundImage: `url(${bannerDomain}${server.banner}${
-              bannerHover ? '' : '?type=png'
+              bannerHover ? '' : '?type=webp'
             })`
           }"
         />

src/components/app/ServerTemplate/ServerTemplate.vue

@@ -14,7 +14,7 @@
     <profile-picture
       size="45px"
       class="avatar"
-      :url="`${avatarDomain}/${serverData.avatar}${hover ? '' : '?type=png'}`"
+      :url="`${avatarDomain}/${serverData.avatar}${hover ? '' : '?type=webp'}`"
     />
   </div>
 </template>

src/components/app/Tabs/Explore/serverTemplate.vue

@@ -6,7 +6,7 @@
         v-if="server.server.banner"
         :style="{
           backgroundImage: `url(${bannerDomain + server.server.banner}${
-            hover ? '' : '?type=png'
+            hover ? '' : '?type=webp'
           })`
         }"
       />

src/components/app/Tabs/Explore/themesTemplate.vue

@@ -6,7 +6,7 @@
         class="background-dark"
         :style="{
           backgroundImage: `url(${bannerDomain +
-            theme.screenshot}${'?type=png'})`
+            theme.screenshot}${'?type=webp'})`
         }"
       />
     </div>
@@ -76,7 +76,7 @@ export default {
     bannerImageClicked() {
       this.$store.dispatch(
         "setImagePreviewURL",
-        this.bannerDomain + this.theme.screenshot + "?type=png"
+        this.bannerDomain + this.theme.screenshot + "?type=webp"
       );
     },
     unApplyButton() {

src/components/app/relationships/FriendsTemplate.vue

@@ -3,7 +3,7 @@
     class="friend"
     :class="{ selected: uniqueIDSelected, tree }"
     @click="openChat"
-    @mouseover="hover = true"
+    @mouseover="mouseOverEvent"
     @mouseleave="hover = false"
   >
     <div
@@ -11,7 +11,7 @@
       :style="
         `border-color: ${
           status.statusColor
-        }; background-image: url(${userAvatar}${hover ? '' : '?type=png'})`
+        }; background-image: url(${userAvatar}${hover || !isGif ? '' : '?type=webp'})`
       "
       @click="openUserInformation"
     >
@@ -53,9 +53,13 @@ export default {
   ],
   data() {
     return {
-      hover: false
+      hover: false,
+      isGif: false
     };
   },
+  mounted() {
+    this.isGif = this.userAvatar.endsWith(".gif");
+  },
   computed: {
     notifications() {
       const channelID = this.$props.channelID;
@@ -97,6 +101,11 @@ export default {
     }
   },
   methods: {
+    mouseOverEvent() {
+      if (this.isGif) {
+        this.hover = true;
+      }
+    },
     async closeChannel() {
       this.channelID;
       await channelService.delete(this.channelID);