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

load image in timeline from when it is partially visible

Browse source
This commit is contained in:
Bruno Windels 2022-01-14 13:57:11 +01:00
parent 1ed8d48ced
commit 1f9be978b7
2 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/domain/session/room/timeline/tiles/BaseMediaTile.js
View file

@ -25,10 +25,8 @@ export class BaseMediaTile extends BaseMessageTile {
super(options); super(options);
this._decryptedThumbnail = null; this._decryptedThumbnail = null;
this._decryptedFile = null; this._decryptedFile = null;
this._isVisible = false;
this._error = null; this._error = null;
if (!this.isPending) {
this._tryLoadEncryptedThumbnail();
}
} }
get isUploading() { get isUploading() {
@ -60,6 +58,9 @@ export class BaseMediaTile extends BaseMessageTile {
} }
get thumbnailUrl() { get thumbnailUrl() {
if (!this._isVisible) {
return "";
}
if (this._decryptedThumbnail) { if (this._decryptedThumbnail) {
return this._decryptedThumbnail.url; return this._decryptedThumbnail.url;
} else { } else {
@ -85,6 +86,15 @@ export class BaseMediaTile extends BaseMessageTile {
return ""; return "";
} }
notifyVisible() {
super.notifyVisible();
this._isVisible = true;
this.emitChange("thumbnailUrl");
if (!this.isPending) {
this._tryLoadEncryptedThumbnail();
}
}
get width() { get width() {
const info = this._getContent()?.info; const info = this._getContent()?.info;
return Math.round(info?.w * this._scaleFactor()); return Math.round(info?.w * this._scaleFactor());

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

@ -19,7 +19,6 @@ import {BaseMediaView} from "./BaseMediaView.js";
export class ImageView extends BaseMediaView { export class ImageView extends BaseMediaView {
renderMedia(t, vm) { renderMedia(t, vm) {
const img = t.img({ const img = t.img({
loading: "lazy",
src: vm => vm.thumbnailUrl, src: vm => vm.thumbnailUrl,
alt: vm => vm.label, alt: vm => vm.label,
title: vm => vm.label, title: vm => vm.label,