extract renderAvatar

and use avatarTitle instead of sender for img title

src/domain/session/room/timeline/tiles/MessageTile.js

@@ -35,6 +35,7 @@ export class MessageTile extends SimpleTile {
         return this._entry.displayName || this._entry.sender;
     }
 
+    // Avatar view model contract
     get avatarColorNumber() {
         return getIdentifierColorNumber(this._entry.sender);
     }
@@ -50,6 +51,10 @@ export class MessageTile extends SimpleTile {
         return avatarInitials(this.sender);
     }
 
+    get avatarTitle() {
+        return this.sender;
+    }
+
     get date() {
         return this._date && this._date.toLocaleDateString({}, {month: "numeric", day: "numeric"});
     }

src/ui/web/common.js

@@ -19,3 +19,23 @@ export function spinner(t, extraClasses = undefined) {
         t.circle({cx:"50%", cy:"50%", r:"45%", pathLength:"100"})
     );
 }
+
+/**
+ * @param  {TemplateBuilder} t
+ * @param  {Object} vm   view model with {avatarUrl, avatarColorNumber, avatarTitle, avatarLetter}
+ * @param  {Number} size
+ * @return {Element}
+ */
+export function renderAvatar(t, vm, size) {
+    const hasAvatar = !!vm.avatarUrl;
+    const avatarClasses = {
+        avatar: true,
+        [`usercolor${vm.avatarColorNumber}`]: !hasAvatar,
+    };
+    // TODO: handle updates from default to img or reverse
+    const sizeStr = size.toString();
+    const avatarContent = hasAvatar ?
+        t.img({src: vm => vm.avatarUrl, width: sizeStr, height: sizeStr, title: vm => vm.avatarTitle}) :
+        vm => vm.avatarLetter;
+    return t.div({className: avatarClasses}, [avatarContent]);
+}

src/ui/web/session/room/timeline/common.js

@@ -15,6 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import {renderAvatar} from "../../../common.js";
+
 export function renderMessage(t, vm, children) {
     const classes = {
         "TextMessageView": true,
@@ -23,16 +25,8 @@ export function renderMessage(t, vm, children) {
         continuation: vm => vm.isContinuation,
     };
 
-    const hasAvatar = !!vm.avatarUrl;
-    const avatarClasses = {
-        avatar: true,
-        [`usercolor${vm.avatarColorNumber}`]: !hasAvatar,
-    };
-    const avatarContent = hasAvatar ?
-        t.img({src: vm.avatarUrl, width: "30", height: "30", title: vm.sender}) :
-        vm.avatarLetter;
     const profile = t.div({className: "profile"}, [
-        t.div({className: avatarClasses}, [avatarContent]),
+        renderAvatar(t, vm, 30),
         t.div({className: `sender usercolor${vm.avatarColorNumber}`}, vm.sender)
     ]);
     children = [profile].concat(children);