Feat / screen animations

[ChristiaanScheermeijer]

Description

This PR makes the transitions to screens (home, playlist and media) more smooth by adding a fade transition.

To prevent layout jumps while navigating the app, I also set the body overflow-y to scroll to make the viewport width stable.

The shelf list on the homepage uses a staggered animation (each shelf fades in with a small delay).

Edit I noticed that the screen fade in animation didn't work every time. After some debugging, I found this is caused by a browser optimisation causing it to batch the paint. By manually triggering a reflow, the animation does work every time. There are alternatives like the Web Animation API, but this isn't supported on older devices (TV platforms).

screen-fade2.mov

Let me know what you think! 😄

[github-actions]

Visit the preview URL for this PR (updated for commit 7d594e5):

https://ottwebapp--pr614-feat-screen-animatio-708kr0dn.web.app

_{(expires Sat, 19 Oct 2024 13:43:19 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c198f8a3a199ba8747819f7f1e45cf602b777529}

[langemike]

Nice! Good choice to use <Fade> for this purpose!

Somewhere in the future it would be nice to use the View Transition API to make a cool transition from a shelf to a video detail page. Only supported in modern browsers, though ;) This idea was on my idea proposal list.

[royschut]

Really great subtle improvement.
I have a small doubt about the z-index (+ the comments on #613)

[ChristiaanScheermeijer]

I reverted the media screen fade when the mediaid changes because this causes the player to re-render when loading the next video. Although, this also happens when the media isn't cached, it's more noticeable now.

I believe we can solve this when we move the player to a parent component. This also solves some Airplay issues that we're having. This is a big change, so not for now...