From 4fefe94302fde877a247c412f07e282e4d86f869 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Thu, 20 Aug 2020 17:33:08 +0200
Subject: [PATCH] render avatar in room header

---
 src/domain/session/room/RoomViewModel.js | 13 ++++++++++++-
 src/ui/web/session/room/RoomView.js      |  3 ++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js
index 5b625fe6..86edf027 100644
--- a/src/domain/session/room/RoomViewModel.js
+++ b/src/domain/session/room/RoomViewModel.js
@@ -87,13 +87,24 @@ export class RoomViewModel extends ViewModel {
         return "";
     }
 
-    get avatarInitials() {
+    get avatarLetter() {
         return avatarInitials(this._room.name);
     }
 
     get avatarColorNumber() {
         return getIdentifierColorNumber(this._room.id)
     }
+
+    get avatarUrl() {
+        if (this._room.avatarUrl) {
+            return this._room.mediaRepository.mxcUrlThumbnail(this._room.avatarUrl, 32, 32, "crop");
+        }
+        return null;
+    }
+
+    get avatarTitle() {
+        return this.name;
+    }
     
     async _sendMessage(message) {
         if (message) {
diff --git a/src/ui/web/session/room/RoomView.js b/src/ui/web/session/room/RoomView.js
index 7a4abd45..3f9b9bce 100644
--- a/src/ui/web/session/room/RoomView.js
+++ b/src/ui/web/session/room/RoomView.js
@@ -19,6 +19,7 @@ import {TemplateView} from "../../general/TemplateView.js";
 import {TimelineList} from "./TimelineList.js";
 import {TimelineLoadingView} from "./TimelineLoadingView.js";
 import {MessageComposer} from "./MessageComposer.js";
+import {renderAvatar} from "../../common.js";
 
 export class RoomView extends TemplateView {
     render(t, vm) {
@@ -26,7 +27,7 @@ export class RoomView extends TemplateView {
             t.div({className: "TimelinePanel"}, [
                 t.div({className: "RoomHeader"}, [
                     t.button({className: "back", onClick: () => vm.close()}),
-                    t.div({className: `avatar usercolor${vm.avatarColorNumber}`}, vm => vm.avatarInitials),
+                    renderAvatar(t, vm, 32),
                     t.div({className: "room-description"}, [
                         t.h2(vm => vm.name),
                     ]),