mirrors/vector-im-hydrogen-web
1
0
Fork 0
mirror of https://github.com/vector-im/hydrogen-web.git synced 2024-12-23 03:25:12 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #640 from vector-im/bwindels/lazyloadimageswhenpartiallyinview

Browse Source 
load image in timeline from when it is partially visible
This commit is contained in:
Bruno Windels 2022-01-14 13:59:57 +01:00 committed by GitHub
commit b5a1c419ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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,