Merge branch 'master' into fork

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

@@ -1,5 +1,9 @@
 <template>
-  <div class="container" @mouseover="hover = true" @mouseleave="hover = false">
+  <div
+    class="container"
+    @mouseover="mouseOverEvent"
+    @mouseleave="hover = false"
+  >
     <div
       v-if="!type || type === 0"
       :class="{
@@ -14,7 +18,7 @@
       <div class="avatar">
         <profile-picture
           :admin="$props.admin"
-          :url="`${userAvatar}${hover ? '' : '?type=png'}`"
+          :url="`${userAvatar}${hover || !isGif ? '' : '?type=webp'}`"
           size="50px"
           :hover="true"
           @click.native="openUserInformation"
@@ -166,10 +170,16 @@ export default {
   },
   data() {
     return {
-      hover: false
+      hover: false,
+      isGif: false
     };
   },
   methods: {
+    mouseOverEvent() {
+      if (this.isGif) {
+        this.hover = true;
+      }
+    },
     openContextMenu(event) {
       const x = event.clientX;
       const y = event.clientY;
@@ -261,6 +271,7 @@ export default {
     }
   },
   mounted() {
+    this.isGif = this.userAvatar.endsWith(".gif");
     const files = this.files;
     if (!files || files.length === 0 || !files[0].dimensions) return undefined;
     this.imageSize();

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/Popouts/Popouts/ServerSettingsPanels/General.vue

@@ -136,13 +136,13 @@ export default {
       const file = event.target.files[0];
       const _this = this;
       const maxSize = 2092000;
+      event.target.value = "";
       if (file.size > maxSize) {
         return this.$store.dispatch(
           "setGenericMessage",
           "Image is larger than 2MB"
         );
       }
-      event.target.value = "";
       const allowedFormats = [".png", ".jpeg", ".gif", ".jpg"];
       if (!allowedFormats.includes(path.extname(file.name).toLowerCase())) {
         return this.$store.dispatch(

src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue

@@ -122,11 +122,11 @@ export default {
       }
       const file = event.target.files[0];
       const _this = this;
-      const maxSize = 2092000;
+      const maxSize = 8092000;
       if (file.size > maxSize) {
         return this.$store.dispatch(
           "setGenericMessage",
-          "Image is larger than 2MB"
+          "Image is larger than 8MB"
         );
       }
       event.target.value = "";

src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue

@@ -2,7 +2,7 @@
   <div class="manage-emoji-panel">
     <div class="info">
       <div class="title">
-        Upload your own pretty emojis for free! Emojis must be 1MB or less.
+        Upload your own pretty emojis for free! Emojis must be 3MB or less.
         (png, jpg, gif)
       </div>
       <div class="button" @click="addEmojiBtn">
@@ -36,23 +36,6 @@
       class="hidden"
       @change="emojiBrowse"
     />
-    <!-- <div class="option" @click="changePassword">Change Password</div> -->
-
-    <div v-if="alert.show" class="alert-outer">
-      <div class="alert">
-        <div class="alert-title">
-          Error
-        </div>
-        <div class="alert-content">
-          {{ alert.content }}
-        </div>
-        <div class="alert-buttons">
-          <div class="alert-button" @click="alert.show = false">
-            Okay
-          </div>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -67,14 +50,13 @@ export default {
   components: {},
   data() {
     return {
-      alert: {
-        content: "",
-        show: false
-      },
       domain: config.domain + "/files/"
     };
   },
   methods: {
+    errorBox(msg) {
+      return this.$store.dispatch("setGenericMessage", msg);
+    },
     keyDownEvent(event) {
       const keyCode = event.keyCode;
       if (keyCode == 13) {
@@ -83,61 +65,66 @@ export default {
     },
     async blurEvent(emojiID, event) {
       // send put request
-      const { ok, error } = await customEmoji.put({
+      const { ok } = await customEmoji.put({
         emojiID,
         name: event.target.value
       });
       if (!ok) {
-        this.alert.content =
+        this.errorBox("Something weng wrong. Try again later.");
-          "Upload failed - " + error.response.data.message ||
+        return;
-          "Something weng wrong. Try again later.";
-        return (this.alert.show = true);
       }
     },
-    onProgress(percent) {
-      //update vue
-      console.log("emoji upload progress: ", percent);
-    },
     async emojiBrowse(event) {
       const file = event.target.files[0];
       event.target.value = "";
       const allowedFormats = [".png", ".jpeg", ".gif", ".jpg"];
       if (!allowedFormats.includes(path.extname(file.name).toLowerCase())) {
-        this.alert.content = "Upload failed - Unsupported image file.";
+        this.errorBox("Upload failed - Unsupported image file.");
-        return (this.alert.show = true);
+        return;
-      } else if (file.size >= 1048576) {
+      } else if (file.size >= 3048576) {
-        // 1048576 = 1mb
+        // 3048576 = 3mb
-        this.alert.content =
+        this.errorBox(
-          "Upload failed - Image size must be less than 1 megabytes.";
+          "Upload failed - Image size must be less than 1 megabytes."
-        return (this.alert.show = true);
+        );
+        return;
       }
-      const formData = new FormData();
-      //check if emoji name is already used by twemoji
-      const fileName = path.basename(file.name, path.extname(file.name));
 
-      const emojiExists = emojiParser.allEmojis.find(e =>
+      let reader = new FileReader();
-        e.shortcodes.find(ee => ee === fileName.toLowerCase())
+      reader.readAsDataURL(file);
-      );
+      const _this = this;
-      if (emojiExists) {
+      reader.onload = async function() {
-        formData.append(
+        //check if emoji name is already used by twemoji
-          "emoji",
+        const fileName = path.basename(file.name, path.extname(file.name));
-          file,
+
-          `${fileName.substring(0, 28)}-1${path.extname(file.name)}`
+        const emojiExists = emojiParser.allEmojis.find(e =>
+          e.shortcodes.find(ee => ee === fileName.toLowerCase())
         );
-      } else {
+
-        formData.append(
+        let finalEmojiName = () => {
-          "emoji",
+          if (emojiExists) {
-          file,
+            return `${fileName.substring(0, 28)}-1`;
-          `${fileName.substring(0, 30)}${path.extname(file.name)}`
+          } else {
-        );
+            return fileName.substring(0, 30);
-      }
+          }
-      const { ok, error } = await customEmoji.post(formData, this.onProgress);
+        };
-      if (!ok) {
+
-        this.alert.content =
+        const { ok, error } = await customEmoji.post({
-          "Upload failed - " + error.response.data.message ||
+          name: finalEmojiName(),
-          "Something weng wrong. Try again later.";
+          avatar: reader.result
-        return (this.alert.show = true);
+        });
-      }
+        if (!ok) {
+          if (error.response && error.response.data) {
+            _this.errorBox(error.response.data.message);
+          } else {
+            _this.errorBox("Something went wrong. Try again later.");
+          }
+          return;
+        }
+      };
+      reader.onerror = function(error) {
+        console.log("Error: ", error);
+        _this.errorBox("Something went wrong. Try again later.");
+      };
     },
     addEmojiBtn() {
       if (!this.GDriveLinked) {
@@ -149,17 +136,19 @@ export default {
       this.$refs.emojiBrowser.click();
     },
     async removeEmoji(emojiID) {
-      const { ok, error } = await customEmoji.delete(emojiID);
+      const { ok } = await customEmoji.delete(emojiID);
       if (!ok) {
-        this.alert.content =
+        this.errorBox("Something weng wrong. Try again later.");
-          "Upload failed - " + error.response.data.message ||
+        return;
-          "Something weng wrong. Try again later.";
-        return (this.alert.show = true);
       }
     }
   },
   computed: {
-    ...mapState("settingsModule", ["GDriveLinked", "customEmojis"])
+    ...mapState("settingsModule", ["GDriveLinked"]),
+    customEmojis() {
+      const customEmojis = [...this.$store.state.settingsModule.customEmojis];
+      return customEmojis ? customEmojis.reverse() : [];
+    }
   }
 };
 </script>
@@ -219,6 +208,7 @@ input:focus {
   width: 100%;
   height: 100%;
   margin-bottom: 20px;
+  overflow: hidden;
 }
 
 .emojis-list {

src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue

@@ -34,11 +34,6 @@
 const Survey = () => import("./survey.vue");
 const EditProfile = () => import("./EditProfile.vue");
 
-import AvatarUpload from "@/services/AvatarUpload.js";
-import config from "@/config.js";
-import path from "path";
-import { mapState } from "vuex";
-
 export default {
   components: {
     Survey,
@@ -52,57 +47,6 @@ export default {
         show: false
       }
     };
-  },
-  methods: {
-    onProgress(percent) {
-      //update vue
-      console.log("Avatar upload progress: ", percent);
-    },
-    async avatarBrowse(event) {
-      const file = event.target.files[0];
-      event.target.value = "";
-      const allowedFormats = [".png", ".jpeg", ".gif", ".jpg"];
-
-      if (!allowedFormats.includes(path.extname(file.name).toLowerCase())) {
-        this.alert.content = "Upload failed - Unsupported image file.";
-        return (this.alert.show = true);
-      } else if (file.size >= 2092000) {
-        // 2092000 = 2mb
-        this.alert.content =
-          "Upload failed - Image size must be less than 2 megabytes.";
-        return (this.alert.show = true);
-      }
-      const formData = new FormData();
-      formData.append("avatar", file);
-      const { ok } = await AvatarUpload.uploadAvatar(formData, this.onProgress);
-      if (!ok) {
-        this.alert.content =
-          "Upload failed - Something went wrong. Try again later.";
-        return (this.alert.show = true);
-      }
-    },
-    changePassword() {
-      this.alert.content = "Not implemented yet.";
-      return (this.alert.show = true);
-    },
-    editAvatarBtn() {
-      if (!this.GDriveLinked) {
-        return this.$store.dispatch("setPopoutVisibility", {
-          name: "GDLinkMenu",
-          visibility: true
-        });
-      }
-      this.$refs.avatarBrowser.click();
-    }
-  },
-  computed: {
-    ...mapState("settingsModule", ["GDriveLinked"]),
-    user() {
-      return this.$store.getters.user;
-    },
-    avatar() {
-      return config.domain + "/avatars/" + this.$store.getters.user.avatar;
-    }
   }
 };
 </script>

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'
             })`
           }"
         />
@@ -144,6 +144,7 @@ export default {
   display: flex;
   flex: 1;
   height: 100%;
+  overflow: auto;
 }
 .right {
   display: flex;
@@ -166,6 +167,7 @@ export default {
   border-radius: 4px;
   margin: 10px;
   box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.13);
+  flex-shrink: 0;
 }
 .extendBanner {
   height: 130px;

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);

src/services/customEmoji.js

@@ -6,21 +6,8 @@ let domain = "";
 if (config.serverURL) domain = config.serverURL+"/"
 
 export default {
-  post(data, onProgress) {
+  post(data) {
-    const url = `/settings/emoji`;
+    return wrapper(instance().post(domain+"/settings/emoji", data));
-    let config = {
-      onUploadProgress(progressEvent) {
-        var percentCompleted = Math.round(
-          (progressEvent.loaded * 100) / progressEvent.total
-        );
-
-        // execute the callback
-        if (onProgress) onProgress(percentCompleted);
-
-        return percentCompleted;
-      }
-    };
-    return wrapper(instance().post(domain+url, data, config));
   },
   delete(emojiID) {
     return wrapper(instance().delete(domain+`/settings/emoji`, { data: { emojiID } }));

src/utils/changelog.js

@@ -3,7 +3,7 @@ const config = [
     version: 9.2,
     title: "Image cache, more role permissions!",
     shortTitle: "",
-    date: "08/01/2019",
+    date: "09/01/2019",
     headColor: "#007792",
     new: [
       "Image cache has been implimented.",