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

Nicer picture viewer opening animation #18186

Closed
HarHarLinks opened this issue Jul 22, 2021 · 10 comments · Fixed by matrix-org/matrix-react-sdk#6454
Closed

Nicer picture viewer opening animation #18186

HarHarLinks opened this issue Jul 22, 2021 · 10 comments · Fixed by matrix-org/matrix-react-sdk#6454

Comments

@HarHarLinks
Copy link
Contributor

Is your suggestion related to a problem? Please describe.

Currently when clicking on a picture, it will darken the screen and then start a blowup animation (start as one pixel in the center and enlarge) of the picture to fit screen or 100% (citation needed) size. This might actually be more jarring than a quick fade-in.

Describe the solution you'd like.

Take the picture as it is shown when clicked, darken the background and transform it from there.
The Kodi mediacenter companion app kore does that animation when selecting an item to view details (i.e. a TV show or season).

Describe alternatives you've considered.

Use a less extreme animation, like said quick fade-in without transformation.

Additional context

accessibility perhaps?

what's the correct term for the "picture viewer"?

@ShadowJonathan
Copy link
Contributor

FWIW discord does both, a fade-in while also blowing up from 50% size.

@SimonBrandner SimonBrandner self-assigned this Jul 22, 2021
@SimonBrandner
Copy link
Contributor

A quick PoC:

Peek.2021-07-22.21-05.mp4

@ShadowJonathan
Copy link
Contributor

I don't like that, it's very slow, i'd recommend making it 0.2s or 0.5s

@SimonBrandner
Copy link
Contributor

I don't like that, it's very slow, i'd recommend making it 0.2s or 0.5s

It was a PoC :P The PR should be a bit better though it's not ideal either

@HarHarLinks
Copy link
Contributor Author

From the video, that matches what I wanted, except the animation speed. If the real speed matches that of the current, I think that would be satisfactory. Thanks!

@SimonBrandner
Copy link
Contributor

Changing animation speed is the simple part :)

@SimonBrandner
Copy link
Contributor

@HarHarLinks and @ShadowJonathan, could you please try out the live preview and share your thoughts?

@ShadowJonathan
Copy link
Contributor

This looks good, although with the weird effect of the image not "scaling" from the current size to the new size looks weird;

zoom-2021-07-23_09.48.01.mp4

The new image with its full size just pops up on top of the timeline one, and that might be a bit jarring.

@SimonBrandner
Copy link
Contributor

This looks good, although with the weird effect of the image not "scaling" from the current size to the new size looks weird;
zoom-2021-07-23_09.48.01.mp4

The new image with its full size just pops up on top of the timeline one, and that might be a bit jarring.

