mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-23 03:25:12 +01:00
local echo for image tiles
This commit is contained in:
parent
8b82c991e7
commit
41738ad660
@ -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");
|
||||
|
@ -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,8 +32,7 @@ export class ImageView extends TemplateView {
|
||||
// can slow down rendering, and was bleeding through the lightbox.
|
||||
spacerStyle = `height: ${vm.thumbnailHeight}px`;
|
||||
}
|
||||
return renderMessage(t, vm, [
|
||||
t.a({href: vm.lightboxUrl, className: "picture", style: `max-width: ${vm.thumbnailWidth}px`}, [
|
||||
const children = [
|
||||
t.div({className: "spacer", style: spacerStyle}),
|
||||
t.img({
|
||||
loading: "lazy",
|
||||
@ -42,7 +42,16 @@ export class ImageView extends TemplateView {
|
||||
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`}, children),
|
||||
t.if(vm => vm.error, t.createTemplate((t, vm) => t.p({className: "error"}, vm.error)))
|
||||
]);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user