refactor: use parallel fetching when possible (#2547)

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

frontend/src/components/Item/SeasonTabs.vue

@@ -21,7 +21,7 @@
           :lines="false"
           bg-color="transparent">
           <VListItem
-            v-for="episode in seasonEpisodes[season.Id]"
+            v-for="episode in seasonEpisodes.get(season.Id)"
             :key="episode.Id"
             :to="getItemDetailsLink(episode)">
             <VRow
@@ -55,65 +55,21 @@
 </template>
 
 <script setup lang="ts">
-import { type BaseItemDto, ItemFields } from '@jellyfin/sdk/lib/generated-client';
-import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
-import { getTvShowsApi } from '@jellyfin/sdk/lib/utils/api/tv-shows-api';
-import { ref, shallowRef, watch } from 'vue';
+import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
+import { shallowRef } from 'vue';
 import { getItemDetailsLink } from '@/utils/items';
-import { remote } from '@/plugins/remote';
 
-interface TvShowItem {
+interface Props {
   /**
    * Seasons: Stores an array of all seasons
    */
   seasons: BaseItemDto[];
   /**
    * SeasonEpisodes: Stores an array for each season containing all the season episodes
    */
-  seasonEpisodes: Record<string, BaseItemDto[]>;
+  seasonEpisodes: Map<BaseItemDto['Id'], BaseItemDto[]>;
 }
 
-const { item } = defineProps<{ item: BaseItemDto }>();
+const { seasons, seasonEpisodes } = defineProps<Props>();
 const currentTab = shallowRef(0);
-const seasons = ref<BaseItemDto[] | null | undefined>([]);
-const seasonEpisodes = ref<TvShowItem['seasonEpisodes']>({});
-
-/**
- * Fetch component data
- */
-async function fetch(): Promise<void> {
-  if (!item.Id) {
-    return;
-  }
-
-  seasons.value = (
-    await remote.sdk.newUserApi(getTvShowsApi).getSeasons({
-      userId: remote.auth.currentUserId.value,
-      seriesId: item.Id
-    })
-  ).data.Items;
-
-  if (seasons.value) {
-    for (const season of seasons.value) {
-      if (season.Id) {
-        const episodes = (
-          await remote.sdk.newUserApi(getItemsApi).getItems({
-            userId: remote.auth.currentUserId.value,
-            parentId: season.Id,
-            fields: [ItemFields.Overview, ItemFields.PrimaryImageAspectRatio]
-          })
-        ).data;
-
-        if (episodes.Items) {
-          seasonEpisodes.value[season.Id] = episodes.Items;
-        }
-      }
-    }
-  }
-}
-
-await fetch();
-watch(() => item, async () => {
-  await fetch();
-});
 </script>

frontend/src/components/Layout/Artist/ArtistTab.vue

@@ -34,7 +34,9 @@
           v-if="$vuetify.display.mdAndUp"
           class="my-2">
           <VCol>
-            <TrackList :item="release" />
+            <TrackList
+              :tracks
+              :item="release" />
           </VCol>
         </VRow>
       </div>
@@ -47,6 +49,7 @@ import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { getItemDetailsLink } from '@/utils/items';
 
 const { releases } = defineProps<{
+  tracks: BaseItemDto[];
   releases: BaseItemDto[];
 }>();
 </script>

frontend/src/components/Playback/TrackList.vue

@@ -115,28 +115,20 @@
 </template>
 
 <script setup lang="ts">
-import {
-  SortOrder,
-  type BaseItemDto
+import type {
+  BaseItemDto
 } from '@jellyfin/sdk/lib/generated-client';
-import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
 import { computed } from 'vue';
-import { useBaseItem } from '@/composables/apis';
 import { playbackManager } from '@/store/playback-manager';
 import { getItemDetailsLink } from '@/utils/items';
 import { formatTicks } from '@/utils/time';
 
-const { item } = defineProps<{
+const { item, tracks } = defineProps<{
   item: BaseItemDto;
+  tracks: BaseItemDto[];
 }>();
 
-const { data: tracks } = await useBaseItem(getItemsApi, 'getItems')(() => ({
-  parentId: item.Id,
-  sortBy: ['SortName'],
-  sortOrder: [SortOrder.Ascending]
-}));
-
-const tracksPerDisc = computed(() => Object.groupBy(tracks.value, ({ ParentIndexNumber }) => ParentIndexNumber!));
+const tracksPerDisc = computed(() => Object.groupBy(tracks, ({ ParentIndexNumber }) => ParentIndexNumber!));
 const hasMultipleDiscs = computed(() => {
   let loops = 0;
 
@@ -164,7 +156,7 @@ function isPlaying(track: BaseItemDto): boolean {
 async function playTracks(track: BaseItemDto): Promise<void> {
   await playbackManager.play({
     item: item,
-    startFromIndex: tracks.value.indexOf(track),
+    startFromIndex: tracks.indexOf(track),
     initiator: item
   });
 }

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

@@ -75,16 +75,24 @@
             v-model="activeTab"
             class="bg-transparent">
             <VWindowItem :value="0">
-              <ArtistTab :releases="discography" />
+              <ArtistTab
+                :tracks
+                :releases="discography" />
             </VWindowItem>
             <VWindowItem :value="1">
-              <ArtistTab :releases="albums" />
+              <ArtistTab
+                :tracks
+                :releases="albums" />
             </VWindowItem>
             <VWindowItem :value="2">
-              <ArtistTab :releases="eps" />
+              <ArtistTab
+                :tracks
+                :releases="eps" />
             </VWindowItem>
             <VWindowItem :value="3">
-              <ArtistTab :releases="singles" />
+              <ArtistTab
+                :tracks
+                :releases="singles" />
             </VWindowItem>
             <VWindowItem :value="4">
               <VContainer>
@@ -167,35 +175,49 @@ const route = useRoute('/artist/[itemId]');
 
 const activeTab = ref(0);
 
-const { data: item } = await useBaseItem(getUserLibraryApi, 'getItem')(() => ({
-  itemId: route.params.itemId
-}));
-const { data: relatedItems } = await useBaseItem(getLibraryApi, 'getSimilarItems')(() => ({
-  itemId: route.params.itemId,
-  limit: 5
-}));
-const { data: discography } = await useBaseItem(getItemsApi, 'getItems')(() => ({
-  albumArtistIds: [route.params.itemId],
-  sortBy,
-  sortOrder: [SortOrder.Descending],
-  recursive: true,
-  includeItemTypes: [BaseItemKind.MusicAlbum]
-}));
-const { data: appearances } = await useBaseItem(getItemsApi, 'getItems')(() => ({
-  contributingArtistIds: [route.params.itemId],
-  excludeItemIds: [route.params.itemId],
-  sortBy,
-  sortOrder: [SortOrder.Descending],
-  recursive: true,
-  includeItemTypes: [BaseItemKind.MusicAlbum]
-}));
-const { data: musicVideos } = await useBaseItem(getItemsApi, 'getItems')(() => ({
-  artistIds: [route.params.itemId],
-  sortBy,
-  sortOrder: [SortOrder.Descending],
-  recursive: true,
-  includeItemTypes: [BaseItemKind.MusicVideo]
-}));
+const [
+  { data: item },
+  { data: relatedItems },
+  { data: discography },
+  { data: appearances },
+  { data: musicVideos },
+  { data: tracks }
+] = await Promise.all([
+  useBaseItem(getUserLibraryApi, 'getItem')(() => ({
+    itemId: route.params.itemId
+  })),
+  useBaseItem(getLibraryApi, 'getSimilarItems')(() => ({
+    itemId: route.params.itemId,
+    limit: 5
+  })),
+  useBaseItem(getItemsApi, 'getItems')(() => ({
+    albumArtistIds: [route.params.itemId],
+    sortBy,
+    sortOrder: [SortOrder.Descending],
+    recursive: true,
+    includeItemTypes: [BaseItemKind.MusicAlbum]
+  })),
+  useBaseItem(getItemsApi, 'getItems')(() => ({
+    contributingArtistIds: [route.params.itemId],
+    excludeItemIds: [route.params.itemId],
+    sortBy,
+    sortOrder: [SortOrder.Descending],
+    recursive: true,
+    includeItemTypes: [BaseItemKind.MusicAlbum]
+  })),
+  useBaseItem(getItemsApi, 'getItems')(() => ({
+    artistIds: [route.params.itemId],
+    sortBy,
+    sortOrder: [SortOrder.Descending],
+    recursive: true,
+    includeItemTypes: [BaseItemKind.MusicVideo]
+  })),
+  useBaseItem(getItemsApi, 'getItems')(() => ({
+    parentId: route.params.itemId,
+    sortBy: ['SortName'],
+    sortOrder: [SortOrder.Ascending]
+  }))
+]);
 
 const singles = computed<BaseItemDto[]>(() =>
   discography.value.filter(

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

@@ -65,24 +65,25 @@ const route = useRoute('/genre/[itemId]');
 const { itemId } = route.params;
 
 const includeItemTypes = computed<BaseItemKind[]>(() => {
-  const typesQuery = route.query.type ?? [] as BaseItemKind;
+  const typesQuery = (route.query.type ?? []) as BaseItemKind[];
 
   return isStr(typesQuery)
-    ? [typesQuery]
+    ? [typesQuery] as BaseItemKind[]
     : typesQuery;
 });
 
-const { data: genre } = await useBaseItem(getUserLibraryApi, 'getItem')(() => ({
-  itemId
-}));
-
-const { data: genres } = await useBaseItem(getItemsApi, 'getItems')(() => ({
-  genreIds: [itemId],
-  includeItemTypes: includeItemTypes.value,
-  recursive: true,
-  sortBy: ['SortName'],
-  sortOrder: [SortOrder.Ascending]
-}));
+const [{ data: genre }, { data: genres }] = await Promise.all([
+  useBaseItem(getUserLibraryApi, 'getItem')(() => ({
+    itemId
+  })),
+  useBaseItem(getItemsApi, 'getItems')(() => ({
+    genreIds: [itemId],
+    includeItemTypes: includeItemTypes.value,
+    recursive: true,
+    sortBy: ['SortName'],
+    sortOrder: [SortOrder.Ascending]
+  }))
+]);
 
 useItemPageTitle(genre);
 </script>

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

@@ -314,19 +314,26 @@ import { useItemPageTitle } from '@/composables/page-title';
 
 const route = useRoute('/genre/[itemId]');
 
-const { data: item } = await useBaseItem(getUserLibraryApi, 'getItem')(() => ({
-  itemId: route.params.itemId
-}));
-const { data: relatedItems } = await useBaseItem(getLibraryApi, 'getSimilarItems')(() => ({
-  itemId: route.params.itemId,
-  limit: 12
-}));
+const [
+  { data: item },
+  { data: relatedItems },
+  { data: childItems }
+] = await Promise.all([
+  useBaseItem(getUserLibraryApi, 'getItem')(() => ({
+    itemId: route.params.itemId
+  })),
+  useBaseItem(getLibraryApi, 'getSimilarItems')(() => ({
+    itemId: route.params.itemId,
+    limit: 12
+  })),
+  useBaseItem(getItemsApi, 'getItems')(() => ({
+    parentId: route.params.itemId
+  }))
+]);
+
 const { data: currentSeries } = await useBaseItem(getUserLibraryApi, 'getItem')(() => ({
   itemId: item.value.SeriesId ?? ''
 }));
-const { data: childItems } = await useBaseItem(getItemsApi, 'getItems')(() => ({
-  parentId: item.value.Id
-}));
 
 const selectedSource = ref<MediaSourceInfo>();
 const currentVideoTrack = ref<number>();

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

@@ -90,7 +90,8 @@
         <VCol cols="12">
           <TrackList
             v-if="item.Type === 'MusicAlbum'"
-            :item="item" />
+            :item="item"
+            :tracks />
         </VCol>
       </VRow>
     </template>
@@ -106,20 +107,29 @@
 import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
 import { useRoute } from 'vue-router';
+import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
+import { SortOrder } from '@jellyfin/sdk/lib/generated-client';
 import { getItemDetailsLink } from '@/utils/items';
 import { useBaseItem } from '@/composables/apis';
 import { useItemBackdrop } from '@/composables/backdrop';
 import { useItemPageTitle } from '@/composables/page-title';
 
 const route = useRoute('/musicalbum/[itemId]');
 
-const { data: item } = await useBaseItem(getUserLibraryApi, 'getItem')(() => ({
-  itemId: route.params.itemId
-}));
-const { data: relatedItems } = await useBaseItem(getLibraryApi, 'getSimilarItems')(() => ({
-  itemId: route.params.itemId,
-  limit: 5
-}));
+const [{ data: item }, { data: relatedItems }, { data: tracks }] = await Promise.all([
+  useBaseItem(getUserLibraryApi, 'getItem')(() => ({
+    itemId: route.params.itemId
+  })),
+  useBaseItem(getLibraryApi, 'getSimilarItems')(() => ({
+    itemId: route.params.itemId,
+    limit: 5
+  })),
+  useBaseItem(getItemsApi, 'getItems')(() => ({
+    parentId: route.params.itemId,
+    sortBy: ['SortName'],
+    sortOrder: [SortOrder.Ascending]
+  }))
+]);
 
 useItemPageTitle(item);
 useItemBackdrop(item);