Merge pull request #6574 from thornbill/missing-server-id-x

Fix undefined server id in experimental layout

src/apps/experimental/components/library/GenresSectionContainer.tsx

@@ -5,6 +5,8 @@ import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-ite
 import { ItemSortBy } from '@jellyfin/sdk/lib/generated-client/models/item-sort-by';
 import { SortOrder } from '@jellyfin/sdk/lib/generated-client/models/sort-order';
 import React, { type FC } from 'react';
+
+import { useApi } from 'hooks/useApi';
 import { useGetItems } from 'hooks/useFetchItems';
 import Loading from 'components/loading/LoadingComponent';
 import { appRouter } from 'components/router/appRouter';
@@ -26,6 +28,7 @@ const GenresSectionContainer: FC<GenresSectionContainerProps> = ({
     itemType,
     genre
 }) => {
+    const { __legacyApiClient__ } = useApi();
     const getParametersOptions = () => {
         return {
             sortBy: [ItemSortBy.Random],
@@ -73,7 +76,8 @@ const GenresSectionContainer: FC<GenresSectionContainerProps> = ({
             cardLayout: false,
             shape: collectionType === CollectionType.Music ? CardShape.SquareOverflow : CardShape.PortraitOverflow,
             showParentTitle: collectionType === CollectionType.Music,
-            showYear: collectionType !== CollectionType.Music
+            showYear: collectionType !== CollectionType.Music,
+            serverId: __legacyApiClient__?.serverId()
         }}
     />;
 };

src/apps/experimental/components/library/ItemsView.tsx

@@ -5,6 +5,8 @@ import { ItemSortBy } from '@jellyfin/sdk/lib/generated-client/models/item-sort-
 import React, { type FC, useCallback } from 'react';
 import Box from '@mui/material/Box';
 import classNames from 'classnames';
+
+import { useApi } from 'hooks/useApi';
 import { useLocalStorage } from 'hooks/useLocalStorage';
 import { useGetItemsViewByType } from 'hooks/useFetchItems';
 import { getDefaultLibraryViewSettings, getSettingsKey } from 'utils/items';
@@ -69,6 +71,7 @@ const ItemsView: FC<ItemsViewProps> = ({
             getDefaultLibraryViewSettings(viewType)
         );
 
+    const { __legacyApiClient__ } = useApi();
     const {
         isLoading,
         data: itemsResult,
@@ -138,7 +141,8 @@ const ItemsView: FC<ItemsViewProps> = ({
             preferLogo: preferLogo,
             overlayText: !libraryViewSettings.ShowTitle,
             imageType: libraryViewSettings.ImageType,
-            queryKey: ['ItemsViewByType']
+            queryKey: ['ItemsViewByType'],
+            serverId: __legacyApiClient__?.serverId()
         };
 
         if (

src/apps/experimental/components/library/ProgramsSectionView.tsx

@@ -1,4 +1,5 @@
 import React, { type FC } from 'react';
+import { useApi } from 'hooks/useApi';
 import { useGetProgramsSectionsWithItems, useGetTimers } from 'hooks/useFetchItems';
 import { appRouter } from 'components/router/appRouter';
 import globalize from 'lib/globalize';
@@ -20,6 +21,7 @@ const ProgramsSectionView: FC<ProgramsSectionViewProps> = ({
     sectionType,
     isUpcomingRecordingsEnabled = false
 }) => {
+    const { __legacyApiClient__ } = useApi();
     const { isLoading, data: sectionsWithItems, refetch } = useGetProgramsSectionsWithItems(parentId, sectionType);
     const {
         isLoading: isUpcomingRecordingsLoading,
@@ -63,7 +65,8 @@ const ProgramsSectionView: FC<ProgramsSectionViewProps> = ({
                     items={items}
                     cardOptions={{
                         ...section.cardOptions,
-                        queryKey: ['ProgramSectionWithItems']
+                        queryKey: ['ProgramSectionWithItems'],
+                        serverId: __legacyApiClient__?.serverId()
                     }}
                 />
             ))}
@@ -95,7 +98,8 @@ const ProgramsSectionView: FC<ProgramsSectionViewProps> = ({
                         coverImage: true,
                         allowBottomPadding: false,
                         overlayText: false,
-                        showChannelLogo: true
+                        showChannelLogo: true,
+                        serverId: __legacyApiClient__?.serverId()
                     }}
                 />
             ))}

src/apps/experimental/components/library/SuggestionsSectionView.tsx

@@ -1,6 +1,8 @@
 import type { RecommendationDto } from '@jellyfin/sdk/lib/generated-client/models/recommendation-dto';
 import { RecommendationType } from '@jellyfin/sdk/lib/generated-client/models/recommendation-type';
 import React, { type FC } from 'react';
+
+import { useApi } from 'hooks/useApi';
 import {
     useGetMovieRecommendations,
     useGetSuggestionSectionsWithItems
@@ -26,6 +28,7 @@ const SuggestionsSectionView: FC<SuggestionsSectionViewProps> = ({
     sectionType,
     isMovieRecommendationEnabled = false
 }) => {
+    const { __legacyApiClient__ } = useApi();
     const { isLoading, data: sectionsWithItems } =
         useGetSuggestionSectionsWithItems(parentId, sectionType);
 
@@ -106,7 +109,8 @@ const SuggestionsSectionView: FC<SuggestionsSectionViewProps> = ({
                         showTitle: true,
                         centerText: true,
                         cardLayout: false,
-                        overlayText: false
+                        overlayText: false,
+                        serverId: __legacyApiClient__?.serverId()
                     }}
                 />
             ))}
@@ -130,7 +134,8 @@ const SuggestionsSectionView: FC<SuggestionsSectionViewProps> = ({
                         overlayPlayButton: true,
                         showTitle: true,
                         centerText: true,
-                        cardLayout: false
+                        cardLayout: false,
+                        serverId: __legacyApiClient__?.serverId()
                     }}
                 />
             ))}

src/apps/experimental/components/library/UpcomingView.tsx

@@ -1,4 +1,6 @@
 import React, { type FC } from 'react';
+
+import { useApi } from 'hooks/useApi';
 import { useGetGroupsUpcomingEpisodes } from 'hooks/useFetchItems';
 import Loading from 'components/loading/LoadingComponent';
 import NoItemsMessage from 'components/common/NoItemsMessage';
@@ -8,6 +10,7 @@ import type { LibraryViewProps } from 'types/library';
 
 // eslint-disable-next-line sonarjs/function-return-type
 const UpcomingView: FC<LibraryViewProps> = ({ parentId }) => {
+    const { __legacyApiClient__ } = useApi();
     const { isLoading, data: groupsUpcomingEpisodes } =
         useGetGroupsUpcomingEpisodes(parentId);
 
@@ -36,7 +39,8 @@ const UpcomingView: FC<LibraryViewProps> = ({ parentId }) => {
                 showDetailsMenu: true,
                 missingIndicator: false,
                 cardLayout: false,
-                queryKey: ['GroupsUpcomingEpisodes']
+                queryKey: ['GroupsUpcomingEpisodes'],
+                serverId: __legacyApiClient__?.serverId()
             }}
         />
     ));

src/components/cardbuilder/Card/cardHelper.ts

@@ -82,7 +82,7 @@ export function getTextActionButton(
         };
     }
 
-    const url = appRouter.getRouteUrl(item);
+    const url = appRouter.getRouteUrl(item, { serverId });
 
     const dataAttributes = getDataAttributes(
         {