Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
Code Issues Pull requests Projects Releases Packages Wiki Activity

Handle avatar error

Browse source 
Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
This commit is contained in:
RMidhunSuresh 2021-06-28 23:18:07 +05:30
parent ce647e78ce
commit 5f1346568d
1 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/platform/web/ui/avatar.js
View file

@ -44,6 +44,11 @@ export class AvatarView extends BaseUpdateView {
return false;
}
setAvatarError() {
this._avatarError = true;
this.update(this.value);
}
_avatarTitleChanged() {
if (this.value.avatarTitle !== this._avatarTitle) {
this._avatarTitle = this.value.avatarTitle;
@ -65,6 +70,8 @@ export class AvatarView extends BaseUpdateView {
this._avatarLetterChanged();
this._avatarTitleChanged();
this._root = renderStaticAvatar(this.value, this._size);
const image = this._root.firstChild;
image?.addEventListener("error", () => this.setAvatarError());
// takes care of update being called when needed
super.mount(options);
return this._root;
@ -76,10 +83,10 @@ export class AvatarView extends BaseUpdateView {
update(vm) {
// important to always call _...changed for every prop
if (this._avatarUrlChanged()) {
if (this._avatarUrlChanged() || this._avatarError) {
// avatarColorNumber won't change, it's based on room/user id
const bgColorClass = `usercolor${vm.avatarColorNumber}`;
if (vm.avatarUrl(this._size)) {
if (vm.avatarUrl(this._size) && !this._avatarError) {
this._root.replaceChild(renderImg(vm, this._size), this._root.firstChild);
this._root.classList.remove(bgColorClass);
} else {
@ -87,7 +94,7 @@ export class AvatarView extends BaseUpdateView {
this._root.classList.add(bgColorClass);
}
}
const hasAvatar = !!vm.avatarUrl(this._size);
const hasAvatar = !!(vm.avatarUrl(this._size) && !vm._avatarError);
if (this._avatarTitleChanged() && hasAvatar) {
const img = this._root.firstChild;
img.setAttribute("title", vm.avatarTitle);
@ -95,6 +102,7 @@ export class AvatarView extends BaseUpdateView {
if (this._avatarLetterChanged() && !hasAvatar) {
this._root.firstChild.textContent = vm.avatarLetter;
}
if (this._avatarError) { this._avatarError = false;}
}
}
@ -104,7 +112,7 @@ export class AvatarView extends BaseUpdateView {
* @return {Element}
*/
export function renderStaticAvatar(vm, size, extraClasses = undefined) {
const hasAvatar = !!vm.avatarUrl(size);
const hasAvatar = !!(vm.avatarUrl(size) && !vm.avatarError);
let avatarClasses = classNames({
avatar: true,
[`size-${size}`]: true,