From 8138c76a87dbec5381bf7d46c21b2c191cae303a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga@hotmail.com>
Date: Sun, 29 Dec 2024 12:36:10 +0100
Subject: [PATCH] refactor: use parallel fetching when possible
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
---
 frontend/src/components/Item/SeasonTabs.vue   | 56 ++----------
 .../components/Layout/Artist/ArtistTab.vue    |  5 +-
 .../src/components/Playback/TrackList.vue     | 20 ++---
 frontend/src/pages/artist/[itemId].vue        | 88 ++++++++++++-------
 frontend/src/pages/genre/[itemId].vue         | 27 +++---
 frontend/src/pages/item/[itemId].vue          | 27 +++---
 frontend/src/pages/musicalbum/[itemId].vue    | 26 ++++--
 frontend/src/pages/person/[itemId].vue        | 83 +++++++++--------
 frontend/src/pages/search.vue                 | 43 ++++-----
 frontend/src/pages/series/[itemId].vue        | 41 +++++++--
 10 files changed, 221 insertions(+), 195 deletions(-)

diff --git a/frontend/src/components/Item/SeasonTabs.vue b/frontend/src/components/Item/SeasonTabs.vue
index fe7bcac543a..edc6563beff 100644
--- a/frontend/src/components/Item/SeasonTabs.vue
+++ b/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,14 +55,11 @@
 </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
    */
