Merge remote-tracking branch 'origin/master'

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>

src/matrix.js

@@ -125,8 +125,8 @@ function getCookie(key) {
 }
 
 client.on('event', (event) => {
-  console.log(event.getType());
-  console.log(event);
+  //console.log(event.getType());
+  //console.log(event);
   if (event.getType() === 'm.room.name') {
     client.getRooms().forEach((newRoom) => {
       const room = session.rooms.find((room) => room.roomId === newRoom.roomId);
@@ -136,7 +136,7 @@ client.on('event', (event) => {
         });
         console.log(`new room => ${newRoom.name}`);
       } else if (room.name !== newRoom.name) {
-        console.log(`roomname changed from ${room.name} to ${newRoom.name}`);
+        //console.log(`roomname changed from ${room.name} to ${newRoom.name}`);
         room.name = newRoom.name;
       }
     });
@@ -146,17 +146,16 @@ client.on('event', (event) => {
       session.rooms.push({
         name: 'undefined', roomId: event.event.room_id, messages: [], members: [],
       });
-      console.log(`new user => ${event.event.sender}`);
+      //console.log(`new user => ${event.event.sender}`);
     } else {
       room.members.push({ sender: event.event.sender, content: event.event.content });
     }
   }
-  console.log(session);
 });
 
 client.on('Room.timeline', (event, room) => {
   if (event.getType() === 'm.room.message') {
-    console.log(`message => ${event.event.content.body}`);
+    //console.log(`message => ${event.event.content.body}`);
     const thisRoom = session.rooms.find((thisRoom) => thisRoom.roomId === room.roomId);
     if (!thisRoom) {
       session.rooms.push({
@@ -177,8 +176,3 @@ client.on('Room.timeline', (event, room) => {
     }
   }
 });
-
-client.on('Room.member', (member) => {
-  console.log('this is a member');
-  console.log(member);
-});

src/views/rooms.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div id="roomList" class="roomList">
-      <h1>[chat]{{scrollOnUpdate}}</h1>
+      <h1>[chat]</h1>
       <h2>{{session.rooms.length}} rooms:</h2>
       <div v-for="room in session.rooms" :key="room.roomId" @click="openChat(room)" class="roomListElement">
         <div class="roomImgPlaceholder">{{room.name.substr(0,2)}}</div>