Merge branch 'master' into fork

2026-06-19 06:21:02 +00:00 · 2020-01-14 10:08:29 -05:00 · 2020-01-14 10:08:29 -05:00 · 9edf45753e
commit 9edf45753e
parent 21db3c27c6 a54e494ec7
14 changed files with 113 additions and 159 deletions
--- a/src/components/app/MemberTemplate.vue
+++ b/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;
+      }
    }
  }
 };
--- a/src/components/app/MessageTemplate.vue
+++ b/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();
--- a/src/components/app/MyMiniInformation.vue
+++ b/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">
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
+++ b/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(
--- a/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue
+++ b/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 = "";
--- a/src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue
+++ b/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 =
-          "Upload failed - " + error.response.data.message ||
-          "Something weng wrong. Try again later.";
-        return (this.alert.show = true);
+        this.errorBox("Something weng wrong. Try again later.");
+        return;
      }
    },
-    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.";
-        return (this.alert.show = true);
-      } else if (file.size >= 1048576) {
-        // 1048576 = 1mb
-        this.alert.content =
-          "Upload failed - Image size must be less than 1 megabytes.";
-        return (this.alert.show = true);
+        this.errorBox("Upload failed - Unsupported image file.");
+        return;
+      } else if (file.size >= 3048576) {
+        // 3048576 = 3mb
+        this.errorBox(
+          "Upload failed - Image size must be less than 1 megabytes."
+        );
+        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 =>
-        e.shortcodes.find(ee => ee === fileName.toLowerCase())
-      );
-      if (emojiExists) {
-        formData.append(
-          "emoji",
-          file,
-          `${fileName.substring(0, 28)}-1${path.extname(file.name)}`
+      let reader = new FileReader();
+      reader.readAsDataURL(file);
+      const _this = this;
+      reader.onload = async function() {
+        //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 =>
+          e.shortcodes.find(ee => ee === fileName.toLowerCase())
        );
-      } else {
-        formData.append(
-          "emoji",
-          file,
-          `${fileName.substring(0, 30)}${path.extname(file.name)}`
-        );
-      }
-      const { ok, error } = await customEmoji.post(formData, this.onProgress);
-      if (!ok) {
-        this.alert.content =
-          "Upload failed - " + error.response.data.message ||
-          "Something weng wrong. Try again later.";
-        return (this.alert.show = true);
-      }
+
+        let finalEmojiName = () => {
+          if (emojiExists) {
+            return `${fileName.substring(0, 28)}-1`;
+          } else {
+            return fileName.substring(0, 30);
+          }
+        };
+
+        const { ok, error } = await customEmoji.post({
+          name: finalEmojiName(),
+          avatar: reader.result
+        });
+        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 =
-          "Upload failed - " + error.response.data.message ||
-          "Something weng wrong. Try again later.";
-        return (this.alert.show = true);
+        this.errorBox("Something weng wrong. Try again later.");
+        return;
      }
    }
  },
  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 {
--- a/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue
+++ b/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>
--- a/src/components/app/ServerList.vue
+++ b/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;
--- a/src/components/app/ServerTemplate/ServerTemplate.vue
+++ b/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>
--- a/src/components/app/Tabs/Explore/serverTemplate.vue
+++ b/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'
          })`
        }"
      />
--- a/src/components/app/Tabs/Explore/themesTemplate.vue
+++ b/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() {
--- a/src/components/app/relationships/FriendsTemplate.vue
+++ b/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);
--- a/src/services/customEmoji.js
+++ b/src/services/customEmoji.js
@ -6,21 +6,8 @@ let domain = "";
 if (config.serverURL) domain = config.serverURL+"/"

 export default {
-  post(data, onProgress) {
-    const url = `/settings/emoji`;
-    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));
+  post(data) {
+    return wrapper(instance().post(domain+"/settings/emoji", data));
  },
  delete(emojiID) {
    return wrapper(instance().delete(domain+`/settings/emoji`, { data: { emojiID } }));
--- a/src/utils/changelog.js
+++ b/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.",