@@ -70,50 +67,9 @@ interface TvShowItem {
   /**
    * 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>
diff --git a/frontend/src/components/Layout/Artist/ArtistTab.vue b/frontend/src/components/Layout/Artist/ArtistTab.vue
index 2346499c90d..16c6c9cae89 100644
--- a/frontend/src/components/Layout/Artist/ArtistTab.vue
+++ b/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>
diff --git a/frontend/src/components/Playback/TrackList.vue b/frontend/src/components/Playback/TrackList.vue
index 8966fde624f..a15fea7cd2d 100644
--- a/frontend/src/components/Playback/TrackList.vue
+++ b/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
   });
 }
diff --git a/frontend/src/pages/artist/[itemId].vue b/frontend/src/pages/artist/[itemId].vue
index f4cf542af9e..45419760341 100644
--- a/frontend/src/pages/artist/[itemId].vue
+++ b/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(
diff --git a/frontend/src/pages/genre/[itemId].vue b/frontend/src/pages/genre/[itemId].vue
index 2a212977f7f..3aeefbc3d27 100644
--- a/frontend/src/pages/genre/[itemId].vue
+++ b/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>
diff --git a/frontend/src/pages/item/[itemId].vue b/frontend/src/pages/item/[itemId].vue
index 80ceda5178d..6b534d4eb39 100644
--- a/frontend/src/pages/item/[itemId].vue
+++ b/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>();
diff --git a/frontend/src/pages/musicalbum/[itemId].vue b/frontend/src/pages/musicalbum/[itemId].vue
index 44f8c9def1b..7461370b827 100644
--- a/frontend/src/pages/musicalbum/[itemId].vue
+++ b/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,6 +107,8 @@
 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';
@@ -113,13 +116,20 @@ 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);
diff --git a/frontend/src/pages/person/[itemId].vue b/frontend/src/pages/person/[itemId].vue
index 3d64c8dea9f..4787d037040 100644
--- a/frontend/src/pages/person/[itemId].vue
+++ b/frontend/src/pages/person/[itemId].vue
@@ -174,7 +174,7 @@ import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
 import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
 import { format } from 'date-fns';
-import { computed, ref } from 'vue';
+import { computed, shallowRef } from 'vue';
 import { useRoute } from 'vue-router';
 import { defaultSortOrder as sortBy } from '@/utils/items';
 import { useDateFns } from '@/composables/use-datefns';
@@ -184,43 +184,52 @@ import { useItemPageTitle } from '@/composables/page-title';
 
 const route = useRoute('/person/[itemId]');
 
-const activeTab = ref(4);
+const activeTab = shallowRef(4);
 
-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: movies } = await useBaseItem(getItemsApi, 'getItems')(() => ({
-  personIds: [route.params.itemId],
-  sortBy,
-  sortOrder: [SortOrder.Descending],
-  recursive: true,
-  includeItemTypes: [BaseItemKind.Movie]
-}));
-const { data: series } = await useBaseItem(getItemsApi, 'getItems')(() => ({
-  personIds: [route.params.itemId],
-  sortBy,
-  sortOrder: [SortOrder.Descending],
-  recursive: true,
-  includeItemTypes: [BaseItemKind.Series]
-}));
-const { data: books } = await useBaseItem(getItemsApi, 'getItems')(() => ({
-  personIds: [route.params.itemId],
-  sortBy,
-  sortOrder: [SortOrder.Descending],
-  recursive: true,
-  includeItemTypes: [BaseItemKind.Book]
-}));
-const { data: photos } = await useBaseItem(getItemsApi, 'getItems')(() => ({
-  personIds: [route.params.itemId],
-  sortBy,
-  sortOrder: [SortOrder.Descending],
-  recursive: true,
-  includeItemTypes: [BaseItemKind.Photo]
-}));
+const [
+  { data: item },
+  { data: relatedItems },
+  { data: movies },
+  { data: series },
+  { data: books },
+  { data: photos }
+] = await Promise.all([
+  useBaseItem(getUserLibraryApi, 'getItem')(() => ({
+    itemId: route.params.itemId
+  })),
+  useBaseItem(getLibraryApi, 'getSimilarItems')(() => ({
+    itemId: route.params.itemId,
+    limit: 5
+  })),
+  useBaseItem(getItemsApi, 'getItems')(() => ({
+    personIds: [route.params.itemId],
+    sortBy,
+    sortOrder: [SortOrder.Descending],
+    recursive: true,
+    includeItemTypes: [BaseItemKind.Movie]
+  })),
+  useBaseItem(getItemsApi, 'getItems')(() => ({
+    personIds: [route.params.itemId],
+    sortBy,
+    sortOrder: [SortOrder.Descending],
+    recursive: true,
+    includeItemTypes: [BaseItemKind.Series]
+  })),
+  useBaseItem(getItemsApi, 'getItems')(() => ({
+    personIds: [route.params.itemId],
+    sortBy,
+    sortOrder: [SortOrder.Descending],
+    recursive: true,
+    includeItemTypes: [BaseItemKind.Book]
+  })),
+  useBaseItem(getItemsApi, 'getItems')(() => ({
+    personIds: [route.params.itemId],
+    sortBy,
+    sortOrder: [SortOrder.Descending],
+    recursive: true,
+    includeItemTypes: [BaseItemKind.Photo]
+  }))
+]);
 
 const birthDate = computed(() =>
   item.value.PremiereDate
diff --git a/frontend/src/pages/search.vue b/frontend/src/pages/search.vue
index 2403cae01f9..f8cc7ea6fe8 100644
--- a/frontend/src/pages/search.vue
+++ b/frontend/src/pages/search.vue
@@ -96,27 +96,28 @@ const searchQuery = computed(() => route.query.q?.toString() ?? '');
 const searchDebounced = refDebounced(searchQuery, 400);
 const itemSearchMethod = computed(() => searchDebounced.value ? 'getItems' : undefined);
 const peopleSearchMethod = computed(() => searchDebounced.value ? 'getPersons' : undefined);
-const { loading: itemLoading, data: itemSearch } = await useBaseItem(getItemsApi, itemSearchMethod, {
-  skipCache: { request: true }
-})(() => ({
-  searchTerm: searchDebounced.value,
-  includeItemTypes: [
-    BaseItemKind.Movie,
-    BaseItemKind.Series,
-    BaseItemKind.Audio,
-    BaseItemKind.MusicAlbum,
-    BaseItemKind.Book,
-    BaseItemKind.MusicArtist,
-    BaseItemKind.Person
-  ],
-  recursive: true
-}));
-
-const { loading: peopleLoading, data: peopleSearch } = await useBaseItem(getPersonsApi, peopleSearchMethod, {
-  skipCache: { request: true }
-})(() => ({
-  searchTerm: searchDebounced.value
-}));
+const [{ loading: itemLoading, data: itemSearch }, { loading: peopleLoading, data: peopleSearch }] = await Promise.all([
+  useBaseItem(getItemsApi, itemSearchMethod, {
+    skipCache: { request: true }
+  })(() => ({
+    searchTerm: searchDebounced.value,
+    includeItemTypes: [
+      BaseItemKind.Movie,
+      BaseItemKind.Series,
+      BaseItemKind.Audio,
+      BaseItemKind.MusicAlbum,
+      BaseItemKind.Book,
+      BaseItemKind.MusicArtist,
+      BaseItemKind.Person
+    ],
+    recursive: true
+  })),
+  useBaseItem(getPersonsApi, peopleSearchMethod, {
+    skipCache: { request: true }
+  })(() => ({
+    searchTerm: searchDebounced.value
+  }))
+]);
 
 const serverSearchIds = computed(() => {
   if (!peopleLoading.value && !itemLoading.value) {
diff --git a/frontend/src/pages/series/[itemId].vue b/frontend/src/pages/series/[itemId].vue
index e3db3880f0c..32a48a4ea9a 100644
--- a/frontend/src/pages/series/[itemId].vue
+++ b/frontend/src/pages/series/[itemId].vue
@@ -156,7 +156,8 @@
         <VCol cols="12">
           <SeasonTabs
             v-if="item.Type === 'Series'"
-            :item="item" />
+            :seasons
+            :season-episodes />
         </VCol>
       </VRow>
     </template>
@@ -182,12 +183,15 @@
 
 <script setup lang="ts">
 import type {
+  BaseItemDto,
   BaseItemPerson
 } from '@jellyfin/sdk/lib/generated-client';
 import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
+import { getTvShowsApi } from '@jellyfin/sdk/lib/utils/api/tv-shows-api';
+import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
 import { getItemDetailsLink } from '@/utils/items';
 import { useBaseItem } from '@/composables/apis';
 import { useItemBackdrop } from '@/composables/backdrop';
@@ -195,13 +199,34 @@ import { useItemPageTitle } from '@/composables/page-title';
 
 const route = useRoute('/series/[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: seasons }] = await Promise.all([
+  useBaseItem(getUserLibraryApi, 'getItem')(() => ({
+    itemId: route.params.itemId
+  })),
+  useBaseItem(getLibraryApi, 'getSimilarItems')(() => ({
+    itemId: route.params.itemId,
+    limit: 5
+  })),
+  useBaseItem(getTvShowsApi, 'getSeasons')(() => ({
+    seriesId: route.params.itemId
+  }))
+]);
+
+const seasonsData = await Promise.all(seasons.value.map(s =>
+  useBaseItem(getItemsApi, 'getItems')(() => ({
+    parentId: s.Id
+  }))
+));
+
+const seasonEpisodes = computed(() => {
+  const map = new Map<BaseItemDto['Id'], BaseItemDto[]>();
+
+  for (const [index, season] of seasons.value.entries()) {
+    map.set(season.Id, seasonsData[index]!.data.value);
+  }
+
+  return map;
+});
 
 const crew = computed<BaseItemPerson[]>(() =>
   (item.value.People ?? []).filter(person =>