feat(backdrop): add backdrop support #105
Conversation
heyhippari
force-pushed
the
feat/backdrops
branch
2 times, most recently
from
960a340
to
1dbb2f2
Compare
|
I'm actually going to rework this a bit to use Blurhash as backdrops instead, so putting it back into draft. |
|
Another thing you could do is still use the picture. But have a customizable blur amount in the settings |
|
The issue is that blurs are really expensive, especially on images that big. Not all devices we'll run on are super fast (Smart TVs are one we have already confirmed can't handle the blur filter, over on jf-web, but cheap 100$ Android phones and cheap laptops come to mind as well). It's sort of nice to have for customization, but imo the performance hit isn't really worth it and a blurred image provides much better visual separation, making it easier to read text and such. |
heyhippari
force-pushed
the
feat/backdrops
branch
3 times, most recently
from
612f9c2
to
3803e9c
Compare
A component has been added to the default layout, which displays a blurhash from a Vuex store. The Vuex store can either set or clear backdrops. To set a backdrop, you must pass a BaseItemDto[] in order to retrieve the relevant images.
heyhippari
force-pushed
the
feat/backdrops
branch
from
3803e9c
to
09b9498
Compare
|
This is ready for reviews again @camc314. I reworked the store to use actions instead of a plugin (going to make the same changes to the other stores in an upcoming PR), since that's how it's supposed to be done. It also uses blurhashes now, since that looks much cleaner. |
|
Kudos, SonarCloud Quality Gate passed!
|
I changed a bit how the overlay color works (It didn't react to the light theme before). There is now a "background" property on the Vuetify themes. Vuetify will generate a bunch of CSS classes for it automatically. It's now used as the background color for the app and for the overlay. I took the background colors of the current Jellyfin Light and Dark themes for now. |
A component has been added to the default layout, which displays an image from a Vuex store.
The Vuex store can either set or clear backdrops.
To set a backdrop, you must pass a BaseItemDto[] in order to retrieve the relevant images. It is designed to allow a rotation of the array, in order to change which backdrop is displayed.
Note: It's currently only displayed on the item details page. It looks kind of bad, so we might want to redesign the page a bit to make use of the backdrops.