apply suggestion

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

@@ -18,8 +18,8 @@ const GenresItemsContainer: FC<GenresItemsContainerProps> = ({
     itemType
 }) => {
     const { isLoading, data: genresResult } = useGetGenres(
-        parentId,
-        itemType
+        itemType,
+        parentId
     );
 
     if (isLoading) {
@@ -34,8 +34,7 @@ const GenresItemsContainer: FC<GenresItemsContainerProps> = ({
                     <p>{globalize.translate('MessageNoGenresAvailable')}</p>
                 </div>
             ) : (
-                genresResult?.Items
-                && genresResult?.Items.map((genre) => (
+                genresResult?.Items?.map((genre) => (
                     <GenresSectionContainer
                         key={genre.Id}
                         collectionType={collectionType}

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

@@ -52,7 +52,12 @@ const RecommendationContainer: FC<RecommendationContainerProps> = ({
             items={recommendation.Items || []}
             cardOptions={{
                 shape: 'overflowPortrait',
-                showYear: true
+                showYear: true,
+                scalable: true,
+                overlayPlayButton: true,
+                showTitle: true,
+                centerText: true,
+                cardLayout: false
             }}
         />
     );

src/apps/experimental/routes/movies/SuggestionsView.tsx

@@ -39,7 +39,7 @@ const SuggestionsView: FC<LibraryViewProps> = ({ parentId }) => {
                     return (
                         <RecommendationContainer
                             // eslint-disable-next-line react/no-array-index-key
-                            key={index} // use a unique id return value may have duplicate id
+                            key={`${recommendation.CategoryId}-${index}`} // use a unique id return value may have duplicate id
                             recommendation={recommendation}
                         />
                     );

src/components/common/ViewItemsContainer.tsx

@@ -19,6 +19,7 @@ import cardBuilder from '../cardbuilder/cardBuilder';
 
 import { ViewQuerySettings } from '../../types/interface';
 import { CardOptions } from '../../types/cardOptions';
+
 interface ViewItemsContainerProps {
     topParentId: string | null;
     isBtnShuffleEnabled?: boolean;

src/hooks/useFetchItems.ts

@@ -17,11 +17,9 @@ import { useQuery } from '@tanstack/react-query';
 import { JellyfinApiContext, useApi } from './useApi';
 import { Sections, SectionsViewType } from 'types/suggestionsSections';
 
-type ParentId = string | null | undefined;
-
 const fetchGetItem = async (
     currentApi: JellyfinApiContext,
-    parentId: ParentId,
+    parentId?: string | null,
     options?: AxiosRequestConfig
 ) => {
     const { api, user } = currentApi;
@@ -39,7 +37,7 @@ const fetchGetItem = async (
     }
 };
 
-export const useGetItem = (parentId: ParentId) => {
+export const useGetItem = (parentId?: string | null) => {
     const currentApi = useApi();
     return useQuery({
         queryKey: ['Item', parentId],
@@ -78,13 +76,14 @@ export const useGetItems = (parametersOptions: ItemsApiGetItemsRequest) => {
             }
         ],
         queryFn: ({ signal }) =>
-            fetchGetItems(currentApi, parametersOptions, { signal })
+            fetchGetItems(currentApi, parametersOptions, { signal }),
+        cacheTime: parametersOptions.sortBy?.includes(ItemSortBy.Random) ? 0 : undefined
     });
 };
 
 const fetchGetMovieRecommendations = async (
     currentApi: JellyfinApiContext,
-    parentId: ParentId,
+    parentId?: string | null,
     options?: AxiosRequestConfig
 ) => {
     const { api, user } = currentApi;
@@ -109,7 +108,7 @@ const fetchGetMovieRecommendations = async (
     }
 };
 
-export const useGetMovieRecommendations = (parentId: ParentId) => {
+export const useGetMovieRecommendations = (parentId?: string | null) => {
     const currentApi = useApi();
     return useQuery({
         queryKey: ['MovieRecommendations', parentId],
@@ -122,7 +121,7 @@ export const useGetMovieRecommendations = (parentId: ParentId) => {
 const fetchGetItemsBySuggestionsType = async (
     currentApi: JellyfinApiContext,
     sections: Sections,
-    parentId: ParentId,
+    parentId?: string | null,
     options?: AxiosRequestConfig
 ) => {
     const { api, user } = currentApi;
@@ -235,7 +234,7 @@ const fetchGetItemsBySuggestionsType = async (
 
 export const useGetItemsBySectionType = (
     sections: Sections,
-    parentId: ParentId
+    parentId?: string | null
 ) => {
     const currentApi = useApi();
     return useQuery({
@@ -253,8 +252,8 @@ export const useGetItemsBySectionType = (
 
 const fetchGetGenres = async (
     currentApi: JellyfinApiContext,
-    parentId: ParentId,
     itemType: BaseItemKind,
+    parentId?: string | null,
     options?: AxiosRequestConfig
 ) => {
     const { api, user } = currentApi;
@@ -276,12 +275,12 @@ const fetchGetGenres = async (
     }
 };
 
-export const useGetGenres = (parentId: ParentId, itemType: BaseItemKind) => {
+export const useGetGenres = (itemType: BaseItemKind, parentId?: string | null) => {
     const currentApi = useApi();
     return useQuery({
         queryKey: ['Genres', parentId],
         queryFn: ({ signal }) =>
-            fetchGetGenres(currentApi, parentId, itemType, { signal }),
+            fetchGetGenres(currentApi, itemType, parentId, { signal }),
         enabled: !!parentId
     });
 };

src/types/library.ts

@@ -1,45 +1,3 @@
-import { ItemFields } from '@jellyfin/sdk/lib/generated-client/models/item-fields';
-import { ItemFilter } from '@jellyfin/sdk/lib/generated-client/models/item-filter';
-import { VideoType } from '@jellyfin/sdk/lib/generated-client/models/video-type';
-import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type';
-import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
-import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by';
-import { SortOrder } from '@jellyfin/sdk/lib/generated-client/models/sort-order';
-import { SeriesStatus } from '@jellyfin/sdk/lib/generated-client/models/series-status';
-
-export interface ParametersOptions {
-    sortBy?: ItemSortBy[];
-    sortOrder?: SortOrder[];
-    includeItemTypes?: BaseItemKind[];
-    fields?: ItemFields[];
-    enableImageTypes?: ImageType[];
-    videoTypes?: VideoType[];
-    seriesStatus?: SeriesStatus[];
-    filters?: ItemFilter[];
-    limit?: number;
-    isFavorite?: boolean;
-    genres?: string[];
-    officialRatings?: string[];
-    tags?: string[];
-    years?: number[];
-    is4K?: boolean;
-    isHd?: boolean;
-    is3D?: boolean;
-    hasSubtitles?: boolean;
-    hasTrailer?: boolean;
-    hasSpecialFeature?: boolean;
-    hasThemeSong?: boolean;
-    hasThemeVideo?: boolean;
-    parentIndexNumber?: number;
-    isMissing?: boolean;
-    isUnaired?: boolean;
-    startIndex?: number;
-    nameLessThan?: string;
-    nameStartsWith?: string;
-    collapseBoxSetItems?: boolean;
-    enableTotalRecordCount?: boolean;
-}
-
 export interface LibraryViewProps {
     parentId: string | null;
 }

src/types/suggestionsSections.ts

@@ -1,5 +1,13 @@
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
+import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by';
+import { SortOrder } from '@jellyfin/sdk/lib/generated-client/models/sort-order';
 import { CardOptions } from './cardOptions';
-import { ParametersOptions } from './library';
+
+interface ParametersOptions {
+    sortBy?: ItemSortBy[];
+    sortOrder?: SortOrder[];
+    includeItemTypes?: BaseItemKind[];
+}
 
 export enum SectionsViewType {
     ResumeItems = 'resumeItems',