Skip to content
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

Pan / zoom improvements: using glide-transformations library to add blurried background #650

Conversation

mzorz
Copy link
Contributor

@mzorz mzorz commented Mar 2, 2021

This builds on top of #651 (last step to pan / zoom improvements)

On all phones, allow pinch to zoom, and when either height or width is now larger than the image bounds, show a blur which will be included in the exported image.

I first tried to reuse PhotoEditor's PhotoFilter, which is based on Android's Media package EffectFactory but it doesn't have a Blur effect builtin so, we can't rely on that (see https://github.com/burhanrashid52/PhotoEditor/wiki/Filter-Effect).

After checking a bit I decided to fo with glide-transformations library which had a handy blur transformation for Glide.

Once that's sorted out we need to decide on an architecture to comply with two things:

  • each time the Story frame is changed, we need to present the blurry background, the source image, and the Added Views on top.
  • the resulting output file should also have the blurried background in it

We're taking advantage of the pre-existing OnImageChangeListener interface, which has one callback OnBitmapLoaded which gets called on several / all overridden setter methods that may have a visual impact on the underlying ImageView.

With this, each time an image background is set, we also make a call to draw the transformed / blurred image on the background (deeper z-level).

Example
For these 2 original background images:
512x512 PNG Landscape Texture - Rocky Stream
Icon_Bird_512x512

This is the resulting output on a Pixel 3 XL (see it's normalized to 9:16):
wp_story1614805120565_2
wp_story1614805120758_1

Notes:
- Still need to figure out changes to FrameSaveManager, given we now need to paint both the blurred background and the background on the ghostPhotoEditor and we may need to wait and chain these together with Glide's listener. this wasn't needed, just loading both is ok given it's z-index will paint them correctly, and also we're using sequential calls within our coroutines (which means async callback chaining wasn't going to be possible nor needed anyway)

  • There's a small (but noticeable) delay on the Samsung J2 I'm using for testing after the main image is shown and before the blurred background is shown.

@peril-automattic
Copy link

peril-automattic bot commented Mar 2, 2021

You can test the changes on this Pull Request by downloading the APK here.

@mzorz mzorz marked this pull request as ready for review March 3, 2021 20:46
@mzorz mzorz requested a review from aforcier March 3, 2021 20:47
@mzorz mzorz changed the base branch from issue/646-zoom-in-bkg-pictures-fit-center-limit-pos to issue/646-zoom-in-bkg-pictures-fit-center-limit-pos-new March 10, 2021 20:10
…' into issue/646-zoom-in-bkg-pictures-fit-center-limit-pos-blur
@aforcier
Copy link
Collaborator

Working great @mzorz ! Since this should be the last in the PR stack, I also built WPAndroid with this branch and tested editing and publishing on a variety of devices and for different file types/sources, everything worked smoothly (including this issue which you mentioned had been fixed since I saw it in the original base PR).

With the discussion around the remaining issues Megs reported + #653 filed, it looks like the feature is good to go!

:shipit: - I'll leave it to you to collapse the stack and get the WPAndroid PR ready.

@mzorz
Copy link
Contributor Author

mzorz commented Mar 19, 2021

Thank you for all the testing and reviews @aforcier ! Will now proceed to merge and prepare the WPAndroid PR updating the stories library commit hash 👍

@mzorz mzorz merged commit e694661 into issue/646-zoom-in-bkg-pictures-fit-center-limit-pos-new Mar 19, 2021
@mzorz mzorz deleted the issue/646-zoom-in-bkg-pictures-fit-center-limit-pos-blur branch March 19, 2021 08:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants