From 7139711314a8f0938bf0d06dc8e1d9c6ea790d4b Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <rmidhunsuresh@gmail.com>
Date: Sat, 26 Jun 2021 14:32:39 +0530
Subject: [PATCH] Add avatar to tile

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
---
 .../session/rightpanel/MemberListViewModel.js  |  4 +++-
 .../session/rightpanel/MemberTileViewModel.js  | 18 ++++++++++++++++++
 .../session/rightpanel/RightPanelViewModel.js  |  3 ++-
 .../ui/session/rightpanel/MemberTileView.js    |  3 ++-
 4 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/domain/session/rightpanel/MemberListViewModel.js b/src/domain/session/rightpanel/MemberListViewModel.js
index 48d99747..114c61b7 100644
--- a/src/domain/session/rightpanel/MemberListViewModel.js
+++ b/src/domain/session/rightpanel/MemberListViewModel.js
@@ -9,6 +9,7 @@ export class MemberListViewModel extends ViewModel {
         this.memberTileViewModels = this._mapTileViewModels(this._filterJoinedMembers(options.members))
                                         .sortValues(createMemberComparator(options.powerLevels));
         this.nameDisambiguator = new Disambiguator();
+        this.mediaRepository = options.mediaRepository;
     }
 
     _filterJoinedMembers(members) {
@@ -17,7 +18,8 @@ export class MemberListViewModel extends ViewModel {
 
     _mapTileViewModels(members) {
         const mapper = (member, emitChange) => {
-            const vm = new MemberTileViewModel(this.childOptions({member, emitChange}));
+            const mediaRepository = this.mediaRepository;
+            const vm = new MemberTileViewModel(this.childOptions({member, emitChange, mediaRepository}));
             this.nameDisambiguator.disambiguate(vm);
             return vm;
         }
diff --git a/src/domain/session/rightpanel/MemberTileViewModel.js b/src/domain/session/rightpanel/MemberTileViewModel.js
index 3ee201db..23a7eeef 100644
--- a/src/domain/session/rightpanel/MemberTileViewModel.js
+++ b/src/domain/session/rightpanel/MemberTileViewModel.js
@@ -1,9 +1,11 @@
 import {ViewModel} from "../../ViewModel.js";
+import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
 
 export class MemberTileViewModel extends ViewModel {
     constructor(options) {
         super(options);
         this._member = this._options.member;
+        this._mediaRepository = options.mediaRepository
         this._previousName = null;
         this._nameChanged = true;
     }
@@ -47,4 +49,20 @@ export class MemberTileViewModel extends ViewModel {
         this._updatePreviousName(newMember.name);
         this._member = newMember;
     }
+
+    get avatarLetter() {
+        return avatarInitials(this.name);
+    }
+
+    get avatarColorNumber() {
+        return getIdentifierColorNumber(this.userId)
+    }
+
+    avatarUrl(size) {
+        return getAvatarHttpUrl(this._member.avatarUrl, size, this.platform, this._mediaRepository);
+    }
+
+    get avatarTitle() {
+        return this.name;
+    }
 }
diff --git a/src/domain/session/rightpanel/RightPanelViewModel.js b/src/domain/session/rightpanel/RightPanelViewModel.js
index 3010f79c..f01f9491 100644
--- a/src/domain/session/rightpanel/RightPanelViewModel.js
+++ b/src/domain/session/rightpanel/RightPanelViewModel.js
@@ -39,8 +39,9 @@ export class RightPanelViewModel extends ViewModel {
             const list = await this._room.loadMemberList();
             const members = list.members;
             const powerLevels = this._room.powerLevels;
+            const mediaRepository = this._room.mediaRepository;
             this._memberListViewModel = this.track(
-                new MemberListViewModel(this.childOptions({members, powerLevels}))
+                new MemberListViewModel(this.childOptions({members, powerLevels, mediaRepository}))
             );
         }
         this.emitChange("memberListViewModel");
diff --git a/src/platform/web/ui/session/rightpanel/MemberTileView.js b/src/platform/web/ui/session/rightpanel/MemberTileView.js
index 4e299ace..f2b5d499 100644
--- a/src/platform/web/ui/session/rightpanel/MemberTileView.js
+++ b/src/platform/web/ui/session/rightpanel/MemberTileView.js
@@ -1,7 +1,8 @@
 import {TemplateView} from "../../general/TemplateView.js";
+import {AvatarView} from "../../avatar.js";
 
 export class MemberTileView extends TemplateView {
     render(t, vm) {
-        return t.div(vm => vm.name);
+        return t.div([t.view(new AvatarView(vm, 32)), vm => vm.name]);
     }
 }