refactor(meta): put layout-related properties under layout object

Signed-off-by: Fernando Fernández <[email protected]>

frontend/src/App.vue

@@ -4,20 +4,20 @@
     <JApp>
       <RouterView v-slot="{ Component, route }">
         <JTransition
-          :name="route.meta.transition?.enter ?? defaultTransition"
-          :mode="defaultTransitionMode"
+          :name="route.meta.layout.transition.enter ?? defaultTransition"
+          :mode="defaultTransitionMode ?? route.meta.layout.transition.mode"
           :disabled="!mounted"
           appear>
           <Suspense @resolve="apploaded = true">
             <div
-              :key="route.meta.layout"
+              :key="route.meta.layout.name ?? 'default'"
               class="uno-h-full j-transition">
               <component
-                :is="getLayoutComponent(route.meta.layout)"
-                :key="route.meta.layout">
+                :is="getLayoutComponent(route.meta.layout.name)"
+                :key="route.meta.layout.name ?? 'default'">
                 <JTransition
-                  :name="route.meta.transition?.enter ?? defaultTransition"
-                  :mode="defaultTransitionMode">
+                  :name="route.meta.layout.transition.enter ?? defaultTransition"
+                  :mode="defaultTransitionMode ?? route.meta.layout.transition.mode">
                   <Suspense suspensible>
                     <div
                       :key="route.name ?? route.path"
