Merge pull request #48 from vector-im/timeline-avatar

Specify avatar in config

public/config.json

@@ -8,5 +8,6 @@
     },
     "token": "k9SL1R~GcdbjiFjC",
     "invite_user": "@botuser:matrix.midhun.dev",
-    "encrypt_room": true 
+    "encrypt_room": true,
+    "avatar": "https://i.imgur.com/FD1z37K.png"
 }

src/types/IChatterboxConfig.ts

@@ -13,6 +13,8 @@ export interface IChatterboxConfig {
     header: IHeader;
     // Token needed for token-authenticated registration
     token: string;
+    // URL of the image that should be used as the users avatar
+    avatar: string;
 }
 
 interface IHeader {

src/viewmodels/ChatterboxViewModel.ts

@@ -23,14 +23,14 @@ export class ChatterboxViewModel extends ViewModel {
         else {
             throw new Error("ConfigError: You must either specify 'invite_user' or 'auto_join_room'");
         }
-        this._roomViewModel = this.track(new RoomViewModel({
+        this._roomViewModel = this.track(new RoomViewModel(this.childOptions({
             room,
             ownUserId: this._session.userId,
             platform: this.platform,
             urlCreator: this.urlCreator,
             navigation: this.navigation,
             tileClassForEntry: createCustomTileClassForEntry(this._session.userId),
-        }));
+        })));
         await this._roomViewModel.load();
         this.emitChange("roomViewModel");
     }

src/viewmodels/tiles.ts

@@ -5,36 +5,84 @@ class ChatterboxTextTile extends TextTile {
     get displayName() {
         return this.isOwn? "me" : super.displayName;
     }
+
+    get avatarLetter() { 
+        return "";
+    }
+
+    avatarUrl() {
+        return this.isOwn? this._options.config["avatar"]: null;
+    }
 }
 
 class ChatterboxImageTile extends ImageTile {
     get displayName() {
         return this.isOwn? "me" : super.displayName;
     }
+    
+    get avatarLetter() { 
+        return "";
+    }
+
+    avatarUrl() {
+        return this.isOwn? this._options.config["avatar"]: null;
+    }
 }
 
 class ChatterboxVideoTile extends VideoTile {
     get displayName() {
         return this.isOwn? "me" : super.displayName;
     }
+    
+    get avatarLetter() { 
+        return "";
+    }
+
+    avatarUrl() {
+        return this.isOwn? this._options.config["avatar"]: null;
+    }
 }
 
 class ChatterboxFileTile extends FileTile {
     get displayName() {
         return this.isOwn? "me" : super.displayName;
     }
+    
+    get avatarLetter() { 
+        return "";
+    }
+
+    avatarUrl() {
+        return this.isOwn? this._options.config["avatar"]: null;
+    }
 }
 
 class ChatterboxLocationTile extends LocationTile {
     get displayName() {
         return this.isOwn? "me" : super.displayName;
     }
+    
+    get avatarLetter() { 
+        return "";
+    }
+
+    avatarUrl() {
+        return this.isOwn? this._options.config["avatar"]: null;
+    }
 }
 
 class ChatterboxRedactedTile extends RedactedTile {
     get displayName() {
         return this.isOwn? "me" : super.displayName;
     }
+    
+    get avatarLetter() { 
+        return "";
+    }
+
+    avatarUrl() {
+        return this._options.config["avatar"];
+    }
 }
 
 // We don't want to show the (long and random) user-id in this announcement!