From 4a12d5b2c659f12b0a3f1cfd805eac2eae96125d Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Wed, 31 Jan 2024 04:33:19 +0300
Subject: [PATCH] Replace card and list component in itemsView

---
 .../components/library/ItemsView.tsx          | 73 +++++++++++--------
 1 file changed, 43 insertions(+), 30 deletions(-)

diff --git a/src/apps/experimental/components/library/ItemsView.tsx b/src/apps/experimental/components/library/ItemsView.tsx
index 65b26ffcdc..b13ab14165 100644
--- a/src/apps/experimental/components/library/ItemsView.tsx
+++ b/src/apps/experimental/components/library/ItemsView.tsx
@@ -8,10 +8,7 @@ import { useLocalStorage } from 'hooks/useLocalStorage';
 import { useGetItem, useGetItemsViewByType } from 'hooks/useFetchItems';
 import { getDefaultLibraryViewSettings, getSettingsKey } from 'utils/items';
 import Loading from 'components/loading/LoadingComponent';
-import listview from 'components/listview/listview';
-import cardBuilder from 'components/cardbuilder/cardBuilder';
 import { playbackManager } from 'components/playback/playbackmanager';
-import globalize from 'scripts/globalize';
 import ItemsContainer from 'elements/emby-itemscontainer/ItemsContainer';
 import AlphabetPicker from './AlphabetPicker';
 import FilterButton from './filter/FilterButton';
@@ -22,12 +19,15 @@ import QueueButton from './QueueButton';
 import ShuffleButton from './ShuffleButton';
 import SortButton from './SortButton';
 import GridListViewButton from './GridListViewButton';
-import { LibraryViewSettings, ParentId, ViewMode } from 'types/library';
+import NoItemsMessage from 'components/common/NoItemsMessage';
+import Lists from 'components/listview/List/Lists';
+import Cards from 'components/cardbuilder/Card/Cards';
+import { type LibraryViewSettings, type ParentId, ViewMode } from 'types/library';
 import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
 import { LibraryTab } from 'types/libraryTab';
 
-import { CardOptions } from 'types/cardOptions';
-import { ListOptions } from 'types/listOptions';
+import type { CardOptions } from 'types/cardOptions';
+import type { ListOptions } from 'types/listOptions';
 
 interface ItemsViewProps {
     viewType: LibraryTab;
@@ -135,9 +135,9 @@ const ItemsView: FC<ItemsViewProps> = ({
             preferThumb: preferThumb,
             preferDisc: preferDisc,
             preferLogo: preferLogo,
-            overlayPlayButton: false,
-            overlayMoreButton: true,
-            overlayText: !libraryViewSettings.ShowTitle
+            overlayText: !libraryViewSettings.ShowTitle,
+            imageType: libraryViewSettings.ImageType,
+            queryKey: ['ItemsViewByType']
         };
 
         if (
@@ -146,20 +146,26 @@ const ItemsView: FC<ItemsViewProps> = ({
             || viewType === LibraryTab.Episodes
         ) {
             cardOptions.showParentTitle = libraryViewSettings.ShowTitle;
+            cardOptions.overlayPlayButton = true;
         } else if (viewType === LibraryTab.Artists) {
             cardOptions.lines = 1;
             cardOptions.showYear = false;
+            cardOptions.overlayPlayButton = true;
         } else if (viewType === LibraryTab.Channels) {
             cardOptions.shape = 'square';
             cardOptions.showDetailsMenu = true;
             cardOptions.showCurrentProgram = true;
             cardOptions.showCurrentProgramTime = true;
         } else if (viewType === LibraryTab.SeriesTimers) {
-            cardOptions.defaultShape = 'portrait';
-            cardOptions.preferThumb = 'auto';
+            cardOptions.shape = 'backdrop';
             cardOptions.showSeriesTimerTime = true;
             cardOptions.showSeriesTimerChannel = true;
+            cardOptions.overlayMoreButton = true;
             cardOptions.lines = 3;
+        } else if (viewType === LibraryTab.Movies) {
+            cardOptions.overlayPlayButton = true;
+        } else if (viewType === LibraryTab.Series || viewType === LibraryTab.Networks) {
+            cardOptions.overlayMoreButton = true;
         }
 
         return cardOptions;
@@ -172,27 +178,32 @@ const ItemsView: FC<ItemsViewProps> = ({
         viewType
     ]);
 
-    const getItemsHtml = useCallback(() => {
-        let html = '';
+    const getItems = useCallback(() => {
+        if (!itemsResult?.Items?.length) {
+            return <NoItemsMessage noItemsMessage={noItemsMessage} />;
+        }
 
         if (libraryViewSettings.ViewMode === ViewMode.ListView) {
-            html = listview.getListViewHtml(getListOptions());
-        } else {
-            html = cardBuilder.getCardsHtml(
-                itemsResult?.Items ?? [],
-                getCardOptions()
+            return (
+                <Lists
+                    items={itemsResult?.Items ?? []}
+                    listOptions={getListOptions()}
+                />
             );
         }
-
-        if (!itemsResult?.Items?.length) {
-            html += '<div class="noItemsMessage centerMessage">';
-            html += '<h1>' + globalize.translate('MessageNothingHere') + '</h1>';
-            html += '<p>' + globalize.translate(noItemsMessage) + '</p>';
-            html += '</div>';
-        }
-
-        return html;
-    }, [libraryViewSettings.ViewMode, itemsResult?.Items, getListOptions, getCardOptions, noItemsMessage]);
+        return (
+            <Cards
+                items={itemsResult?.Items ?? []}
+                cardOptions={getCardOptions()}
+            />
+        );
+    }, [
+        libraryViewSettings.ViewMode,
+        itemsResult?.Items,
+        getListOptions,
+        getCardOptions,
+        noItemsMessage
+    ]);
 
     const totalRecordCount = itemsResult?.TotalRecordCount ?? 0;
     const items = itemsResult?.Items ?? [];
@@ -289,8 +300,10 @@ const ItemsView: FC<ItemsViewProps> = ({
                     className={itemsContainerClass}
                     parentId={parentId}
                     reloadItems={refetch}
-                    getItemsHtml={getItemsHtml}
-                />
+                    queryKey={['ItemsViewByType']}
+                >
+                    {getItems()}
+                </ItemsContainer>
             )}
 
             {isPaginationEnabled && (