Be able to scroll and pan media in media modal
As title.
Demo: https://kazv.moe/notice/A9vvIDhsRb0AJEU3vM
Things to consider: Do you want me to deliver @kazvmoe-infra/pinch-zoom-element to npm?
Merge request reports
Activity
-
Testing it out on my pc and phone now, this is pretty sick!
There's a few things I noticed while using
- tapping outside the picture (or the picture) doesn't close it if you're zoomed in at all (would be nice to have fixed)
- zooming in/out with pinch isn't exactly smooth maybe thanks to how the image tries to fit the borders when it gets close to them (not a deal breaker at all)
- if user has set the option to play videos in a modal, it's goofed up in this branch. (IMO videos don't need the same pan/zoom features as images, but they should work the same way as previously at least)
overall great work!
added 165 commits
-
0e981d62...1c535284 - 144 commits from branch
pleroma:develop - cf32d6e2 - Make media modal be aware of multi-touch actions
- bf71bfbd - Preview swipe action
- bad1c75c - Handle pinch action
- 6df87e0c - Add pan threshold
- dba50129 - Use pinch-zoom-element for pinch zoom functionality
- 1110d82d - Add swipe-click handler to media modal
- f29a44e5 - Clean up
- 5aa2c16e - Add missing swipe click component
- 5c271db0 - Prevent the click event from firing on content below modal
- 845e3238 - Make lint happy
- 016ae7cb - Reset position on swipe end even if we cannot navigate
- 34aa69b3 - Use native click for hiding overlay
- fd963b69 - Allow pinch-zoom to fill the whole screen
- 5f24a360 - Update pinch-zoom-element
- 3d7bd221 - Scale swipe threshold with viewport width
- fad48ef8 - Check whether we swiped only for mouse pointer
- d61266c7 - Clean up
- 85578a63 - Bump pinch-zoom-element version
- c16eb998 - Bump @kazvmoe-infra/pinch-zoom-element to 1.2.0 on npm
- 5031e5e2 - Clean up debug code for image pinch zoom
- 8965e7c5 - Remove image box-shadow in media modal
Toggle commit list-
0e981d62...1c535284 - 144 commits from branch
added 2 commits
- 8dbd51d5 - Add changelog for !1403 (merged)
- 1ced2448 - Fix video in media modal not displaying properly
tapping outside the picture (or the picture) doesn't close it if you're zoomed in at all (would be nice to have fixed)
Intended to prevent misclicks: If you accidentally close the image when it is zoomed out, you only need to re-open it; but if you accidentally close the image when it is zoomed in, you lose the zoom and pan states. This will be extremely frustrating when zooming in to view long images.
zooming in/out with pinch isn't exactly smooth maybe thanks to how the image tries to fit the borders when it gets close to them (not a deal breaker at all)
I do not quite get it, could you explain with a video?
if user has set the option to play videos in a modal, it's goofed up in this branch. (IMO videos don't need the same pan/zoom features as images, but they should work the same way as previously at least)
Fixed.
Another thing here: the video/audio should position fine, but I removed the ability to swipe on a video/audio to switch media. Still to prevent misclicks as navigating through video or audio usually involves some swiping.
added 62 commits
-
1ced2448...182fcca5 - 39 commits from branch
pleroma:develop - 7b7c6215 - Make media modal be aware of multi-touch actions
- 8da9f143 - Preview swipe action
- 5e61ad05 - Handle pinch action
- daa3d211 - Add pan threshold
- 316d1f2b - Use pinch-zoom-element for pinch zoom functionality
- 7a2de851 - Add swipe-click handler to media modal
- b76ca326 - Clean up
- 18b46082 - Add missing swipe click component
- bbabacb3 - Prevent the click event from firing on content below modal
- 2afe2860 - Make lint happy
- f8082044 - Reset position on swipe end even if we cannot navigate
- 5bd0b9e5 - Use native click for hiding overlay
- c3024474 - Allow pinch-zoom to fill the whole screen
- ac18618a - Update pinch-zoom-element
- 2b59cd53 - Scale swipe threshold with viewport width
- dd93f434 - Check whether we swiped only for mouse pointer
- ff143f7d - Clean up
- 927b63c6 - Bump pinch-zoom-element version
- 1bc25d10 - Bump @kazvmoe-infra/pinch-zoom-element to 1.2.0 on npm
- a6a0caa8 - Clean up debug code for image pinch zoom
- d9fccb33 - Remove image box-shadow in media modal
- 86920460 - Add changelog for !1403 (merged)
- 628b3951 - Fix video in media modal not displaying properly
Toggle commit list-
1ced2448...182fcca5 - 39 commits from branch
