[Enhancement] Pan and zoom feature

[tmp-hallenser]

It was already suggested somewhere to implement a pan and zoom feature, similar to Google Photos and other photo libraries.

I've started working on it, but will unfortunately not have the time to finish the feature in the foreseeable future. I've someone what's to give it a shot - please feel free. Below, I'll share my current status and provide a perspective on how to complete the feature.

Idea:

• The library https://github.com/s-yadav/iv-viewer (demo https://8ypwzryom0.codesandbox.io/) seems to be a promising starting point
• But, it needs some enhancements (1. Cascade of loading images (small, medium, large), 2. Support for highDPI images 3. Support for live videos)

Status & next steps

• The above mentioned features are implemented here https://github.com/tmp-hallenser/iv-viewer
• Integrate it into Lychee has to be done
• 2 things where some more thinking is required: We need a play-pause button in the header for live videos on desktops and the swiping left-right to prevent/next image has to done in some way.
• For discussion: Do we want to have this feature also for videos?

Use of adapted library

let testCallBack = function (status) {
   console.log (status);
}
myAnchor = document.getElementById("video_play_pause");
myAnchor.onclick = function() { viewer.playPauseVideo(true); return false; }
[....]
const viewer = new ImageViewer(wrapper.querySelector('.image-container'), {livePhotoStatusCallBack: testCallBack});
[....]
viewer.load(imgObj.medium, imgObj.big, imgObj.preloadedimagesrc, imgObj.srcSet, imgObj.videosrc);

[danekszy]

Another lightweight, customisable lib to consider for lightbox (has fit/original zoom too): https://photoswipe.com/