modified embeds and added a proxy for images.

src/components/app/MessagePanel.vue

@@ -20,6 +20,7 @@
           :uniqueID="msg.creator.uniqueID"
           :avatar="msg.creator.avatar"
           :message="msg.message"
+          :embed="msg.embed"
           :files="msg.files"
           :status="msg.status"
           :type="msg.type"

src/components/app/MessageTemplate.vue

@@ -62,6 +62,7 @@
             @click="imageClicked"
           >
         </div>
+        <message-embed-template v-if="embed" :embed="embed"/>
       </div>
       <div
         class="sending-status"
@@ -94,6 +95,7 @@
 
 <script>
 import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
+import messageEmbedTemplate from "./messageEmbedTemplate";
 import messageFormatter from "@/utils/messageFormatter.js";
 import config from "@/config.js";
 import friendlyDate from "@/utils/date";
@@ -103,7 +105,8 @@ import { mapState } from "vuex";
 
 export default {
   components: {
-    ProfilePicture
+    ProfilePicture,
+    messageEmbedTemplate
   },
   props: [
     "message",
@@ -114,7 +117,8 @@ export default {
     "uniqueID",
     "files",
     "admin",
-    "type"
+    "type",
+    "embed"
   ],
   methods: {
     openUserInformation() {
@@ -126,12 +130,6 @@ export default {
   },
   computed: {
     ...mapState("settingsModule", ["apperance"]),
-    getLinks(){
-      const message = this.$props['message']
-      if (!message) return [];
-      console.log(message.match(/(https?:\/\/[^\s]+)/g) || [])
-      return "LOL"
-    },
     getImage() {
       if (!this.$props.files || this.$props.files.length === 0)
         return undefined;
@@ -381,7 +379,7 @@ export default {
 
 <style>
 .msg-link {
-  color: rgb(50, 138, 253);
+  color: rgb(86, 159, 253);
 }
 .message .sending-status .material-icons {
   font-size: 15px;

src/components/app/Popouts/Popouts/AddServer.vue

@@ -28,17 +28,17 @@
           key="add-server"
           class="content"
         >
-          <div class="title">
+          <!-- <div class="title">
             Set your server's avatar
-          </div>
+          </div> -->
           <profile-picture
             class="avatar"
             size="90px"
             :url="tempImage"
           />
-          <div class="button">
+          <!-- <div class="button">
             Browse Avatar Coming Soon!
-          </div>
+          </div> -->
           <div class="input">
             <div class="input-name">
               Server Name

src/components/app/messageEmbedTemplate.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="embed" :class="{article: embed.type === 'article' || embed.type === 'video.other'}">
+    <div class="right">
+      <div class="image"><img v-if="embed.image" :src="`//images.weserv.nl/?url=${embed.image}`" alt=""></div>
+    </div>
+    <div class="left">
+      <div class="title" v-if="embed.url"><a target=”_blank” :href="embed.url">{{embed.title}}</a></div>
+      <div class="title" v-else>{{embed.title}}</div>
+      <div class="description">{{embed.description}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["embed"]
+}
+</script>
+
+<style scoped>
+.embed{
+  background: rgba(0, 0, 0, 0.507);
+  border-radius: 10px;
+  padding: 5px;
+  display: flex;
+  max-width: 500px;
+  min-width: 200px;
+  align-self: flex-start;
+  margin-top: 5px;
+}
+.embed.article {
+  flex-direction: column;
+}
+.article .left {
+  order: 1;
+}
+.article .right {
+  order: 2;
+}
+.article .image img {
+  width: 100%;
+  height: auto;
+  margin-top: 5px;
+}
+
+.right {
+  display: flex;
+}
+
+.title {
+  font-size: 15px;
+}
+.description {
+  font-size: 14px;
+  white-space: pre-wrap;
+}
+.image img {
+  width: auto;
+  height: 100px;
+  border-radius: 5px;
+  align-self: center;
+}
+.image {
+  display: flex;
+  margin-right: 10px;
+  align-self: center;
+}
+a {
+  color: rgb(86, 159, 253);
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+</style>
+

src/store/modules/messageModule.js

@@ -61,7 +61,6 @@ const actions = {
 
 
   },
-
   messages(context, data) {
     context.commit("messages", data);
   },
@@ -77,6 +76,17 @@ const actions = {
   },
   replaceMessage(context, data) {
     context.commit("replaceMessage", data);
+  },
+  updateMessage(context, {channelID, messageID, message}) {
+    console.log(message)
+    const messages = context.state.messages[channelID];
+    messages.find((obj, index) => {
+      if (obj.messageID === messageID){
+        const newObj = Object.assign({}, obj, message);
+        context.commit('updateMessage', {message: newObj, index});
+        return true;
+      }
+    })
   }
 };
 
@@ -101,6 +111,10 @@ async function getMessages(context, channelID, isServerChannel) {
 
 
 const mutations = {
+  updateMessage(state, {message, index}) {
+    console.log(message);
+    Vue.set(state.messages[message.channelID], index, message);
+  },
   messages(state, data) {
     Vue.set(state.messages, data.channelID, data.messages);
   },
@@ -112,7 +126,6 @@ const mutations = {
       data.message
     );
   },
-
   replaceMessage(state, data) {
     const { tempID, message } = data;
 

src/store/modules/socketIOModule.js

@@ -266,11 +266,13 @@ const actions = {
   },
   ['socket_server:removeChannel'](context, {server_id, channelID}) {
     context.dispatch('servers/removeServerChannel', {server_id, channelID});
-   // context.dispatch('removeChannel', {channelID});
+
   },
   ['socket_server:updateServer'](context, data) {
     context.dispatch('servers/updateServer', {server_id: data.server_id, server: data});
-   // context.dispatch('removeChannel', {channelID});
+  },
+  ['socket_updateMessage'](context, data) {
+    context.dispatch('updateMessage', {channelID: data.channelID, messageID: data.messageID, message: data});
   },
 }