mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Replace card and list component in itemsView

Browse source
This commit is contained in:
grafixeyehero 2024-01-31 04:33:19 +03:00
parent 31a77c25f3
commit 4a12d5b2c6
1 changed files with 43 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

73
src/apps/experimental/components/library/ItemsView.tsx
View file

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