add userThumbnail to rooms

src/components/message.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="`${type==='send'?'messageSend':'messageReceive'} ${group?'groupMessage':''}`" class="message">
+    <div :class="type==='send'?'messageSend':'messageReceive'" class="message">
       <div v-html="solveTextLinks(msg.replace(/</g, '&lt')
          .replace(/>/g, '&gt'))"></div>
       <div class="time">{{time}}</div>
@@ -12,8 +12,7 @@ export default {
   props: {
     msg: String,
     time: String,
-    type: String,
+    type: String
-    group: Boolean
   },
   methods:{
     solveTextLinks(text){
@@ -56,13 +55,6 @@ export default {
     background-color: #42a7b9;
     border-radius: 1rem 1rem 0 1rem;
   }
-  .messageReceive.groupMessage{
-    margin-left: 3rem;
-    max-width: calc(100% - 7rem);
-  }
-  .messageSend.groupMessage{
-    max-width: calc(100% - 6rem);
-  }
   .time{
     position: relative;
     bottom: -0.2rem;

src/components/timeline.vue

@@ -1,33 +1,36 @@
 <template>
   <div class="timeline">
-    <div class="timeGroup" v-for="timeGroup in splitArray(timeline,
+    <div class="timeGroup"
-            obj => getDate(obj.event.origin_server_ts),obj => obj.event)" :key="timeGroup[0].origin_server_ts">
+         v-for="timeGroup in splitArray(timeline,obj => getDate(obj.event.origin_server_ts),obj => obj.event)"
+         :key="timeGroup[0].origin_server_ts"
+    >
       <div class="time">{{getDate(timeGroup[0].origin_server_ts)}}</div>
       <div class="eventGroup" v-for="group in splitArray(timeGroup, obj => obj.sender)" :key="group[0].origin_server_ts">
-          <div class="thumbnailContainer">
+        <div class="thumbnailContainer">
-            <div class="filler"></div>
+          <div class="filler"></div>
-            <userThumbnail v-if="group[0].sender !== user && groupTimeline"
+          <userThumbnail
-                           :fallback="group[0].sender"
+            v-if="group[0].sender !== user && groupTimeline"
-                           class="userThumbnail"
+            :fallback="group[0].sender"
-                           :mxcURL="getUser(group[0].sender).avatarUrl"
+            class="userThumbnail"
-                           :size="2"
+            :mxcURL="getUser(group[0].sender).avatarUrl"
-                           :title="group[0].sender"
+            :size="2"
-            />
+            :title="group[0].sender"
-          </div>
+          />
-          <div :class="groupTimeline?'indent username':'username'"
+        </div>
-               v-if="group[0].sender !== user && groupTimeline">{{getUser(group[0].sender).displayName || group[0].sender}}
+        <div :class="groupTimeline?'indent username':'username'"
-          </div>
+             v-if="group[0].sender !== user && groupTimeline">{{getUser(group[0].sender).displayName || group[0].sender}}
-          <div :class="groupTimeline?'indent event':'event'"
+        </div>
-               v-for="event in group" :key="event.origin_server_ts"
+        <div :class="groupTimeline?'indent event':'event'"
-               :title="`${group[0].sender} at ${getTime(event.origin_server_ts)}`"
+             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"
+          <message v-if="event.content.msgtype==='m.text'"
-                     :msg=event.content.body :time=getTime(event.origin_server_ts)
+                   :type="event.sender === user?'send':'receive'"
-            />
+                   :msg=event.content.body :time=getTime(event.origin_server_ts)
-            <div v-else-if="event.type==='m.room.member'" class="info">{{membershipEvents[event.content.membership]}}</div>
+          />
-            <div v-else class="info">unknown event</div>
+          <div v-else-if="event.type==='m.room.member'" class="info">{{membershipEvents[event.content.membership]}}</div>
-          </div>
+          <div v-else class="info">unknown event</div>
+        </div>
       </div>
     </div>
   </div>

src/views/rooms.vue

@@ -6,18 +6,33 @@
     <div id="roomList" class="roomList">
       <h1>[chat]</h1>
       <div v-for="room in matrix.rooms" :key="room.roomId" @click="openChat(room)" class="roomListElement">
-        <div class="roomImgPlaceholder">{{room.name.substr(0,2)}}</div>
+        <userThumbnail
+          class="roomImg"
+          :mxcURL="getUrl(room)"
+          :fallback="room.roomId"
+          :size="3"
+        />
         <div class="roomListName">{{room.name}}</div>
       </div>
     </div>
-    <chat class="chat" v-if="currentRoom" :room="currentRoom" :user="matrix.user"
+    <chat
-          :close-chat="()=>currentRoom=undefined"
+      class="chat"
-          :open-chat-info="()=>showChatInfo=true"/>
+      v-if="currentRoom"
+      :room="currentRoom"
+      :user="matrix.user"
+      :close-chat="()=>currentRoom=undefined"
+      :open-chat-info="()=>showChatInfo=true"
+    />
     <div class="noRoomSelected" v-else>Please select a room to be displayed.</div>
     <div class="roomListSmall">
       <h1>[c]</h1>
       <div v-for="(room, index) in matrix.rooms" :key="index" @click="openChat(room)" class="roomListElement" :title="room.name">
-        <div class="roomImgPlaceholder">{{room.name.substr(0,2)}}</div>
+        <userThumbnail
+            class="roomImg"
+            :mxcURL="getUrl(room)"
+            :fallback="room.roomId"
+            :size="3"
+        />
         <div class="roomListName">{{room.name}}</div>
       </div>
     </div>
@@ -28,13 +43,16 @@
 <script>
 import chat from '@/views/chat.vue';
 import chatInformation from "@/components/chatInformation";
+import userThumbnail from "@/components/userThumbnail";
 import {matrix} from "@/main";
+import sdk from "matrix-js-sdk";
 
 export default {
   name: "rooms",
   components:{
     chat,
-    chatInformation
+    chatInformation,
+    userThumbnail
   },
   methods:{
     openChat(room){
@@ -42,6 +60,11 @@ export default {
       this.$router.push(`/rooms/${room.roomId}`);
       this.$forceUpdate();
       //chat.methods.scrollToBottom();
+    },
+    getUrl(room){
+      let avatarState = room.getLiveTimeline().getState(sdk.EventTimeline.FORWARDS).getStateEvents("m.room.avatar");
+      return avatarState.length>0?avatarState[avatarState.length-1].getContent().url:undefined;
+      //return this.room.getLiveTimeline().getStateEvents("m.room.avatar");
     }
   },
   data(){
@@ -123,17 +146,13 @@ export default {
   left: 20rem;
   text-align: center;
 }
-.roomImgPlaceholder{
+.roomImg{
   position: absolute;
-  left: 1rem;
+  left: 0.5rem;
-  height: 2rem;
+  height: 3rem;
   width: 3rem;
-  padding-top: 1rem;
-  background-color: #42a7b9;
-  border-radius: 1.5rem;
-  text-align: center;
 }
-.roomImgPlaceholder.small{
+.roomImg.small{
   margin-left: calc(50% - 2rem);
 }