add userThumbnail

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@modular-matrix/parse-mxc": "^1.0.1",
     "core-js": "^3.6.5",
     "matrix-js-sdk": "^9.1.0",
     "sass": "^1.29.0",

src/components/chatInformation.vue

@@ -11,12 +11,11 @@
         </div>
         <h2 v-if="room.members.length !== 0">members:</h2>
         <div v-for="member in room.members.slice(0,20)" :key="member.sender" class="contentBox" :title="member.sender">
-          <!---<img v-if="member.content.avatar_url" class="picBox"
-               :src="`https://adb.sh/_matrix/media/r0/thumbnail/adb.sh/${member.content.avatar_url.split('/',4)[3]}?width=64&height=64&method=crop`"/>-->
-          <div class="picBox"><p>{{member.content.displayname?member.content.displayname.substr(0,2):member.sender.substr(1,2)}}</p></div>
+          <userThumbnail :mxcURL="member.content.avatar_url" :userId="member.sender" :username="member.content.displayname"
+                         width="64" height="64" resizeMethod="scale" class="userThumbnail" />
           <div class="information">
-            <div class="userName">{{member.content.displayname?member.content.displayname:member.sender}}</div>
-            <div v-if="member.content.displayname" class="status">{{member.sender}}</div>
+            <div class="userName">{{member.content.displayname || member.content.displayname ?member.content.displayname:member.sender}}</div>
+            <div class="status"></div>
           </div>
         </div>
         <p v-if="room.members.length>20">and {{room.members.length-20}} other members</p>
@@ -27,11 +26,13 @@
 </template>
 <script>
 import icon from './icon.vue';
+import userThumbnail from './userThumbnail';
 
 export default {
   name: "chatInformation",
   components:{
-    icon
+    icon,
+    userThumbnail
   },
   props:{
     room: {}
@@ -120,17 +121,11 @@ export default {
   height: 3rem;
   width: 100%;
 }
-.picBox{
+.userThumbnail{
   position: absolute;
   left: 0;
   top: 0;
   background-color: #42a7b9;
-  width: 3rem;
-  height: 3rem;
-  border-radius: 1.5rem;
-}
-img.picBox{
-  background-color: unset;
 }
 .information{
   position: absolute;

src/components/userThumbnail.vue

@@ -0,0 +1,46 @@
+<template>
+  <img v-if="mxcURL" :src="thumbnailUrl()" class="userThumbnail" />
+  <div v-else class="userThumbnail">
+    <p>{{username?username.substr(0,2):userId.substr(1,2)}}</p>
+  </div>
+</template>
+
+<script>
+import parseMXC from '@modular-matrix/parse-mxc';
+import matrix from '@/matrix.js';
+
+export default {
+  name: "userThumbnail.vue",
+  props: {
+    mxcURL: String,
+    username: String,
+    userId: String,
+    width: Number,
+    height: Number,
+    resizeMethod: String
+  },
+  methods: {
+    thumbnailUrl(){
+      let mxc = parseMXC.parse(this.mxcURL);
+      return `${this.homeserver}/_matrix/media/v1/thumbnail/${mxc.homeserver}/${mxc.id}?width=${this.width}&height=${this.height}&method=${this.resizeMethod}`;
+    }
+  },
+  data(){
+    return {
+      homeserver: matrix.data().session.baseUrl
+    }
+  }
+}
+</script>
+
+<style scoped>
+.userThumbnail{
+  background-color: #42a7b9;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 1.5rem;
+}
+img.userThumbnail{
+  background-color: unset;
+}
+</style>