Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
Code Issues Pull requests Projects Releases Packages 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) { constructor(options) {
super(options); super(options);
this._decryptedThumbailUrl = null;
this._decryptedUrl = null; this._decryptedUrl = null;
this.load(); 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() { async load() {
const thumbnailFile = this._getContent().file; const thumbnailFile = this._getContent().info?.thumbnail_file;
const file = this._getContent().file;
if (thumbnailFile) { if (thumbnailFile) {
const buffer = await this._mediaRepository.downloadEncryptedFile(thumbnailFile); this._decryptedThumbailUrl = await this._loadEncryptedFile(thumbnailFile);
// TODO: fix XSS bug here by not checking mimetype this.emitChange("thumbnailUrl");
const blob = new Blob([buffer], {type: thumbnailFile.mimetype}); } else if (file) {
if (this.isDisposed) { this._decryptedUrl = await this._loadEncryptedFile(file);
return;
}
this._decryptedUrl = URL.createObjectURL(blob);
this.emitChange("thumbnailUrl"); this.emitChange("thumbnailUrl");
} }
} }
get thumbnailUrl() { get thumbnailUrl() {
if (this._decryptedUrl) { if (this._decryptedThumbailUrl) {
return this._decryptedThumbailUrl;
} else if (this._decryptedUrl) {
return this._decryptedUrl; return this._decryptedUrl;
} }
const mxcUrl = this._getContent()?.url; const mxcUrl = this._getContent()?.url;
@ -52,15 +63,14 @@ export class ImageTile extends MessageTile {
return ""; return "";
} }
get url() { async loadImageUrl() {
if (this._decryptedUrl) { if (!this._decryptedUrl) {
return this._decryptedUrl; const file = this._getContent().file;
if (file) {
this._decryptedUrl = await this._loadEncryptedFile(file);
}
} }
const mxcUrl = this._getContent()?.url; return this._decryptedUrl || "";
if (typeof mxcUrl === "string") {
return this._mediaRepository.mxcUrl(mxcUrl);
}
return "";
} }
_scaleFactor() { _scaleFactor() {
@ -91,6 +101,10 @@ export class ImageTile extends MessageTile {
} }
dispose() { dispose() {
if (this._decryptedThumbailUrl) {
URL.revokeObjectURL(this._decryptedThumbailUrl);
this._decryptedThumbailUrl = null;
}
if (this._decryptedUrl) { if (this._decryptedUrl) {
URL.revokeObjectURL(this._decryptedUrl); URL.revokeObjectURL(this._decryptedUrl);
this._decryptedUrl = null; 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, alt: vm.label,
}); });
const linkContainer = t.a({ const linkContainer = t.a({
href: vm => vm.url, href: "#",
onClick: evt => this.openImage(evt),
target: "_blank", target: "_blank",
style: `padding-top: ${heightRatioPercent}%; width: ${vm.thumbnailWidth}px;` style: `padding-top: ${heightRatioPercent}%; width: ${vm.thumbnailWidth}px;`
}, image); }, image);
@ -39,4 +40,14 @@ export class ImageView extends TemplateView {
[t.div(linkContainer), t.p(t.time(vm.date + " " + vm.time))] [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();
}
}
} }