mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #404 from MidhunSureshR/fix-402

Browse source 
Handle avatar image error
This commit is contained in:
Bruno Windels 2021-07-05 07:48:48 +00:00 committed by GitHub
commit f515407491
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 116 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/platform/web/Platform.js
View file

@ -36,6 +36,7 @@ import {BlobHandle} from "./dom/BlobHandle.js";
import {hasReadPixelPermission, ImageHandle, VideoHandle} from "./dom/ImageHandle.js";
import {downloadInIframe} from "./dom/download.js";
import {Disposables} from "../../utils/Disposables.js";
import {handleAvatarError} from "./ui/avatar.js";
function addScript(src) {
return new Promise(function (resolve, reject) {
@ -189,6 +190,8 @@ export class Platform {
this._disposables.track(disposable);
}
}
this._container.addEventListener("error", handleAvatarError, true);
this._disposables.track(() => this._container.removeEventListener("error", handleAvatarError, true));
window.__hydrogenViewModel = vm;
const view = new RootView(vm);
this._container.appendChild(view.mount());

86
src/platform/web/ui/AvatarView.js Normal file
View file

@ -0,0 +1,86 @@
import {BaseUpdateView} from "./general/BaseUpdateView.js";
import {renderStaticAvatar, renderImg} from "./avatar.js";
import {text} from "./general/html.js";
/*
optimization to not use a sub view when changing between img and text
because there can be many many instances of this view
*/
export class AvatarView extends BaseUpdateView {
/**
* @param {ViewModel} value view model with {avatarUrl, avatarColorNumber, avatarTitle, avatarLetter}
* @param {Number} size
*/
constructor(value, size) {
super(value);
this._root = null;
this._avatarUrl = null;
this._avatarTitle = null;
this._avatarLetter = null;
this._size = size;
}
_avatarUrlChanged() {
if (this.value.avatarUrl(this._size) !== this._avatarUrl) {
this._avatarUrl = this.value.avatarUrl(this._size);
return true;
}
return false;
}
_avatarTitleChanged() {
if (this.value.avatarTitle !== this._avatarTitle) {
this._avatarTitle = this.value.avatarTitle;
return true;
}
return false;
}
_avatarLetterChanged() {
if (this.value.avatarLetter !== this._avatarLetter) {
this._avatarLetter = this.value.avatarLetter;
return true;
}
return false;
}
mount(options) {
this._avatarUrlChanged();
this._avatarLetterChanged();
this._avatarTitleChanged();
this._root = renderStaticAvatar(this.value, this._size);
// takes care of update being called when needed
super.mount(options);
return this._root;
}
root() {
return this._root;
}
update(vm) {
// important to always call _...changed for every prop
if (this._avatarUrlChanged()) {
// avatarColorNumber won't change, it's based on room/user id
const bgColorClass = `usercolor${vm.avatarColorNumber}`;
if (vm.avatarUrl(this._size)) {
this._root.replaceChild(renderImg(vm, this._size), this._root.firstChild);
this._root.classList.remove(bgColorClass);
} else {
this._root.textContent = vm.avatarLetter;
this._root.classList.add(bgColorClass);
}
}
const hasAvatar = !!vm.avatarUrl(this._size);
if (this._avatarTitleChanged() && hasAvatar) {
const element = this._root.firstChild;
if (element.tagName === "IMG") {
element.setAttribute("title", vm.avatarTitle);
}
}
if (this._avatarLetterChanged() && !hasAvatar) {
this._root.textContent = vm.avatarLetter;
}
}
}

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

@ -14,90 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import {tag, text, classNames} from "./general/html.js";
import {BaseUpdateView} from "./general/BaseUpdateView.js";
/*
optimization to not use a sub view when changing between img and text
because there can be many many instances of this view
*/
export class AvatarView extends BaseUpdateView {
/**
* @param {ViewModel} value view model with {avatarUrl, avatarColorNumber, avatarTitle, avatarLetter}
* @param {Number} size
*/
constructor(value, size) {
super(value);
this._root = null;
this._avatarUrl = null;
this._avatarTitle = null;
this._avatarLetter = null;
this._size = size;
}
_avatarUrlChanged() {
if (this.value.avatarUrl(this._size) !== this._avatarUrl) {
this._avatarUrl = this.value.avatarUrl(this._size);
return true;
}
return false;
}
_avatarTitleChanged() {
if (this.value.avatarTitle !== this._avatarTitle) {
this._avatarTitle = this.value.avatarTitle;
return true;
}
return false;
}
_avatarLetterChanged() {
if (this.value.avatarLetter !== this._avatarLetter) {
this._avatarLetter = this.value.avatarLetter;
return true;
}
return false;
}
mount(options) {
this._avatarUrlChanged();
this._avatarLetterChanged();
this._avatarTitleChanged();
this._root = renderStaticAvatar(this.value, this._size);
// takes care of update being called when needed
super.mount(options);
return this._root;
}
root() {
return this._root;
}
update(vm) {
// important to always call _...changed for every prop
if (this._avatarUrlChanged()) {
// avatarColorNumber won't change, it's based on room/user id
const bgColorClass = `usercolor${vm.avatarColorNumber}`;
if (vm.avatarUrl(this._size)) {
this._root.replaceChild(renderImg(vm, this._size), this._root.firstChild);
this._root.classList.remove(bgColorClass);
} else {
this._root.replaceChild(text(vm.avatarLetter), this._root.firstChild);
this._root.classList.add(bgColorClass);
}
}
const hasAvatar = !!vm.avatarUrl(this._size);
if (this._avatarTitleChanged() && hasAvatar) {
const img = this._root.firstChild;
img.setAttribute("title", vm.avatarTitle);
}
if (this._avatarLetterChanged() && !hasAvatar) {
this._root.firstChild.textContent = vm.avatarLetter;
}
}
}
import {tag, text, classNames, setAttribute} from "./general/html.js";
/**
* @param {Object} vm view model with {avatarUrl, avatarColorNumber, avatarTitle, avatarLetter}
* @param {Number} size
@ -108,16 +25,36 @@ export function renderStaticAvatar(vm, size, extraClasses = undefined) {
let avatarClasses = classNames({
avatar: true,
[`size-${size}`]: true,
[`usercolor${vm.avatarColorNumber}`]: !hasAvatar,
[`usercolor${vm.avatarColorNumber}`]: !hasAvatar
});
if (extraClasses) {
avatarClasses += ` ${extraClasses}`;
}
const avatarContent = hasAvatar ? renderImg(vm, size) : text(vm.avatarLetter);
return tag.div({className: avatarClasses}, [avatarContent]);
const avatar = tag.div({className: avatarClasses}, [avatarContent]);
if (hasAvatar) {
setAttribute(avatar, "data-avatar-letter", vm.avatarLetter);
setAttribute(avatar, "data-avatar-color", vm.avatarColorNumber);
}
return avatar;
}
function renderImg(vm, size) {
export function renderImg(vm, size) {
const sizeStr = size.toString();
return tag.img({src: vm.avatarUrl(size), width: sizeStr, height: sizeStr, title: vm.avatarTitle});
}
function isAvatarEvent(e) {
const element = e.target;
const parent = element.parentElement;
return element.tagName === "IMG" && parent.classList.contains("avatar");
}
export function handleAvatarError(e) {
if (!isAvatarEvent(e)) { return; }
const parent = e.target.parentElement;
const avatarColorNumber = parent.getAttribute("data-avatar-color");
parent.classList.add(`usercolor${avatarColorNumber}`);
const avatarLetter = parent.getAttribute("data-avatar-letter");
parent.textContent = avatarLetter;
}

2
src/platform/web/ui/session/leftpanel/RoomTileView.js
View file

@ -16,7 +16,7 @@ limitations under the License.
*/
import {TemplateView} from "../../general/TemplateView.js";
import {AvatarView} from "../../avatar.js";
import {AvatarView} from "../../AvatarView.js";
export class RoomTileView extends TemplateView {
render(t, vm) {

2
src/platform/web/ui/session/rightpanel/RoomDetailsView.js
View file

@ -1,6 +1,6 @@
import {TemplateView} from "../../general/TemplateView.js";
import {classNames, tag} from "../../general/html.js";
import {AvatarView} from "../../avatar.js";
import {AvatarView} from "../../AvatarView.js";
export class RoomDetailsView extends TemplateView {
render(t, vm) {

2
src/platform/web/ui/session/room/RoomView.js
View file

@ -22,7 +22,7 @@ import {TimelineList} from "./TimelineList.js";
import {TimelineLoadingView} from "./TimelineLoadingView.js";
import {MessageComposer} from "./MessageComposer.js";
import {RoomArchivedView} from "./RoomArchivedView.js";
import {AvatarView} from "../../avatar.js";
import {AvatarView} from "../../AvatarView.js";
export class RoomView extends TemplateView {
constructor(options) {