@@ -73,7 +73,7 @@ onMounted(() => {
 /**
  * Return the appropiate layout component according to the route's meta.layout property
  */
-function getLayoutComponent(layout: RouteMeta['layout']): VueComponent {
+function getLayoutComponent(layout: RouteMeta['layout']['name']): VueComponent {
   switch (layout) {
     case 'fullpage': {
       return FullPageLayout as VueComponent;

frontend/src/components/Layout/AppBar/AppBar.vue

@@ -67,7 +67,7 @@ import { remote } from '@/plugins/remote';
 
 const route = useRoute();
 const { y } = windowScroll;
-const transparentAppBar = computed(() => Boolean(route.meta.transparentLayout) && y.value < 10);
+const transparentAppBar = computed(() => route.meta.layout.transparent && y.value < 10);
 
 /**
  * Cycle between the different color schemas

frontend/src/components/Layout/Backdrop.vue

@@ -1,11 +1,11 @@
 <template>
   <JTransition>
     <div
-      v-if="route.meta.backdrop.blurhash"
-      :key="`backdrop-${route.meta.backdrop.blurhash}`"
+      v-if="blurhash"
+      :key="`backdrop-${blurhash}`"
       class="backdrop sizing">
       <BlurhashCanvas
-        :hash="route.meta.backdrop.blurhash"
+        :hash="blurhash"
         :width="32"
         :height="32"
         class="sizing" />
@@ -18,7 +18,8 @@ import { computed } from 'vue';
 import { useRoute } from 'vue-router/auto';
 
 const route = useRoute();
-const opacity = computed(() => route.meta.backdrop.opacity);
+const opacity = computed(() => route.meta.layout.backdrop.opacity ?? 0.25);
+const blurhash = computed(() => route.meta.layout.backdrop.blurhash);
 </script>
 
 <style scoped>

frontend/src/components/Layout/Carousel/Item/ItemsCarousel.vue

@@ -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.layout.backdrop.blurhash = hash;
   }
 }
 

frontend/src/components/Layout/Navigation/NavigationDrawer.vue

@@ -59,7 +59,7 @@ const route = useRoute();
 const { t } = useI18n();
 
 const drawer = inject<Ref<boolean>>('NavigationDrawer');
-const transparentLayout = computed(() => Boolean(route.meta.transparentLayout));
+const transparentLayout = computed(() => route.meta.layout.transparent);
 
 const items = [
   {

frontend/src/pages/artist/[itemId].vue

@@ -222,7 +222,7 @@ const albums = computed(() =>
 );
 
 route.meta.title = item.value.Name;
-route.meta.backdrop.blurhash = getBlurhash(item.value, ImageType.Backdrop);
+route.meta.layout.backdrop.blurhash = getBlurhash(item.value, ImageType.Backdrop);
 
 /**
  * Set the most appropiate starting tag

frontend/src/pages/index.vue

@@ -32,7 +32,8 @@ const excludeViewTypes = new Set([
 
 <route lang="yaml">
 meta:
-  transparentLayout: true
+  layout: 
+    transparent: true
 </route>
 
 <script setup lang="ts">

frontend/src/pages/item/[itemId].vue

@@ -371,5 +371,5 @@ const currentSource = computed({
 });
 
 route.meta.title = item.value.Name;
-route.meta.backdrop.blurhash = getBlurhash(item.value, ImageType.Backdrop);
+route.meta.layout.backdrop.blurhash = getBlurhash(item.value, ImageType.Backdrop);
 </script>

frontend/src/pages/musicalbum/[itemId].vue

@@ -122,5 +122,5 @@ const { data: relatedItems } = await useBaseItem(getLibraryApi, 'getSimilarItems
 }));
 
 route.meta.title = item.value.Name;
-route.meta.backdrop.blurhash = getBlurhash(item.value, ImageType.Backdrop);
+route.meta.layout.backdrop.blurhash = getBlurhash(item.value, ImageType.Backdrop);
 </script>

frontend/src/pages/person/[itemId].vue

@@ -237,7 +237,7 @@ const birthPlace = computed(
 );
 
 route.meta.title = item.value.Name;
-route.meta.backdrop.blurhash = getBlurhash(item.value, ImageType.Backdrop);
+route.meta.layout.backdrop.blurhash = getBlurhash(item.value, ImageType.Backdrop);
 
 /**
  * Pick the most relevant tab to display at mount

frontend/src/pages/playback/music.vue

@@ -88,12 +88,13 @@
 
 <route lang="yaml">
 meta:
-  layout: fullpage
-  backdrop:
-    opacity: 0.75
-  transition:
-    enter: 'scroll-y-reverse-transition'
-    leave: 'scroll-y-transition'
+  layout:
+    name: fullpage
+    backdrop:
+      opacity: 0.75
+    transition:
+      enter: 'slide-y-reverse'
+      leave: 'slide-y'
 </route>
 
 <script setup lang="ts">
@@ -150,7 +151,7 @@ watchEffect(() => {
   }
 
   if (backdropHash.value) {
-    route.meta.backdrop.blurhash = backdropHash.value;
+    route.meta.layout.backdrop.blurhash = backdropHash.value;
   }
 }
 );

frontend/src/pages/playback/video.vue

@@ -121,10 +121,11 @@
 
 <route lang="yaml">
 meta:
-  layout: fullpage
-  transition:
-    enter: 'scroll-y-reverse-transition'
-    leave: 'scroll-y-transition'
+  layout: 
+    name: fullpage
+    transition:
+      enter: 'slide-y-reverse'
+      leave: 'slide-y'
 </route>
 
 <script setup lang="ts">

frontend/src/pages/series/[itemId].vue

@@ -222,5 +222,5 @@ const writers = computed(() =>
 );
 
 route.meta.title = item.value.Name;
-route.meta.backdrop.blurhash = getBlurhash(item.value, ImageType.Backdrop);
+route.meta.layout.backdrop.blurhash = getBlurhash(item.value, ImageType.Backdrop);
 </script>

frontend/src/pages/server/add.vue

@@ -18,7 +18,8 @@
 
 <route lang="yaml">
 meta:
-  layout: server
+  layout:
+    name: server
 </route>
 
 <script setup lang="ts">

frontend/src/pages/server/login.vue

@@ -90,7 +90,8 @@
 
 <route lang="yaml">
 meta:
-  layout: server
+  layout:
+    name: server
 </route>
 
 <script setup lang="ts">

frontend/src/pages/server/select.vue

@@ -33,7 +33,8 @@
 
 <route lang="yaml">
 meta:
-  layout: server
+  layout:
+    name: server
 </route>
 
 <script setup lang="ts">

frontend/src/pages/wizard.vue

@@ -83,7 +83,8 @@
 
 <route lang="yaml">
 meta:
-  layout: server
+  layout: 
+    name: server
 </route>
 
 <script setup lang="ts">

frontend/src/plugins/router/index.ts

@@ -53,14 +53,10 @@ router.back = (): ReturnType<typeof router.back> => {
    * Play the default page transition but reversed, to play a different effect when going
    * to the previous page.
    */
-  if (!route.value.meta.transition) {
-    route.value.meta.transition = {
-      enter: 'slide-x-reverse',
-      leave: backTransition
-    };
-  } else if (!route.value.meta.transition.leave) {
-    route.value.meta.transition.leave = backTransition;
-  }
+  route.value.meta.layout.transition = {
+    enter: 'slide-x-reverse',
+    leave: route.value.meta.layout.transition.leave ?? backTransition
+  };
 
   void router.replace(
     isStr(router.options.history.state.back)

frontend/src/plugins/router/middlewares/meta.ts

@@ -7,13 +7,10 @@ import type {
 } from 'vue-router/auto';
 
 const defaultMeta: RouteMeta = {
-  layout: 'default',
-  transparentLayout: false,
-  admin: false,
-  backdrop: {
-    blurhash: undefined,
-    opacity: 0.25
-  }
+  layout: {
+    backdrop: {},
+    transition: {}
+  } 
 };
 
 const reactiveMeta = ref(structuredClone(defaultMeta));
@@ -26,7 +23,8 @@ const reactiveMeta = ref(structuredClone(defaultMeta));
  *
  * <route lang="yaml">
  *  meta:
- *    layout: server
+ *    layout:
+ *      name: server
  * </route>
  *
  * That block is also needed when a property needs to be resolved before
@@ -47,12 +45,11 @@ export function metaGuard(
   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 };
-    }
+  /**
+   * It's important to have these nullish coalescing operators for the first navigation
+   */
+  if (from.meta.layout?.transition?.leave) {
+    to.meta.layout.transition.enter = from.meta.layout.transition.leave;
   }
 
   return true;

frontend/types/global/plugins.d.ts

@@ -9,18 +9,23 @@ interface BackdropPayload {
   blurhash?: string;
   opacity?: number;
 }
-interface RouteTransition {
-  enter: NonNullable<JTransitionProps['name']>;
+interface RouteTransitionPayload {
+  enter?: NonNullable<JTransitionProps['name']>;
   leave?: JTransitionProps['name'];
+  mode?: JTransitionProps['mode'];
+}
+
+interface LayoutPayload {
+  readonly name?: 'default' | 'fullpage' | 'server';
+  transparent?: boolean;
+  backdrop: BackdropPayload;
+  transition: RouteTransitionPayload;
 }
 declare module 'vue-router' {
   interface RouteMeta {
-    readonly layout: 'default' | 'fullpage' | 'server';
-    transparentLayout?: boolean;
-    transition?: RouteTransition;
-    readonly admin: boolean;
+    readonly layout: LayoutPayload;
+    readonly admin?: boolean;
     title?: string | null;
-    readonly backdrop: BackdropPayload;
   }
 }