From 1e35519668d6a7a1bbb877da5938ca16eaf0cce0 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Sun, 17 Sep 2023 23:27:02 +0300 Subject: [PATCH 01/12] Add AlphabetPicker --- .../components/library/AlphabetPicker.tsx | 85 +++++++++++++++++++ src/types/library.ts | 3 +- 2 files changed, 86 insertions(+), 2 deletions(-) create mode 100644 src/apps/experimental/components/library/AlphabetPicker.tsx diff --git a/src/apps/experimental/components/library/AlphabetPicker.tsx b/src/apps/experimental/components/library/AlphabetPicker.tsx new file mode 100644 index 00000000000..4b8c6019ecc --- /dev/null +++ b/src/apps/experimental/components/library/AlphabetPicker.tsx @@ -0,0 +1,85 @@ +import React, { useCallback } from 'react'; +import classNames from 'classnames'; + +import Box from '@mui/material/Box'; +import ToggleButton from '@mui/material/ToggleButton'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; + +import { LibraryViewSettings } from 'types/library'; +import 'components/alphaPicker/style.scss'; + +interface AlphabetPickerProps { + className?: string; + libraryViewSettings: LibraryViewSettings; + setLibraryViewSettings: React.Dispatch< + React.SetStateAction + >; +} + +const AlphabetPicker: React.FC = ({ + className, + libraryViewSettings, + setLibraryViewSettings +}) => { + const handelValue = useCallback( + ( + event: React.MouseEvent, + newValue: string | null | undefined + ) => { + setLibraryViewSettings((prevState) => ({ + ...prevState, + StartIndex: 0, + Alphabet: newValue + })); + }, + [setLibraryViewSettings] + ); + + const containerClassName = classNames( + 'alphaPicker', + className, + 'alphaPicker-fixed-right' + ); + + const btnClassName = classNames( + 'paper-icon-button-light', + 'alphaPickerButton' + ); + + const letters = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; + + return ( + + + {letters.map((l) => ( + + {l} + + ))} + + + ); +}; + +export default AlphabetPicker; diff --git a/src/types/library.ts b/src/types/library.ts index 4bf275abe38..862ee3d6d3b 100644 --- a/src/types/library.ts +++ b/src/types/library.ts @@ -62,6 +62,5 @@ export interface LibraryViewSettings { ShowTitle: boolean; ShowYear?: boolean; Filters?: Filters; - NameLessThan?: string | null; - NameStartsWith?: string | null; + Alphabet?: string | null; } From fc241d058f9e06d3896d4036f88c132ea98f51e2 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Fri, 22 Sep 2023 21:16:04 +0300 Subject: [PATCH 02/12] fix typo --- src/apps/experimental/components/library/AlphabetPicker.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/apps/experimental/components/library/AlphabetPicker.tsx b/src/apps/experimental/components/library/AlphabetPicker.tsx index 4b8c6019ecc..aec6d2eb9b8 100644 --- a/src/apps/experimental/components/library/AlphabetPicker.tsx +++ b/src/apps/experimental/components/library/AlphabetPicker.tsx @@ -21,7 +21,7 @@ const AlphabetPicker: React.FC = ({ libraryViewSettings, setLibraryViewSettings }) => { - const handelValue = useCallback( + const handleValue = useCallback( ( event: React.MouseEvent, newValue: string | null | undefined @@ -66,7 +66,7 @@ const AlphabetPicker: React.FC = ({ exclusive color='primary' size='small' - onChange={handelValue} + onChange={handleValue} > {letters.map((l) => ( Date: Sun, 17 Sep 2023 23:27:52 +0300 Subject: [PATCH 03/12] Add Pagination --- .../components/library/Pagination.tsx | 91 +++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 src/apps/experimental/components/library/Pagination.tsx diff --git a/src/apps/experimental/components/library/Pagination.tsx b/src/apps/experimental/components/library/Pagination.tsx new file mode 100644 index 00000000000..3d1026254f4 --- /dev/null +++ b/src/apps/experimental/components/library/Pagination.tsx @@ -0,0 +1,91 @@ +import React, { FC, useCallback } from 'react'; +import ArrowBackIcon from '@mui/icons-material/ArrowBack'; +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; +import Box from '@mui/material/Box'; +import ButtonGroup from '@mui/material/ButtonGroup'; +import IconButton from '@mui/material/IconButton'; + +import globalize from 'scripts/globalize'; +import * as userSettings from 'scripts/settings/userSettings'; +import { LibraryViewSettings } from 'types/library'; + +interface PaginationProps { + libraryViewSettings: LibraryViewSettings; + setLibraryViewSettings: React.Dispatch>; + totalRecordCount: number; +} + +const Pagination: FC = ({ + libraryViewSettings, + setLibraryViewSettings, + totalRecordCount +}) => { + const limit = userSettings.libraryPageSize(undefined); + const startIndex = libraryViewSettings.StartIndex || 0; + const recordsStart = totalRecordCount ? startIndex + 1 : 0; + const recordsEnd = limit ? + Math.min(startIndex + limit, totalRecordCount) : + totalRecordCount; + const showControls = limit > 0 && limit < totalRecordCount; + + const onNextPageClick = useCallback(() => { + if (limit > 0) { + 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 + })); + } + }, [limit, setLibraryViewSettings, startIndex]); + + return ( + + + + {globalize.translate( + 'ListPaging', + recordsStart, + recordsEnd, + totalRecordCount + )} + + {showControls && ( + + + + + + = totalRecordCount } + onClick={onNextPageClick} + > + + + + )} + + + ); +}; + +export default Pagination; From 30d3bac91a230995a341c301d45867f9efff4b6e Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Sun, 17 Sep 2023 23:28:40 +0300 Subject: [PATCH 04/12] Add Play, Queue, Shuffle and NewCollection Buttons --- .../library/NewCollectionButton.tsx | 34 ++++++++++ .../components/library/PlayAllButton.tsx | 39 +++++++++++ .../components/library/QueueButton.tsx | 39 +++++++++++ .../components/library/ShuffleButton.tsx | 67 +++++++++++++++++++ 4 files changed, 179 insertions(+) create mode 100644 src/apps/experimental/components/library/NewCollectionButton.tsx create mode 100644 src/apps/experimental/components/library/PlayAllButton.tsx create mode 100644 src/apps/experimental/components/library/QueueButton.tsx create mode 100644 src/apps/experimental/components/library/ShuffleButton.tsx diff --git a/src/apps/experimental/components/library/NewCollectionButton.tsx b/src/apps/experimental/components/library/NewCollectionButton.tsx new file mode 100644 index 00000000000..e337de7ddd2 --- /dev/null +++ b/src/apps/experimental/components/library/NewCollectionButton.tsx @@ -0,0 +1,34 @@ +import React, { FC, useCallback } from 'react'; +import { IconButton } from '@mui/material'; +import AddIcon from '@mui/icons-material/Add'; +import globalize from 'scripts/globalize'; + +const NewCollectionButton: FC = () => { + const showCollectionEditor = useCallback(() => { + import('components/collectionEditor/collectionEditor').then( + ({ default: CollectionEditor }) => { + const serverId = window.ApiClient.serverId(); + const collectionEditor = new CollectionEditor(); + collectionEditor.show({ + items: [], + serverId: serverId + }).catch(() => { + // closed collection editor + }); + }).catch(err => { + console.error('[NewCollection] failed to load collection editor', err); + }); + }, []); + + return ( + + + + ); +}; + +export default NewCollectionButton; diff --git a/src/apps/experimental/components/library/PlayAllButton.tsx b/src/apps/experimental/components/library/PlayAllButton.tsx new file mode 100644 index 00000000000..5a16b1a1bae --- /dev/null +++ b/src/apps/experimental/components/library/PlayAllButton.tsx @@ -0,0 +1,39 @@ +import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client'; +import React, { FC, useCallback } from 'react'; +import { IconButton } from '@mui/material'; +import PlayArrowIcon from '@mui/icons-material/PlayArrow'; + +import { playbackManager } from 'components/playback/playbackmanager'; +import globalize from 'scripts/globalize'; + +interface PlayAllButtonProps { + item: BaseItemDto | undefined; + items: BaseItemDto[]; + hasFilters: boolean; +} + +const PlayAllButton: FC = ({ item, items, hasFilters }) => { + const play = useCallback(() => { + if (item && !hasFilters) { + playbackManager.play({ + items: [item] + }); + } else { + playbackManager.play({ + items: items + }); + } + }, [hasFilters, item, items]); + + return ( + + + + ); +}; + +export default PlayAllButton; diff --git a/src/apps/experimental/components/library/QueueButton.tsx b/src/apps/experimental/components/library/QueueButton.tsx new file mode 100644 index 00000000000..fdc6a7666b2 --- /dev/null +++ b/src/apps/experimental/components/library/QueueButton.tsx @@ -0,0 +1,39 @@ +import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client'; +import React, { FC, useCallback } from 'react'; +import { IconButton } from '@mui/material'; +import QueueIcon from '@mui/icons-material/Queue'; + +import { playbackManager } from 'components/playback/playbackmanager'; +import globalize from 'scripts/globalize'; + +interface QueueButtonProps { + item: BaseItemDto | undefined + items: BaseItemDto[]; + hasFilters: boolean; +} + +const QueueButton: FC = ({ item, items, hasFilters }) => { + const queue = useCallback(() => { + if (item && !hasFilters) { + playbackManager.queue({ + items: [item] + }); + } else { + playbackManager.queue({ + items: items + }); + } + }, [hasFilters, item, items]); + + return ( + + + + ); +}; + +export default QueueButton; diff --git a/src/apps/experimental/components/library/ShuffleButton.tsx b/src/apps/experimental/components/library/ShuffleButton.tsx new file mode 100644 index 00000000000..5b8ef45e3dc --- /dev/null +++ b/src/apps/experimental/components/library/ShuffleButton.tsx @@ -0,0 +1,67 @@ +import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client'; +import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; +import { ItemFields } from '@jellyfin/sdk/lib/generated-client/models/item-fields'; +import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by'; +import React, { FC, useCallback } from 'react'; +import { IconButton } from '@mui/material'; +import ShuffleIcon from '@mui/icons-material/Shuffle'; + +import { useGetItems } from 'hooks/useFetchItems'; +import { playbackManager } from 'components/playback/playbackmanager'; +import globalize from 'scripts/globalize'; +import { getFiltersQuery } from 'utils/items'; +import { LibraryViewSettings } from 'types/library'; +import { LibraryTab } from 'types/libraryTab'; + +interface ShuffleButtonProps { + item: BaseItemDto | undefined + itemType: BaseItemKind; + viewType: LibraryTab + hasFilters: boolean; + libraryViewSettings: LibraryViewSettings +} + +const ShuffleButton: FC = ({ item, itemType, viewType, hasFilters, libraryViewSettings }) => { + const getParametersOptions = () => { + return { + ...getFiltersQuery(viewType, libraryViewSettings), + limit: 300, + sortBy: [ItemSortBy.Random], + includeItemTypes: [itemType], + recursive: true, + fields: [ + ItemFields.PrimaryImageAspectRatio, + ItemFields.SortName, + ItemFields.ChildCount, + ItemFields.MediaSourceCount + ], + imageTypeLimit: 1, + parentId: item?.Id ? item.Id : undefined, + startIndex: 0 + }; + }; + + const { data: itemsResult } = useGetItems(getParametersOptions()); + + const shuffle = useCallback(() => { + if (item && !hasFilters) { + playbackManager.shuffle(item); + } else { + playbackManager.play({ + items: itemsResult?.Items + }); + } + }, [hasFilters, item, itemsResult?.Items]); + + return ( + + + + ); +}; + +export default ShuffleButton; From 1770a51735dc2d06687b1e666dab9471ebab4649 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Mon, 18 Sep 2023 00:01:13 +0300 Subject: [PATCH 05/12] Add items helper --- src/utils/items.ts | 158 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 158 insertions(+) create mode 100644 src/utils/items.ts diff --git a/src/utils/items.ts b/src/utils/items.ts new file mode 100644 index 00000000000..08936a3fde0 --- /dev/null +++ b/src/utils/items.ts @@ -0,0 +1,158 @@ +import { ItemFields } from '@jellyfin/sdk/lib/generated-client/models/item-fields'; +import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type'; +import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by'; +import { SortOrder } from '@jellyfin/sdk/lib/generated-client/models/sort-order'; +import * as userSettings from 'scripts/settings/userSettings'; +import { EpisodeFilter, FeatureFilters, LibraryViewSettings, ParentId, VideoBasicFilter, ViewMode } from '../types/library'; +import { LibraryTab } from 'types/libraryTab'; + +export const getVideoBasicFilter = (libraryViewSettings: LibraryViewSettings) => { + let isHd; + + if (libraryViewSettings.Filters?.VideoBasicFilter?.includes(VideoBasicFilter.IsHD)) { + isHd = true; + } + + if (libraryViewSettings.Filters?.VideoBasicFilter?.includes(VideoBasicFilter.IsSD)) { + isHd = false; + } + + return { + isHd, + is4K: libraryViewSettings.Filters?.VideoBasicFilter?.includes(VideoBasicFilter.Is4K) ? + true : + undefined, + is3D: libraryViewSettings.Filters?.VideoBasicFilter?.includes(VideoBasicFilter.Is3D) ? + true : + undefined + }; +}; + +export const getFeatureFilters = (libraryViewSettings: LibraryViewSettings) => { + return { + hasSubtitles: libraryViewSettings.Filters?.Features?.includes(FeatureFilters.HasSubtitles) ? + true : + undefined, + hasTrailer: libraryViewSettings.Filters?.Features?.includes(FeatureFilters.HasTrailer) ? + true : + undefined, + hasSpecialFeature: libraryViewSettings.Filters?.Features?.includes( + FeatureFilters.HasSpecialFeature + ) ? + true : + undefined, + hasThemeSong: libraryViewSettings.Filters?.Features?.includes(FeatureFilters.HasThemeSong) ? + true : + undefined, + hasThemeVideo: libraryViewSettings.Filters?.Features?.includes( + FeatureFilters.HasThemeVideo + ) ? + true : + undefined + }; +}; + +export const getEpisodeFilter = ( + viewType: LibraryTab, + libraryViewSettings: LibraryViewSettings +) => { + return { + parentIndexNumber: libraryViewSettings.Filters?.EpisodeFilter?.includes( + EpisodeFilter.ParentIndexNumber + ) ? + 0 : + undefined, + isMissing: + viewType === LibraryTab.Episodes ? + !!libraryViewSettings.Filters?.EpisodeFilter?.includes(EpisodeFilter.IsMissing) : + undefined, + isUnaired: libraryViewSettings.Filters?.EpisodeFilter?.includes(EpisodeFilter.IsUnaired) ? + true : + undefined + }; +}; + +const getItemFieldsEnum = ( + viewType: LibraryTab, + libraryViewSettings: LibraryViewSettings +) => { + const itemFields: ItemFields[] = []; + + if (viewType !== LibraryTab.Networks) { + itemFields.push(ItemFields.BasicSyncInfo, ItemFields.MediaSourceCount); + } + + if (libraryViewSettings.ImageType === ImageType.Primary) { + itemFields.push(ItemFields.PrimaryImageAspectRatio); + } + + if (viewType === LibraryTab.Networks) { + itemFields.push( + ItemFields.DateCreated, + ItemFields.PrimaryImageAspectRatio + ); + } + + return itemFields; +}; + +export const getFieldsQuery = ( + viewType: LibraryTab, + libraryViewSettings: LibraryViewSettings +) => { + return { + fields: getItemFieldsEnum(viewType, libraryViewSettings) + }; +}; + +export const getLimitQuery = () => { + return { + limit: userSettings.libraryPageSize(undefined) || undefined + }; +}; + +export const getAlphaPickerQuery = (libraryViewSettings: LibraryViewSettings) => { + const alphabetValue = libraryViewSettings.Alphabet !== null ? + libraryViewSettings.Alphabet : undefined; + + return { + nameLessThan: alphabetValue === '#' ? 'A' : undefined, + nameStartsWith: alphabetValue === '#' ? undefined : alphabetValue + }; +}; + +export const getFiltersQuery = ( + viewType: LibraryTab, + libraryViewSettings: LibraryViewSettings +) => { + return { + ...getFeatureFilters(libraryViewSettings), + ...getEpisodeFilter(viewType, libraryViewSettings), + ...getVideoBasicFilter(libraryViewSettings), + seriesStatus: libraryViewSettings?.Filters?.SeriesStatus, + videoTypes: libraryViewSettings?.Filters?.VideoTypes, + filters: libraryViewSettings?.Filters?.Status, + genres: libraryViewSettings?.Filters?.Genres, + officialRatings: libraryViewSettings?.Filters?.OfficialRatings, + tags: libraryViewSettings?.Filters?.Tags, + years: libraryViewSettings?.Filters?.Years, + studioIds: libraryViewSettings?.Filters?.StudioIds + }; +}; + +export const getSettingsKey = (viewType: LibraryTab, parentId: ParentId) => { + return `${viewType} - ${parentId}`; +}; + +export const getDefaultLibraryViewSettings = (): LibraryViewSettings => { + return { + ShowTitle: true, + ShowYear: false, + ViewMode: ViewMode.GridView, + ImageType: ImageType.Primary, + CardLayout: false, + SortBy: ItemSortBy.SortName, + SortOrder: SortOrder.Ascending, + StartIndex: 0 + }; +}; From bc23c4aa351cd444d989d7a4ba0bf989fa591c22 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Thu, 21 Sep 2023 19:43:55 +0300 Subject: [PATCH 06/12] pass queryOptions --- .../components/library/PlayAllButton.tsx | 26 ++++++++++-- .../components/library/ShuffleButton.tsx | 40 +++++-------------- .../components/library/SortButton.tsx | 2 +- .../components/library/ViewSettingsButton.tsx | 2 +- 4 files changed, 35 insertions(+), 35 deletions(-) diff --git a/src/apps/experimental/components/library/PlayAllButton.tsx b/src/apps/experimental/components/library/PlayAllButton.tsx index 5a16b1a1bae..d7fb0903807 100644 --- a/src/apps/experimental/components/library/PlayAllButton.tsx +++ b/src/apps/experimental/components/library/PlayAllButton.tsx @@ -5,25 +5,43 @@ import PlayArrowIcon from '@mui/icons-material/PlayArrow'; import { playbackManager } from 'components/playback/playbackmanager'; import globalize from 'scripts/globalize'; +import { getFiltersQuery } from 'utils/items'; +import { LibraryViewSettings } from 'types/library'; +import { LibraryTab } from 'types/libraryTab'; interface PlayAllButtonProps { item: BaseItemDto | undefined; items: BaseItemDto[]; + viewType: LibraryTab; hasFilters: boolean; + libraryViewSettings: LibraryViewSettings } -const PlayAllButton: FC = ({ item, items, hasFilters }) => { +const PlayAllButton: FC = ({ item, items, viewType, hasFilters, libraryViewSettings }) => { const play = useCallback(() => { if (item && !hasFilters) { playbackManager.play({ - items: [item] + items: [item], + autoplay: true, + queryOptions: { + SortBy: [libraryViewSettings.SortBy], + SortOrder: [libraryViewSettings.SortOrder] + } }); } else { playbackManager.play({ - items: items + items: items, + autoplay: true, + queryOptions: { + ParentId: item?.Id ?? undefined, + ...getFiltersQuery(viewType, libraryViewSettings), + SortBy: [libraryViewSettings.SortBy], + SortOrder: [libraryViewSettings.SortOrder] + } + }); } - }, [hasFilters, item, items]); + }, [hasFilters, item, items, libraryViewSettings, viewType]); return ( = ({ item, itemType, viewType, hasFilters, libraryViewSettings }) => { - const getParametersOptions = () => { - return { - ...getFiltersQuery(viewType, libraryViewSettings), - limit: 300, - sortBy: [ItemSortBy.Random], - includeItemTypes: [itemType], - recursive: true, - fields: [ - ItemFields.PrimaryImageAspectRatio, - ItemFields.SortName, - ItemFields.ChildCount, - ItemFields.MediaSourceCount - ], - imageTypeLimit: 1, - parentId: item?.Id ? item.Id : undefined, - startIndex: 0 - }; - }; - - const { data: itemsResult } = useGetItems(getParametersOptions()); - +const ShuffleButton: FC = ({ item, items, viewType, hasFilters, libraryViewSettings }) => { const shuffle = useCallback(() => { if (item && !hasFilters) { playbackManager.shuffle(item); } else { playbackManager.play({ - items: itemsResult?.Items + items: items, + autoplay: true, + queryOptions: { + ParentId: item?.Id ?? undefined, + ...getFiltersQuery(viewType, libraryViewSettings), + SortBy: [ItemSortBy.Random] + } }); } - }, [hasFilters, item, itemsResult?.Items]); + }, [hasFilters, item, items, libraryViewSettings, viewType]); return ( = ({ title={globalize.translate('Sort')} sx={{ ml: 2 }} aria-describedby={id} - className='paper-icon-button-light btnShuffle autoSize' + className='paper-icon-button-light btnSort autoSize' onClick={handleClick} > diff --git a/src/apps/experimental/components/library/ViewSettingsButton.tsx b/src/apps/experimental/components/library/ViewSettingsButton.tsx index cec5090accb..b1ca1679e00 100644 --- a/src/apps/experimental/components/library/ViewSettingsButton.tsx +++ b/src/apps/experimental/components/library/ViewSettingsButton.tsx @@ -100,7 +100,7 @@ const ViewSettingsButton: FC = ({ title={globalize.translate('ButtonSelectView')} sx={{ ml: 2 }} aria-describedby={id} - className='paper-icon-button-light btnShuffle autoSize' + className='paper-icon-button-light btnSelectView autoSize' onClick={handleClick} > From ad1323fb6a417919bbf415bac1e387581c49f284 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Thu, 21 Sep 2023 20:26:05 +0300 Subject: [PATCH 07/12] Refactor: viewitemcontainer --- .../library/GenresItemsContainer.tsx | 14 +- .../library/GenresSectionContainer.tsx | 48 +--- .../components/library/ItemsContainer.tsx | 137 +++++++++++ .../components/library/ItemsView.tsx | 183 ++++++++++++++ .../components/library/Pagination.tsx | 34 ++- .../library/RecommendationContainer.tsx | 2 +- .../library/SuggestionsItemsContainer.tsx | 3 +- .../library/SuggestionsSectionContainer.tsx | 5 +- .../library/filter/FilterButton.tsx | 13 +- src/apps/experimental/routes/home.tsx | 2 +- .../routes/movies/CollectionsView.tsx | 32 +-- .../routes/movies/FavoritesView.tsx | 28 +-- .../experimental/routes/movies/GenresView.tsx | 1 + .../experimental/routes/movies/MoviesView.tsx | 30 +-- .../routes/movies/SuggestionsView.tsx | 1 + .../routes/movies/TrailersView.tsx | 29 +-- src/apps/experimental/routes/movies/index.tsx | 7 +- src/hooks/useFetchItems.ts | 223 ++++++++++++++++-- src/types/cardOptions.ts | 3 +- src/types/library.ts | 2 +- src/utils/items.ts | 8 +- 21 files changed, 624 insertions(+), 181 deletions(-) create mode 100644 src/apps/experimental/components/library/ItemsContainer.tsx create mode 100644 src/apps/experimental/components/library/ItemsView.tsx diff --git a/src/apps/experimental/components/library/GenresItemsContainer.tsx b/src/apps/experimental/components/library/GenresItemsContainer.tsx index 41fba412d14..fa077d55f39 100644 --- a/src/apps/experimental/components/library/GenresItemsContainer.tsx +++ b/src/apps/experimental/components/library/GenresItemsContainer.tsx @@ -1,13 +1,14 @@ -import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; +import type { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; import React, { FC } from 'react'; -import { useGetGenres } from 'hooks/useFetchItems'; +import { useGetGroupsGenres } from 'hooks/useFetchItems'; 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; + parentId?: ParentId; collectionType?: CollectionType; itemType: BaseItemKind; } @@ -17,7 +18,7 @@ const GenresItemsContainer: FC = ({ collectionType, itemType }) => { - const { isLoading, data: genresResult } = useGetGenres( + const { isLoading, data: groupsGenres } = useGetGroupsGenres( itemType, parentId ); @@ -28,19 +29,20 @@ const GenresItemsContainer: FC = ({ return ( <> - {!genresResult?.Items?.length ? ( + {!groupsGenres?.length ? (

{globalize.translate('MessageNothingHere')}

{globalize.translate('MessageNoGenresAvailable')}

) : ( - genresResult?.Items?.map((genre) => ( + groupsGenres.map(({ genre, items }) => ( )) )} diff --git a/src/apps/experimental/components/library/GenresSectionContainer.tsx b/src/apps/experimental/components/library/GenresSectionContainer.tsx index 74f57782b19..b01739732d6 100644 --- a/src/apps/experimental/components/library/GenresSectionContainer.tsx +++ b/src/apps/experimental/components/library/GenresSectionContainer.tsx @@ -1,14 +1,8 @@ import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client'; -import { ItemFields } from '@jellyfin/sdk/lib/generated-client/models/item-fields'; -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 escapeHTML from 'escape-html'; import React, { FC } from 'react'; -import { useGetItems } from 'hooks/useFetchItems'; -import Loading from 'components/loading/LoadingComponent'; import { appRouter } from 'components/router/appRouter'; import SectionContainer from './SectionContainer'; import { CollectionType } from 'types/collectionType'; @@ -18,51 +12,27 @@ interface GenresSectionContainerProps { collectionType?: CollectionType; itemType: BaseItemKind; genre: BaseItemDto; + items: BaseItemDto[]; } const GenresSectionContainer: FC = ({ parentId, collectionType, itemType, - genre + genre, + items }) => { - const getParametersOptions = () => { - return { - sortBy: [ItemSortBy.Random], - sortOrder: [SortOrder.Ascending], - includeItemTypes: [itemType], - recursive: true, - fields: [ - ItemFields.PrimaryImageAspectRatio, - ItemFields.MediaSourceCount, - ItemFields.BasicSyncInfo - ], - imageTypeLimit: 1, - enableImageTypes: [ImageType.Primary], - limit: 25, - genreIds: genre.Id ? [genre.Id] : undefined, - enableTotalRecordCount: false, - parentId: parentId ?? undefined - }; - }; - - const { isLoading, data: itemsResult } = useGetItems(getParametersOptions()); - - const getRouteUrl = (item: BaseItemDto) => { - return appRouter.getRouteUrl(item, { + const getRouteUrl = () => { + return appRouter.getRouteUrl(genre, { context: collectionType, parentId: parentId }); }; - if (isLoading) { - return ; - } - return = ({ centerText: true, cardLayout: false, shape: itemType === BaseItemKind.MusicAlbum ? 'overflowSquare' : 'overflowPortrait', - showParentTitle: itemType === BaseItemKind.MusicAlbum ? true : false, - showYear: itemType === BaseItemKind.MusicAlbum ? false : true + showParentTitle: itemType === BaseItemKind.MusicAlbum, + showYear: itemType !== BaseItemKind.MusicAlbum }} />; }; diff --git a/src/apps/experimental/components/library/ItemsContainer.tsx b/src/apps/experimental/components/library/ItemsContainer.tsx new file mode 100644 index 00000000000..d98338ab673 --- /dev/null +++ b/src/apps/experimental/components/library/ItemsContainer.tsx @@ -0,0 +1,137 @@ +import { ImageType, type BaseItemDto } from '@jellyfin/sdk/lib/generated-client'; +import React, { FC, useEffect, useCallback, useRef } from 'react'; +import globalize from 'scripts/globalize'; +import cardBuilder from 'components/cardbuilder/cardBuilder'; +import listview from 'components/listview/listview'; +import imageLoader from 'components/images/imageLoader'; +import ItemsContainerElement from 'elements/ItemsContainerElement'; +import 'elements/emby-itemscontainer/emby-itemscontainer'; +import { LibraryViewSettings, ViewMode } from 'types/library'; +import { LibraryTab } from 'types/libraryTab'; +import { CollectionType } from 'types/collectionType'; +import { CardOptions } from 'types/cardOptions'; + +interface ItemsContainerI { + libraryViewSettings: LibraryViewSettings; + viewType: LibraryTab; + collectionType?: CollectionType; + noItemsMessage: string; + items: BaseItemDto[]; +} + +const ItemsContainer: FC = ({ libraryViewSettings, viewType, collectionType, noItemsMessage, items }) => { + const element = useRef(null); + + 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; + cardOptions.items = items; + + return cardOptions; + }, [ + viewType, + collectionType, + items, + libraryViewSettings.CardLayout, + libraryViewSettings.ImageType, + libraryViewSettings.ShowTitle, + libraryViewSettings.ShowYear + ]); + + const getItemsHtml = useCallback(() => { + let html = ''; + + if (libraryViewSettings.ViewMode === ViewMode.ListView) { + html = listview.getListViewHtml({ + items: items, + context: collectionType + }); + } else { + html = cardBuilder.getCardsHtml( + items, + getCardOptions() + ); + } + + if (!items.length) { + html += '
'; + html + += '

' + globalize.translate('MessageNothingHere') + '

'; + html += '

' + globalize.translate(noItemsMessage) + '

'; + html += '
'; + } + + return html; + }, [ + getCardOptions, + collectionType, + items, + noItemsMessage, + libraryViewSettings.ViewMode + ]); + + 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 ( +
+ +
+ ); +}; + +export default ItemsContainer; diff --git a/src/apps/experimental/components/library/ItemsView.tsx b/src/apps/experimental/components/library/ItemsView.tsx new file mode 100644 index 00000000000..cc765d9c411 --- /dev/null +++ b/src/apps/experimental/components/library/ItemsView.tsx @@ -0,0 +1,183 @@ +import type { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; +import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by'; +import React, { FC } from 'react'; +import Box from '@mui/material/Box'; +import CircularProgress from '@mui/material/CircularProgress'; +import { useLocalStorage } from 'hooks/useLocalStorage'; +import { useGetItem, useGetItemsViewByType } from 'hooks/useFetchItems'; +import { getDefaultLibraryViewSettings, getSettingsKey } from 'utils/items'; +import Loading from 'components/loading/LoadingComponent'; +import { playbackManager } from 'components/playback/playbackmanager'; +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 } from 'types/library'; +import { CollectionType } from 'types/collectionType'; +import { LibraryTab } from 'types/libraryTab'; + +interface ItemsViewProps { + viewType: LibraryTab; + parentId: ParentId; + collectionType?: CollectionType; + isBtnPlayAllEnabled?: boolean; + isBtnQueueEnabled?: boolean; + isBtnShuffleEnabled?: boolean; + isBtnSortEnabled?: boolean; + isBtnFilterEnabled?: boolean; + isBtnNewCollectionEnabled?: boolean; + isBtnGridListEnabled?: boolean; + isAlphabetPickerEnabled?: boolean; + itemType: BaseItemKind[]; + noItemsMessage: string; +} + +const ItemsView: FC = ({ + 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( + getSettingsKey(viewType, parentId), + getDefaultLibraryViewSettings(viewType) + ); + + const { + isLoading, + data: itemsResult, + isFetching, + isPreviousData + } = useGetItemsViewByType( + viewType, + parentId, + itemType, + libraryViewSettings + ); + const { data: item } = useGetItem(parentId); + + 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 ( + + + + + + {isFetching ? : null} + + + {isBtnPlayAllEnabled && ( + + )} + {isBtnQueueEnabled + && item + && playbackManager.canQueue(item) && ( + + )} + {isBtnShuffleEnabled && totalRecordCount > 1 && ( + + )} + {isBtnSortEnabled && ( + + )} + {isBtnFilterEnabled && ( + + )} + {isBtnNewCollectionEnabled && } + {isBtnGridListEnabled && ( + + )} + + + {isAlphabetPickerEnabled && hasSortName && ( + + )} + + {isLoading ? ( + + ) : ( + + )} + + + + + + ); +}; + +export default ItemsView; diff --git a/src/apps/experimental/components/library/Pagination.tsx b/src/apps/experimental/components/library/Pagination.tsx index 3d1026254f4..1e6a2ab2619 100644 --- a/src/apps/experimental/components/library/Pagination.tsx +++ b/src/apps/experimental/components/library/Pagination.tsx @@ -13,15 +13,17 @@ interface PaginationProps { libraryViewSettings: LibraryViewSettings; setLibraryViewSettings: React.Dispatch>; totalRecordCount: number; + isPreviousData: boolean } const Pagination: FC = ({ 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 = ({ 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 = ({ @@ -76,7 +74,7 @@ const Pagination: FC = ({ = totalRecordCount } + disabled={startIndex + limit >= totalRecordCount || isPreviousData } onClick={onNextPageClick} > diff --git a/src/apps/experimental/components/library/RecommendationContainer.tsx b/src/apps/experimental/components/library/RecommendationContainer.tsx index 4ec8102f57a..6c8ab5cc53e 100644 --- a/src/apps/experimental/components/library/RecommendationContainer.tsx +++ b/src/apps/experimental/components/library/RecommendationContainer.tsx @@ -49,7 +49,7 @@ const RecommendationContainer: FC = ({ return ( { return [ @@ -178,7 +179,7 @@ const getSuggestionsSections = (): Sections[] => { }; interface SuggestionsItemsContainerProps { - parentId?: string | null; + parentId: ParentId; sectionsView: SectionsView[]; } diff --git a/src/apps/experimental/components/library/SuggestionsSectionContainer.tsx b/src/apps/experimental/components/library/SuggestionsSectionContainer.tsx index 4c52d712e13..7c09bf489f3 100644 --- a/src/apps/experimental/components/library/SuggestionsSectionContainer.tsx +++ b/src/apps/experimental/components/library/SuggestionsSectionContainer.tsx @@ -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 = ({ return ( ( @@ -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 @@ -86,6 +87,7 @@ const FilterButton: FC = ({ parentId, itemType, viewType, + hasFilters, libraryViewSettings, setLibraryViewSettings }) => { @@ -153,16 +155,13 @@ const FilterButton: FC = ({ return viewType === LibraryTab.Episodes; }; - const hasFilters = - Object.values(libraryViewSettings.Filters || {}).some((filter) => !!filter); - return ( diff --git a/src/apps/experimental/routes/home.tsx b/src/apps/experimental/routes/home.tsx index 3ab9c8bed7b..837db942b13 100644 --- a/src/apps/experimental/routes/home.tsx +++ b/src/apps/experimental/routes/home.tsx @@ -27,7 +27,7 @@ type ControllerProps = { const Home: FunctionComponent = () => { const [ searchParams ] = useSearchParams(); - const initialTabIndex = parseInt(searchParams.get('tab') || '0', 10); + const initialTabIndex = parseInt(searchParams.get('tab') ?? '0', 10); const tabController = useRef(); const tabControllers = useMemo(() => [], []); diff --git a/src/apps/experimental/routes/movies/CollectionsView.tsx b/src/apps/experimental/routes/movies/CollectionsView.tsx index ef574b916e5..82ce0155654 100644 --- a/src/apps/experimental/routes/movies/CollectionsView.tsx +++ b/src/apps/experimental/routes/movies/CollectionsView.tsx @@ -1,30 +1,22 @@ -import React, { FC, useCallback } from 'react'; +import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; +import React, { FC } from 'react'; -import ViewItemsContainer from 'components/common/ViewItemsContainer'; +import ItemsView from '../../components/library/ItemsView'; import { LibraryViewProps } from 'types/library'; +import { CollectionType } from 'types/collectionType'; +import { LibraryTab } from 'types/libraryTab'; const CollectionsView: FC = ({ parentId }) => { - const getBasekey = useCallback(() => { - return 'collections'; - }, []); - - const getItemTypes = useCallback(() => { - return ['BoxSet']; - }, []); - - const getNoItemsMessage = useCallback(() => { - return 'MessageNoCollectionsAvailable'; - }, []); - return ( - ); }; diff --git a/src/apps/experimental/routes/movies/FavoritesView.tsx b/src/apps/experimental/routes/movies/FavoritesView.tsx index d22cad6e385..7bb89edb15a 100644 --- a/src/apps/experimental/routes/movies/FavoritesView.tsx +++ b/src/apps/experimental/routes/movies/FavoritesView.tsx @@ -1,27 +1,17 @@ -import React, { FC, useCallback } from 'react'; +import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; +import React, { FC } from 'react'; -import ViewItemsContainer from 'components/common/ViewItemsContainer'; +import ItemsView from '../../components/library/ItemsView'; import { LibraryViewProps } from 'types/library'; +import { LibraryTab } from 'types/libraryTab'; const FavoritesView: FC = ({ parentId }) => { - const getBasekey = useCallback(() => { - return 'favorites'; - }, []); - - const getItemTypes = useCallback(() => { - return ['Movie']; - }, []); - - const getNoItemsMessage = useCallback(() => { - return 'MessageNoFavoritesAvailable'; - }, []); - return ( - ); }; diff --git a/src/apps/experimental/routes/movies/GenresView.tsx b/src/apps/experimental/routes/movies/GenresView.tsx index 05e7e216f49..a4d9d034a9b 100644 --- a/src/apps/experimental/routes/movies/GenresView.tsx +++ b/src/apps/experimental/routes/movies/GenresView.tsx @@ -1,5 +1,6 @@ import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; import React, { FC } from 'react'; + import GenresItemsContainer from '../../components/library/GenresItemsContainer'; import { LibraryViewProps } from 'types/library'; import { CollectionType } from 'types/collectionType'; diff --git a/src/apps/experimental/routes/movies/MoviesView.tsx b/src/apps/experimental/routes/movies/MoviesView.tsx index 8796c9a7111..b09f468db10 100644 --- a/src/apps/experimental/routes/movies/MoviesView.tsx +++ b/src/apps/experimental/routes/movies/MoviesView.tsx @@ -1,28 +1,20 @@ -import React, { FC, useCallback } from 'react'; +import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; +import React, { FC } from 'react'; -import ViewItemsContainer from 'components/common/ViewItemsContainer'; +import ItemsView from '../../components/library/ItemsView'; import { LibraryViewProps } from 'types/library'; +import { CollectionType } from 'types/collectionType'; +import { LibraryTab } from 'types/libraryTab'; const MoviesView: FC = ({ parentId }) => { - const getBasekey = useCallback(() => { - return 'movies'; - }, []); - - const getItemTypes = useCallback(() => { - return ['Movie']; - }, []); - - const getNoItemsMessage = useCallback(() => { - return 'MessageNoItemsAvailable'; - }, []); - return ( - ); }; diff --git a/src/apps/experimental/routes/movies/SuggestionsView.tsx b/src/apps/experimental/routes/movies/SuggestionsView.tsx index a31200f58b8..6fba733d5f2 100644 --- a/src/apps/experimental/routes/movies/SuggestionsView.tsx +++ b/src/apps/experimental/routes/movies/SuggestionsView.tsx @@ -1,4 +1,5 @@ import React, { FC } from 'react'; + import { useGetMovieRecommendations } from 'hooks/useFetchItems'; import globalize from 'scripts/globalize'; import Loading from 'components/loading/LoadingComponent'; diff --git a/src/apps/experimental/routes/movies/TrailersView.tsx b/src/apps/experimental/routes/movies/TrailersView.tsx index ff0ff0e73e1..6acfd1c8ca5 100644 --- a/src/apps/experimental/routes/movies/TrailersView.tsx +++ b/src/apps/experimental/routes/movies/TrailersView.tsx @@ -1,28 +1,17 @@ +import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; +import React, { FC } from 'react'; -import React, { FC, useCallback } from 'react'; - -import ViewItemsContainer from 'components/common/ViewItemsContainer'; +import ItemsView from '../../components/library/ItemsView'; import { LibraryViewProps } from 'types/library'; +import { LibraryTab } from 'types/libraryTab'; const TrailersView: FC = ({ parentId }) => { - const getBasekey = useCallback(() => { - return 'trailers'; - }, []); - - const getItemTypes = useCallback(() => { - return ['Trailer']; - }, []); - - const getNoItemsMessage = useCallback(() => { - return 'MessageNoTrailersFound'; - }, []); - return ( - ); }; diff --git a/src/apps/experimental/routes/movies/index.tsx b/src/apps/experimental/routes/movies/index.tsx index e1a30dfb593..8e74b7a3e47 100644 --- a/src/apps/experimental/routes/movies/index.tsx +++ b/src/apps/experimental/routes/movies/index.tsx @@ -1,13 +1,8 @@ -import 'elements/emby-scroller/emby-scroller'; -import 'elements/emby-itemscontainer/emby-itemscontainer'; -import 'elements/emby-tabs/emby-tabs'; -import 'elements/emby-button/emby-button'; - import React, { FC } from 'react'; import { useLocation, useSearchParams } from 'react-router-dom'; -import Page from 'components/Page'; import { getDefaultTabIndex } from '../../components/tabs/tabRoutes'; +import Page from 'components/Page'; import CollectionsView from './CollectionsView'; import FavoritesView from './FavoritesView'; import GenresView from './GenresView'; diff --git a/src/hooks/useFetchItems.ts b/src/hooks/useFetchItems.ts index c0ed89b85c9..06402008ca2 100644 --- a/src/hooks/useFetchItems.ts +++ b/src/hooks/useFetchItems.ts @@ -1,12 +1,13 @@ -import type { ItemsApiGetItemsRequest } from '@jellyfin/sdk/lib/generated-client'; +import type { BaseItemDto, ItemsApiGetItemsRequest } from '@jellyfin/sdk/lib/generated-client'; import { AxiosRequestConfig } from 'axios'; -import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; +import type { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type'; import { ItemFields } from '@jellyfin/sdk/lib/generated-client/models/item-fields'; import { ItemFilter } from '@jellyfin/sdk/lib/generated-client/models/item-filter'; import { SortOrder } from '@jellyfin/sdk/lib/generated-client/models/sort-order'; import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by'; +import { getArtistsApi } from '@jellyfin/sdk/lib/utils/api/artists-api'; import { getFilterApi } from '@jellyfin/sdk/lib/utils/api/filter-api'; import { getGenresApi } from '@jellyfin/sdk/lib/utils/api/genres-api'; import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api'; @@ -16,9 +17,11 @@ import { getTvShowsApi } from '@jellyfin/sdk/lib/utils/api/tv-shows-api'; import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api'; import { useQuery } from '@tanstack/react-query'; -import { JellyfinApiContext, useApi } from './useApi'; +import { type JellyfinApiContext, useApi } from './useApi'; +import { getAlphaPickerQuery, getFieldsQuery, getFiltersQuery, getLimitQuery } from 'utils/items'; import { Sections, SectionsViewType } from 'types/suggestionsSections'; -import { ParentId } from 'types/library'; +import { LibraryViewSettings, ParentId } from 'types/library'; +import { LibraryTab } from 'types/libraryTab'; const fetchGetItem = async ( currentApi: JellyfinApiContext, @@ -253,7 +256,12 @@ export const useGetItemsBySectionType = ( }); }; -const fetchGetGenres = async ( +type GroupsGenres = { + genre: BaseItemDto; + items: BaseItemDto[]; +}; + +const fetchGetGroupsGenres = async ( currentApi: JellyfinApiContext, itemType: BaseItemKind, parentId: ParentId, @@ -274,24 +282,62 @@ const fetchGetGenres = async ( signal: options?.signal } ); - return response.data; + + const groupsGenres: GroupsGenres[] = []; + const genres = response.data.Items ?? []; + for (const genre of genres) { + const responseItems = await getItemsApi(api).getItems( + { + userId: user.Id, + sortBy: [ItemSortBy.Random], + sortOrder: [SortOrder.Ascending], + includeItemTypes: [itemType], + recursive: true, + fields: [ + ItemFields.PrimaryImageAspectRatio, + ItemFields.MediaSourceCount, + ItemFields.BasicSyncInfo + ], + imageTypeLimit: 1, + enableImageTypes: [ImageType.Primary], + limit: 25, + genreIds: genre.Id ? [genre.Id] : undefined, + enableTotalRecordCount: false, + parentId: parentId ?? undefined + }, + { + signal: options?.signal + } + ); + const items = responseItems.data.Items ?? []; + if (items?.length) { + groupsGenres.push({ + genre: genre, + items: items + }); + } + } + + return groupsGenres; } }; -export const useGetGenres = (itemType: BaseItemKind, parentId: ParentId) => { +export const useGetGroupsGenres = (itemType: BaseItemKind, parentId: ParentId) => { const currentApi = useApi(); return useQuery({ - queryKey: ['Genres', parentId], + queryKey: ['GroupsGenres', itemType, parentId], queryFn: ({ signal }) => - fetchGetGenres(currentApi, itemType, parentId, { signal }), - enabled: !!parentId + fetchGetGroupsGenres(currentApi, itemType, parentId, { signal }), + enabled: !!parentId, + refetchOnWindowFocus: false, + cacheTime: 0 }); }; const fetchGetStudios = async ( currentApi: JellyfinApiContext, parentId: ParentId, - itemType: BaseItemKind, + itemType: BaseItemKind[], options?: AxiosRequestConfig ) => { const { api, user } = currentApi; @@ -299,7 +345,7 @@ const fetchGetStudios = async ( const response = await getStudiosApi(api).getStudios( { userId: user.Id, - includeItemTypes: [itemType], + includeItemTypes: itemType, fields: [ ItemFields.DateCreated, ItemFields.PrimaryImageAspectRatio @@ -316,7 +362,7 @@ const fetchGetStudios = async ( } }; -export const useGetStudios = (parentId: ParentId, itemType: BaseItemKind) => { +export const useGetStudios = (parentId: ParentId, itemType: BaseItemKind[]) => { const currentApi = useApi(); return useQuery({ queryKey: ['Studios', parentId, itemType], @@ -326,10 +372,155 @@ export const useGetStudios = (parentId: ParentId, itemType: BaseItemKind) => { }); }; +const fetchGetItemsViewByType = async ( + currentApi: JellyfinApiContext, + viewType: LibraryTab, + parentId: ParentId, + itemType: BaseItemKind[], + libraryViewSettings: LibraryViewSettings, + options?: AxiosRequestConfig +) => { + const { api, user } = currentApi; + if (api && user?.Id) { + let response; + switch (viewType) { + case LibraryTab.AlbumArtists: { + response = await getArtistsApi(api).getAlbumArtists( + { + userId: user.Id, + parentId: parentId ?? undefined, + enableImageTypes: [libraryViewSettings.ImageType, ImageType.Backdrop], + ...getFieldsQuery(viewType, libraryViewSettings), + ...getFiltersQuery(viewType, libraryViewSettings), + ...getLimitQuery(), + ...getAlphaPickerQuery(libraryViewSettings), + sortBy: [libraryViewSettings.SortBy], + sortOrder: [libraryViewSettings.SortOrder], + includeItemTypes: itemType, + startIndex: libraryViewSettings.StartIndex + }, + { + signal: options?.signal + } + ); + break; + } + case LibraryTab.Artists: { + response = await getArtistsApi(api).getArtists( + { + userId: user.Id, + parentId: parentId ?? undefined, + enableImageTypes: [libraryViewSettings.ImageType, ImageType.Backdrop], + ...getFieldsQuery(viewType, libraryViewSettings), + ...getFiltersQuery(viewType, libraryViewSettings), + ...getLimitQuery(), + ...getAlphaPickerQuery(libraryViewSettings), + sortBy: [libraryViewSettings.SortBy], + sortOrder: [libraryViewSettings.SortOrder], + includeItemTypes: itemType, + startIndex: libraryViewSettings.StartIndex + }, + { + signal: options?.signal + } + ); + break; + } + case LibraryTab.Networks: + response = await getStudiosApi(api).getStudios( + { + userId: user.Id, + parentId: parentId ?? undefined, + ...getFieldsQuery(viewType, libraryViewSettings), + includeItemTypes: itemType, + enableImageTypes: [ImageType.Thumb], + startIndex: libraryViewSettings.StartIndex + }, + { + signal: options?.signal + } + ); + break; + default: { + response = await getItemsApi(api).getItems( + { + userId: user.Id, + recursive: true, + imageTypeLimit: 1, + parentId: parentId ?? undefined, + enableImageTypes: [libraryViewSettings.ImageType, ImageType.Backdrop], + ...getFieldsQuery(viewType, libraryViewSettings), + ...getFiltersQuery(viewType, libraryViewSettings), + ...getLimitQuery(), + ...getAlphaPickerQuery(libraryViewSettings), + isFavorite: viewType === LibraryTab.Favorites ? true : undefined, + sortBy: [libraryViewSettings.SortBy], + sortOrder: [libraryViewSettings.SortOrder], + includeItemTypes: itemType, + startIndex: libraryViewSettings.StartIndex + }, + { + signal: options?.signal + } + ); + break; + } + } + return response.data; + } +}; + +export const useGetItemsViewByType = ( + viewType: LibraryTab, + parentId: ParentId, + itemType: BaseItemKind[], + libraryViewSettings: LibraryViewSettings +) => { + const currentApi = useApi(); + return useQuery({ + queryKey: [ + 'ItemsViewByType', + viewType, + parentId, + itemType, + libraryViewSettings + ], + queryFn: ({ signal }) => + fetchGetItemsViewByType( + currentApi, + viewType, + parentId, + itemType, + libraryViewSettings, + { signal } + ), + refetchOnWindowFocus: false, + keepPreviousData : true, + enabled: + [ + LibraryTab.Movies, + LibraryTab.Favorites, + LibraryTab.Collections, + LibraryTab.Trailers, + LibraryTab.Series, + LibraryTab.Episodes, + LibraryTab.Networks, + LibraryTab.Albums, + LibraryTab.AlbumArtists, + LibraryTab.Artists, + LibraryTab.Playlists, + LibraryTab.Songs, + LibraryTab.Books, + LibraryTab.Photos, + LibraryTab.Videos + ].includes(viewType) && !!parentId + }); +}; + const fetchGetQueryFiltersLegacy = async ( currentApi: JellyfinApiContext, parentId: ParentId, - itemType: BaseItemKind, + itemType: BaseItemKind[], options?: AxiosRequestConfig ) => { const { api, user } = currentApi; @@ -338,7 +529,7 @@ const fetchGetQueryFiltersLegacy = async ( { userId: user.Id, parentId: parentId ?? undefined, - includeItemTypes: [itemType] + includeItemTypes: itemType }, { signal: options?.signal @@ -350,7 +541,7 @@ const fetchGetQueryFiltersLegacy = async ( export const useGetQueryFiltersLegacy = ( parentId: ParentId, - itemType: BaseItemKind + itemType: BaseItemKind[] ) => { const currentApi = useApi(); return useQuery({ diff --git a/src/types/cardOptions.ts b/src/types/cardOptions.ts index 7864ab31577..6589782936b 100644 --- a/src/types/cardOptions.ts +++ b/src/types/cardOptions.ts @@ -1,4 +1,5 @@ import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client'; +import { CollectionType } from './collectionType'; export interface CardOptions { itemsContainer?: HTMLElement | null; @@ -32,7 +33,7 @@ export interface CardOptions { showUnplayedIndicator?: boolean; showChildCountIndicator?: boolean; lines?: number; - context?: string | null; + context?: CollectionType; action?: string | null; defaultShape?: string; indexBy?: string; diff --git a/src/types/library.ts b/src/types/library.ts index 862ee3d6d3b..37d0781cba0 100644 --- a/src/types/library.ts +++ b/src/types/library.ts @@ -8,7 +8,7 @@ import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by'; export type ParentId = string | null | undefined; export interface LibraryViewProps { - parentId: string | null; + parentId: ParentId; } export enum FeatureFilters { diff --git a/src/utils/items.ts b/src/utils/items.ts index 08936a3fde0..ce2efc8dc25 100644 --- a/src/utils/items.ts +++ b/src/utils/items.ts @@ -107,7 +107,7 @@ export const getFieldsQuery = ( export const getLimitQuery = () => { return { - limit: userSettings.libraryPageSize(undefined) || undefined + limit: userSettings.libraryPageSize(undefined) ?? undefined }; }; @@ -144,12 +144,12 @@ export const getSettingsKey = (viewType: LibraryTab, parentId: ParentId) => { return `${viewType} - ${parentId}`; }; -export const getDefaultLibraryViewSettings = (): LibraryViewSettings => { +export const getDefaultLibraryViewSettings = (viewType: LibraryTab): LibraryViewSettings => { return { ShowTitle: true, ShowYear: false, - ViewMode: ViewMode.GridView, - ImageType: ImageType.Primary, + ViewMode: viewType === LibraryTab.Songs ? ViewMode.ListView : ViewMode.GridView, + ImageType: viewType === LibraryTab.Networks ? ImageType.Thumb : ImageType.Primary, CardLayout: false, SortBy: ItemSortBy.SortName, SortOrder: SortOrder.Ascending, From 29f3bd2d91205e08d75239adfdad5c6bed28c8aa Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Thu, 21 Sep 2023 20:28:09 +0300 Subject: [PATCH 08/12] Cleanup --- .../common/AlphaPickerContainer.tsx | 59 --- src/components/common/Filter.tsx | 65 --- src/components/common/ItemsContainer.tsx | 33 -- src/components/common/NewCollection.tsx | 42 -- src/components/common/Pagination.tsx | 97 ----- src/components/common/SelectView.tsx | 54 --- src/components/common/Shuffle.tsx | 45 -- src/components/common/Sort.tsx | 58 --- src/components/common/ViewItemsContainer.tsx | 411 ------------------ src/types/interface.ts | 29 -- 10 files changed, 893 deletions(-) delete mode 100644 src/components/common/AlphaPickerContainer.tsx delete mode 100644 src/components/common/Filter.tsx delete mode 100644 src/components/common/ItemsContainer.tsx delete mode 100644 src/components/common/NewCollection.tsx delete mode 100644 src/components/common/Pagination.tsx delete mode 100644 src/components/common/SelectView.tsx delete mode 100644 src/components/common/Shuffle.tsx delete mode 100644 src/components/common/Sort.tsx delete mode 100644 src/components/common/ViewItemsContainer.tsx delete mode 100644 src/types/interface.ts diff --git a/src/components/common/AlphaPickerContainer.tsx b/src/components/common/AlphaPickerContainer.tsx deleted file mode 100644 index 6b7c9a07183..00000000000 --- a/src/components/common/AlphaPickerContainer.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React, { FC, useCallback, useEffect, useRef, useState } from 'react'; -import AlphaPicker from '../alphaPicker/alphaPicker'; -import { ViewQuerySettings } from '../../types/interface'; - -interface AlphaPickerContainerProps { - viewQuerySettings: ViewQuerySettings; - setViewQuerySettings: React.Dispatch>; -} - -const AlphaPickerContainer: FC = ({ viewQuerySettings, setViewQuerySettings }) => { - const [ alphaPicker, setAlphaPicker ] = useState(); - const element = useRef(null); - - alphaPicker?.updateControls(viewQuerySettings); - - const onAlphaPickerChange = useCallback((e) => { - const newValue = (e as CustomEvent).detail.value; - let updatedValue: React.SetStateAction; - if (newValue === '#') { - updatedValue = { - NameLessThan: 'A', - NameStartsWith: undefined - }; - } else { - updatedValue = { - NameLessThan: undefined, - NameStartsWith: newValue - }; - } - setViewQuerySettings((prevState) => ({ - ...prevState, - StartIndex: 0, - ...updatedValue - })); - }, [setViewQuerySettings]); - - useEffect(() => { - const alphaPickerElement = element.current; - - setAlphaPicker(new AlphaPicker({ - element: alphaPickerElement, - valueChangeEvent: 'click' - })); - - if (alphaPickerElement) { - alphaPickerElement.addEventListener('alphavaluechanged', onAlphaPickerChange); - } - - return () => { - alphaPickerElement?.removeEventListener('alphavaluechanged', onAlphaPickerChange); - }; - }, [onAlphaPickerChange]); - - return ( -
- ); -}; - -export default AlphaPickerContainer; diff --git a/src/components/common/Filter.tsx b/src/components/common/Filter.tsx deleted file mode 100644 index c3ccdd62f3a..00000000000 --- a/src/components/common/Filter.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React, { FC, useCallback, useEffect, useRef } from 'react'; -import IconButtonElement from '../../elements/IconButtonElement'; -import { ViewQuerySettings } from '../../types/interface'; - -interface FilterProps { - topParentId?: string | null; - getItemTypes: () => string[]; - getFilterMenuOptions: () => Record; - getVisibleFilters: () => string[]; - viewQuerySettings: ViewQuerySettings; - setViewQuerySettings: React.Dispatch>; -} - -const Filter: FC = ({ - topParentId, - getItemTypes, - getVisibleFilters, - getFilterMenuOptions, - viewQuerySettings, - setViewQuerySettings -}) => { - const element = useRef(null); - - const showFilterMenu = useCallback(() => { - import('../filtermenu/filtermenu').then(({ default: FilterMenu }) => { - const filterMenu = new FilterMenu(); - filterMenu.show({ - settings: viewQuerySettings, - visibleSettings: getVisibleFilters(), - parentId: topParentId, - itemTypes: getItemTypes(), - serverId: window.ApiClient.serverId(), - filterMenuOptions: getFilterMenuOptions(), - setfilters: setViewQuerySettings - }).catch(() => { - // filter menu closed - }); - }).catch(err => { - console.error('[Filter] failed to load filter menu', err); - }); - }, [viewQuerySettings, getVisibleFilters, topParentId, getItemTypes, getFilterMenuOptions, setViewQuerySettings]); - - useEffect(() => { - const btnFilter = element.current?.querySelector('.btnFilter'); - - btnFilter?.addEventListener('click', showFilterMenu); - - return () => { - btnFilter?.removeEventListener('click', showFilterMenu); - }; - }, [showFilterMenu]); - - return ( -
- -
- ); -}; - -export default Filter; diff --git a/src/components/common/ItemsContainer.tsx b/src/components/common/ItemsContainer.tsx deleted file mode 100644 index 6289c1d8113..00000000000 --- a/src/components/common/ItemsContainer.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React, { FC, useEffect, useRef } from 'react'; - -import ItemsContainerElement from '../../elements/ItemsContainerElement'; -import imageLoader from '../images/imageLoader'; -import '../../elements/emby-itemscontainer/emby-itemscontainer'; -import { ViewQuerySettings } from '../../types/interface'; - -interface ItemsContainerI { - viewQuerySettings: ViewQuerySettings; - getItemsHtml: () => string -} - -const ItemsContainer: FC = ({ viewQuerySettings, getItemsHtml }) => { - const element = useRef(null); - - useEffect(() => { - const itemsContainer = element.current?.querySelector('.itemsContainer') as HTMLDivElement; - itemsContainer.innerHTML = getItemsHtml(); - imageLoader.lazyChildren(itemsContainer); - }, [getItemsHtml]); - - const cssClass = viewQuerySettings.imageType == 'list' ? 'vertical-list' : 'vertical-wrap'; - - return ( -
- -
- ); -}; - -export default ItemsContainer; diff --git a/src/components/common/NewCollection.tsx b/src/components/common/NewCollection.tsx deleted file mode 100644 index 837fe85fd3f..00000000000 --- a/src/components/common/NewCollection.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React, { FC, useCallback, useEffect, useRef } from 'react'; - -import IconButtonElement from '../../elements/IconButtonElement'; - -const NewCollection: FC = () => { - const element = useRef(null); - - const showCollectionEditor = useCallback(() => { - import('../collectionEditor/collectionEditor').then(({ default: CollectionEditor }) => { - const serverId = window.ApiClient.serverId(); - const collectionEditor = new CollectionEditor(); - collectionEditor.show({ - items: [], - serverId: serverId - }).catch(() => { - // closed collection editor - }); - }).catch(err => { - console.error('[NewCollection] failed to load collection editor', err); - }); - }, []); - - useEffect(() => { - const btnNewCollection = element.current?.querySelector('.btnNewCollection'); - if (btnNewCollection) { - btnNewCollection.addEventListener('click', showCollectionEditor); - } - }, [showCollectionEditor]); - - return ( -
- -
- ); -}; - -export default NewCollection; diff --git a/src/components/common/Pagination.tsx b/src/components/common/Pagination.tsx deleted file mode 100644 index 3dd5a60ffd3..00000000000 --- a/src/components/common/Pagination.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client'; -import React, { FC, useCallback, useEffect, useRef } from 'react'; -import IconButtonElement from '../../elements/IconButtonElement'; -import globalize from '../../scripts/globalize'; -import * as userSettings from '../../scripts/settings/userSettings'; -import { ViewQuerySettings } from '../../types/interface'; - -interface PaginationProps { - viewQuerySettings: ViewQuerySettings; - setViewQuerySettings: React.Dispatch>; - itemsResult?: BaseItemDtoQueryResult; -} - -const Pagination: FC = ({ viewQuerySettings, setViewQuerySettings, itemsResult = {} }) => { - const limit = userSettings.libraryPageSize(undefined); - const totalRecordCount = itemsResult.TotalRecordCount || 0; - const startIndex = viewQuerySettings.StartIndex || 0; - const recordsStart = totalRecordCount ? startIndex + 1 : 0; - const recordsEnd = limit ? Math.min(startIndex + limit, totalRecordCount) : totalRecordCount; - const showControls = limit > 0 && limit < totalRecordCount; - const element = useRef(null); - - const onNextPageClick = useCallback(() => { - if (limit > 0) { - const newIndex = startIndex + limit; - setViewQuerySettings((prevState) => ({ - ...prevState, - StartIndex: newIndex - })); - } - }, [limit, setViewQuerySettings, startIndex]); - - const onPreviousPageClick = useCallback(() => { - if (limit > 0) { - const newIndex = Math.max(0, startIndex - limit); - setViewQuerySettings((prevState) => ({ - ...prevState, - StartIndex: newIndex - })); - } - }, [limit, setViewQuerySettings, startIndex]); - - useEffect(() => { - const btnNextPage = element.current?.querySelector('.btnNextPage') as HTMLButtonElement; - if (btnNextPage) { - if (startIndex + limit >= totalRecordCount) { - btnNextPage.disabled = true; - } else { - btnNextPage.disabled = false; - } - btnNextPage.addEventListener('click', onNextPageClick); - } - - const btnPreviousPage = element.current?.querySelector('.btnPreviousPage') as HTMLButtonElement; - if (btnPreviousPage) { - if (startIndex) { - btnPreviousPage.disabled = false; - } else { - btnPreviousPage.disabled = true; - } - btnPreviousPage.addEventListener('click', onPreviousPageClick); - } - - return () => { - btnNextPage?.removeEventListener('click', onNextPageClick); - btnPreviousPage?.removeEventListener('click', onPreviousPageClick); - }; - }, [totalRecordCount, onNextPageClick, onPreviousPageClick, limit, startIndex]); - - return ( -
-
-
- - {globalize.translate('ListPaging', recordsStart, recordsEnd, totalRecordCount)} - - {showControls && ( - <> - - - - )} -
-
-
- ); -}; - -export default Pagination; diff --git a/src/components/common/SelectView.tsx b/src/components/common/SelectView.tsx deleted file mode 100644 index bfb34555b87..00000000000 --- a/src/components/common/SelectView.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React, { FC, useCallback, useEffect, useRef } from 'react'; -import IconButtonElement from '../../elements/IconButtonElement'; -import { ViewQuerySettings } from '../../types/interface'; - -interface SelectViewProps { - getVisibleViewSettings: () => string[]; - viewQuerySettings: ViewQuerySettings; - setViewQuerySettings: React.Dispatch>; -} - -const SelectView: FC = ({ - getVisibleViewSettings, - viewQuerySettings, - setViewQuerySettings -}) => { - const element = useRef(null); - - const showViewSettingsMenu = useCallback(() => { - import('../viewSettings/viewSettings').then(({ default: ViewSettings }) => { - const viewsettings = new ViewSettings(); - viewsettings.show({ - settings: viewQuerySettings, - visibleSettings: getVisibleViewSettings(), - setviewsettings: setViewQuerySettings - }).catch(() => { - // view settings closed - }); - }).catch(err => { - console.error('[SelectView] failed to load view settings', err); - }); - }, [getVisibleViewSettings, viewQuerySettings, setViewQuerySettings]); - - useEffect(() => { - const btnSelectView = element.current?.querySelector('.btnSelectView') as HTMLButtonElement; - btnSelectView?.addEventListener('click', showViewSettingsMenu); - - return () => { - btnSelectView?.removeEventListener('click', showViewSettingsMenu); - }; - }, [showViewSettingsMenu]); - - return ( -
- -
- ); -}; - -export default SelectView; diff --git a/src/components/common/Shuffle.tsx b/src/components/common/Shuffle.tsx deleted file mode 100644 index 093dc748744..00000000000 --- a/src/components/common/Shuffle.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client'; -import React, { FC, useCallback, useEffect, useRef } from 'react'; - -import { playbackManager } from '../playback/playbackmanager'; -import IconButtonElement from '../../elements/IconButtonElement'; - -interface ShuffleProps { - itemsResult?: BaseItemDtoQueryResult; - topParentId: string | null; -} - -const Shuffle: FC = ({ itemsResult = {}, topParentId }) => { - const element = useRef(null); - - const shuffle = useCallback(() => { - window.ApiClient.getItem( - window.ApiClient.getCurrentUserId(), - topParentId as string - ).then((item) => { - playbackManager.shuffle(item); - }).catch(err => { - console.error('[Shuffle] failed to fetch items', err); - }); - }, [topParentId]); - - useEffect(() => { - const btnShuffle = element.current?.querySelector('.btnShuffle'); - if (btnShuffle) { - btnShuffle.addEventListener('click', shuffle); - } - }, [itemsResult.TotalRecordCount, shuffle]); - - return ( -
- -
- ); -}; - -export default Shuffle; diff --git a/src/components/common/Sort.tsx b/src/components/common/Sort.tsx deleted file mode 100644 index db5cb899562..00000000000 --- a/src/components/common/Sort.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React, { FC, useCallback, useEffect, useRef } from 'react'; -import IconButtonElement from '../../elements/IconButtonElement'; -import { ViewQuerySettings } from '../../types/interface'; - -interface SortProps { - getSortMenuOptions: () => { - name: string; - value: string; - }[]; - viewQuerySettings: ViewQuerySettings; - setViewQuerySettings: React.Dispatch>; -} - -const Sort: FC = ({ - getSortMenuOptions, - viewQuerySettings, - setViewQuerySettings -}) => { - const element = useRef(null); - - const showSortMenu = useCallback(() => { - import('../sortmenu/sortmenu').then(({ default: SortMenu }) => { - const sortMenu = new SortMenu(); - sortMenu.show({ - settings: viewQuerySettings, - sortOptions: getSortMenuOptions(), - setSortValues: setViewQuerySettings - }).catch(() => { - // sort menu closed - }); - }).catch(err => { - console.error('[Sort] failed to load sort menu', err); - }); - }, [getSortMenuOptions, viewQuerySettings, setViewQuerySettings]); - - useEffect(() => { - const btnSort = element.current?.querySelector('.btnSort'); - - btnSort?.addEventListener('click', showSortMenu); - - return () => { - btnSort?.removeEventListener('click', showSortMenu); - }; - }, [showSortMenu]); - - return ( -
- -
- ); -}; - -export default Sort; diff --git a/src/components/common/ViewItemsContainer.tsx b/src/components/common/ViewItemsContainer.tsx deleted file mode 100644 index 1ea5ef9899d..00000000000 --- a/src/components/common/ViewItemsContainer.tsx +++ /dev/null @@ -1,411 +0,0 @@ -import { type BaseItemDtoQueryResult, ItemFields, ItemFilter } from '@jellyfin/sdk/lib/generated-client'; -import React, { FC, useCallback, useEffect, useRef, useState } from 'react'; - -import loading from '../loading/loading'; -import * as userSettings from '../../scripts/settings/userSettings'; -import AlphaPickerContainer from './AlphaPickerContainer'; -import Filter from './Filter'; -import ItemsContainer from './ItemsContainer'; -import Pagination from './Pagination'; -import SelectView from './SelectView'; -import Shuffle from './Shuffle'; -import Sort from './Sort'; -import NewCollection from './NewCollection'; -import globalize from '../../scripts/globalize'; -import ServerConnections from '../ServerConnections'; -import { useLocalStorage } from '../../hooks/useLocalStorage'; -import listview from '../listview/listview'; -import cardBuilder from '../cardbuilder/cardBuilder'; - -import { ViewQuerySettings } from '../../types/interface'; -import { CardOptions } from '../../types/cardOptions'; - -interface ViewItemsContainerProps { - topParentId: string | null; - isBtnShuffleEnabled?: boolean; - isBtnFilterEnabled?: boolean; - isBtnNewCollectionEnabled?: boolean; - isAlphaPickerEnabled?: boolean; - getBasekey: () => string; - getItemTypes: () => string[]; - getNoItemsMessage: () => string; -} - -const getDefaultSortBy = () => { - return 'SortName'; -}; - -const getFields = (viewQuerySettings: ViewQuerySettings) => { - const fields: ItemFields[] = [ - ItemFields.BasicSyncInfo, - ItemFields.MediaSourceCount - ]; - - if (viewQuerySettings.imageType === 'primary') { - fields.push(ItemFields.PrimaryImageAspectRatio); - } - - return fields.join(','); -}; - -const getFilters = (viewQuerySettings: ViewQuerySettings) => { - const filters: ItemFilter[] = []; - - if (viewQuerySettings.IsPlayed) { - filters.push(ItemFilter.IsPlayed); - } - - if (viewQuerySettings.IsUnplayed) { - filters.push(ItemFilter.IsUnplayed); - } - - if (viewQuerySettings.IsFavorite) { - filters.push(ItemFilter.IsFavorite); - } - - if (viewQuerySettings.IsResumable) { - filters.push(ItemFilter.IsResumable); - } - - return filters; -}; - -const getVisibleViewSettings = () => { - return [ - 'showTitle', - 'showYear', - 'imageType', - 'cardLayout' - ]; -}; - -const getFilterMenuOptions = () => { - return {}; -}; - -const getVisibleFilters = () => { - return [ - 'IsUnplayed', - 'IsPlayed', - 'IsFavorite', - 'IsResumable', - 'VideoType', - 'HasSubtitles', - 'HasTrailer', - 'HasSpecialFeature', - 'HasThemeSong', - 'HasThemeVideo' - ]; -}; - -const getSortMenuOptions = () => { - return [{ - name: globalize.translate('Name'), - value: 'SortName,ProductionYear' - }, { - name: globalize.translate('OptionRandom'), - value: 'Random' - }, { - name: globalize.translate('OptionImdbRating'), - value: 'CommunityRating,SortName,ProductionYear' - }, { - name: globalize.translate('OptionCriticRating'), - value: 'CriticRating,SortName,ProductionYear' - }, { - name: globalize.translate('OptionDateAdded'), - value: 'DateCreated,SortName,ProductionYear' - }, { - name: globalize.translate('OptionDatePlayed'), - value: 'DatePlayed,SortName,ProductionYear' - }, { - name: globalize.translate('OptionParentalRating'), - value: 'OfficialRating,SortName,ProductionYear' - }, { - name: globalize.translate('OptionPlayCount'), - value: 'PlayCount,SortName,ProductionYear' - }, { - name: globalize.translate('OptionReleaseDate'), - value: 'PremiereDate,SortName,ProductionYear' - }, { - name: globalize.translate('Runtime'), - value: 'Runtime,SortName,ProductionYear' - }]; -}; - -const defaultViewQuerySettings: ViewQuerySettings = { - showTitle: true, - showYear: true, - imageType: 'primary', - viewType: '', - cardLayout: false, - SortBy: getDefaultSortBy(), - SortOrder: 'Ascending', - IsPlayed: false, - IsUnplayed: false, - IsFavorite: false, - IsResumable: false, - Is4K: null, - IsHD: null, - IsSD: null, - Is3D: null, - VideoTypes: '', - SeriesStatus: '', - HasSubtitles: null, - HasTrailer: null, - HasSpecialFeature: null, - HasThemeSong: null, - HasThemeVideo: null, - GenreIds: '', - StartIndex: 0 -}; - -const ViewItemsContainer: FC = ({ - topParentId, - isBtnShuffleEnabled = false, - isBtnFilterEnabled = true, - isBtnNewCollectionEnabled = false, - isAlphaPickerEnabled = true, - getBasekey, - getItemTypes, - getNoItemsMessage -}) => { - const getSettingsKey = useCallback(() => { - return `${topParentId} - ${getBasekey()}`; - }, [getBasekey, topParentId]); - - const [isLoading, setisLoading] = useState(false); - - const [viewQuerySettings, setViewQuerySettings] = useLocalStorage( - `viewQuerySettings - ${getSettingsKey()}`, - defaultViewQuerySettings - ); - - const [ itemsResult, setItemsResult ] = useState({}); - - const element = useRef(null); - - const getContext = useCallback(() => { - const itemType = getItemTypes().join(','); - if (itemType === 'Movie' || itemType === 'BoxSet') { - return 'movies'; - } - - return null; - }, [getItemTypes]); - - const getCardOptions = useCallback(() => { - let shape; - let preferThumb; - let preferDisc; - let preferLogo; - - if (viewQuerySettings.imageType === 'banner') { - shape = 'banner'; - } else if (viewQuerySettings.imageType === 'disc') { - shape = 'square'; - preferDisc = true; - } else if (viewQuerySettings.imageType === 'logo') { - shape = 'backdrop'; - preferLogo = true; - } else if (viewQuerySettings.imageType === 'thumb') { - shape = 'backdrop'; - preferThumb = true; - } else { - shape = 'autoVertical'; - } - - const cardOptions: CardOptions = { - shape: shape, - showTitle: viewQuerySettings.showTitle, - showYear: viewQuerySettings.showYear, - cardLayout: viewQuerySettings.cardLayout, - centerText: true, - context: getContext(), - coverImage: true, - preferThumb: preferThumb, - preferDisc: preferDisc, - preferLogo: preferLogo, - overlayPlayButton: false, - overlayMoreButton: true, - overlayText: !viewQuerySettings.showTitle - }; - - cardOptions.items = itemsResult.Items || []; - - return cardOptions; - }, [ - getContext, - itemsResult.Items, - viewQuerySettings.cardLayout, - viewQuerySettings.imageType, - viewQuerySettings.showTitle, - viewQuerySettings.showYear - ]); - - const getItemsHtml = useCallback(() => { - let html = ''; - - if (viewQuerySettings.imageType === 'list') { - html = listview.getListViewHtml({ - items: itemsResult.Items || [], - context: getContext() - }); - } else { - html = cardBuilder.getCardsHtml(itemsResult.Items || [], getCardOptions()); - } - - if (!itemsResult.Items?.length) { - html += '
'; - html += '

' + globalize.translate('MessageNothingHere') + '

'; - html += '

' + globalize.translate(getNoItemsMessage()) + '

'; - html += '
'; - } - - return html; - }, [getCardOptions, getContext, itemsResult.Items, getNoItemsMessage, viewQuerySettings.imageType]); - - const getQuery = useCallback(() => { - const queryFilters = getFilters(viewQuerySettings); - - let queryIsHD; - - if (viewQuerySettings.IsHD) { - queryIsHD = true; - } - - if (viewQuerySettings.IsSD) { - queryIsHD = false; - } - - return { - SortBy: viewQuerySettings.SortBy, - SortOrder: viewQuerySettings.SortOrder, - IncludeItemTypes: getItemTypes().join(','), - Recursive: true, - Fields: getFields(viewQuerySettings), - ImageTypeLimit: 1, - EnableImageTypes: 'Primary,Backdrop,Banner,Thumb,Disc,Logo', - Limit: userSettings.libraryPageSize(undefined) || undefined, - IsFavorite: getBasekey() === 'favorites' ? true : null, - VideoTypes: viewQuerySettings.VideoTypes, - GenreIds: viewQuerySettings.GenreIds, - Is4K: viewQuerySettings.Is4K ? true : null, - IsHD: queryIsHD, - Is3D: viewQuerySettings.Is3D ? true : null, - HasSubtitles: viewQuerySettings.HasSubtitles ? true : null, - HasTrailer: viewQuerySettings.HasTrailer ? true : null, - HasSpecialFeature: viewQuerySettings.HasSpecialFeature ? true : null, - HasThemeSong: viewQuerySettings.HasThemeSong ? true : null, - HasThemeVideo: viewQuerySettings.HasThemeVideo ? true : null, - Filters: queryFilters.length ? queryFilters.join(',') : null, - StartIndex: viewQuerySettings.StartIndex, - NameLessThan: viewQuerySettings.NameLessThan, - NameStartsWith: viewQuerySettings.NameStartsWith, - ParentId: topParentId - }; - }, [ - viewQuerySettings, - getItemTypes, - getBasekey, - topParentId - ]); - - const fetchData = useCallback(() => { - loading.show(); - - const apiClient = ServerConnections.getApiClient(window.ApiClient.serverId()); - return apiClient.getItems( - apiClient.getCurrentUserId(), - { - ...getQuery() - } - ); - }, [getQuery]); - - const reloadItems = useCallback(() => { - const page = element.current; - - if (!page) { - console.error('Unexpected null reference'); - return; - } - setisLoading(false); - fetchData().then((result) => { - setItemsResult(result); - - window.scrollTo(0, 0); - - import('../../components/autoFocuser').then(({ default: autoFocuser }) => { - autoFocuser.autoFocus(page); - }).catch(err => { - console.error('[ViewItemsContainer] failed to load autofocuser', err); - }); - loading.hide(); - setisLoading(true); - }).catch(err => { - console.error('[ViewItemsContainer] failed to fetch data', err); - }); - }, [fetchData]); - - useEffect(() => { - reloadItems(); - }, [reloadItems]); - - return ( -
-
- - - {isBtnShuffleEnabled && } - - - - - - {isBtnFilterEnabled && } - - {isBtnNewCollectionEnabled && } - -
- - {isAlphaPickerEnabled && } - - {isLoading && } - -
- -
-
- ); -}; - -export default ViewItemsContainer; diff --git a/src/types/interface.ts b/src/types/interface.ts deleted file mode 100644 index c577f84e2a3..00000000000 --- a/src/types/interface.ts +++ /dev/null @@ -1,29 +0,0 @@ -export interface ViewQuerySettings { - showTitle?: boolean; - showYear?: boolean; - imageType?: string; - viewType?: string; - cardLayout?: boolean; - SortBy?: string | null; - SortOrder?: string | null; - IsPlayed?: boolean | null; - IsUnplayed?: boolean | null; - IsFavorite?: boolean | null; - IsResumable?: boolean | null; - Is4K?: boolean | null; - IsHD?: boolean | null; - IsSD?: boolean | null; - Is3D?: boolean | null; - VideoTypes?: string | null; - SeriesStatus?: string | null; - HasSubtitles?: boolean | null; - HasTrailer?: boolean | null; - HasSpecialFeature?: boolean | null; - ParentIndexNumber?: boolean | null; - HasThemeSong?: boolean | null; - HasThemeVideo?: boolean | null; - GenreIds?: string | null; - NameLessThan?: string | null; - NameStartsWith?: string | null; - StartIndex?: number; -} From 19a066a38b7c48755054c51c8b500ce28979fc02 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Thu, 21 Sep 2023 20:29:51 +0300 Subject: [PATCH 09/12] Remove unused code --- src/components/filtermenu/filtermenu.js | 49 ++++++------------- src/components/sortmenu/sortmenu.js | 21 +++----- src/components/viewSettings/viewSettings.js | 25 +++------- .../viewSettings/viewSettings.template.html | 7 --- 4 files changed, 27 insertions(+), 75 deletions(-) diff --git a/src/components/filtermenu/filtermenu.js b/src/components/filtermenu/filtermenu.js index d7e9c876507..4ae7d8dc0ef 100644 --- a/src/components/filtermenu/filtermenu.js +++ b/src/components/filtermenu/filtermenu.js @@ -102,8 +102,16 @@ function onInputCommand(e) { break; } } -function saveValues(context, settings, settingsKey, setfilters) { + +function saveValues(context, settings, settingsKey) { let elems = context.querySelectorAll('.simpleFilter'); + for (let i = 0, length = elems.length; i < length; i++) { + if (elems[i].tagName === 'INPUT') { + setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i]); + } else { + setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input')); + } + } // Video type const videoTypes = []; @@ -114,6 +122,7 @@ function saveValues(context, settings, settingsKey, setfilters) { videoTypes.push(elems[i].getAttribute('data-filter')); } } + userSettings.setFilter(settingsKey + '-filter-VideoTypes', videoTypes.join(',')); // Series status const seriesStatuses = []; @@ -124,6 +133,7 @@ function saveValues(context, settings, settingsKey, setfilters) { seriesStatuses.push(elems[i].getAttribute('data-filter')); } } + userSettings.setFilter(`${settingsKey}-filter-SeriesStatus`, seriesStatuses.join(',')); // Genres const genres = []; @@ -134,40 +144,9 @@ function saveValues(context, settings, settingsKey, setfilters) { genres.push(elems[i].getAttribute('data-filter')); } } - - if (setfilters) { - setfilters((prevState) => ({ - ...prevState, - StartIndex: 0, - IsPlayed: context.querySelector('.chkPlayed').checked, - IsUnplayed: context.querySelector('.chkUnplayed').checked, - IsFavorite: context.querySelector('.chkFavorite').checked, - IsResumable: context.querySelector('.chkResumable').checked, - Is4K: context.querySelector('.chk4KFilter').checked, - IsHD: context.querySelector('.chkHDFilter').checked, - IsSD: context.querySelector('.chkSDFilter').checked, - Is3D: context.querySelector('.chk3DFilter').checked, - VideoTypes: videoTypes.join(','), - SeriesStatus: seriesStatuses.join(','), - HasSubtitles: context.querySelector('.chkSubtitle').checked, - HasTrailer: context.querySelector('.chkTrailer').checked, - HasSpecialFeature: context.querySelector('.chkSpecialFeature').checked, - HasThemeSong: context.querySelector('.chkThemeSong').checked, - HasThemeVideo: context.querySelector('.chkThemeVideo').checked, - GenreIds: genres.join(',') - })); - } else { - for (let i = 0, length = elems.length; i < length; i++) { - if (elems[i].tagName === 'INPUT') { - setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i]); - } else { - setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input')); - } - } - - userSettings.setFilter(settingsKey + '-filter-GenreIds', genres.join(',')); - } + userSettings.setFilter(settingsKey + '-filter-GenreIds', genres.join(',')); } + function bindCheckboxInput(context, on) { const elems = context.querySelectorAll('.checkboxList-verticalwrap'); for (let i = 0, length = elems.length; i < length; i++) { @@ -297,7 +276,7 @@ class FilterMenu { } if (submitted) { - saveValues(dlg, options.settings, options.settingsKey, options.setfilters); + saveValues(dlg, options.settings, options.settingsKey); return resolve(); } return resolve(); diff --git a/src/components/sortmenu/sortmenu.js b/src/components/sortmenu/sortmenu.js index 65aef222e9d..39d42362bff 100644 --- a/src/components/sortmenu/sortmenu.js +++ b/src/components/sortmenu/sortmenu.js @@ -18,8 +18,8 @@ function onSubmit(e) { function initEditor(context, settings) { context.querySelector('form').addEventListener('submit', onSubmit); - context.querySelector('.selectSortOrder').value = settings.SortOrder; - context.querySelector('.selectSortBy').value = settings.SortBy; + context.querySelector('.selectSortOrder').value = settings.sortOrder; + context.querySelector('.selectSortBy').value = settings.sortBy; } function centerFocus(elem, horiz, on) { @@ -37,18 +37,9 @@ function fillSortBy(context, options) { }).join(''); } -function saveValues(context, settingsKey, setSortValues) { - if (setSortValues) { - setSortValues((prevState) => ({ - ...prevState, - StartIndex: 0, - SortBy: context.querySelector('.selectSortBy').value, - SortOrder: context.querySelector('.selectSortOrder').value - })); - } else { - userSettings.setFilter(settingsKey + '-sortorder', context.querySelector('.selectSortOrder').value); - userSettings.setFilter(settingsKey + '-sortby', context.querySelector('.selectSortBy').value); - } +function saveValues(context, settingsKey) { + userSettings.setFilter(settingsKey + '-sortorder', context.querySelector('.selectSortOrder').value); + userSettings.setFilter(settingsKey + '-sortby', context.querySelector('.selectSortBy').value); } class SortMenu { @@ -104,7 +95,7 @@ class SortMenu { } if (submitted) { - saveValues(dlg, options.settingsKey, options.setSortValues); + saveValues(dlg, options.settingsKey); resolve(); return; } diff --git a/src/components/viewSettings/viewSettings.js b/src/components/viewSettings/viewSettings.js index f5cb864206a..9c4b64710f6 100644 --- a/src/components/viewSettings/viewSettings.js +++ b/src/components/viewSettings/viewSettings.js @@ -29,24 +29,13 @@ function initEditor(context, settings) { context.querySelector('.selectImageType').value = settings.imageType || 'primary'; } -function saveValues(context, settings, settingsKey, setviewsettings) { - if (setviewsettings) { - setviewsettings((prevState) => ({ - ...prevState, - StartIndex: 0, - imageType: context.querySelector('.selectImageType').value, - showTitle: context.querySelector('.chkShowTitle').checked || false, - showYear: context.querySelector('.chkShowYear').checked || false, - cardLayout: context.querySelector('.chkEnableCardLayout').checked || false - })); - } else { - const elems = context.querySelectorAll('.viewSetting-checkboxContainer'); - for (const elem of elems) { - userSettings.set(settingsKey + '-' + elem.getAttribute('data-settingname'), elem.querySelector('input').checked); - } - - userSettings.set(settingsKey + '-imageType', context.querySelector('.selectImageType').value); +function saveValues(context, settings, settingsKey) { + const elems = context.querySelectorAll('.viewSetting-checkboxContainer'); + for (const elem of elems) { + userSettings.set(settingsKey + '-' + elem.getAttribute('data-settingname'), elem.querySelector('input').checked); } + + userSettings.set(settingsKey + '-imageType', context.querySelector('.selectImageType').value); } function centerFocus(elem, horiz, on) { @@ -137,7 +126,7 @@ class ViewSettings { } if (submitted) { - saveValues(dlg, options.settings, options.settingsKey, options.setviewsettings); + saveValues(dlg, options.settings, options.settingsKey); return resolve(); } diff --git a/src/components/viewSettings/viewSettings.template.html b/src/components/viewSettings/viewSettings.template.html index ddee9536baf..df9767fb75b 100644 --- a/src/components/viewSettings/viewSettings.template.html +++ b/src/components/viewSettings/viewSettings.template.html @@ -35,13 +35,6 @@ ${GroupBySeries}
- -
- -
From 267c7a7cca0beea503539ea6abf78787e5ec595a Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Thu, 21 Sep 2023 20:32:09 +0300 Subject: [PATCH 10/12] Add UpComingContainer --- .../components/library/UpComingContainer.tsx | 87 +++++++++++++++++++ src/hooks/useFetchItems.ts | 38 ++++++++ 2 files changed, 125 insertions(+) create mode 100644 src/apps/experimental/components/library/UpComingContainer.tsx diff --git a/src/apps/experimental/components/library/UpComingContainer.tsx b/src/apps/experimental/components/library/UpComingContainer.tsx new file mode 100644 index 00000000000..318eebb2ef7 --- /dev/null +++ b/src/apps/experimental/components/library/UpComingContainer.tsx @@ -0,0 +1,87 @@ +import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client'; +import React, { FC, useCallback, useEffect, useState } from 'react'; +import datetime from 'scripts/datetime'; +import globalize from 'scripts/globalize'; +import SectionContainer from './SectionContainer'; + +interface UpComingContainerProps { + parentId?: string | null; + items: BaseItemDto[]; +} + +type GroupsArr = { + name: string; + items: BaseItemDto[]; +}; + +const UpComingContainer: FC = ({ items }) => { + const [groupsItems, setGroupsItems] = useState([]); + + const renderUpcoming = useCallback(() => { + const groups: GroupsArr[] = []; + let currentGroupName = ''; + let currentGroup: BaseItemDto[] = []; + + for (const item of items) { + let dateText = ''; + + if (item.PremiereDate) { + try { + const premiereDate = datetime.parseISO8601Date(item.PremiereDate, true); + dateText = datetime.isRelativeDay(premiereDate, -1) ? globalize.translate('Yesterday') : datetime.toLocaleDateString(premiereDate, { + weekday: 'long', + month: 'short', + day: 'numeric' + }); + } catch (err) { + console.error('error parsing timestamp for upcoming tv shows'); + } + } + + if (dateText != currentGroupName) { + if (currentGroup.length) { + groups.push({ + name: currentGroupName, + items: currentGroup + }); + } + + currentGroupName = dateText; + currentGroup = [item]; + } else { + currentGroup.push(item); + } + } + + setGroupsItems(groups); + }, [items]); + + useEffect(() => { + renderUpcoming(); + }, [renderUpcoming]); + + return ( + <> + {groupsItems?.map((group) => ( + + ))} + + + ); +}; + +export default UpComingContainer; diff --git a/src/hooks/useFetchItems.ts b/src/hooks/useFetchItems.ts index 06402008ca2..c254eb82c8f 100644 --- a/src/hooks/useFetchItems.ts +++ b/src/hooks/useFetchItems.ts @@ -553,3 +553,41 @@ export const useGetQueryFiltersLegacy = ( enabled: !!parentId }); }; + +const fetchGetUpcomingEpisodes = async ( + currentApi: JellyfinApiContext, + parentId: ParentId, + signal: AbortSignal | undefined +) => { + const { api, user } = currentApi; + if (api && user?.Id) { + const response = await getTvShowsApi(api).getUpcomingEpisodes( + { + userId: user.Id, + limit: 25, + fields: [ItemFields.AirTime], + parentId: parentId ?? undefined, + imageTypeLimit: 1, + enableImageTypes: [ + ImageType.Primary, + ImageType.Backdrop, + ImageType.Thumb + ] + }, + { + signal: signal + } + ); + return response.data; + } +}; + +export const useGetUpcomingEpisodes = (parentId: ParentId) => { + const currentApi = useApi(); + return useQuery({ + queryKey: ['UpcomingEpisodes', parentId], + queryFn: ({ signal }) => + fetchGetUpcomingEpisodes(currentApi, parentId, signal), + enabled: !!parentId + }); +}; From 39cb646c13a9dd3dfa54e887eb8e0d1a2b6bf42e Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Thu, 21 Sep 2023 20:38:50 +0300 Subject: [PATCH 11/12] Add FavoriteItemsContainer & FavoritesSectionContainer --- .../library/FavoriteItemsContainer.tsx | 221 ++++++++++++++++++ .../library/FavoritesSectionContainer.tsx | 50 ++++ src/hooks/useFetchItems.ts | 157 +++++++++++-- src/strings/en-us.json | 11 + src/types/suggestionsSections.ts | 13 ++ 5 files changed, 436 insertions(+), 16 deletions(-) create mode 100644 src/apps/experimental/components/library/FavoriteItemsContainer.tsx create mode 100644 src/apps/experimental/components/library/FavoritesSectionContainer.tsx diff --git a/src/apps/experimental/components/library/FavoriteItemsContainer.tsx b/src/apps/experimental/components/library/FavoriteItemsContainer.tsx new file mode 100644 index 00000000000..90b08867ebd --- /dev/null +++ b/src/apps/experimental/components/library/FavoriteItemsContainer.tsx @@ -0,0 +1,221 @@ +import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client'; +import React, { FC } from 'react'; +import FavoritesSectionContainer from './FavoritesSectionContainer'; +import { ParentId } from 'types/library'; +import { SectionsView, SectionsViewType } from 'types/suggestionsSections'; + +function getFavoriteSections() { + return [ + { + name: 'HeaderFavoriteMovies', + type: 'Movie', + view: SectionsView.FavoriteMovies, + parametersOptions: { + includeItemTypes: [BaseItemKind.Movie] + }, + cardOptions: { + shape: 'overflowPortrait', + showTitle: true, + showYear: true, + overlayPlayButton: true, + overlayText: false, + centerText: true + } + }, + { + name: 'HeaderFavoriteShows', + type: 'Series', + view: SectionsView.FavoriteShows, + parametersOptions: { + includeItemTypes: [BaseItemKind.Series] + }, + cardOptions: { + shape: 'overflowPortrait', + showTitle: true, + showYear: true, + overlayPlayButton: true, + overlayText: false, + centerText: true + } + }, + { + name: 'HeaderFavoriteEpisodes', + type: 'Episode', + view: SectionsView.FavoriteEpisode, + parametersOptions: { + includeItemTypes: [BaseItemKind.Episode] + }, + cardOptions: { + shape: 'overflowBackdrop', + preferThumb: false, + showTitle: true, + showParentTitle: true, + overlayPlayButton: true, + overlayText: false, + centerText: true + } + }, + { + name: 'HeaderFavoriteVideos', + type: 'Video,MusicVideo', + view: SectionsView.FavoriteVideos, + parametersOptions: { + includeItemTypes: [BaseItemKind.Video, BaseItemKind.MusicVideo] + }, + cardOptions: { + shape: 'overflowBackdrop', + preferThumb: true, + showTitle: true, + overlayPlayButton: true, + overlayText: false, + centerText: true + } + }, + { + name: 'HeaderFavoriteCollections', + type: 'BoxSet', + view: SectionsView.FavoriteCollections, + parametersOptions: { + includeItemTypes: [BaseItemKind.BoxSet] + }, + cardOptions: { + shape: 'overflowPortrait', + showTitle: true, + overlayPlayButton: true, + overlayText: false, + centerText: true + } + }, + { + name: 'HeaderFavoritePlaylists', + type: 'Playlist', + view: SectionsView.FavoritePlaylists, + parametersOptions: { + includeItemTypes: [BaseItemKind.Playlist] + }, + cardOptions: { + shape: 'overflowSquare', + preferThumb: false, + showTitle: true, + overlayText: false, + showParentTitle: false, + centerText: true, + overlayPlayButton: true, + coverImage: true + } + }, + { + name: 'HeaderFavoritePersons', + viewType: SectionsViewType.Persons, + type: 'Person', + view: SectionsView.FavoritePeople, + cardOptions: { + shape: 'overflowPortrait', + preferThumb: false, + showTitle: true, + overlayText: false, + showParentTitle: false, + centerText: true, + overlayPlayButton: true, + coverImage: true + } + }, + { + name: 'HeaderFavoriteArtists', + viewType: SectionsViewType.Artists, + type: 'MusicArtist', + view: SectionsView.FavoriteArtists, + cardOptions: { + shape: 'overflowSquare', + preferThumb: false, + showTitle: true, + overlayText: false, + showParentTitle: false, + centerText: true, + overlayPlayButton: true, + coverImage: true + } + }, + { + name: 'HeaderFavoriteAlbums', + type: 'MusicAlbum', + view: SectionsView.FavoriteAlbums, + parametersOptions: { + includeItemTypes: [BaseItemKind.MusicAlbum] + }, + cardOptions: { + shape: 'overflowSquare', + preferThumb: false, + showTitle: true, + overlayText: false, + showParentTitle: true, + centerText: true, + overlayPlayButton: true, + coverImage: true + } + }, + { + name: 'HeaderFavoriteSongs', + type: 'Audio', + view: SectionsView.FavoriteSongs, + parametersOptions: { + includeItemTypes: [BaseItemKind.Audio] + }, + cardOptions: { + shape: 'overflowSquare', + preferThumb: false, + showTitle: true, + overlayText: false, + showParentTitle: true, + centerText: true, + overlayMoreButton: true, + action: 'instantmix', + coverImage: true + } + }, + { + name: 'HeaderFavoriteBooks', + type: 'Book', + view: SectionsView.FavoriteBooks, + parametersOptions: { + includeItemTypes: [BaseItemKind.Book] + }, + cardOptions: { + shape: 'overflowPortrait', + showTitle: true, + showYear: true, + overlayPlayButton: true, + overlayText: false, + centerText: true + } + } + ]; +} + +interface FavoriteItemsContainerProps { + parentId?: ParentId; + sectionsView: SectionsView[]; +} + +const FavoriteItemsContainer: FC = ({ + parentId, + sectionsView +}) => { + const favoriteSections = getFavoriteSections(); + + return ( + <> + {favoriteSections + .filter((section) => sectionsView.includes(section.view)) + .map((section) => ( + + ))} + + ); +}; + +export default FavoriteItemsContainer; diff --git a/src/apps/experimental/components/library/FavoritesSectionContainer.tsx b/src/apps/experimental/components/library/FavoritesSectionContainer.tsx new file mode 100644 index 00000000000..765d8936986 --- /dev/null +++ b/src/apps/experimental/components/library/FavoritesSectionContainer.tsx @@ -0,0 +1,50 @@ +import React, { FC } from 'react'; +import SectionContainer from './SectionContainer'; +import globalize from 'scripts/globalize'; +import Loading from 'components/loading/LoadingComponent'; +import { appRouter } from 'components/router/appRouter'; +import { Sections } from 'types/suggestionsSections'; +import { useGetItemsByFavoriteType } from 'hooks/useFetchItems'; + +interface FavoritesSectionContainerProps { + parentId?: string | null; + section: Sections; +} + +const FavoritesSectionContainer: FC = ({ + parentId, + section +}) => { + const getRouteUrl = () => { + return appRouter.getRouteUrl('list', { + serverId: window.ApiClient.serverId(), + itemTypes: section.type, + isFavorite: true + }); + }; + + const { isLoading, data: items } = useGetItemsByFavoriteType( + section, + parentId + ); + + if (isLoading) { + return ; + } + + return ( + + ); +}; + +export default FavoritesSectionContainer; diff --git a/src/hooks/useFetchItems.ts b/src/hooks/useFetchItems.ts index c254eb82c8f..5e51d72655a 100644 --- a/src/hooks/useFetchItems.ts +++ b/src/hooks/useFetchItems.ts @@ -1,7 +1,11 @@ -import type { BaseItemDto, ItemsApiGetItemsRequest } from '@jellyfin/sdk/lib/generated-client'; +import { + LocationType, + type BaseItemDto, + type ItemsApiGetItemsRequest, + type BaseItemKind +} from '@jellyfin/sdk/lib/generated-client'; import { AxiosRequestConfig } from 'axios'; -import type { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type'; import { ItemFields } from '@jellyfin/sdk/lib/generated-client/models/item-fields'; import { ItemFilter } from '@jellyfin/sdk/lib/generated-client/models/item-filter'; @@ -14,11 +18,17 @@ import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api'; import { getMoviesApi } from '@jellyfin/sdk/lib/utils/api/movies-api'; import { getStudiosApi } from '@jellyfin/sdk/lib/utils/api/studios-api'; import { getTvShowsApi } from '@jellyfin/sdk/lib/utils/api/tv-shows-api'; +import { getPersonsApi } from '@jellyfin/sdk/lib/utils/api/persons-api'; import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api'; import { useQuery } from '@tanstack/react-query'; import { type JellyfinApiContext, useApi } from './useApi'; -import { getAlphaPickerQuery, getFieldsQuery, getFiltersQuery, getLimitQuery } from 'utils/items'; +import { + getAlphaPickerQuery, + getFieldsQuery, + getFiltersQuery, + getLimitQuery +} from 'utils/items'; import { Sections, SectionsViewType } from 'types/suggestionsSections'; import { LibraryViewSettings, ParentId } from 'types/library'; import { LibraryTab } from 'types/libraryTab'; @@ -83,7 +93,9 @@ export const useGetItems = (parametersOptions: ItemsApiGetItemsRequest) => { ], queryFn: ({ signal }) => fetchGetItems(currentApi, parametersOptions, { signal }), - cacheTime: parametersOptions.sortBy?.includes(ItemSortBy.Random) ? 0 : undefined + cacheTime: parametersOptions.sortBy?.includes(ItemSortBy.Random) ? + 0 : + undefined }); }; @@ -246,12 +258,9 @@ export const useGetItemsBySectionType = ( return useQuery({ queryKey: ['ItemsBySuggestionsType', sections.view], queryFn: ({ signal }) => - fetchGetItemsBySuggestionsType( - currentApi, - sections, - parentId, - { signal } - ), + fetchGetItemsBySuggestionsType(currentApi, sections, parentId, { + signal + }), enabled: !!sections.view }); }; @@ -322,7 +331,10 @@ const fetchGetGroupsGenres = async ( } }; -export const useGetGroupsGenres = (itemType: BaseItemKind, parentId: ParentId) => { +export const useGetGroupsGenres = ( + itemType: BaseItemKind, + parentId: ParentId +) => { const currentApi = useApi(); return useQuery({ queryKey: ['GroupsGenres', itemType, parentId], @@ -389,7 +401,10 @@ const fetchGetItemsViewByType = async ( { userId: user.Id, parentId: parentId ?? undefined, - enableImageTypes: [libraryViewSettings.ImageType, ImageType.Backdrop], + enableImageTypes: [ + libraryViewSettings.ImageType, + ImageType.Backdrop + ], ...getFieldsQuery(viewType, libraryViewSettings), ...getFiltersQuery(viewType, libraryViewSettings), ...getLimitQuery(), @@ -410,7 +425,10 @@ const fetchGetItemsViewByType = async ( { userId: user.Id, parentId: parentId ?? undefined, - enableImageTypes: [libraryViewSettings.ImageType, ImageType.Backdrop], + enableImageTypes: [ + libraryViewSettings.ImageType, + ImageType.Backdrop + ], ...getFieldsQuery(viewType, libraryViewSettings), ...getFiltersQuery(viewType, libraryViewSettings), ...getLimitQuery(), @@ -448,12 +466,18 @@ const fetchGetItemsViewByType = async ( recursive: true, imageTypeLimit: 1, parentId: parentId ?? undefined, - enableImageTypes: [libraryViewSettings.ImageType, ImageType.Backdrop], + enableImageTypes: [ + libraryViewSettings.ImageType, + ImageType.Backdrop + ], ...getFieldsQuery(viewType, libraryViewSettings), ...getFiltersQuery(viewType, libraryViewSettings), ...getLimitQuery(), ...getAlphaPickerQuery(libraryViewSettings), - isFavorite: viewType === LibraryTab.Favorites ? true : undefined, + isFavorite: + viewType === LibraryTab.Favorites ? + true : + undefined, sortBy: [libraryViewSettings.SortBy], sortOrder: [libraryViewSettings.SortOrder], includeItemTypes: itemType, @@ -495,7 +519,7 @@ export const useGetItemsViewByType = ( { signal } ), refetchOnWindowFocus: false, - keepPreviousData : true, + keepPreviousData: true, enabled: [ LibraryTab.Movies, @@ -591,3 +615,104 @@ export const useGetUpcomingEpisodes = (parentId: ParentId) => { enabled: !!parentId }); }; + +const fetchGetItemsByFavoriteType = async ( + currentApi: JellyfinApiContext, + parentId: ParentId, + sections: Sections, + signal: AbortSignal | undefined +) => { + const { api, user } = currentApi; + if (api && user?.Id) { + let response; + switch (sections.viewType) { + case SectionsViewType.Artists: { + response = ( + await getArtistsApi(api).getArtists( + { + userId: user.Id, + parentId: parentId ?? undefined, + sortBy: [ItemSortBy.SortName], + sortOrder: [SortOrder.Ascending], + fields: [ + ItemFields.PrimaryImageAspectRatio, + ItemFields.BasicSyncInfo + ], + isFavorite: true, + limit: 25, + enableTotalRecordCount: false, + ...sections.parametersOptions + }, + { + signal: signal + } + ) + ).data.Items; + break; + } + case SectionsViewType.Persons: { + response = ( + await getPersonsApi(api).getPersons( + { + userId: user.Id, + sortBy: [ItemSortBy.SortName], + sortOrder: [SortOrder.Ascending], + fields: [ + ItemFields.PrimaryImageAspectRatio, + ItemFields.BasicSyncInfo + ], + isFavorite: true, + limit: 25, + ...sections.parametersOptions + }, + { + signal: signal + } + ) + ).data.Items; + break; + } + default: { + response = ( + await getItemsApi(api).getItems( + { + userId: user.Id, + parentId: parentId ?? undefined, + sortBy: [ItemSortBy.SortName], + sortOrder: [SortOrder.Ascending], + fields: [ + ItemFields.PrimaryImageAspectRatio, + ItemFields.BasicSyncInfo + ], + isFavorite: true, + collapseBoxSetItems: false, + limit: 25, + enableTotalRecordCount: false, + recursive: true, + excludeLocationTypes: [LocationType.Virtual], + ...sections.parametersOptions + }, + { + signal: signal + } + ) + ).data.Items; + break; + } + } + return response; + } +}; + +export const useGetItemsByFavoriteType = ( + sections: Sections, + parentId: ParentId +) => { + const currentApi = useApi(); + return useQuery({ + queryKey: ['ItemsByFavoriteType', sections.view], + queryFn: ({ signal }) => + fetchGetItemsByFavoriteType(currentApi, parentId, sections, signal), + enabled: !!sections.view + }); +}; diff --git a/src/strings/en-us.json b/src/strings/en-us.json index ca5dd5778b1..881492a9259 100644 --- a/src/strings/en-us.json +++ b/src/strings/en-us.json @@ -378,6 +378,17 @@ "HeaderEpisodesStatus": "Episodes Status", "HeaderError": "Error", "HeaderExternalIds": "External IDs", + "HeaderFavoriteMovies": "Favorite Movies", + "HeaderFavoriteShows": "Favorite Shows", + "HeaderFavoriteEpisodes": "Favorite Episodes", + "HeaderFavoriteAlbums": "Favorite Albums", + "HeaderFavoriteArtists": "Favorite Artists", + "HeaderFavoriteSongs": "Favorite Songs", + "HeaderFavoriteVideos": "Favorite Videos", + "HeaderFavoriteCollections": "Favorite Collections", + "HeaderFavoritePlaylists": "Favorite Playlists", + "HeaderFavoritePersons": "Favorite Persons", + "HeaderFavoriteBooks": "Favorite Books", "HeaderFeatureAccess": "Feature access", "HeaderFetcherSettings": "Fetcher Settings", "HeaderFetchImages": "Fetch Images", diff --git a/src/types/suggestionsSections.ts b/src/types/suggestionsSections.ts index afb198a9769..ccf28d21394 100644 --- a/src/types/suggestionsSections.ts +++ b/src/types/suggestionsSections.ts @@ -13,6 +13,8 @@ export enum SectionsViewType { ResumeItems = 'resumeItems', LatestMedia = 'latestMedia', NextUp = 'nextUp', + Artists = 'artists', + Persons = 'persons', } export enum SectionsView { @@ -24,6 +26,17 @@ export enum SectionsView { LatestMusic = 'latestmusic', RecentlyPlayedMusic = 'recentlyplayedmusic', FrequentlyPlayedMusic = 'frequentlyplayedmusic', + FavoriteMovies = 'favoriteMovies', + FavoriteShows = 'favoriteShows', + FavoriteEpisode = 'favoriteEpisode', + FavoriteVideos = 'favoriteVideos', + FavoriteCollections = 'favoriteCollections', + FavoritePlaylists = 'favoritePlaylists', + FavoritePeople = 'favoritePeople', + FavoriteArtists = 'favoriteArtists', + FavoriteAlbums = 'favoriteAlbums', + FavoriteSongs = 'favoriteSongs', + FavoriteBooks = 'favoriteBooks', } export interface Sections { From c308007d51a1172a5dda00175a72e9c3e44af112 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Sun, 24 Sep 2023 04:51:33 +0300 Subject: [PATCH 12/12] Add Library View --- package-lock.json | 54 ++-- package.json | 1 + .../components/library/AlphabetPicker.tsx | 5 +- .../library/GenresItemsContainer.tsx | 53 ---- .../library/GenresSectionContainer.tsx | 49 ---- .../components/library/GenresView.tsx | 59 ++++ .../components/library/ItemsContainer.tsx | 8 +- .../components/library/ItemsView.tsx | 181 ++++--------- .../library/LibraryHeaderSection.tsx | 252 ++++++++++++++++++ .../components/library/LibraryMainSection.tsx | 30 +++ .../components/library/Pagination.tsx | 72 +++-- .../library/RecommendationItemsContainer.tsx} | 27 +- .../components/library/SuggestionsView.tsx | 70 +++++ .../components/library/UpComingContainer.tsx | 87 ------ .../components/library/UpComingView.tsx | 55 ++++ .../components/library/ViewSettingsButton.tsx | 158 +++++------ .../experimental/components/tabs/tabRoutes.ts | 151 +---------- .../experimental/routes/asyncRoutes/user.ts | 7 +- .../experimental/routes/legacyRoutes/user.ts | 12 - .../experimental/routes/library/index.tsx | 35 +++ .../routes/movies/CollectionsView.tsx | 24 -- .../routes/movies/FavoritesView.tsx | 19 -- .../experimental/routes/movies/GenresView.tsx | 18 -- .../experimental/routes/movies/MoviesView.tsx | 22 -- .../routes/movies/TrailersView.tsx | 19 -- src/apps/experimental/routes/movies/index.tsx | 66 ----- src/components/router/appRouter.js | 50 ++++ src/hooks/useFetchItems.ts | 214 +++++++++++---- src/hooks/useLibrarySettings.tsx | 183 +++++++++++++ src/types/library.ts | 6 + src/types/libraryTab.ts | 3 +- src/utils/items.ts | 84 ++++++ webpack.common.js | 1 + 33 files changed, 1201 insertions(+), 874 deletions(-) delete mode 100644 src/apps/experimental/components/library/GenresItemsContainer.tsx delete mode 100644 src/apps/experimental/components/library/GenresSectionContainer.tsx create mode 100644 src/apps/experimental/components/library/GenresView.tsx create mode 100644 src/apps/experimental/components/library/LibraryHeaderSection.tsx create mode 100644 src/apps/experimental/components/library/LibraryMainSection.tsx rename src/apps/experimental/{routes/movies/SuggestionsView.tsx => components/library/RecommendationItemsContainer.tsx} (67%) create mode 100644 src/apps/experimental/components/library/SuggestionsView.tsx delete mode 100644 src/apps/experimental/components/library/UpComingContainer.tsx create mode 100644 src/apps/experimental/components/library/UpComingView.tsx create mode 100644 src/apps/experimental/routes/library/index.tsx delete mode 100644 src/apps/experimental/routes/movies/CollectionsView.tsx delete mode 100644 src/apps/experimental/routes/movies/FavoritesView.tsx delete mode 100644 src/apps/experimental/routes/movies/GenresView.tsx delete mode 100644 src/apps/experimental/routes/movies/MoviesView.tsx delete mode 100644 src/apps/experimental/routes/movies/TrailersView.tsx delete mode 100644 src/apps/experimental/routes/movies/index.tsx create mode 100644 src/hooks/useLibrarySettings.tsx diff --git a/package-lock.json b/package-lock.json index 2ecbd9d155e..808a4c4546c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,6 +57,7 @@ "screenfull": "6.0.2", "sortablejs": "1.15.0", "swiper": "9.3.2", + "use-local-storage-state": "17.3.0", "webcomponents.js": "0.7.24", "whatwg-fetch": "3.6.2", "workbox-core": "6.6.0", @@ -15886,6 +15887,15 @@ "websocket-driver": "^0.7.4" } }, + "node_modules/sockjs/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "dev": true, + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/sortablejs": { "version": "1.15.0", "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz", @@ -20019,6 +20029,21 @@ "node": ">=0.10.0" } }, + "node_modules/use-local-storage-state": { + "version": "17.3.0", + "resolved": "https://registry.npmjs.org/use-local-storage-state/-/use-local-storage-state-17.3.0.tgz", + "integrity": "sha512-PZruqtmMkYCgcC5t+0Mbka1rN2jjhC1SMA2UD8o6HbpblZf8E9aaXF0sEwlQAWlBpKGlNYvbqueB8dlbwX7n/g==", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/astoilkov" + }, + "peerDependencies": { + "react": ">=16.8.0 < 18", + "react-dom": ">=16.8.0 < 18" + } + }, "node_modules/use-sync-external-store": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", @@ -20047,15 +20072,6 @@ "node": ">= 0.4.0" } }, - "node_modules/uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", - "dev": true, - "bin": { - "uuid": "dist/bin/uuid" - } - }, "node_modules/v8-compile-cache": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz", @@ -32508,6 +32524,14 @@ "faye-websocket": "^0.11.3", "uuid": "^8.3.2", "websocket-driver": "^0.7.4" + }, + "dependencies": { + "uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "dev": true + } } }, "sortablejs": { @@ -35703,6 +35727,12 @@ "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==", "dev": true }, + "use-local-storage-state": { + "version": "17.3.0", + "resolved": "https://registry.npmjs.org/use-local-storage-state/-/use-local-storage-state-17.3.0.tgz", + "integrity": "sha512-PZruqtmMkYCgcC5t+0Mbka1rN2jjhC1SMA2UD8o6HbpblZf8E9aaXF0sEwlQAWlBpKGlNYvbqueB8dlbwX7n/g==", + "requires": {} + }, "use-sync-external-store": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", @@ -35726,12 +35756,6 @@ "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=", "dev": true }, - "uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", - "dev": true - }, "v8-compile-cache": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz", diff --git a/package.json b/package.json index 988c2a0215e..0893bf3979a 100644 --- a/package.json +++ b/package.json @@ -115,6 +115,7 @@ "screenfull": "6.0.2", "sortablejs": "1.15.0", "swiper": "9.3.2", + "use-local-storage-state": "17.3.0", "webcomponents.js": "0.7.24", "whatwg-fetch": "3.6.2", "workbox-core": "6.6.0", diff --git a/src/apps/experimental/components/library/AlphabetPicker.tsx b/src/apps/experimental/components/library/AlphabetPicker.tsx index aec6d2eb9b8..5d92eaaa58d 100644 --- a/src/apps/experimental/components/library/AlphabetPicker.tsx +++ b/src/apps/experimental/components/library/AlphabetPicker.tsx @@ -54,10 +54,7 @@ const AlphabetPicker: React.FC = ({ sx={{ position: 'fixed', bottom: '1.5em', - fontSize: { - xs: '80%', - lg: '88%' - } + fontSize: '80%' }} > = ({ - parentId, - collectionType, - itemType -}) => { - const { isLoading, data: groupsGenres } = useGetGroupsGenres( - itemType, - parentId - ); - - if (isLoading) { - return ; - } - - return ( - <> - {!groupsGenres?.length ? ( -
-

{globalize.translate('MessageNothingHere')}

-

{globalize.translate('MessageNoGenresAvailable')}

-
- ) : ( - groupsGenres.map(({ genre, items }) => ( - - )) - )} - - ); -}; - -export default GenresItemsContainer; diff --git a/src/apps/experimental/components/library/GenresSectionContainer.tsx b/src/apps/experimental/components/library/GenresSectionContainer.tsx deleted file mode 100644 index b01739732d6..00000000000 --- a/src/apps/experimental/components/library/GenresSectionContainer.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client'; -import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; -import escapeHTML from 'escape-html'; -import React, { FC } from 'react'; - -import { appRouter } from 'components/router/appRouter'; -import SectionContainer from './SectionContainer'; -import { CollectionType } from 'types/collectionType'; - -interface GenresSectionContainerProps { - parentId?: string | null; - collectionType?: CollectionType; - itemType: BaseItemKind; - genre: BaseItemDto; - items: BaseItemDto[]; -} - -const GenresSectionContainer: FC = ({ - parentId, - collectionType, - itemType, - genre, - items -}) => { - const getRouteUrl = () => { - return appRouter.getRouteUrl(genre, { - context: collectionType, - parentId: parentId - }); - }; - - return ; -}; - -export default GenresSectionContainer; diff --git a/src/apps/experimental/components/library/GenresView.tsx b/src/apps/experimental/components/library/GenresView.tsx new file mode 100644 index 00000000000..a947705bc10 --- /dev/null +++ b/src/apps/experimental/components/library/GenresView.tsx @@ -0,0 +1,59 @@ +import React, { FC } from 'react'; +import escapeHTML from 'escape-html'; +import { useGetGroupsGenres } from 'hooks/useFetchItems'; +import { appRouter } from 'components/router/appRouter'; +import globalize from 'scripts/globalize'; +import Loading from 'components/loading/LoadingComponent'; +import SectionContainer from './SectionContainer'; +import { CollectionType } from 'types/collectionType'; +import { ParentId } from 'types/library'; +import { useLibrarySettings } from 'hooks/useLibrarySettings'; + +interface GenresViewProps { + collectionType?: CollectionType; + parentId?: ParentId; +} + +const GenresView: FC = () => { + const { item } = useLibrarySettings(); + const { isLoading, data: groupsGenres } = useGetGroupsGenres(item); + + if (isLoading) { + return ; + } + + return ( + <> + {!groupsGenres?.length ? ( +
+

{globalize.translate('MessageNothingHere')}

+

{globalize.translate('MessageNoGenresAvailable')}

+
+ ) : ( + groupsGenres.map(({ genre, items }) => ( + + )) + )} + + ); +}; + +export default GenresView; diff --git a/src/apps/experimental/components/library/ItemsContainer.tsx b/src/apps/experimental/components/library/ItemsContainer.tsx index d98338ab673..8da11739710 100644 --- a/src/apps/experimental/components/library/ItemsContainer.tsx +++ b/src/apps/experimental/components/library/ItemsContainer.tsx @@ -15,11 +15,10 @@ interface ItemsContainerI { libraryViewSettings: LibraryViewSettings; viewType: LibraryTab; collectionType?: CollectionType; - noItemsMessage: string; items: BaseItemDto[]; } -const ItemsContainer: FC = ({ libraryViewSettings, viewType, collectionType, noItemsMessage, items }) => { +const ItemsContainer: FC = ({ libraryViewSettings, viewType, collectionType, items }) => { const element = useRef(null); const getCardOptions = useCallback(() => { @@ -37,7 +36,7 @@ const ItemsContainer: FC = ({ libraryViewSettings, viewType, co } else if (libraryViewSettings.ImageType === ImageType.Logo) { shape = 'backdrop'; preferLogo = true; - } else if (libraryViewSettings.ImageType === ImageType.Thumb) { + } else if (libraryViewSettings.ImageType === ImageType.Thumb || viewType === LibraryTab.Networks) { shape = 'backdrop'; preferThumb = true; } else { @@ -104,7 +103,7 @@ const ItemsContainer: FC = ({ libraryViewSettings, viewType, co html += '
'; html += '

' + globalize.translate('MessageNothingHere') + '

'; - html += '

' + globalize.translate(noItemsMessage) + '

'; + html += '

' + globalize.translate('MessageNoItemsAvailable') + '

'; html += '
'; } @@ -113,7 +112,6 @@ const ItemsContainer: FC = ({ libraryViewSettings, viewType, co getCardOptions, collectionType, items, - noItemsMessage, libraryViewSettings.ViewMode ]); diff --git a/src/apps/experimental/components/library/ItemsView.tsx b/src/apps/experimental/components/library/ItemsView.tsx index cc765d9c411..afdbfebbb7c 100644 --- a/src/apps/experimental/components/library/ItemsView.tsx +++ b/src/apps/experimental/components/library/ItemsView.tsx @@ -1,155 +1,71 @@ -import type { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; +import { BaseItemDto } from '@jellyfin/sdk/lib/generated-client'; import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by'; import React, { FC } from 'react'; import Box from '@mui/material/Box'; -import CircularProgress from '@mui/material/CircularProgress'; -import { useLocalStorage } from 'hooks/useLocalStorage'; -import { useGetItem, useGetItemsViewByType } from 'hooks/useFetchItems'; -import { getDefaultLibraryViewSettings, getSettingsKey } from 'utils/items'; + +import { useLibrarySettings } from 'hooks/useLibrarySettings'; +import { useGetItemsViewByType } from 'hooks/useFetchItems'; +import * as userSettings from 'scripts/settings/userSettings'; import Loading from 'components/loading/LoadingComponent'; -import { playbackManager } from 'components/playback/playbackmanager'; -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 } from 'types/library'; -import { CollectionType } from 'types/collectionType'; +import AlphabetPicker from './AlphabetPicker'; import { LibraryTab } from 'types/libraryTab'; +import { ParentId } from 'types/library'; +import { CollectionType } from 'types/collectionType'; + +const visibleAlphaPicker = [ + LibraryTab.Movies, + LibraryTab.Favorites, + LibraryTab.Trailers, + LibraryTab.Series, + LibraryTab.Episodes, + LibraryTab.Albums, + LibraryTab.AlbumArtists, + LibraryTab.Artists +]; interface ItemsViewProps { - viewType: LibraryTab; - parentId: ParentId; collectionType?: CollectionType; - isBtnPlayAllEnabled?: boolean; - isBtnQueueEnabled?: boolean; - isBtnShuffleEnabled?: boolean; - isBtnSortEnabled?: boolean; - isBtnFilterEnabled?: boolean; - isBtnNewCollectionEnabled?: boolean; - isBtnGridListEnabled?: boolean; - isAlphabetPickerEnabled?: boolean; - itemType: BaseItemKind[]; - noItemsMessage: string; + parentId?: ParentId; + item?: BaseItemDto; + viewType: LibraryTab; } const ItemsView: FC = ({ - viewType, - parentId, - collectionType, - isBtnPlayAllEnabled = false, - isBtnQueueEnabled = false, - isBtnShuffleEnabled = false, - isBtnSortEnabled = true, - isBtnFilterEnabled = true, - isBtnNewCollectionEnabled = false, - isBtnGridListEnabled = true, - isAlphabetPickerEnabled = true, - itemType, - noItemsMessage + viewType }) => { - const [libraryViewSettings, setLibraryViewSettings] = - useLocalStorage( - getSettingsKey(viewType, parentId), - getDefaultLibraryViewSettings(viewType) - ); - + const { item, libraryViewSettings, setLibraryViewSettings } = + useLibrarySettings(); const { isLoading, data: itemsResult, - isFetching, isPreviousData - } = useGetItemsViewByType( - viewType, - parentId, - itemType, - libraryViewSettings - ); - const { data: item } = useGetItem(parentId); + } = useGetItemsViewByType(viewType, item); + const limit = userSettings.libraryPageSize(undefined); const totalRecordCount = itemsResult?.TotalRecordCount ?? 0; + const showControls = limit > 0 && limit < totalRecordCount; const items = itemsResult?.Items ?? []; - const hasFilters = Object.values(libraryViewSettings.Filters ?? {}).some( - (filter) => !!filter - ); + const hasSortName = libraryViewSettings.SortBy.includes( ItemSortBy.SortName ); return ( - - - - - - {isFetching ? : null} - - - {isBtnPlayAllEnabled && ( - - )} - {isBtnQueueEnabled - && item - && playbackManager.canQueue(item) && ( - - )} - {isBtnShuffleEnabled && totalRecordCount > 1 && ( - - )} - {isBtnSortEnabled && ( - - )} - {isBtnFilterEnabled && ( - + {showControls && ( + + - )} - {isBtnNewCollectionEnabled && } - {isBtnGridListEnabled && ( - - )} - + + )} - {isAlphabetPickerEnabled && hasSortName && ( + {visibleAlphaPicker.includes(viewType) && hasSortName && ( = ({ )} - - - + {showControls && ( + + + + )} ); }; diff --git a/src/apps/experimental/components/library/LibraryHeaderSection.tsx b/src/apps/experimental/components/library/LibraryHeaderSection.tsx new file mode 100644 index 00000000000..e11e36ff55e --- /dev/null +++ b/src/apps/experimental/components/library/LibraryHeaderSection.tsx @@ -0,0 +1,252 @@ +import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client'; +import React, { FC, useCallback } from 'react'; + +import { + Chip, + CircularProgress, + Divider, + MenuItem, + TextField, + Typography, + useScrollTrigger +} from '@mui/material'; +import AppBar from '@mui/material/AppBar'; +import Toolbar from '@mui/material/Toolbar'; +import Stack from '@mui/material/Stack'; + +import globalize from 'scripts/globalize'; +import { useLibrarySettings } from 'hooks/useLibrarySettings'; +import { useGetItemsViewByType } from 'hooks/useFetchItems'; +import { getItemTypesEnum } from 'utils/items'; + +import PlayAllButton from './PlayAllButton'; +import ShuffleButton from './ShuffleButton'; +import SortButton from './SortButton'; +import FilterButton from './filter/FilterButton'; +import NewCollectionButton from './NewCollectionButton'; +import GridListViewButton from './GridListViewButton'; + +import { LibraryTab } from 'types/libraryTab'; +import { CollectionType } from 'types/collectionType'; +import { ParentId } from 'types/library'; + +const visibleBtn = [ + LibraryTab.Movies, + LibraryTab.Favorites, + LibraryTab.Trailers, + LibraryTab.Series, + LibraryTab.Episodes, + LibraryTab.Albums, + LibraryTab.AlbumArtists, + LibraryTab.Artists, + LibraryTab.Collections, + LibraryTab.Songs, + LibraryTab.Photos, + LibraryTab.Videos, + LibraryTab.Channels +]; + +interface LibraryHeaderSectionProps { + collectionType?: CollectionType; + parentId?: ParentId; + item?: BaseItemDto; +} + +const LibraryHeaderSection: FC = () => { + const { + item, + viewSelectOptions, + viewType, + setViewType, + libraryViewSettings, + setLibraryViewSettings + } = useLibrarySettings(); + + const { + isLoading, + data: itemsResult, + isFetching + } = useGetItemsViewByType(viewType, item); + + const handleViewType = useCallback( + (e: React.ChangeEvent) => { + const value = e.target.value as LibraryTab; + setViewType(value); + }, + [setViewType] + ); + + const isBtnPlayAllEnabled = + viewType !== LibraryTab.Collections + && viewType !== LibraryTab.Trailers + && viewType !== LibraryTab.AlbumArtists + && viewType !== LibraryTab.Artists + && viewType !== LibraryTab.Photos; + + const isBtnShuffleEnabled = + viewType !== LibraryTab.Collections + && viewType !== LibraryTab.Trailers + && viewType !== LibraryTab.AlbumArtists + && viewType !== LibraryTab.Artists + && viewType !== LibraryTab.Photos; + + const isBtnGridListEnabled = + viewType !== LibraryTab.Songs && viewType !== LibraryTab.Trailers; + + const isBtnSortEnabled = viewType !== LibraryTab.Collections; + + const isBtnFilterEnabled = viewType !== LibraryTab.Collections; + + const isBtnNewCollectionEnabled = viewType === LibraryTab.Collections; + + const totalRecordCount = itemsResult?.TotalRecordCount ?? 0; + const items = itemsResult?.Items ?? []; + const hasFilters = Object.values(libraryViewSettings.Filters ?? {}).some( + (filter) => !!filter + ); + + const trigger = useScrollTrigger({ + disableHysteresis: true, + threshold: 1 + }); + + return ( + + + } + spacing={2} + sx={{ + py: { xs: 1, sm: 0 } + }} + > + + {viewSelectOptions.map((option) => { + return ( + + {globalize.translate(option.title)} + + ); + })} + + + {visibleBtn.includes(viewType) && ( + + ) : ( + + {totalRecordCount} + + ) + } + /> + )} + + + {visibleBtn.includes(viewType) && ( + + } + sx={{ + py: { xs: 1, sm: 0 } + }} + > + {isBtnPlayAllEnabled && ( + + )} + + {isBtnShuffleEnabled && totalRecordCount > 1 && ( + + )} + + {isBtnSortEnabled && ( + + )} + + {isBtnFilterEnabled && ( + + )} + + {isBtnNewCollectionEnabled && } + + {isBtnGridListEnabled && ( + + )} + + )} + + + ); +}; + +export default LibraryHeaderSection; diff --git a/src/apps/experimental/components/library/LibraryMainSection.tsx b/src/apps/experimental/components/library/LibraryMainSection.tsx new file mode 100644 index 00000000000..d1b251a7a2b --- /dev/null +++ b/src/apps/experimental/components/library/LibraryMainSection.tsx @@ -0,0 +1,30 @@ +import React, { FC } from 'react'; + +import { useLibrarySettings } from 'hooks/useLibrarySettings'; +import SuggestionsView from './SuggestionsView'; +import UpComingView from './UpComingView'; +import GenresView from './GenresView'; +import ItemsView from './ItemsView'; + +import { LibraryTab } from 'types/libraryTab'; +import { CollectionType } from 'types/collectionType'; +import { ParentId } from 'types/library'; + +interface LibraryMainSectionProps { + collectionType?: CollectionType; + parentId?: ParentId; +} + +const LibraryMainSection: FC = () => { + const { viewType } = useLibrarySettings(); + + if (viewType === LibraryTab.Suggestions) return ; + + if (viewType === LibraryTab.Upcoming) return ; + + if (viewType === LibraryTab.Genres) return ; + + return ; +}; + +export default LibraryMainSection; diff --git a/src/apps/experimental/components/library/Pagination.tsx b/src/apps/experimental/components/library/Pagination.tsx index 1e6a2ab2619..1934dd9014d 100644 --- a/src/apps/experimental/components/library/Pagination.tsx +++ b/src/apps/experimental/components/library/Pagination.tsx @@ -23,12 +23,9 @@ const Pagination: FC = ({ 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) : - totalRecordCount; - const showControls = limit > 0 && limit < totalRecordCount; + const recordsEnd = Math.min(startIndex + limit, totalRecordCount); const onNextPageClick = useCallback(() => { const newIndex = startIndex + limit; @@ -47,41 +44,38 @@ const Pagination: FC = ({ }, [limit, setLibraryViewSettings, startIndex]); return ( - - - - {globalize.translate( - 'ListPaging', - recordsStart, - recordsEnd, - totalRecordCount - )} - - {showControls && ( - - - - - - = totalRecordCount || isPreviousData } - onClick={onNextPageClick} - > - - - + + + {globalize.translate( + 'ListPaging', + recordsStart, + recordsEnd, + totalRecordCount )} - + + + + + + + + = totalRecordCount || isPreviousData } + onClick={onNextPageClick} + > + + + ); }; diff --git a/src/apps/experimental/routes/movies/SuggestionsView.tsx b/src/apps/experimental/components/library/RecommendationItemsContainer.tsx similarity index 67% rename from src/apps/experimental/routes/movies/SuggestionsView.tsx rename to src/apps/experimental/components/library/RecommendationItemsContainer.tsx index 6fba733d5f2..8267a7e3161 100644 --- a/src/apps/experimental/routes/movies/SuggestionsView.tsx +++ b/src/apps/experimental/components/library/RecommendationItemsContainer.tsx @@ -1,31 +1,26 @@ import React, { FC } from 'react'; - import { useGetMovieRecommendations } from 'hooks/useFetchItems'; -import globalize from 'scripts/globalize'; import Loading from 'components/loading/LoadingComponent'; -import RecommendationContainer from '../../components/library/RecommendationContainer'; -import SuggestionsItemsContainer from '../../components/library/SuggestionsItemsContainer'; +import globalize from 'scripts/globalize'; +import RecommendationContainer from './RecommendationContainer'; +import { ParentId } from 'types/library'; -import { LibraryViewProps } from 'types/library'; -import { SectionsView } from 'types/suggestionsSections'; +interface RecommendationItemsContainerProps { + parentId?: ParentId; +} -const SuggestionsView: FC = ({ parentId }) => { +const RecommendationItemsContainer: FC = ({ + parentId +}) => { const { isLoading, data: movieRecommendationsItems } = useGetMovieRecommendations(parentId); - if (isLoading) { - return ; - } + if (isLoading) return ; return ( <> - - {!movieRecommendationsItems?.length ? (

{globalize.translate('MessageNothingHere')}

@@ -50,4 +45,4 @@ const SuggestionsView: FC = ({ parentId }) => { ); }; -export default SuggestionsView; +export default RecommendationItemsContainer; diff --git a/src/apps/experimental/components/library/SuggestionsView.tsx b/src/apps/experimental/components/library/SuggestionsView.tsx new file mode 100644 index 00000000000..d27319d7fa9 --- /dev/null +++ b/src/apps/experimental/components/library/SuggestionsView.tsx @@ -0,0 +1,70 @@ +import React, { FC } from 'react'; +import Box from '@mui/material/Box'; +import SuggestionsItemsContainer from './SuggestionsItemsContainer'; +import RecommendationItemsContainer from './RecommendationItemsContainer'; +import FavoriteItemsContainer from './FavoriteItemsContainer'; +import { CollectionType } from 'types/collectionType'; +import { ParentId } from 'types/library'; +import { SectionsView } from 'types/suggestionsSections'; +import { useLibrarySettings } from 'hooks/useLibrarySettings'; + +const getVisibleId = (collectionType: CollectionType) => { + const visibleSuggestionsId: SectionsView[] = []; + const visibleFavoriteId: SectionsView[] = []; + + if (collectionType === CollectionType.Movies) { + visibleSuggestionsId.push(SectionsView.ContinueWatchingMovies); + visibleSuggestionsId.push(SectionsView.LatestMovies); + visibleFavoriteId.push(SectionsView.FavoriteMovies); + } + + if (collectionType === CollectionType.TvShows) { + visibleSuggestionsId.push(SectionsView.ContinueWatchingEpisode); + visibleSuggestionsId.push(SectionsView.LatestEpisode); + visibleSuggestionsId.push(SectionsView.NextUp); + visibleFavoriteId.push(SectionsView.FavoriteShows); + visibleFavoriteId.push(SectionsView.FavoriteEpisode); + } + + if (collectionType === CollectionType.Music) { + visibleSuggestionsId.push(SectionsView.LatestMusic); + visibleSuggestionsId.push(SectionsView.FrequentlyPlayedMusic); + visibleSuggestionsId.push(SectionsView.RecentlyPlayedMusic); + visibleFavoriteId.push(SectionsView.FavoriteArtists); + visibleFavoriteId.push(SectionsView.FavoriteAlbums); + visibleFavoriteId.push(SectionsView.FavoriteSongs); + } + + return { + visibleSuggestionsId, + visibleFavoriteId + }; +}; + +interface SuggestionsViewProps { + collectionType?: CollectionType; + parentId?: ParentId; +} + +const SuggestionsView: FC = () => { + const { item } = useLibrarySettings(); + return ( + + + + + + {item?.CollectionType === CollectionType.Movies && ( + + )} + + ); +}; + +export default SuggestionsView; diff --git a/src/apps/experimental/components/library/UpComingContainer.tsx b/src/apps/experimental/components/library/UpComingContainer.tsx deleted file mode 100644 index 318eebb2ef7..00000000000 --- a/src/apps/experimental/components/library/UpComingContainer.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client'; -import React, { FC, useCallback, useEffect, useState } from 'react'; -import datetime from 'scripts/datetime'; -import globalize from 'scripts/globalize'; -import SectionContainer from './SectionContainer'; - -interface UpComingContainerProps { - parentId?: string | null; - items: BaseItemDto[]; -} - -type GroupsArr = { - name: string; - items: BaseItemDto[]; -}; - -const UpComingContainer: FC = ({ items }) => { - const [groupsItems, setGroupsItems] = useState([]); - - const renderUpcoming = useCallback(() => { - const groups: GroupsArr[] = []; - let currentGroupName = ''; - let currentGroup: BaseItemDto[] = []; - - for (const item of items) { - let dateText = ''; - - if (item.PremiereDate) { - try { - const premiereDate = datetime.parseISO8601Date(item.PremiereDate, true); - dateText = datetime.isRelativeDay(premiereDate, -1) ? globalize.translate('Yesterday') : datetime.toLocaleDateString(premiereDate, { - weekday: 'long', - month: 'short', - day: 'numeric' - }); - } catch (err) { - console.error('error parsing timestamp for upcoming tv shows'); - } - } - - if (dateText != currentGroupName) { - if (currentGroup.length) { - groups.push({ - name: currentGroupName, - items: currentGroup - }); - } - - currentGroupName = dateText; - currentGroup = [item]; - } else { - currentGroup.push(item); - } - } - - setGroupsItems(groups); - }, [items]); - - useEffect(() => { - renderUpcoming(); - }, [renderUpcoming]); - - return ( - <> - {groupsItems?.map((group) => ( - - ))} - - - ); -}; - -export default UpComingContainer; diff --git a/src/apps/experimental/components/library/UpComingView.tsx b/src/apps/experimental/components/library/UpComingView.tsx new file mode 100644 index 00000000000..51e54af58cd --- /dev/null +++ b/src/apps/experimental/components/library/UpComingView.tsx @@ -0,0 +1,55 @@ +import React, { FC } from 'react'; +import Box from '@mui/material/Box'; +import { useGetGroupsUpcomingEpisodes } from 'hooks/useFetchItems'; +import Loading from 'components/loading/LoadingComponent'; +import globalize from 'scripts/globalize'; +import SectionContainer from './SectionContainer'; +import { ParentId } from 'types/library'; +import { useLibrarySettings } from 'hooks/useLibrarySettings'; + +interface UpComingViewProps { + parentId?: ParentId; +} + +const UpComingView: FC = () => { + const { item } = useLibrarySettings(); + const { isLoading, data: groupsUpcomingEpisodes } = + useGetGroupsUpcomingEpisodes(item); + + if (isLoading) return ; + + return ( + + {!groupsUpcomingEpisodes?.length ? ( +
+

{globalize.translate('MessageNothingHere')}

+

+ {globalize.translate( + 'MessagePleaseEnsureInternetMetadata' + )} +

+
+ ) : ( + groupsUpcomingEpisodes?.map((group) => ( + + )) + )} + + ); +}; + +export default UpComingView; diff --git a/src/apps/experimental/components/library/ViewSettingsButton.tsx b/src/apps/experimental/components/library/ViewSettingsButton.tsx index b1ca1679e00..ba21218491f 100644 --- a/src/apps/experimental/components/library/ViewSettingsButton.tsx +++ b/src/apps/experimental/components/library/ViewSettingsButton.tsx @@ -16,7 +16,7 @@ import Popover from '@mui/material/Popover'; import ViewComfyIcon from '@mui/icons-material/ViewComfy'; import globalize from 'scripts/globalize'; -import { LibraryViewSettings, ViewMode } from 'types/library'; +import { LibraryViewSettings } from 'types/library'; import { LibraryTab } from 'types/libraryTab'; const imageTypesOptions = [ @@ -30,7 +30,9 @@ const imageTypesOptions = [ interface ViewSettingsButtonProps { viewType: LibraryTab; libraryViewSettings: LibraryViewSettings; - setLibraryViewSettings: React.Dispatch>; + setLibraryViewSettings: React.Dispatch< + React.SetStateAction + >; } const ViewSettingsButton: FC = ({ @@ -72,27 +74,12 @@ const ViewSettingsButton: FC = ({ [setLibraryViewSettings] ); - const getVisibleImageType = () => { - const visibleImageType: ImageType[] = [ImageType.Primary]; - - if ( - viewType !== LibraryTab.Episodes - && viewType !== LibraryTab.Artists - && viewType !== LibraryTab.AlbumArtists - && viewType !== LibraryTab.Albums - ) { - visibleImageType.push(ImageType.Banner); - visibleImageType.push(ImageType.Disc); - visibleImageType.push(ImageType.Logo); - visibleImageType.push(ImageType.Thumb); - } - - return visibleImageType; - }; - - const isViewSettingsEnabled = () => { - return libraryViewSettings.ViewMode !== ViewMode.ListView; - }; + const isViewSettingsEnabled = + viewType !== LibraryTab.Episodes + && viewType !== LibraryTab.Songs + && viewType !== LibraryTab.Artists + && viewType !== LibraryTab.AlbumArtists + && viewType !== LibraryTab.Albums; return ( @@ -122,74 +109,77 @@ const ViewSettingsButton: FC = ({ '& .MuiFormControl-root': { m: 1, width: 220 } }} > + {isViewSettingsEnabled && ( + + + + {globalize.translate('LabelImageType')} + + + + + )} + - - - {globalize.translate('LabelImageType')} - - - - - {isViewSettingsEnabled() && ( - <> - - - - + + - + } + label={globalize.translate('ShowTitle')} + /> + {isViewSettingsEnabled && ( - + } + label={globalize.translate('ShowYear')} + />)} + - - - - )} + } + label={globalize.translate( + 'EnableCardLayout' + )} + /> + + ); diff --git a/src/apps/experimental/components/tabs/tabRoutes.ts b/src/apps/experimental/components/tabs/tabRoutes.ts index 32c3b8eb448..831bf60d0a3 100644 --- a/src/apps/experimental/components/tabs/tabRoutes.ts +++ b/src/apps/experimental/components/tabs/tabRoutes.ts @@ -1,4 +1,3 @@ -import globalize from 'scripts/globalize'; import * as userSettings from 'scripts/settings/userSettings'; import { LibraryTab } from 'types/libraryTab'; @@ -36,155 +35,7 @@ export const getDefaultTabIndex = (path: string, libraryId?: string | null) => { }; const TabRoutes: TabRoute[] = [ - { - path: '/livetv.html', - tabs: [ - { - index: 0, - label: globalize.translate('Programs'), - value: LibraryTab.Programs, - isDefault: true - }, - { - index: 1, - label: globalize.translate('Guide'), - value: LibraryTab.Guide - }, - { - index: 2, - label: globalize.translate('Channels'), - value: LibraryTab.Channels - }, - { - index: 3, - label: globalize.translate('Recordings'), - value: LibraryTab.Recordings - }, - { - index: 4, - label: globalize.translate('Schedule'), - value: LibraryTab.Schedule - }, - { - index: 5, - label: globalize.translate('Series'), - value: LibraryTab.Series - } - ] - }, - { - path: '/movies.html', - tabs: [ - { - index: 0, - label: globalize.translate('Movies'), - value: LibraryTab.Movies, - isDefault: true - }, - { - index: 1, - label: globalize.translate('Suggestions'), - value: LibraryTab.Suggestions - }, - { - index: 2, - label: globalize.translate('Trailers'), - value: LibraryTab.Trailers - }, - { - index: 3, - label: globalize.translate('Favorites'), - value: LibraryTab.Favorites - }, - { - index: 4, - label: globalize.translate('Collections'), - value: LibraryTab.Collections - }, - { - index: 5, - label: globalize.translate('Genres'), - value: LibraryTab.Genres - } - ] - }, - { - path: '/music.html', - tabs: [ - { - index: 0, - label: globalize.translate('Albums'), - value: LibraryTab.Albums, - isDefault: true - }, - { - index: 1, - label: globalize.translate('Suggestions'), - value: LibraryTab.Suggestions - }, - { - index: 2, - label: globalize.translate('HeaderAlbumArtists'), - value: LibraryTab.AlbumArtists - }, - { - index: 3, - label: globalize.translate('Artists'), - value: LibraryTab.Artists - }, - { - index: 4, - label: globalize.translate('Playlists'), - value: LibraryTab.Playlists - }, - { - index: 5, - label: globalize.translate('Songs'), - value: LibraryTab.Songs - }, - { - index: 6, - label: globalize.translate('Genres'), - value: LibraryTab.Genres - } - ] - }, - { - path: '/tv.html', - tabs: [ - { - index: 0, - label: globalize.translate('Shows'), - value: LibraryTab.Shows, - isDefault: true - }, - { - index: 1, - label: globalize.translate('Suggestions'), - value: LibraryTab.Suggestions - }, - { - index: 2, - label: globalize.translate('TabUpcoming'), - value: LibraryTab.Upcoming - }, - { - index: 3, - label: globalize.translate('Genres'), - value: LibraryTab.Genres - }, - { - index: 4, - label: globalize.translate('TabNetworks'), - value: LibraryTab.Networks - }, - { - index: 5, - label: globalize.translate('Episodes'), - value: LibraryTab.Episodes - } - ] - } + ]; export default TabRoutes; diff --git a/src/apps/experimental/routes/asyncRoutes/user.ts b/src/apps/experimental/routes/asyncRoutes/user.ts index 023e292edbe..de86b6fce53 100644 --- a/src/apps/experimental/routes/asyncRoutes/user.ts +++ b/src/apps/experimental/routes/asyncRoutes/user.ts @@ -5,5 +5,10 @@ export const ASYNC_USER_ROUTES: AsyncRoute[] = [ { path: 'search.html', page: 'search' }, { path: 'userprofile.html', page: 'user/userprofile' }, { path: 'home.html', page: 'home', type: AsyncRouteType.Experimental }, - { path: 'movies.html', page: 'movies', type: AsyncRouteType.Experimental } + { path: 'movies', page: 'library', type: AsyncRouteType.Experimental }, + { path: 'tv', page: 'library', type: AsyncRouteType.Experimental }, + { path: 'music', page: 'library', type: AsyncRouteType.Experimental }, + { path: 'books', page: 'library', type: AsyncRouteType.Experimental }, + { path: 'livetv', page: 'library', type: AsyncRouteType.Experimental }, + { path: 'homevideos', page: 'library', type: AsyncRouteType.Experimental } ]; diff --git a/src/apps/experimental/routes/legacyRoutes/user.ts b/src/apps/experimental/routes/legacyRoutes/user.ts index 965767d915c..4e282800848 100644 --- a/src/apps/experimental/routes/legacyRoutes/user.ts +++ b/src/apps/experimental/routes/legacyRoutes/user.ts @@ -19,12 +19,6 @@ export const LEGACY_USER_ROUTES: LegacyRoute[] = [ controller: 'livetv/livetvsuggested', view: 'livetv.html' } - }, { - path: 'music.html', - pageProps: { - controller: 'music/musicrecommended', - view: 'music/music.html' - } }, { path: 'mypreferencesmenu.html', pageProps: { @@ -61,12 +55,6 @@ export const LEGACY_USER_ROUTES: LegacyRoute[] = [ controller: 'user/subtitles/index', view: 'user/subtitles/index.html' } - }, { - path: 'tv.html', - pageProps: { - controller: 'shows/tvrecommended', - view: 'shows/tvrecommended.html' - } }, { path: 'video', pageProps: { diff --git a/src/apps/experimental/routes/library/index.tsx b/src/apps/experimental/routes/library/index.tsx new file mode 100644 index 00000000000..016d5fa9500 --- /dev/null +++ b/src/apps/experimental/routes/library/index.tsx @@ -0,0 +1,35 @@ +import React, { FC } from 'react'; +import { useSearchParams } from 'react-router-dom'; +import * as userSettings from 'scripts/settings/userSettings'; +import Loading from 'components/loading/LoadingComponent'; +import { useGetItem } from 'hooks/useFetchItems'; +import { LibrarySettingsProvider } from 'hooks/useLibrarySettings'; +import LibraryHeaderSection from 'apps/experimental/components/library/LibraryHeaderSection'; +import LibraryMainSection from 'apps/experimental/components/library/LibraryMainSection'; + +import { LibraryTab } from 'types/libraryTab'; + +const Library: FC = () => { + const [searchParams] = useSearchParams(); + const parentId = searchParams.get('topParentId'); + const defaultView = userSettings.get('landing-' + parentId, false) as LibraryTab; + const { isLoading, data: item } = useGetItem(parentId); + + if (isLoading) return ; + + return ( + + + + + + + + ); +}; + +export default Library; diff --git a/src/apps/experimental/routes/movies/CollectionsView.tsx b/src/apps/experimental/routes/movies/CollectionsView.tsx deleted file mode 100644 index 82ce0155654..00000000000 --- a/src/apps/experimental/routes/movies/CollectionsView.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; -import React, { FC } from 'react'; - -import ItemsView from '../../components/library/ItemsView'; -import { LibraryViewProps } from 'types/library'; -import { CollectionType } from 'types/collectionType'; -import { LibraryTab } from 'types/libraryTab'; - -const CollectionsView: FC = ({ parentId }) => { - return ( - - ); -}; - -export default CollectionsView; diff --git a/src/apps/experimental/routes/movies/FavoritesView.tsx b/src/apps/experimental/routes/movies/FavoritesView.tsx deleted file mode 100644 index 7bb89edb15a..00000000000 --- a/src/apps/experimental/routes/movies/FavoritesView.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; -import React, { FC } from 'react'; - -import ItemsView from '../../components/library/ItemsView'; -import { LibraryViewProps } from 'types/library'; -import { LibraryTab } from 'types/libraryTab'; - -const FavoritesView: FC = ({ parentId }) => { - return ( - - ); -}; - -export default FavoritesView; diff --git a/src/apps/experimental/routes/movies/GenresView.tsx b/src/apps/experimental/routes/movies/GenresView.tsx deleted file mode 100644 index a4d9d034a9b..00000000000 --- a/src/apps/experimental/routes/movies/GenresView.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; -import React, { FC } from 'react'; - -import GenresItemsContainer from '../../components/library/GenresItemsContainer'; -import { LibraryViewProps } from 'types/library'; -import { CollectionType } from 'types/collectionType'; - -const GenresView: FC = ({ parentId }) => { - return ( - - ); -}; - -export default GenresView; diff --git a/src/apps/experimental/routes/movies/MoviesView.tsx b/src/apps/experimental/routes/movies/MoviesView.tsx deleted file mode 100644 index b09f468db10..00000000000 --- a/src/apps/experimental/routes/movies/MoviesView.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; -import React, { FC } from 'react'; - -import ItemsView from '../../components/library/ItemsView'; -import { LibraryViewProps } from 'types/library'; -import { CollectionType } from 'types/collectionType'; -import { LibraryTab } from 'types/libraryTab'; - -const MoviesView: FC = ({ parentId }) => { - return ( - - ); -}; - -export default MoviesView; diff --git a/src/apps/experimental/routes/movies/TrailersView.tsx b/src/apps/experimental/routes/movies/TrailersView.tsx deleted file mode 100644 index 6acfd1c8ca5..00000000000 --- a/src/apps/experimental/routes/movies/TrailersView.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; -import React, { FC } from 'react'; - -import ItemsView from '../../components/library/ItemsView'; -import { LibraryViewProps } from 'types/library'; -import { LibraryTab } from 'types/libraryTab'; - -const TrailersView: FC = ({ parentId }) => { - return ( - - ); -}; - -export default TrailersView; diff --git a/src/apps/experimental/routes/movies/index.tsx b/src/apps/experimental/routes/movies/index.tsx deleted file mode 100644 index 8e74b7a3e47..00000000000 --- a/src/apps/experimental/routes/movies/index.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import React, { FC } from 'react'; -import { useLocation, useSearchParams } from 'react-router-dom'; - -import { getDefaultTabIndex } from '../../components/tabs/tabRoutes'; -import Page from 'components/Page'; -import CollectionsView from './CollectionsView'; -import FavoritesView from './FavoritesView'; -import GenresView from './GenresView'; -import MoviesView from './MoviesView'; -import SuggestionsView from './SuggestionsView'; -import TrailersView from './TrailersView'; - -const Movies: FC = () => { - const location = useLocation(); - const [ searchParams ] = useSearchParams(); - const searchParamsParentId = searchParams.get('topParentId'); - const searchParamsTab = searchParams.get('tab'); - const currentTabIndex = searchParamsTab !== null ? parseInt(searchParamsTab, 10) : - getDefaultTabIndex(location.pathname, searchParamsParentId); - - const getTabComponent = (index: number) => { - if (index == null) { - throw new Error('index cannot be null'); - } - - let component; - switch (index) { - case 1: - component = ; - break; - - case 2: - component = ; - break; - - case 3: - component = ; - break; - - case 4: - component = ; - break; - - case 5: - component = ; - break; - default: - component = ; - } - - return component; - }; - - return ( - - {getTabComponent(currentTabIndex)} - - - ); -}; - -export default Movies; diff --git a/src/components/router/appRouter.js b/src/components/router/appRouter.js index 253fdee9226..e6bd2e1b66b 100644 --- a/src/components/router/appRouter.js +++ b/src/components/router/appRouter.js @@ -599,6 +599,12 @@ class AppRouter { return '#/details?seriesTimerId=' + id + '&serverId=' + serverId; } + const layoutMode = localStorage.getItem('layout'); + + if (layoutMode === 'experimental' && item.CollectionType == 'livetv') { + return '#/livetv'; + } + if (item.CollectionType == 'livetv') { return '#/livetv.html'; } @@ -637,6 +643,50 @@ class AppRouter { return url; } + if (layoutMode === 'experimental' && context !== 'folders' && !itemHelper.isLocalItem(item)) { + if (item.CollectionType == 'movies') { + url = '#/movies?topParentId=' + item.Id + '&collectionType=' + item.CollectionType; + + if (options && options.section === 'latest') { + url += '&tab=1'; + } + + return url; + } + + if (item.CollectionType == 'tvshows') { + url = '#/tv?topParentId=' + item.Id + '&collectionType=' + item.CollectionType; + + if (options && options.section === 'latest') { + url += '&tab=1'; + } + + return url; + } + + if (item.CollectionType == 'music') { + url = '#/music?topParentId=' + item.Id + '&collectionType=' + item.CollectionType; + + if (options?.section === 'latest') { + url += '&tab=1'; + } + + return url; + } + + if (item.CollectionType == 'books') { + url = '#/books?topParentId=' + item.Id + '&collectionType=' + item.CollectionType; + + return url; + } + + if (item.CollectionType == 'homevideos') { + url = '#/homevideos?topParentId=' + item.Id + '&collectionType=' + item.CollectionType; + + return url; + } + } + if (context !== 'folders' && !itemHelper.isLocalItem(item)) { if (item.CollectionType == 'movies') { url = '#/movies.html?topParentId=' + item.Id; diff --git a/src/hooks/useFetchItems.ts b/src/hooks/useFetchItems.ts index 5e51d72655a..03f53bc9947 100644 --- a/src/hooks/useFetchItems.ts +++ b/src/hooks/useFetchItems.ts @@ -20,6 +20,7 @@ import { getStudiosApi } from '@jellyfin/sdk/lib/utils/api/studios-api'; import { getTvShowsApi } from '@jellyfin/sdk/lib/utils/api/tv-shows-api'; import { getPersonsApi } from '@jellyfin/sdk/lib/utils/api/persons-api'; import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api'; +import { getLiveTvApi } from '@jellyfin/sdk/lib/utils/api/live-tv-api'; import { useQuery } from '@tanstack/react-query'; import { type JellyfinApiContext, useApi } from './useApi'; @@ -27,11 +28,17 @@ import { getAlphaPickerQuery, getFieldsQuery, getFiltersQuery, - getLimitQuery + getLimitQuery, + getVisibleitemType } from 'utils/items'; import { Sections, SectionsViewType } from 'types/suggestionsSections'; import { LibraryViewSettings, ParentId } from 'types/library'; import { LibraryTab } from 'types/libraryTab'; +import { getItemTypesQuery } from '../utils/items'; +import { useLibrarySettings } from './useLibrarySettings'; +import { CollectionType } from 'types/collectionType'; +import datetime from 'scripts/datetime'; +import globalize from 'scripts/globalize'; const fetchGetItem = async ( currentApi: JellyfinApiContext, @@ -272,8 +279,7 @@ type GroupsGenres = { const fetchGetGroupsGenres = async ( currentApi: JellyfinApiContext, - itemType: BaseItemKind, - parentId: ParentId, + item: BaseItemDto | undefined, options?: AxiosRequestConfig ) => { const { api, user } = currentApi; @@ -283,9 +289,9 @@ const fetchGetGroupsGenres = async ( userId: user.Id, sortBy: [ItemSortBy.SortName], sortOrder: [SortOrder.Ascending], - includeItemTypes: [itemType], + includeItemTypes: getVisibleitemType(item?.CollectionType as CollectionType), enableTotalRecordCount: false, - parentId: parentId ?? undefined + parentId: item?.Id ?? undefined }, { signal: options?.signal @@ -300,7 +306,7 @@ const fetchGetGroupsGenres = async ( userId: user.Id, sortBy: [ItemSortBy.Random], sortOrder: [SortOrder.Ascending], - includeItemTypes: [itemType], + includeItemTypes: getVisibleitemType(item?.CollectionType as CollectionType), recursive: true, fields: [ ItemFields.PrimaryImageAspectRatio, @@ -312,7 +318,7 @@ const fetchGetGroupsGenres = async ( limit: 25, genreIds: genre.Id ? [genre.Id] : undefined, enableTotalRecordCount: false, - parentId: parentId ?? undefined + parentId: item?.Id ?? undefined }, { signal: options?.signal @@ -331,16 +337,15 @@ const fetchGetGroupsGenres = async ( } }; -export const useGetGroupsGenres = ( - itemType: BaseItemKind, - parentId: ParentId -) => { +export const useGetGroupsGenres = (item: BaseItemDto | undefined) => { const currentApi = useApi(); return useQuery({ - queryKey: ['GroupsGenres', itemType, parentId], + queryKey: ['GroupsGenres', item], queryFn: ({ signal }) => - fetchGetGroupsGenres(currentApi, itemType, parentId, { signal }), - enabled: !!parentId, + fetchGetGroupsGenres(currentApi, item, { + signal + }), + enabled: !!item?.Id, refetchOnWindowFocus: false, cacheTime: 0 }); @@ -379,7 +384,7 @@ export const useGetStudios = (parentId: ParentId, itemType: BaseItemKind[]) => { return useQuery({ queryKey: ['Studios', parentId, itemType], queryFn: ({ signal }) => - fetchGetStudios(currentApi, parentId, itemType, { signal }), + fetchGetStudios(currentApi, parentId, itemType, { signal: signal }), enabled: !!parentId }); }; @@ -387,8 +392,7 @@ export const useGetStudios = (parentId: ParentId, itemType: BaseItemKind[]) => { const fetchGetItemsViewByType = async ( currentApi: JellyfinApiContext, viewType: LibraryTab, - parentId: ParentId, - itemType: BaseItemKind[], + item: BaseItemDto | undefined, libraryViewSettings: LibraryViewSettings, options?: AxiosRequestConfig ) => { @@ -400,18 +404,18 @@ const fetchGetItemsViewByType = async ( response = await getArtistsApi(api).getAlbumArtists( { userId: user.Id, - parentId: parentId ?? undefined, + parentId: item?.Id ?? undefined, + includeItemTypes: getVisibleitemType(item?.CollectionType as CollectionType), + sortBy: [libraryViewSettings.SortBy], + sortOrder: [libraryViewSettings.SortOrder], enableImageTypes: [ libraryViewSettings.ImageType, ImageType.Backdrop ], + ...getLimitQuery(), ...getFieldsQuery(viewType, libraryViewSettings), ...getFiltersQuery(viewType, libraryViewSettings), - ...getLimitQuery(), ...getAlphaPickerQuery(libraryViewSettings), - sortBy: [libraryViewSettings.SortBy], - sortOrder: [libraryViewSettings.SortOrder], - includeItemTypes: itemType, startIndex: libraryViewSettings.StartIndex }, { @@ -424,18 +428,18 @@ const fetchGetItemsViewByType = async ( response = await getArtistsApi(api).getArtists( { userId: user.Id, - parentId: parentId ?? undefined, + parentId: item?.Id ?? undefined, + includeItemTypes: getVisibleitemType(item?.CollectionType as CollectionType), enableImageTypes: [ libraryViewSettings.ImageType, ImageType.Backdrop ], + ...getLimitQuery(), ...getFieldsQuery(viewType, libraryViewSettings), ...getFiltersQuery(viewType, libraryViewSettings), - ...getLimitQuery(), ...getAlphaPickerQuery(libraryViewSettings), sortBy: [libraryViewSettings.SortBy], sortOrder: [libraryViewSettings.SortOrder], - includeItemTypes: itemType, startIndex: libraryViewSettings.StartIndex }, { @@ -448,10 +452,47 @@ const fetchGetItemsViewByType = async ( response = await getStudiosApi(api).getStudios( { userId: user.Id, - parentId: parentId ?? undefined, - ...getFieldsQuery(viewType, libraryViewSettings), - includeItemTypes: itemType, + parentId: item?.Id ?? undefined, + includeItemTypes: getVisibleitemType(item?.CollectionType as CollectionType), enableImageTypes: [ImageType.Thumb], + ...getLimitQuery(), + ...getFieldsQuery(viewType, libraryViewSettings), + + startIndex: 0 + }, + { + signal: options?.signal + } + ); + break; + case LibraryTab.Genres: { + response = await getGenresApi(api).getGenres( + { + userId: user.Id, + sortBy: [ItemSortBy.SortName], + sortOrder: [SortOrder.Ascending], + includeItemTypes: getVisibleitemType(item?.CollectionType as CollectionType), + enableTotalRecordCount: false, + enableImageTypes: [ImageType.Primary], + fields: [ + ItemFields.PrimaryImageAspectRatio, + ItemFields.MediaSourceCount, + ItemFields.BasicSyncInfo, + ItemFields.ItemCounts + ], + parentId: item?.Id ?? undefined + }, + { + signal: options?.signal + } + ); + break; + } + case LibraryTab.Channels: { + response = await getLiveTvApi(api).getLiveTvChannels( + { + userId: user.Id, + ...getFieldsQuery(viewType, libraryViewSettings), startIndex: libraryViewSettings.StartIndex }, { @@ -459,13 +500,14 @@ const fetchGetItemsViewByType = async ( } ); break; + } default: { response = await getItemsApi(api).getItems( { userId: user.Id, recursive: true, imageTypeLimit: 1, - parentId: parentId ?? undefined, + parentId: item?.Id ?? undefined, enableImageTypes: [ libraryViewSettings.ImageType, ImageType.Backdrop @@ -474,13 +516,13 @@ const fetchGetItemsViewByType = async ( ...getFiltersQuery(viewType, libraryViewSettings), ...getLimitQuery(), ...getAlphaPickerQuery(libraryViewSettings), + ...getItemTypesQuery(viewType), isFavorite: viewType === LibraryTab.Favorites ? true : undefined, sortBy: [libraryViewSettings.SortBy], sortOrder: [libraryViewSettings.SortOrder], - includeItemTypes: itemType, startIndex: libraryViewSettings.StartIndex }, { @@ -496,27 +538,27 @@ const fetchGetItemsViewByType = async ( export const useGetItemsViewByType = ( viewType: LibraryTab, - parentId: ParentId, - itemType: BaseItemKind[], - libraryViewSettings: LibraryViewSettings + item: BaseItemDto | undefined ) => { const currentApi = useApi(); + const { libraryViewSettings } = useLibrarySettings(); + return useQuery({ queryKey: [ - 'ItemsViewByType', + 'ViewItemsByType', viewType, - parentId, - itemType, - libraryViewSettings + item, + { + ...libraryViewSettings + } ], queryFn: ({ signal }) => fetchGetItemsViewByType( currentApi, viewType, - parentId, - itemType, + item, libraryViewSettings, - { signal } + { signal: signal } ), refetchOnWindowFocus: false, keepPreviousData: true, @@ -536,8 +578,11 @@ export const useGetItemsViewByType = ( LibraryTab.Songs, LibraryTab.Books, LibraryTab.Photos, - LibraryTab.Videos - ].includes(viewType) && !!parentId + LibraryTab.Videos, + LibraryTab.Genres, + LibraryTab.PhotoAlbums, + LibraryTab.Channels + ].includes(viewType) && !!item?.Id }); }; @@ -572,16 +617,63 @@ export const useGetQueryFiltersLegacy = ( queryKey: ['QueryFiltersLegacy', parentId, itemType], queryFn: ({ signal }) => fetchGetQueryFiltersLegacy(currentApi, parentId, itemType, { - signal + signal: signal }), enabled: !!parentId }); }; -const fetchGetUpcomingEpisodes = async ( +type GroupsUpcomingEpisodes = { + name: string; + items: BaseItemDto[]; +}; + +function gropsUpcomingEpisodes(items: BaseItemDto[]) { + const groups: GroupsUpcomingEpisodes[] = []; + let currentGroupName = ''; + let currentGroup: BaseItemDto[] = []; + for (const item of items) { + let dateText = ''; + + if (item.PremiereDate) { + try { + const premiereDate = datetime.parseISO8601Date( + item.PremiereDate, + true + ); + dateText = datetime.isRelativeDay(premiereDate, -1) ? + globalize.translate('Yesterday') : + datetime.toLocaleDateString(premiereDate, { + weekday: 'long', + month: 'short', + day: 'numeric' + }); + } catch (err) { + console.error('error parsing timestamp for upcoming tv shows'); + } + } + + if (dateText != currentGroupName) { + if (currentGroup.length) { + groups.push({ + name: currentGroupName, + items: currentGroup + }); + } + + currentGroupName = dateText; + currentGroup = [item]; + } else { + currentGroup.push(item); + } + } + return groups; +} + +const fetchGetGroupsUpcomingEpisodes = async ( currentApi: JellyfinApiContext, - parentId: ParentId, - signal: AbortSignal | undefined + item: BaseItemDto | undefined, + options?: AxiosRequestConfig ) => { const { api, user } = currentApi; if (api && user?.Id) { @@ -590,7 +682,7 @@ const fetchGetUpcomingEpisodes = async ( userId: user.Id, limit: 25, fields: [ItemFields.AirTime], - parentId: parentId ?? undefined, + parentId: item?.Id ?? undefined, imageTypeLimit: 1, enableImageTypes: [ ImageType.Primary, @@ -599,20 +691,24 @@ const fetchGetUpcomingEpisodes = async ( ] }, { - signal: signal + signal: options?.signal } ); - return response.data; + const items = response.data.Items ?? []; + + return gropsUpcomingEpisodes(items); } }; -export const useGetUpcomingEpisodes = (parentId: ParentId) => { +export const useGetGroupsUpcomingEpisodes = (item: BaseItemDto | undefined) => { const currentApi = useApi(); return useQuery({ - queryKey: ['UpcomingEpisodes', parentId], + queryKey: ['GroupsUpcomingEpisodes', item], queryFn: ({ signal }) => - fetchGetUpcomingEpisodes(currentApi, parentId, signal), - enabled: !!parentId + fetchGetGroupsUpcomingEpisodes(currentApi, item, { + signal: signal + }), + enabled: !!item?.Id }); }; @@ -620,7 +716,7 @@ const fetchGetItemsByFavoriteType = async ( currentApi: JellyfinApiContext, parentId: ParentId, sections: Sections, - signal: AbortSignal | undefined + options?: AxiosRequestConfig ) => { const { api, user } = currentApi; if (api && user?.Id) { @@ -644,7 +740,7 @@ const fetchGetItemsByFavoriteType = async ( ...sections.parametersOptions }, { - signal: signal + signal: options?.signal } ) ).data.Items; @@ -666,7 +762,7 @@ const fetchGetItemsByFavoriteType = async ( ...sections.parametersOptions }, { - signal: signal + signal: options?.signal } ) ).data.Items; @@ -693,7 +789,7 @@ const fetchGetItemsByFavoriteType = async ( ...sections.parametersOptions }, { - signal: signal + signal: options?.signal } ) ).data.Items; @@ -712,7 +808,9 @@ export const useGetItemsByFavoriteType = ( return useQuery({ queryKey: ['ItemsByFavoriteType', sections.view], queryFn: ({ signal }) => - fetchGetItemsByFavoriteType(currentApi, parentId, sections, signal), + fetchGetItemsByFavoriteType(currentApi, parentId, sections, { + signal: signal + }), enabled: !!sections.view }); }; diff --git a/src/hooks/useLibrarySettings.tsx b/src/hooks/useLibrarySettings.tsx new file mode 100644 index 00000000000..4a70ce7f485 --- /dev/null +++ b/src/hooks/useLibrarySettings.tsx @@ -0,0 +1,183 @@ +import React, { + createContext, + FC, + useContext, + useMemo, + useState +} from 'react'; +import useLocalStorageState from 'use-local-storage-state'; +import { LibraryViewSelectOptions, LibraryViewSettings, ParentId, ViewMode } from 'types/library'; +import { LibraryTab } from 'types/libraryTab'; +import { Box } from '@mui/material'; +import Page from 'components/Page'; +import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by'; +import { BaseItemDto, ImageType, SortOrder } from '@jellyfin/sdk/lib/generated-client'; +import { CollectionType } from 'types/collectionType'; + +const getLibraryViewMenuOptions = (collectionType: CollectionType) => { + const viewSelectOptions: LibraryViewSelectOptions[] = []; + if (collectionType === CollectionType.Movies) { + viewSelectOptions.push( + { title: 'Movies', value: LibraryTab.Movies }, + { title: 'Trailers', value: LibraryTab.Trailers }, + { title: 'Collections', value: LibraryTab.Collections }, + { title: 'Genres', value: LibraryTab.Genres }, + { title: 'Studios', value: LibraryTab.Networks }, + { title: 'Suggestions', value: LibraryTab.Suggestions } + ); + } + + if (collectionType === CollectionType.TvShows) { + viewSelectOptions.push( + { title: 'Series', value: LibraryTab.Series }, + { title: 'Episodes', value: LibraryTab.Episodes }, + { title: 'Genres', value: LibraryTab.Genres }, + { title: 'Studios', value: LibraryTab.Networks }, + { title: 'TabUpcoming', value: LibraryTab.Upcoming }, + { title: 'Suggestions', value: LibraryTab.Suggestions } + ); + } + + if (collectionType === CollectionType.Music) { + viewSelectOptions.push( + { title: 'Albums', value: LibraryTab.Albums }, + { title: 'HeaderAlbumArtists', value: LibraryTab.AlbumArtists }, + { title: 'Artists', value: LibraryTab.Artists }, + { title: 'Playlists', value: LibraryTab.Playlists }, + { title: 'Genres', value: LibraryTab.Genres }, + { title: 'Songs', value: LibraryTab.Songs }, + { title: 'Suggestions', value: LibraryTab.Suggestions } + ); + } + + if (collectionType === CollectionType.Books) { + viewSelectOptions.push({ title: 'Books', value: LibraryTab.Books }); + } + + if (collectionType === CollectionType.LiveTv) { + viewSelectOptions.push({ + title: 'Channels', + value: LibraryTab.Channels + }); + } + + if (collectionType === CollectionType.HomeVideos) { + viewSelectOptions.push( + { title: 'HeaderPhotoAlbums', value: LibraryTab.PhotoAlbums }, + { title: 'Photos', value: LibraryTab.Photos }, + { title: 'HeaderVideos', value: LibraryTab.Videos } + ); + } + + return viewSelectOptions; +}; + +const getBackDropType = (collectionType: CollectionType) => { + if (collectionType === CollectionType.Movies) { + return 'movie'; + } + + if (collectionType === CollectionType.TvShows) { + return 'series'; + } + + if (collectionType === CollectionType.Music) { + return 'musicartist'; + } + + if (collectionType === CollectionType.Books) { + return 'book'; + } + + if (collectionType === CollectionType.HomeVideos) { + return 'video, photo'; + } + + return ''; +}; +export interface LibrarySettingsContextProps { + item: BaseItemDto | undefined; + viewSelectOptions: LibraryViewSelectOptions[]; + viewType: LibraryTab; + setViewType: React.Dispatch>; + libraryViewSettings: LibraryViewSettings; + setLibraryViewSettings: React.Dispatch< + React.SetStateAction + >; +} + +const LibrarySettingsContext = createContext( + {} as LibrarySettingsContextProps +); + +export const useLibrarySettings = () => useContext(LibrarySettingsContext); + +const getSettingsKey = (viewType: LibraryTab, parentId: ParentId) => { + return `${viewType} - ${parentId}`; +}; + +const DEFAULT_Library_View_SETTINGS: LibraryViewSettings = { + SortBy: ItemSortBy.SortName, + SortOrder: SortOrder.Ascending, + StartIndex: 0, + CardLayout: false, + ImageType: ImageType.Primary, + ViewMode: ViewMode.GridView, + ShowTitle: true, + ShowYear: false +}; + +interface LibrarySettingsProviderProps { + item: BaseItemDto | undefined; + parentId?: string | null; + defaultView: LibraryTab; + collectionType?: CollectionType; +} + +export const LibrarySettingsProvider: FC = ({ + item, + defaultView, + children +}) => { + const viewSelectOptions = getLibraryViewMenuOptions(item?.CollectionType as CollectionType); + const [viewType, setViewType] = useState( + defaultView ?? viewSelectOptions[0].value + ); + const [libraryViewSettings, setLibraryViewSettings] = + useLocalStorageState( + getSettingsKey(viewType, item?.Id), + { + defaultValue: DEFAULT_Library_View_SETTINGS + } + ); + + const context = useMemo( + () => ({ + item, + viewSelectOptions, + viewType, + setViewType, + libraryViewSettings, + setLibraryViewSettings + }), + [ + item, + viewSelectOptions, + viewType, + libraryViewSettings, + setLibraryViewSettings + ] + ); + + return ( + + + {children} + + + ); +}; diff --git a/src/types/library.ts b/src/types/library.ts index 37d0781cba0..018cab5fa03 100644 --- a/src/types/library.ts +++ b/src/types/library.ts @@ -4,6 +4,7 @@ import type { SortOrder } from '@jellyfin/sdk/lib/generated-client/models/sort-o import type { SeriesStatus } from '@jellyfin/sdk/lib/generated-client/models/series-status'; import type { ImageType } from '@jellyfin/sdk/lib/generated-client'; import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by'; +import { LibraryTab } from './libraryTab'; export type ParentId = string | null | undefined; @@ -64,3 +65,8 @@ export interface LibraryViewSettings { Filters?: Filters; Alphabet?: string | null; } + +export interface LibraryViewSelectOptions { + title: string; + value: LibraryTab; +} diff --git a/src/types/libraryTab.ts b/src/types/libraryTab.ts index 1484ed9646d..4147bde34cb 100644 --- a/src/types/libraryTab.ts +++ b/src/types/libraryTab.ts @@ -21,6 +21,7 @@ export enum LibraryTab { Trailers = 'trailers', Upcoming = 'upcoming', Photos = 'photos', + PhotoAlbums = 'photoalbums', Videos = 'videos', - Books = 'books', + Books = 'books' } diff --git a/src/utils/items.ts b/src/utils/items.ts index ce2efc8dc25..8c357042958 100644 --- a/src/utils/items.ts +++ b/src/utils/items.ts @@ -1,3 +1,4 @@ +import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; import { ItemFields } from '@jellyfin/sdk/lib/generated-client/models/item-fields'; import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type'; import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by'; @@ -5,6 +6,89 @@ import { SortOrder } from '@jellyfin/sdk/lib/generated-client/models/sort-order' import * as userSettings from 'scripts/settings/userSettings'; import { EpisodeFilter, FeatureFilters, LibraryViewSettings, ParentId, VideoBasicFilter, ViewMode } from '../types/library'; import { LibraryTab } from 'types/libraryTab'; +import { CollectionType } from 'types/collectionType'; + +export const getVisibleitemType = (collectionType: CollectionType) => { + const itemType: BaseItemKind[] = []; + + if (collectionType === CollectionType.Movies) { + itemType.push(BaseItemKind.Movie); + } + + if (collectionType === CollectionType.TvShows) { + itemType.push(BaseItemKind.Series); + } + + if (collectionType === CollectionType.Music) { + itemType.push(BaseItemKind.MusicAlbum); + } + + return itemType; +}; + +export const getItemTypesEnum = (viewType: LibraryTab) => { + const itemType: BaseItemKind[] = []; + + if (viewType === LibraryTab.Movies || viewType === LibraryTab.Favorites) { + itemType.push(BaseItemKind.Movie); + } + + if (viewType === LibraryTab.Collections) { + itemType.push(BaseItemKind.BoxSet); + } + + if (viewType === LibraryTab.Trailers) { + itemType.push(BaseItemKind.Trailer); + } + + if (viewType === LibraryTab.Series) { + itemType.push(BaseItemKind.Series); + } + + if (viewType === LibraryTab.Episodes) { + itemType.push(BaseItemKind.Episode); + } + + if (viewType === LibraryTab.Albums) { + itemType.push(BaseItemKind.MusicAlbum); + } + + if (viewType === LibraryTab.Songs) { + itemType.push(BaseItemKind.Audio); + } + + if (viewType === LibraryTab.Playlists) { + itemType.push(BaseItemKind.Playlist); + } + + if (viewType === LibraryTab.Books) { + itemType.push(BaseItemKind.Book); + } + + if (viewType === LibraryTab.PhotoAlbums) { + itemType.push(BaseItemKind.PhotoAlbum); + } + + if (viewType === LibraryTab.Photos) { + itemType.push(BaseItemKind.Photo); + } + + if (viewType === LibraryTab.Videos) { + itemType.push(BaseItemKind.Video); + } + + if (viewType === LibraryTab.Channels) { + itemType.push(BaseItemKind.Channel); + } + + return itemType; +}; + +export const getItemTypesQuery = (viewType: LibraryTab) => { + return { + includeItemTypes: getItemTypesEnum(viewType) + }; +}; export const getVideoBasicFilter = (libraryViewSettings: LibraryViewSettings) => { let isHd; diff --git a/webpack.common.js b/webpack.common.js index 8e729214198..c0cb05439e1 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -199,6 +199,7 @@ const config = { path.resolve(__dirname, 'node_modules/screenfull'), path.resolve(__dirname, 'node_modules/ssr-window'), path.resolve(__dirname, 'node_modules/swiper'), + path.resolve(__dirname, 'node_modules/use-local-storage-state'), path.resolve(__dirname, 'src') ], use: [{