Hmm, looks like a bug :(

@HarHarLinks
Copy link
Contributor Author

HarHarLinks commented Jul 23, 2021

The first time clicking on an image with this, the transition does not work properly: noticeably the screen first darkens, only then the transformation happens. This is also on current nightly and presumably stable, probably due to the full size loading only when clicked on.
To solve this, I propose to use the thumbnail as a placeholder and replace it by the full size when that has (async) downloaded. Same could be applied to blurhash if not even the thumbnail has loaded (or if there isn't any).

Second and later times, it is much quicker (I believe as intended). It is quite nice, I like it.
I also like that you fade in the darkening effect of the background with the same transition time.

Please also add the reverse transition when closing the image viewer.

I am not sure what nor how to cause the bug ShadowJonathan showed.

BBaoVanC added a commit to boba-best/element.boba.best that referenced this issue Oct 11, 2021
* Decrease profile button touch target ([\element-hq#6900](matrix-org/matrix-react-sdk#6900)). Contributed by [ColonisationCaptain](https://github.com/ColonisationCaptain).
* Don't let click events propagate out of context menus ([\element-hq#6892](matrix-org/matrix-react-sdk#6892)).
* Allow closing Dropdown via its chevron ([\element-hq#6885](matrix-org/matrix-react-sdk#6885)). Fixes element-hq#19030 and element-hq#19030.
* Improve AUX panel behaviour ([\element-hq#6699](matrix-org/matrix-react-sdk#6699)). Fixes element-hq#18787 and element-hq#18787. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* A nicer opening animation for the Image View ([\#6454](matrix-org/matrix-react-sdk#6454)). Fixes element-hq#18186 and element-hq#18186. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* [Release] Fix space hierarchy pagination ([\element-hq#6910](matrix-org/matrix-react-sdk#6910)).
* Fix leaving space via other client leaving you in undefined-land ([\element-hq#6891](matrix-org/matrix-react-sdk#6891)). Fixes element-hq#18455 and element-hq#18455.
* Handle newer voice message encrypted event format for chat export ([\element-hq#6893](matrix-org/matrix-react-sdk#6893)). Contributed by [jaiwanth-v](https://github.com/jaiwanth-v).
* Fix pagination when filtering space hierarchy ([\element-hq#6876](matrix-org/matrix-react-sdk#6876)). Fixes element-hq#19235 and element-hq#19235.
* Fix spaces null-guard breaking the dispatcher settings watching ([\element-hq#6886](matrix-org/matrix-react-sdk#6886)). Fixes element-hq#19223 and element-hq#19223.
* Fix space children without specific `order` being sorted after those with one ([\element-hq#6878](matrix-org/matrix-react-sdk#6878)). Fixes element-hq#19192 and element-hq#19192.
* Ensure that sub-spaces aren't considered for notification badges ([\element-hq#6881](matrix-org/matrix-react-sdk#6881)). Fixes element-hq#18975 and element-hq#18975.
* Fix timeline autoscroll with non-standard DPI settings. ([\element-hq#6880](matrix-org/matrix-react-sdk#6880)). Fixes element-hq#18984 and element-hq#18984.
* Pluck out JoinRuleSettings styles so they apply in space settings too ([\element-hq#6879](matrix-org/matrix-react-sdk#6879)). Fixes element-hq#19164 and element-hq#19164.
* Null guard around the matrixClient in SpaceStore ([\element-hq#6874](matrix-org/matrix-react-sdk#6874)).
* Fix issue (https ([\element-hq#6871](matrix-org/matrix-react-sdk#6871)). Fixes element-hq#19138 and element-hq#19138. Contributed by [psrpinto](https://github.com/psrpinto).
* Fix pills being cut off in message bubble layout ([\element-hq#6865](matrix-org/matrix-react-sdk#6865)). Fixes element-hq#18627 and element-hq#18627. Contributed by [robintown](https://github.com/robintown).
* Fix space admin check false positive on multiple admins ([\element-hq#6824](matrix-org/matrix-react-sdk#6824)).
* Fix the User View ([\element-hq#6860](matrix-org/matrix-react-sdk#6860)). Fixes element-hq#19158 and element-hq#19158.
* Fix spacing for message composer buttons ([\element-hq#6852](matrix-org/matrix-react-sdk#6852)). Fixes element-hq#18999 and element-hq#18999.
* Always show root event of a thread in room's timeline ([\element-hq#6842](matrix-org/matrix-react-sdk#6842)). Fixes element-hq#19016 and element-hq#19016.
williamkray added a commit to williamkray/element-web that referenced this issue Nov 9, 2021
* Decrease profile button touch target ([\element-hq#6900](matrix-org/matrix-react-sdk#6900)). Contributed by [ColonisationCaptain](https://github.com/ColonisationCaptain).
* Don't let click events propagate out of context menus ([\element-hq#6892](matrix-org/matrix-react-sdk#6892)).
* Allow closing Dropdown via its chevron ([\element-hq#6885](matrix-org/matrix-react-sdk#6885)). Fixes element-hq#19030 and element-hq#19030.
* Improve AUX panel behaviour ([\element-hq#6699](matrix-org/matrix-react-sdk#6699)). Fixes element-hq#18787 and element-hq#18787. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* A nicer opening animation for the Image View ([\#6454](matrix-org/matrix-react-sdk#6454)). Fixes element-hq#18186 and element-hq#18186. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* [Release] Fix space hierarchy pagination ([\element-hq#6910](matrix-org/matrix-react-sdk#6910)).
* Fix leaving space via other client leaving you in undefined-land ([\element-hq#6891](matrix-org/matrix-react-sdk#6891)). Fixes element-hq#18455 and element-hq#18455.
* Handle newer voice message encrypted event format for chat export ([\element-hq#6893](matrix-org/matrix-react-sdk#6893)). Contributed by [jaiwanth-v](https://github.com/jaiwanth-v).
* Fix pagination when filtering space hierarchy ([\element-hq#6876](matrix-org/matrix-react-sdk#6876)). Fixes element-hq#19235 and element-hq#19235.
* Fix spaces null-guard breaking the dispatcher settings watching ([\element-hq#6886](matrix-org/matrix-react-sdk#6886)). Fixes element-hq#19223 and element-hq#19223.
* Fix space children without specific `order` being sorted after those with one ([\element-hq#6878](matrix-org/matrix-react-sdk#6878)). Fixes element-hq#19192 and element-hq#19192.
* Ensure that sub-spaces aren't considered for notification badges ([\element-hq#6881](matrix-org/matrix-react-sdk#6881)). Fixes element-hq#18975 and element-hq#18975.
* Fix timeline autoscroll with non-standard DPI settings. ([\element-hq#6880](matrix-org/matrix-react-sdk#6880)). Fixes element-hq#18984 and element-hq#18984.
* Pluck out JoinRuleSettings styles so they apply in space settings too ([\element-hq#6879](matrix-org/matrix-react-sdk#6879)). Fixes element-hq#19164 and element-hq#19164.
* Null guard around the matrixClient in SpaceStore ([\element-hq#6874](matrix-org/matrix-react-sdk#6874)).
* Fix issue (https ([\element-hq#6871](matrix-org/matrix-react-sdk#6871)). Fixes element-hq#19138 and element-hq#19138. Contributed by [psrpinto](https://github.com/psrpinto).
* Fix pills being cut off in message bubble layout ([\element-hq#6865](matrix-org/matrix-react-sdk#6865)). Fixes element-hq#18627 and element-hq#18627. Contributed by [robintown](https://github.com/robintown).
* Fix space admin check false positive on multiple admins ([\element-hq#6824](matrix-org/matrix-react-sdk#6824)).
* Fix the User View ([\element-hq#6860](matrix-org/matrix-react-sdk#6860)). Fixes element-hq#19158 and element-hq#19158.
* Fix spacing for message composer buttons ([\element-hq#6852](matrix-org/matrix-react-sdk#6852)). Fixes element-hq#18999 and element-hq#18999.
* Always show root event of a thread in room's timeline ([\element-hq#6842](matrix-org/matrix-react-sdk#6842)). Fixes element-hq#19016 and element-hq#19016.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants