TerribleDev/ente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

The dimensions are necessary

Browse Source 
the CSS was masking the issue
This commit is contained in:
Manav Rathi
2025-02-12 08:59:26 +05:30
parent 4736ec7e0a
commit d4ddc0f919
1 changed files with 23 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
web/packages/new/photos/components/FileViewerPhotoSwipe.ts
View File

@@ -202,22 +202,21 @@ export class FileViewerPhotoSwipe {
pswp.addFilter("itemData", (_, index) => {
const file = files[index];
// We might not have anything to show immediately, though in most
// cases a cached renderable thumbnail URL will be available
// shortly.
//
// Meanwhile,
//
// 1. Return empty slide data; PhotoSwipe will not show anything in
// the image area but will otherwise render UI controls properly.
//
// 2. Insert empty data so that we don't enqueue multiple updates.
let itemData: SlideData | undefined;
if (file) {
itemData = this.itemDataByFileID.get(file.id);
if (!itemData) {
// We don't have anything to show immediately, though in
// most cases a cached renderable thumbnail URL will be
// available shortly.
//
// Meanwhile,
//
// 1. Return empty slide data; PhotoSwipe will not show
// anything in the image area but will otherwise render
// the surrounding UI properly.
//
// 2. Insert empty data so that we don't enqueue multiple
// updates.
itemData = {};
this.itemDataByFileID.set(file.id, itemData);
this.enqueueUpdates(index, file);
@@ -351,11 +350,18 @@ export class FileViewerPhotoSwipe {
};
const thumbnailURL = await downloadManager.renderableThumbnailURL(file);
// We don't have the dimensions of the thumbnail. We could try to deduce
// something from the file's aspect ratio etc, but that's not needed:
// PhotoSwipe already correctly (for our purposes) handles just a source
// URL being present.
update({ src: thumbnailURL });
const thumbnailURLWithDimensions = await new Promise((resolve) => {
let image = new Image();
image.onload = () => {
resolve({
src: thumbnailURL,
width: image.naturalWidth,
height: image.naturalHeight,
});
};
image.src = thumbnailURL;
});
update(thumbnailURLWithDimensions);
switch (file.metadata.fileType) {
case FileType.image: {