Add avatar to tile

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>

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;
         }

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;
+    }
 }

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");

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]);
     }
 }