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

local echo for image tiles

Browse Source
This commit is contained in:
Bruno Windels 2020-11-13 19:15:21 +01:00
parent 8b82c991e7
commit 41738ad660
2 changed files with 39 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/domain/session/room/timeline/tiles/ImageTile.js
View File

@ -32,6 +32,11 @@ export class ImageTile extends MessageTile {
this.navigation.segment("room", this._room.id),
this.navigation.segment("lightbox", this._entry.id)
]);
if (this._entry.attachments) {
this.track(this._entry.attachments.url.status.subscribe(() => {
this.emitChange("uploadStatus");
}));
}
}
async _loadEncryptedFile(file) {
@ -64,12 +69,26 @@ export class ImageTile extends MessageTile {
return this._lightboxUrl;
}
get isUploading() {
return !!this._entry.attachments;
}
get uploadStatus() {
if (this._entry.attachments) {
return this._entry.attachments.url.status.get();
}
return "";
}
get thumbnailUrl() {
if (this._decryptedThumbail) {
return this._decryptedThumbail.url;
} else if (this._decryptedImage) {
return this._decryptedImage.url;
}
if (this._entry.attachments) {
return this._entry.attachments.url.localPreview.url;
}
const mxcUrl = this._getContent()?.url;
if (typeof mxcUrl === "string") {
return this._mediaRepository.mxcUrlThumbnail(mxcUrl, this.thumbnailWidth, this.thumbnailHeight, "scale");

31
src/platform/web/ui/session/room/timeline/ImageView.js
View File

@ -16,6 +16,7 @@ limitations under the License.
import {TemplateView} from "../../../general/TemplateView.js";
import {renderMessage} from "./common.js";
import {spinner} from "../../../common.js";
export class ImageView extends TemplateView {
render(t, vm) {
@ -31,18 +32,26 @@ export class ImageView extends TemplateView {
// can slow down rendering, and was bleeding through the lightbox.
spacerStyle = `height: ${vm.thumbnailHeight}px`;
}
const children = [
t.div({className: "spacer", style: spacerStyle}),
t.img({
loading: "lazy",
src: vm => vm.thumbnailUrl,
alt: vm => vm.label,
title: vm => vm.label,
style: `max-width: ${vm.thumbnailWidth}px; max-height: ${vm.thumbnailHeight}px;`
}),
t.time(vm.date + " " + vm.time),
];
if (vm.isUploading) {
const uploadStatus = t.div({className: "uploadStatus"}, [
spinner(t),
vm => vm.uploadStatus
]);
children.push(uploadStatus);
}
return renderMessage(t, vm, [
t.a({href: vm.lightboxUrl, className: "picture", style: `max-width: ${vm.thumbnailWidth}px`}, [
t.div({className: "spacer", style: spacerStyle}),
t.img({
loading: "lazy",
src: vm => vm.thumbnailUrl,
alt: vm => vm.label,
title: vm => vm.label,
style: `max-width: ${vm.thumbnailWidth}px; max-height: ${vm.thumbnailHeight}px;`
}),
t.time(vm.date + " " + vm.time),
]),
t.a({href: vm.lightboxUrl, className: "picture", style: `max-width: ${vm.thumbnailWidth}px`}, children),
t.if(vm => vm.error, t.createTemplate((t, vm) => t.p({className: "error"}, vm.error)))
]);
}