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

only load main image when clicking thumbnail

Browse source
This commit is contained in:
Bruno Windels 2020-10-26 09:49:42 +01:00
parent 6a468a0883
commit cbd48aa528
2 changed files with 43 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/domain/session/room/timeline/tiles/ImageTile.js
View file

@ -23,26 +23,37 @@ export class ImageTile extends MessageTile {
constructor(options) {
super(options);
this._decryptedThumbailUrl = null;
this._decryptedUrl = null;
this.load();
}
async _loadEncryptedFile(file) {
const buffer = await this._mediaRepository.downloadEncryptedFile(file);
// TODO: fix XSS bug here by not checking mimetype
const blob = new Blob([buffer], {type: file.mimetype});
if (this.isDisposed) {
return;
}
return URL.createObjectURL(blob);
}
async load() {
const thumbnailFile = this._getContent().file;
const thumbnailFile = this._getContent().info?.thumbnail_file;
const file = this._getContent().file;
if (thumbnailFile) {
const buffer = await this._mediaRepository.downloadEncryptedFile(thumbnailFile);
// TODO: fix XSS bug here by not checking mimetype
const blob = new Blob([buffer], {type: thumbnailFile.mimetype});
if (this.isDisposed) {
return;
}
this._decryptedUrl = URL.createObjectURL(blob);
this._decryptedThumbailUrl = await this._loadEncryptedFile(thumbnailFile);
this.emitChange("thumbnailUrl");
} else if (file) {
this._decryptedUrl = await this._loadEncryptedFile(file);
this.emitChange("thumbnailUrl");
}
}
get thumbnailUrl() {
if (this._decryptedUrl) {
if (this._decryptedThumbailUrl) {
return this._decryptedThumbailUrl;
} else if (this._decryptedUrl) {
return this._decryptedUrl;
}
const mxcUrl = this._getContent()?.url;
@ -52,15 +63,14 @@ export class ImageTile extends MessageTile {
return "";
}
get url() {
if (this._decryptedUrl) {
return this._decryptedUrl;
async loadImageUrl() {
if (!this._decryptedUrl) {
const file = this._getContent().file;
if (file) {
this._decryptedUrl = await this._loadEncryptedFile(file);
}
}
const mxcUrl = this._getContent()?.url;
if (typeof mxcUrl === "string") {
return this._mediaRepository.mxcUrl(mxcUrl);
}
return "";
return this._decryptedUrl || "";
}
_scaleFactor() {
@ -91,6 +101,10 @@ export class ImageTile extends MessageTile {
}
dispose() {
if (this._decryptedThumbailUrl) {
URL.revokeObjectURL(this._decryptedThumbailUrl);
this._decryptedThumbailUrl = null;
}
if (this._decryptedUrl) {
URL.revokeObjectURL(this._decryptedUrl);
this._decryptedUrl = null;

13
src/ui/web/session/room/timeline/ImageView.js
View file

@ -30,7 +30,8 @@ export class ImageView extends TemplateView {
alt: vm.label,
});
const linkContainer = t.a({
href: vm => vm.url,
href: "#",
onClick: evt => this.openImage(evt),
target: "_blank",
style: `padding-top: ${heightRatioPercent}%; width: ${vm.thumbnailWidth}px;`
}, image);
@ -39,4 +40,14 @@ export class ImageView extends TemplateView {
[t.div(linkContainer), t.p(t.time(vm.date + " " + vm.time))]
);
}
async openImage(evt) {
const link = evt.currentTarget;
if (link.getAttribute("href") === "#") {
evt.preventDefault();
const url = await this.value.loadImageUrl();
link.setAttribute("href", url);
link.click();
}
}
}