Option to open images in full resolution

[TtuxX]

Hi :)

Would it be possible to have an option that, when user loads an image, show it in full resolution ?
It would not change anything to previews quality (and app reactivity), but, when user activates this option, it would start preloading the full quality image on mouse hover, then definitely load the full quality zoomable picture on click.

Besides, it currently seems to me that I cannot zoom anymore on any of my pictures inside Memories app (will open an issue for this).

Thank you very much in advance :)

[pulsejet]

Hi :)

Would it be possible to have an option that, when user loads an image, show it in full resolution ? It would not change anything to previews quality (and app reactivity), but, when user activates this option, it would start preloading the full quality image on mouse hover, then definitely load the full quality zoomable picture on click.

#226

Besides, it currently seems to me that I cannot zoom anymore on any of my pictures inside Memories app (will open an issue for this).

How are trying to zoom? Mobile / desktop? Browser? On desktop just the mouse wheel should work for zooming.

[TtuxX]

Yes I hesitated to add a comment but opened another issue given that it is more about loading in full quality rather than preview. If you prefer I can close this issue and continue on the other one.

I am trying to zoom on Desktop (firefox 106.0.5 for mac), and confirm that mouse wheel scroll does not work.

[pulsejet]

Yes I hesitated to add a comment but opened another issue given that it is more about loading in full quality rather than preview. If you prefer I can close this issue and continue on the other one.

We can't really load the full image for two reasons:

1. There are huge photos (I have 108MP). The browser chokes on this. Having on option to load the full image would lead to people turning it on, then complaining the app is sluggish. The correct solution is to lazy-load parts of the high res image after the user zooms in (this is what Google Photos does). But this is neither easy to implement nor light for the server.
2. Format support. Browsers don't support many formats at all, e.g. HEIC. In this case we need to load the previews anyway.

I am trying to zoom on Desktop (firefox 106.0.5 for mac), and confirm that mouse wheel scroll does not work.

Strange. Does zooming work in the demo? Try from a private window.

[TtuxX]

We can't really load the full image for two reasons:

Very interesting! What about limiting it to loading pictures under a certain size, like 10mb (and if the picture size is more important, load the preview with a toaster notification about its important size) ?

Strange. Does zooming work in the demo? Try from a private window.

It works perfectly fine on your server (without even using a private window). I am going to try few more things on my side.

[pulsejet]

Very interesting! What about limiting it to loading pictures under a certain size, like 10mb (and if the picture size is more important, load the preview with a toaster notification about its important size) ?

It's the pixel count that matters, so yes we could use that to selectively load smaller ones. I'm just afraid inconsistent behavior leads to weird bugs. Especially when, as I mentioned, there's a "correct" way to do this.

It works perfectly fine on your server (without even using a private window). I am going to try few more things on my side.

Try clearing your browser cache. Also I assume you're on v4.8.2.

[TtuxX]

Especially when, as I mentioned, there's a "correct" way to do this.

Yes you're right. Lazy load would be awesome but if it is a hassle to implement, it should certainly not be the priority at all.

Try clearing your browser cache. Also I assume you're on v4.8.2.

I tried on chromium browser and the result is the same. I wonder if it might be linked to some patch I applied on my server to load images in full quality when opened in the files viewer...
I will try to investigate.

[pulsejet]

I tried on chromium browser and the result is the same. I wonder if it might be linked to some patch I applied on my server to load images in full quality when opened in the files viewer... I will try to investigate.

If that's the nextcloud viewer, then no. That isn't used by memories.

[major-mayer]

For me, zooming works fine on my instance (using Firefox)

[thorgrin]

Zooming works fine, but by default it loads only 1024x1024 previews, which is not nice for photo presentations. Is there a way to increase that? The default maximum preview size in nextcloud seems to be 4096x4096. Could this be configurable?

[pulsejet]

With memories v4.9+, the preview size will be whatever maximum is configured and suitable for the screen size (generally the 4096x4096 preview).

