Transitions between pages with background doesn't look good

[ferferga]

Description of the bug

When transitioning between pages that have a background (i.e item details page), the background is cleared when leaving the page and reappears in the new page.

This leaves an awkward transition where everything should be transitioning smoothly.

Steps to reproduce

1. Go to an item page
2. Select a related item or a person from the cast

Expected behavior

Old background fades out to the new background

Logs

No response

Screenshots

No response

Platform

Windows

Browser

Edge

Jellyfin server version

10.7.7

Additional context

No response

[ThibaultNocchi]

To me, it doesn't look too bad but I can understand how someone would find it weird

[ferferga]

Clone this PR and see what I mean when looking at the nav drawer lol: https://github.com/jellyfin/jellyfin-vue/pull/1677

I think we can fix this by using meta tags and handling all the opacity changing by a middleware. We remove all clearBackdrop from destroyed hooks in pages and leave the middleware to decide (if next route has background, do nothing, if it doesn't, dispatch clearBackdrop).

That would also clean up most of the pages that use backgrounds (as background changing will be a matter of two lines instead of the mapAction and all the boilerplate). Only pages that need to change the background while are mounted will need that.

[ThibaultNocchi]

Ok so I tried, I still don't think it's too problematic. But if you bring a nice fix there's np :)

[ferferga]

@ThibaultNocchi fix in #1690