-
-
Notifications
You must be signed in to change notification settings - Fork 547
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: media preview modal - better zoom support #2133
feat: media preview modal - better zoom support #2133
Conversation
|
✅ Deploy Preview for elk-docs canceled.
|
✅ Deploy Preview for elk-zone ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
No dependency changes detected. Learn more about Socket for GitHub ↗︎ 👍 No dependency changes detected in pull request |
Thanks for the PR! I saw some glitches in desktop (chrome on M1) and Android.
Android seems to work well for tall images. For a landscape image:
|
Thank you @patak-dev ! I could not reproduce any of this yet except for "with the mouse you can slide the image left/right until the next one, but then it jump back to the first one". I knew about this one, it happens because it is a slow movement and not a 'swipe', I will figure it out. Can you please post some images on the Elk Dev profile, so I can test on the same images as you did? |
@patak-dev thanks again! I think I solved these:
The zoom-out bug is really wierd, since I disabled zoom-out completely. The inverse thing makes sense if you zoom out too much, but you shouldn't be able to zoom-out in the first place 😅 Other small changes in the last commit:
|
Works a lot better! The things I saw before are mostly gone. And I can no longer reproduce zooming out to invert the image. |
@patak-dev I fixed the issue with the (close to) diagonal swipes. Now it will only close the modal if you move more on the vertical axis then on the horizontal one. |
I tried the preview using There it usually behaves like this:
Not sure all of this can be emulated using web technologies. |
Thanks for the feedback @bitbonk!
It would help a lot if someone from the Elk team could provide some answers for the UI/UX questions like the zoom amount on double tap or how the modal should look like on mobile. @patak-dev @danielroe can you help with this? Maybe if big changes are needed, we could do it as a "next step" and ship this in the meantime (after the smaller fixes) ? I think many people would like to be able to pan the zoomed image which is (almost) not possible currently. This is expressed in the issue #740 |
Yes, that's the same behaviour on my iOS 15, iPhone 7 when I zoom/pinch very slowly. |
- pinch now zooms with the same rate as the fingers move - one can now drag the image the same time as pinching - double-tap zoom increased to 3x from 2x - it is now possible to close with a downwards swipe
@bitbonk thank you! I had some time today and looked into it more and the correct pinch zooms were only coincidences 😄
Other changes (since I got no "official" response, I implemented your ideas):
I think this is now very close to a native app 🤯 The only thing that would be much harder is your 6th point: "panning with one finger works more like scrolling - if I lift the finger it continues to pan for a while - in the Elk preview it stops immediately". I don't think that an iPhone 7 should have any performance issues, so if you have some please report, that is most likely a bug. |
I just tested the latest build (https://deploy-preview-2133--elk-zone.netlify.app/) on my iPhone and to me everything looks really good now. Good job! 👏👏 |
looks good, on dektop we need to drag a lot the images, maybe we can reduce it a bit: https://deploy-preview-2133--elk-zone.netlify.app/mastodon.social/@pixelfed/110450604878462337 testing android... looks good also in android: https://streamable.com/kz2rc5 wrong video, sorry: https://streamable.com/8e0iyk |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's merge and we can let other tests more in https://main.elk.zone. Thanks for improving this feature @horvbalint! 👏🏼
But, Why didn't use Swiper for this function? Need to keep 0 dependencies? |
@lizy-CZ I am not sure about the dependency policy of the project, I built upon the packages that were used in the previous version |
In this PR I tried to solve the various zoom issues in the image modal component. It was not as straightforward as I tought so there might be some bugs, but it worked very reliably for me. Feedback is welcomed 😊
Main changes are:
Pan support while zoomed in:
It is now possible to move the zoomed-in image. While zoomed-in the swipe gestures are disabled and one can only pan to the edge of the image (+ some gap)
pan-while-zoomed.mp4
Double tap zoom in/out:
This new gesture is now recognized and will either zoom the image in (2x) if it was not zoomed-in before or it will zoom out if it was zoomed-in. One can also reset the zoom state with this, if was previously zoomed-in manually.
double-tap-zoom.mp4
Desktop support
All the gestrues now also work on a desktop with a mouse or a touchpad. The previous arrow-key navigation still works.
desktop-support.webm
Other changes:
Most of the code changed, I tried to clean up the new code, but it might need some more cleanup.