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