Viewer: Dynamically set image src, width and height to match current zoom level and viewport size

[lastzero]

As a user with high resolution photos, I would like the new hybrid photo/video viewer to automatically load a higher resolution thumbnail based on the current zoom level and screen resolution.

• Check the PhotoSwipe 5 documentation for the best way to implement this feature request, e.g. use a callback function or provide a srcset to let the browser decide which image to load (if possible/supported).
• Once you know how to do it, give an update (e.g. comment on this issue) and implement it as a proof-of-concept for further UX testing and testing with different browsers/devices.
• The final version must be fully compatible with all previously supported browsers and devices.

Related Issues:

• UX / Improve zooming #247
• Viewer: Add control to toggle fullscreen mode #4703
• Viewer: Add control to start/stop slideshows #4702
• Viewer: Add button to open the edit dialog #4701
• Viewer: Add toggle to flag/unflag pictures as favorites #4700
• Viewer: Add toggle to select/unselect pictures #4699
• UX: Add a hybrid Photo/Video Viewer (Lightbox) #1307

[lastzero]

The PhotoSwipe event to watch for may be one of the following:

lightbox.on('contentResize', ({ content, width, height }) => {
  // content will be resized
  // can be default prevented
  console.log('contentResize', content, width, height);
});
lightbox.on('imageSizeChange', ({ content, width, height, slide }) => {
  // content.element is image
  console.log('imageSizeChange', content, width, height, slide, slide.index);
});

See the available documentation for further information:

• https://photoswipe.com/events/#slide-content-events
• https://photoswipe.com/adjusting-zoom-level/

The thumbnail sizes available from our backend API are documented here:

• https://docs.photoprism.app/developer-guide/api/thumbnails/#thumbnail-sizes

Related source code:

photoprism/frontend/src/component/viewer.vue

Lines 282 to 289 in d286e43

	// Get the screen (window) resolution in real pixels
	const pixels = this.getWindowPixels();
	// Get the right thumbnail size based on the screen resolution in pixels.
	const thumbSize = Util.thumbSize(pixels.width, pixels.height);
	// Get thumbnail image URL.
	const imgSrc = model.Thumbs[thumbSize].src;