The broader problem with generating these previews is that they are huge. My photos are in HEIC, mostly 12MP, and each photo is ~1MB. If I generate 4096x4096 previews (that's 16MP), then each of these are ~2MB (!) so my preview folder gets bigger (by a lot) than the originals.

My current thought is to provide a system-wide option to load the full image; they would optionally be converted to JPEG on the fly. The caveat is that this has high CPU usage and is very slow for larger images (>6s for a 64MP HEIC on a very fast machine). Another problem, of course, is that bigger images choke the browser. Client side conversion is unusable (20s for the same image).

[omeryagmurlu]

This (and a similar issue in nextcloud viewer: nextcloud/viewer#578) irritated me a lot that I went and patched the app with a workaround. While waiting for an official solution, you can use this workaround:

Change this line

memories/src/components/Viewer.vue

Line 597 in 1b83c06

let previewUrl = getPreviewUrl(photo, false, 1024);

to

let previewUrl = getDownloadLink(photo);

and build the app with:

npm ci
make build-js-production

You must swap the memories-main.js file with the new version. I use nextcloud on docker and used the bind volume type to do this:

    volumes:
      …
      - type: bind
        source: ./workarounds/nextcloud/viewer/memories-main.js
        target: /config/www/nextcloud/apps/memories/js/memories-main.js
        read_only: true
      …

With this workaround you see the preview image that was used in the timeline until the original image loads in, after that the preview is swapped automatically with the original image.

[TtuxX]

On the zooming issue:

If that's the nextcloud viewer, then no. That isn't used by memories.

Well I tried again with NC 25.0.2. I can zoom with a wheel scroll on pictures with Nextcloud files viewer, but cannot with the same picture when using Memories

[ikamaletdinov]

@omeryagmurlu Unfortunately workaround does not work with HEIC files on iphone. (but works pretty good for other files).

[jonas-w]

@omeryagmurlu thanks, works excellent!

The file has moved, it is now at:

memories/src/components/viewer/Viewer.vue

Line 769 in cf93890

let previewUrl = getPreviewUrl(photo, false, [sw, sh]);

[ikamaletdinov]

@pulsejet That is really important feature. Could it be implemented somehow and at least enabled for some filetypes? (I mean jpeg/png and etc. except HEIC) Thanks in advance!

[pulsejet]

v4.12.1 will let you load the full image on zoom (default) or always (expensive).

Be warned that this may be incredibly slow if:

1. You've large images
2. You've anything other than JPEG/PNG/WEBP/GIF
3. On mobile devices
4. On low bandwidth

[TtuxX]

@pulsejet Thank you so much, I tried it and it is awesome !!

Would it be possible to improve it slightly to:

• Remember the "Always load full size image" user's switch selected position
• Allow the user to zoom a picture even is its resolution is lower than the one of the display (there are many pictures which I cannot zoom in)

[pulsejet]

• Remember the "Always load full size image" user's switch selected position

This is remembered. It's just device-specific, since you might want different behavior on e.g. mobile and desktop.

• Allow the user to zoom a picture even is its resolution is lower than the one of the display (there are many pictures which I cannot zoom in)

I believe this is forbidden in the upstream library, so no easy solution for now.

[ikamaletdinov]

@pulsejet Marvelous change! Looks great on my setup even though with HEIC images. (local network server just for home backups usage)

[MayeulC]

You've anything other than JPEG/PNG/WEBP/GIF

I wonder if other formats (HEIC) couldn't be decoded client-side, perhaps with a WASM build of ffmpeg? Of course, this may make user experience more inconsistent between devices... OTOH, users expect slower devices to display images slower.

[pulsejet]

It's possible but very slow. That also takes away the possibility of caching the JPEG server-side in the future.

[vpatil131]

How do I access the "General" settings on a mobile browser like Safari on iPhone? On desktop browser, it's at bottom left corner but can't seem to find any such option in the mobile browser.

[pulsejet]

@vpatil131 it's in the "Explore" tab => "Settings"