jellyfin/jellyfin-vue
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-vue.git synced 2025-02-26 08:46:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf&fix: avoid multiple backdrop rerenders, backdrop persistent after login page

Browse Source 
Meta handling was reverted so it happens
again at any time, regardless of query or param changes.
The extra logic is negligible and we avoid edge cases where the path might be the same (like the first navigation)

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
This commit is contained in:
Fernando Fernández 2024-04-02 02:52:21 +02:00
parent 9f7dd5b9f1
commit c25f047388
No known key found for this signature in database
GPG Key ID: 82FD36644F1F4D3B
5 changed files with 13 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/Layout/Backdrop.vue
View File

@ -18,8 +18,8 @@ import { computed } from 'vue';
import { useRoute } from 'vue-router/auto';
const route = useRoute();
const blurhash = computed(() => route.meta.backdrop?.blurhash);
const opacity = computed(() => route.meta.backdrop?.opacity || 0.25);
const blurhash = computed(() => route.meta.backdrop.blurhash);
const opacity = computed(() => route.meta.backdrop.opacity);
</script>
<style lang="scss" scoped>

2
frontend/src/components/Layout/Carousel/Carousel.vue
View File

@ -21,7 +21,7 @@
keyboard
a11y
@swiper="(swiper) => swiperInstance = swiper"
@slide-change="onSlideChange"
@real-index-change="onSlideChange"
@touch-start="onTouch"
@touch-end="onTouch">
<slot name="slides" />

2
frontend/src/components/Layout/Carousel/Item/ItemsCarousel.vue
View File

@ -112,7 +112,7 @@ function updateBackdrop(index: number): void {
if (props.pageBackdrop) {
const hash = getBlurhash(props.items[index], ImageType.Backdrop);
route.meta.backdrop = { blurhash: hash };
route.meta.backdrop.blurhash = hash;
}
}

20
frontend/src/plugins/router/middlewares/meta.ts
View File

@ -11,6 +11,7 @@ const defaultMeta: RouteMeta = {
transparentLayout: false,
admin: false,
backdrop: {
blurhash: undefined,
opacity: 0.25
}
};
@ -43,19 +44,14 @@ export function metaGuard(
to: RouteLocationNormalized,
from: RouteLocationNormalized
): boolean | RouteLocationRaw {
/**
* Skip if it's in the same page (i.e for param or query changes)
*/
if (from.path !== to.path) {
reactiveMeta.value = defu(to.meta, structuredClone(defaultMeta));
to.meta = reactiveMeta.value;
reactiveMeta.value = defu(to.meta, structuredClone(defaultMeta));
to.meta = reactiveMeta.value;
if (from.meta.transition?.leave) {
if (to.meta.transition) {
to.meta.transition.enter = from.meta.transition.leave;
} else {
to.meta.transition = { enter: from.meta.transition.leave };
}
if (from.meta.transition?.leave) {
if (to.meta.transition) {
to.meta.transition.enter = from.meta.transition.leave;
} else {
to.meta.transition = { enter: from.meta.transition.leave };
}
}

2
frontend/types/global/plugins.d.ts vendored
View File

@ -19,7 +19,7 @@ declare module 'vue-router' {
transition?: RouteTransition;
readonly admin: boolean;
title?: string | null;
backdrop: BackdropPayload;
readonly backdrop: BackdropPayload;
}
}