mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Refactor: viewitemcontainer
This commit is contained in:
grafixeyehero
Bill Thornton
parent
550ad476af
commit
c61df2eb92
28 changed files with 520 additions and 1001 deletions
|
|
@ -5,10 +5,11 @@ import globalize from 'scripts/globalize';
|
|||
import Loading from 'components/loading/LoadingComponent';
|
||||
import GenresSectionContainer from './GenresSectionContainer';
|
||||
import { CollectionType } from 'types/collectionType';
|
||||
import { ParentId } from 'types/library';
|
||||
|
||||
interface GenresItemsContainerProps {
|
||||
parentId?: string | null;
|
||||
collectionType?: CollectionType;
|
||||
parentId: ParentId;
|
||||
collectionType: CollectionType;
|
||||
itemType: BaseItemKind;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,10 +12,11 @@ import Loading from 'components/loading/LoadingComponent';
|
|||
import { appRouter } from 'components/router/appRouter';
|
||||
import SectionContainer from './SectionContainer';
|
||||
import { CollectionType } from 'types/collectionType';
|
||||
import { ParentId } from 'types/library';
|
||||
|
||||
interface GenresSectionContainerProps {
|
||||
parentId?: string | null;
|
||||
collectionType?: CollectionType;
|
||||
parentId: ParentId;
|
||||
collectionType: CollectionType;
|
||||
itemType: BaseItemKind;
|
||||
genre: BaseItemDto;
|
||||
}
|
||||
|
|
|
|||
33
src/apps/experimental/components/library/ItemsContainer.tsx
Normal file
33
src/apps/experimental/components/library/ItemsContainer.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import React, { FC, useEffect, useRef } from 'react';
|
||||
|
||||
import ItemsContainerElement from 'elements/ItemsContainerElement';
|
||||
import imageLoader from 'components/images/imageLoader';
|
||||
import 'elements/emby-itemscontainer/emby-itemscontainer';
|
||||
import { LibraryViewSettings, ViewMode } from 'types/library';
|
||||
|
||||
interface ItemsContainerI {
|
||||
libraryViewSettings: LibraryViewSettings;
|
||||
getItemsHtml: () => string
|
||||
}
|
||||
|
||||
const ItemsContainer: FC<ItemsContainerI> = ({ libraryViewSettings, getItemsHtml }) => {
|
||||
const element = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const itemsContainer = element.current?.querySelector('.itemsContainer') as HTMLDivElement;
|
||||
itemsContainer.innerHTML = getItemsHtml();
|
||||
imageLoader.lazyChildren(itemsContainer);
|
||||
}, [getItemsHtml]);
|
||||
|
||||
const cssClass = libraryViewSettings.ViewMode === ViewMode.ListView ? 'vertical-list' : 'vertical-wrap';
|
||||
|
||||
return (
|
||||
<div ref={element}>
|
||||
<ItemsContainerElement
|
||||
className={`itemsContainer ${cssClass} centered padded-left padded-right padded-right-withalphapicker`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ItemsContainer;
|
||||
272
src/apps/experimental/components/library/ItemsView.tsx
Normal file
272
src/apps/experimental/components/library/ItemsView.tsx
Normal file
|
|
@ -0,0 +1,272 @@
|
|||
import type { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
|
||||
import { ImageType } from '@jellyfin/sdk/lib/generated-client';
|
||||
import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by';
|
||||
import React, { FC, useCallback } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
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 AlphabetPicker from './AlphabetPicker';
|
||||
import FilterButton from './filter/FilterButton';
|
||||
import ItemsContainer from './ItemsContainer';
|
||||
import NewCollectionButton from './NewCollectionButton';
|
||||
import Pagination from './Pagination';
|
||||
import PlayAllButton from './PlayAllButton';
|
||||
import QueueButton from './QueueButton';
|
||||
import ShuffleButton from './ShuffleButton';
|
||||
import SortButton from './SortButton';
|
||||
import GridListViewButton from './GridListViewButton';
|
||||
import { LibraryViewSettings, ParentId, ViewMode } from 'types/library';
|
||||
import { CollectionType } from 'types/collectionType';
|
||||
import { LibraryTab } from 'types/libraryTab';
|
||||
|
||||
import { CardOptions } from 'types/cardOptions';
|
||||
|
||||
interface ItemsViewProps {
|
||||
viewType: LibraryTab;
|
||||
parentId: ParentId;
|
||||
itemType: BaseItemKind[];
|
||||
collectionType?: CollectionType;
|
||||
isBtnPlayAllEnabled?: boolean;
|
||||
isBtnQueueEnabled?: boolean;
|
||||
isBtnShuffleEnabled?: boolean;
|
||||
isBtnSortEnabled?: boolean;
|
||||
isBtnFilterEnabled?: boolean;
|
||||
isBtnNewCollectionEnabled?: boolean;
|
||||
isBtnGridListEnabled?: boolean;
|
||||
isAlphabetPickerEnabled?: boolean;
|
||||
noItemsMessage: string;
|
||||
}
|
||||
|
||||
const ItemsView: FC<ItemsViewProps> = ({
|
||||
viewType,
|
||||
parentId,
|
||||
collectionType,
|
||||
isBtnPlayAllEnabled = false,
|
||||
isBtnQueueEnabled = false,
|
||||
isBtnShuffleEnabled = false,
|
||||
isBtnSortEnabled = true,
|
||||
isBtnFilterEnabled = true,
|
||||
isBtnNewCollectionEnabled = false,
|
||||
isBtnGridListEnabled = true,
|
||||
isAlphabetPickerEnabled = true,
|
||||
itemType,
|
||||
noItemsMessage
|
||||
}) => {
|
||||
const [libraryViewSettings, setLibraryViewSettings] =
|
||||
useLocalStorage<LibraryViewSettings>(
|
||||
getSettingsKey(viewType, parentId),
|
||||
getDefaultLibraryViewSettings(viewType)
|
||||
);
|
||||
|
||||
const {
|
||||
isLoading,
|
||||
data: itemsResult,
|
||||
isPreviousData
|
||||
} = useGetItemsViewByType(
|
||||
viewType,
|
||||
parentId,
|
||||
itemType,
|
||||
libraryViewSettings
|
||||
);
|
||||
const { data: item } = useGetItem(parentId);
|
||||
|
||||
const getCardOptions = useCallback(() => {
|
||||
let shape;
|
||||
let preferThumb;
|
||||
let preferDisc;
|
||||
let preferLogo;
|
||||
let lines = libraryViewSettings.ShowTitle ? 2 : 0;
|
||||
|
||||
if (libraryViewSettings.ImageType === ImageType.Banner) {
|
||||
shape = 'banner';
|
||||
} else if (libraryViewSettings.ImageType === ImageType.Disc) {
|
||||
shape = 'square';
|
||||
preferDisc = true;
|
||||
} else if (libraryViewSettings.ImageType === ImageType.Logo) {
|
||||
shape = 'backdrop';
|
||||
preferLogo = true;
|
||||
} else if (libraryViewSettings.ImageType === ImageType.Thumb) {
|
||||
shape = 'backdrop';
|
||||
preferThumb = true;
|
||||
} else {
|
||||
shape = 'auto';
|
||||
}
|
||||
|
||||
const cardOptions: CardOptions = {
|
||||
shape: shape,
|
||||
showTitle: libraryViewSettings.ShowTitle,
|
||||
showYear: libraryViewSettings.ShowYear,
|
||||
cardLayout: libraryViewSettings.CardLayout,
|
||||
centerText: true,
|
||||
context: collectionType,
|
||||
coverImage: true,
|
||||
preferThumb: preferThumb,
|
||||
preferDisc: preferDisc,
|
||||
preferLogo: preferLogo,
|
||||
overlayPlayButton: false,
|
||||
overlayMoreButton: true,
|
||||
overlayText: !libraryViewSettings.ShowTitle
|
||||
};
|
||||
|
||||
if (
|
||||
viewType === LibraryTab.Songs
|
||||
|| viewType === LibraryTab.Albums
|
||||
|| viewType === LibraryTab.Episodes
|
||||
) {
|
||||
cardOptions.showParentTitle = libraryViewSettings.ShowTitle;
|
||||
} else if (viewType === LibraryTab.Artists) {
|
||||
cardOptions.showYear = false;
|
||||
lines = 1;
|
||||
}
|
||||
|
||||
cardOptions.lines = lines;
|
||||
|
||||
return cardOptions;
|
||||
}, [
|
||||
libraryViewSettings.ShowTitle,
|
||||
libraryViewSettings.ImageType,
|
||||
libraryViewSettings.ShowYear,
|
||||
libraryViewSettings.CardLayout,
|
||||
collectionType,
|
||||
viewType
|
||||
]);
|
||||
|
||||
const getItemsHtml = useCallback(() => {
|
||||
let html = '';
|
||||
|
||||
if (libraryViewSettings.ViewMode === ViewMode.ListView) {
|
||||
html = listview.getListViewHtml({
|
||||
items: itemsResult?.Items ?? [],
|
||||
context: collectionType
|
||||
});
|
||||
} else {
|
||||
html = cardBuilder.getCardsHtml(
|
||||
itemsResult?.Items ?? [],
|
||||
getCardOptions()
|
||||
);
|
||||
}
|
||||
|
||||
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,
|
||||
collectionType,
|
||||
getCardOptions,
|
||||
noItemsMessage
|
||||
]);
|
||||
|
||||
const totalRecordCount = itemsResult?.TotalRecordCount ?? 0;
|
||||
const items = itemsResult?.Items ?? [];
|
||||
const hasFilters = Object.values(libraryViewSettings.Filters ?? {}).some(
|
||||
(filter) => !!filter
|
||||
);
|
||||
const hasSortName = libraryViewSettings.SortBy.includes(
|
||||
ItemSortBy.SortName
|
||||
);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box className='flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x'>
|
||||
<Pagination
|
||||
totalRecordCount={totalRecordCount}
|
||||
libraryViewSettings={libraryViewSettings}
|
||||
isPreviousData={isPreviousData}
|
||||
setLibraryViewSettings={setLibraryViewSettings}
|
||||
/>
|
||||
|
||||
{isBtnPlayAllEnabled && (
|
||||
<PlayAllButton
|
||||
item={item}
|
||||
items={items}
|
||||
viewType={viewType}
|
||||
hasFilters={hasFilters}
|
||||
libraryViewSettings={libraryViewSettings}
|
||||
/>
|
||||
)}
|
||||
{isBtnQueueEnabled
|
||||
&& item
|
||||
&& playbackManager.canQueue(item) && (
|
||||
<QueueButton
|
||||
item={item}
|
||||
items={items}
|
||||
hasFilters={hasFilters}
|
||||
/>
|
||||
)}
|
||||
{isBtnShuffleEnabled && totalRecordCount > 1 && (
|
||||
<ShuffleButton
|
||||
item={item}
|
||||
items={items}
|
||||
viewType={viewType}
|
||||
hasFilters={hasFilters}
|
||||
libraryViewSettings={libraryViewSettings}
|
||||
/>
|
||||
)}
|
||||
{isBtnSortEnabled && (
|
||||
<SortButton
|
||||
viewType={viewType}
|
||||
libraryViewSettings={libraryViewSettings}
|
||||
setLibraryViewSettings={setLibraryViewSettings}
|
||||
/>
|
||||
)}
|
||||
{isBtnFilterEnabled && (
|
||||
<FilterButton
|
||||
parentId={parentId}
|
||||
itemType={itemType}
|
||||
viewType={viewType}
|
||||
hasFilters={hasFilters}
|
||||
libraryViewSettings={libraryViewSettings}
|
||||
setLibraryViewSettings={setLibraryViewSettings}
|
||||
/>
|
||||
)}
|
||||
{isBtnNewCollectionEnabled && <NewCollectionButton />}
|
||||
{isBtnGridListEnabled && (
|
||||
<GridListViewButton
|
||||
viewType={viewType}
|
||||
libraryViewSettings={libraryViewSettings}
|
||||
setLibraryViewSettings={setLibraryViewSettings}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{isAlphabetPickerEnabled && hasSortName && (
|
||||
<AlphabetPicker
|
||||
libraryViewSettings={libraryViewSettings}
|
||||
setLibraryViewSettings={setLibraryViewSettings}
|
||||
/>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<Loading />
|
||||
) : (
|
||||
<ItemsContainer
|
||||
libraryViewSettings={libraryViewSettings}
|
||||
getItemsHtml={getItemsHtml}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Box className='flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x'>
|
||||
<Pagination
|
||||
totalRecordCount={totalRecordCount}
|
||||
libraryViewSettings={libraryViewSettings}
|
||||
isPreviousData={isPreviousData}
|
||||
setLibraryViewSettings={setLibraryViewSettings}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ItemsView;
|
||||
|
|
@ -13,15 +13,17 @@ interface PaginationProps {
|
|||
libraryViewSettings: LibraryViewSettings;
|
||||
setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
|
||||
totalRecordCount: number;
|
||||
isPreviousData: boolean
|
||||
}
|
||||
|
||||
const Pagination: FC<PaginationProps> = ({
|
||||
libraryViewSettings,
|
||||
setLibraryViewSettings,
|
||||
totalRecordCount
|
||||
totalRecordCount,
|
||||
isPreviousData
|
||||
}) => {
|
||||
const limit = userSettings.libraryPageSize(undefined);
|
||||
const startIndex = libraryViewSettings.StartIndex || 0;
|
||||
const startIndex = libraryViewSettings.StartIndex ?? 0;
|
||||
const recordsStart = totalRecordCount ? startIndex + 1 : 0;
|
||||
const recordsEnd = limit ?
|
||||
Math.min(startIndex + limit, totalRecordCount) :
|
||||
|
|
@ -29,23 +31,19 @@ const Pagination: FC<PaginationProps> = ({
|
|||
const showControls = limit > 0 && limit < totalRecordCount;
|
||||
|
||||
const onNextPageClick = useCallback(() => {
|
||||
if (limit > 0) {
|
||||
const newIndex = startIndex + limit;
|
||||
setLibraryViewSettings((prevState) => ({
|
||||
...prevState,
|
||||
StartIndex: newIndex
|
||||
}));
|
||||
}
|
||||
const newIndex = startIndex + limit;
|
||||
setLibraryViewSettings((prevState) => ({
|
||||
...prevState,
|
||||
StartIndex: newIndex
|
||||
}));
|
||||
}, [limit, setLibraryViewSettings, startIndex]);
|
||||
|
||||
const onPreviousPageClick = useCallback(() => {
|
||||
if (limit > 0) {
|
||||
const newIndex = Math.max(0, startIndex - limit);
|
||||
setLibraryViewSettings((prevState) => ({
|
||||
...prevState,
|
||||
StartIndex: newIndex
|
||||
}));
|
||||
}
|
||||
const newIndex = Math.max(0, startIndex - limit);
|
||||
setLibraryViewSettings((prevState) => ({
|
||||
...prevState,
|
||||
StartIndex: newIndex
|
||||
}));
|
||||
}, [limit, setLibraryViewSettings, startIndex]);
|
||||
|
||||
return (
|
||||
|
|
@ -67,7 +65,7 @@ const Pagination: FC<PaginationProps> = ({
|
|||
<IconButton
|
||||
title={globalize.translate('Previous')}
|
||||
className='paper-icon-button-light btnPreviousPage autoSize'
|
||||
disabled={startIndex == 0}
|
||||
disabled={startIndex == 0 || isPreviousData}
|
||||
onClick={onPreviousPageClick}
|
||||
>
|
||||
<ArrowBackIcon />
|
||||
|
|
@ -76,7 +74,7 @@ const Pagination: FC<PaginationProps> = ({
|
|||
<IconButton
|
||||
title={globalize.translate('Next')}
|
||||
className='paper-icon-button-light btnNextPage autoSize'
|
||||
disabled={startIndex + limit >= totalRecordCount }
|
||||
disabled={startIndex + limit >= totalRecordCount || isPreviousData }
|
||||
onClick={onNextPageClick}
|
||||
>
|
||||
<ArrowForwardIcon />
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ const RecommendationContainer: FC<RecommendationContainerProps> = ({
|
|||
return (
|
||||
<SectionContainer
|
||||
sectionTitle={escapeHTML(title)}
|
||||
items={recommendation.Items || []}
|
||||
items={recommendation.Items ?? []}
|
||||
cardOptions={{
|
||||
shape: 'overflowPortrait',
|
||||
showYear: true,
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import React, { FC } from 'react';
|
|||
import * as userSettings from 'scripts/settings/userSettings';
|
||||
import SuggestionsSectionContainer from './SuggestionsSectionContainer';
|
||||
import { Sections, SectionsView, SectionsViewType } from 'types/suggestionsSections';
|
||||
import { ParentId } from 'types/library';
|
||||
|
||||
const getSuggestionsSections = (): Sections[] => {
|
||||
return [
|
||||
|
|
@ -178,7 +179,7 @@ const getSuggestionsSections = (): Sections[] => {
|
|||
};
|
||||
|
||||
interface SuggestionsItemsContainerProps {
|
||||
parentId?: string | null;
|
||||
parentId: ParentId;
|
||||
sectionsView: SectionsView[];
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,9 +7,10 @@ import { appRouter } from 'components/router/appRouter';
|
|||
import SectionContainer from './SectionContainer';
|
||||
|
||||
import { Sections } from 'types/suggestionsSections';
|
||||
import { ParentId } from 'types/library';
|
||||
|
||||
interface SuggestionsSectionContainerProps {
|
||||
parentId?: string | null;
|
||||
parentId: ParentId;
|
||||
section: Sections;
|
||||
}
|
||||
|
||||
|
|
@ -37,7 +38,7 @@ const SuggestionsSectionContainer: FC<SuggestionsSectionContainerProps> = ({
|
|||
return (
|
||||
<SectionContainer
|
||||
sectionTitle={globalize.translate(section.name)}
|
||||
items={items || []}
|
||||
items={items ?? []}
|
||||
url={getRouteUrl()}
|
||||
cardOptions={{
|
||||
...section.cardOptions
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ import FiltersTags from './FiltersTags';
|
|||
import FiltersVideoTypes from './FiltersVideoTypes';
|
||||
import FiltersYears from './FiltersYears';
|
||||
|
||||
import { LibraryViewSettings } from 'types/library';
|
||||
import { LibraryViewSettings, ParentId } from 'types/library';
|
||||
import { LibraryTab } from 'types/libraryTab';
|
||||
|
||||
const Accordion = styled((props: AccordionProps) => (
|
||||
|
|
@ -73,9 +73,10 @@ const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
|
|||
}));
|
||||
|
||||
interface FilterButtonProps {
|
||||
parentId: string | null | undefined;
|
||||
itemType: BaseItemKind;
|
||||
parentId: ParentId;
|
||||
itemType: BaseItemKind[];
|
||||
viewType: LibraryTab;
|
||||
hasFilters: boolean;
|
||||
libraryViewSettings: LibraryViewSettings;
|
||||
setLibraryViewSettings: React.Dispatch<
|
||||
React.SetStateAction<LibraryViewSettings>
|
||||
|
|
@ -86,6 +87,7 @@ const FilterButton: FC<FilterButtonProps> = ({
|
|||
parentId,
|
||||
itemType,
|
||||
viewType,
|
||||
hasFilters,
|
||||
libraryViewSettings,
|
||||
setLibraryViewSettings
|
||||
}) => {
|
||||
|
|
@ -153,16 +155,13 @@ const FilterButton: FC<FilterButtonProps> = ({
|
|||
return viewType === LibraryTab.Episodes;
|
||||
};
|
||||
|
||||
const hasFilters =
|
||||
Object.values(libraryViewSettings.Filters || {}).some((filter) => !!filter);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<IconButton
|
||||
title={globalize.translate('Filter')}
|
||||
sx={{ ml: 2 }}
|
||||
aria-describedby={id}
|
||||
className='paper-icon-button-light btnShuffle autoSize'
|
||||
className='paper-icon-button-light btnFilter autoSize'
|
||||
onClick={handleClick}
|
||||
>
|
||||
<Badge color='info' variant='dot' invisible={!hasFilters}>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue