render avatar in room header

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) {

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),
                     ]),