debug chatInfo and show profile pictures

src/components/chatInformation.vue

@@ -6,27 +6,28 @@
         <div class="picBoxBig"><div class="placeholderBig">{{room.name.substr(0,2)}}</div></div>
         <div class="roomInformation">
           <div class="roomName">{{room.name}}</div>
-          <div class="users">{{members.length}} members</div>
+          <div class="users">{{getMembers().length}} members</div>
         </div>
         </div>
-        <h2 v-if="members.length !== 0">members:</h2>
-        <div v-for="member in members.slice(0,20)" :key="member.sender" class="contentBox" :title="member.sender">
-          <userThumbnail :mxcURL="member.content.avatar_url" :userId="member.sender" :username="member.content.displayname"
+        <h2 v-if="getMembers().length !== 0">members:</h2>
+        <div v-for="member in getMembers().slice(0,20)" :key="member" class="contentBox" :title="member">
+          <userThumbnail :mxcURL="getUser(member).avatarUrl" :userId="member" :username="getUser(member).displayName"
                          width="64" height="64" resizeMethod="scale" class="userThumbnail" />
           <div class="information">
-            <div class="userName">{{member.content.displayname || member.content.displayname ?member.content.displayname:member.sender}}</div>
+            <div class="userName">{{getUser(member).displayName || member}}</div>
             <div class="status"></div>
           </div>
         </div>
-        <p v-if="members.length>20">and {{members.length-20}} other members</p>
+        <p v-if="getMembers().length>20">and {{getMembers().length-20}} other members</p>
       </div>
     </div>
-    <icon class="closeBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
+    <icon class="closeBtn" @click.native="closeChatInfo()" ic="./sym/ic_close_white_24px.svg" />
   </div>
 </template>
 <script>
 import icon from './icon.vue';
 import userThumbnail from './userThumbnail';
+import {matrix} from "@/main";
 
 export default {
   name: "chatInformation",
@@ -35,11 +36,15 @@ export default {
     userThumbnail
   },
   props:{
-    room: {}
+    room: {},
+    closeChatInfo: Function
   },
-  data(){
-    return{
-      members: Object.keys(this.room.currentState.members)
+  methods: {
+    getUser(userId){
+      return matrix.client.getUser(userId);
+    },
+    getMembers(){
+      return Object.keys(this.room.currentState.members)
     }
   }
 }

src/components/message.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="`${type==='send'?'messageSend':'messageReceive'} ${group?'groupMessage':''}`" class="message" :title="time">
+    <div :class="`${type==='send'?'messageSend':'messageReceive'} ${group?'groupMessage':''}`" class="message">
       <div v-html="solveTextLinks(msg.replace(/</g, '&lt')
          .replace(/>/g, '&gt'))"></div>
       <div class="time">{{time}}</div>

src/components/userThumbnail.vue

@@ -7,6 +7,7 @@
 
 <script>
 import parseMXC from '@modular-matrix/parse-mxc';
+import {matrix} from "@/main";
 
 export default {
   name: "userThumbnail.vue",
@@ -16,12 +17,13 @@ export default {
     userId: String,
     width: String,
     height: String,
-    resizeMethod: String
+    resizeMethod: String,
+    homeserver: 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}`;
+      return `${this.homeserver||matrix.baseUrl}/_matrix/media/v1/thumbnail/${mxc.homeserver}/${mxc.id}?width=${this.width}&height=${this.height}&method=${this.resizeMethod}`;
     }
   },
   data(){

src/lib/matrixHandler.js

@@ -8,6 +8,7 @@ export class MatrixHandler {
     this.rooms = [];
     this.loading = undefined;
     this.user = undefined;
+    this.baseUrl = undefined;
   }
   login(user, password, baseUrl, onError, callback = ()=>{}){
     if (this.client){ console.log('there is already an active session'); return; }
@@ -28,6 +29,7 @@ export class MatrixHandler {
         console.log(`access token => ${response.access_token}`);
         callback(response.access_token);
         this.user = user;
+        this.baseUrl = baseUrl;
         this.startSync()
       }
     }).catch(error => {
@@ -40,6 +42,7 @@ export class MatrixHandler {
     if (this.client){ console.log('there is already an active session'); return; }
     this.client = new matrix.createClient({baseUrl, accessToken, userId});
     this.user = userId;
+    this.baseUrl = baseUrl;
     this.startSync();
   }
   logout(){

src/views/chat.vue

@@ -13,10 +13,11 @@
                 <div class="thumbnailContainer">
                   <div class="filler"></div>
                   <userThumbnail v-if="group[0].sender !== user && isGroup()" :userId="group[0].sender"
-                                 width="64" height="64" resizeMethod="scale" class="userThumbnail" />
+                                 width="64" height="64" resizeMethod="scale" class="userThumbnail"
+                                 :mxcURL="getUser(group[0].sender).avatarUrl" />
                 </div>
-                <div class="username" v-if="group[0].sender !== user && isGroup()">{{group[0].sender}}</div>
-                <div class="event" v-for="event in group" :key="event.origin_server_ts">
+                <div class="username" v-if="group[0].sender !== user && isGroup()">{{getUser(group[0].sender).displayName || group[0].sender}}</div>
+                <div class="event" v-for="event in group" :key="event.origin_server_ts" :title="`${group[0].sender} at ${getTime(event.origin_server_ts)}`">
                   <message v-if="event.content.msgtype==='m.text'" :type="event.sender === user?'send':'receive'"
                            :group="false"
                            :msg=event.content.body :time=getTime(event.origin_server_ts) />
@@ -96,6 +97,9 @@ export default {
       this.loadingStatus = 'loading ...';
       await matrix.client.paginateEventTimeline(this.room.getLiveTimeline(), {backwards: true})
         .then(state => this.loadingStatus = state?'load more':false);
+    },
+    getUser(userId){
+      return matrix.client.getUser(userId);
     }
   },
   data(){

src/views/rooms.vue

@@ -21,7 +21,7 @@
         <div class="roomListName">{{room.name}}</div>
       </div>
     </div>
-    <chatInformation v-if="currentRoom && showChatInfo" :room="currentRoom"/>
+    <chatInformation v-if="currentRoom && showChatInfo" :room="currentRoom" :close-chat-info="()=>showChatInfo=false"/>
   </div>
 </template>