diff --git a/src/components/Shelf/Shelf.tsx b/src/components/Shelf/Shelf.tsx index ab2c43d73..2c715bee8 100644 --- a/src/components/Shelf/Shelf.tsx +++ b/src/components/Shelf/Shelf.tsx @@ -8,7 +8,7 @@ import useBreakpoint, { Breakpoint, Breakpoints } from '#src/hooks/useBreakpoint import ChevronLeft from '#src/icons/ChevronLeft'; import ChevronRight from '#src/icons/ChevronRight'; import { findPlaylistImageForWidth } from '#src/utils/collection'; -import type { AccessModel } from '#types/Config'; +import type { AccessModel, ContentType } from '#types/Config'; import { isLocked } from '#src/utils/entitlements'; import TileDock from '#src/components/TileDock/TileDock'; import Card from '#src/components/Card/Card'; @@ -32,7 +32,8 @@ export const featuredTileBreakpoints: Breakpoints = { export type ShelfProps = { playlist: Playlist; - onCardClick: (playlistItem: PlaylistItem, playlistId?: string) => void; + type: ContentType; + onCardClick: (playlistItem: PlaylistItem, playlistId: string | undefined, type: ContentType) => void; onCardHover?: (playlistItem: PlaylistItem) => void; watchHistory?: { [key: string]: number }; enableTitle?: boolean; @@ -48,6 +49,7 @@ export type ShelfProps = { const Shelf: React.FC = ({ playlist, + type, onCardClick, onCardHover, title, @@ -79,7 +81,7 @@ const Shelf: React.FC = ({ seriesId={item.seriesId} seasonNumber={item.seasonNumber} episodeNumber={item.episodeNumber} - onClick={isInView ? () => onCardClick(item, playlist.feedid) : undefined} + onClick={isInView ? () => onCardClick(item, playlist.feedid, type) : undefined} onHover={typeof onCardHover === 'function' ? () => onCardHover(item) : undefined} featured={featured} disabled={!isInView} @@ -87,7 +89,20 @@ const Shelf: React.FC = ({ isLocked={isLocked(accessModel, isLoggedIn, hasSubscription, item)} /> ), - [enableCardTitles, featured, imageSourceWidth, loading, onCardClick, onCardHover, playlist.feedid, watchHistory, accessModel, isLoggedIn, hasSubscription], + [ + enableCardTitles, + featured, + imageSourceWidth, + loading, + onCardClick, + onCardHover, + playlist.feedid, + watchHistory, + accessModel, + isLoggedIn, + hasSubscription, + type, + ], ); const renderRightControl = useCallback( diff --git a/src/containers/Playlist/PlaylistContainer.tsx b/src/containers/Playlist/PlaylistContainer.tsx index 5c1db0148..5d728d708 100644 --- a/src/containers/Playlist/PlaylistContainer.tsx +++ b/src/containers/Playlist/PlaylistContainer.tsx @@ -6,6 +6,7 @@ import { useWatchHistoryStore } from '#src/stores/WatchHistoryStore'; import { useFavoritesStore } from '#src/stores/FavoritesStore'; import { PLAYLIST_LIMIT } from '#src/config'; import type { Playlist, PlaylistItem } from '#types/playlist'; +import type { ContentType } from '#types/Config'; type ChildrenParams = { playlist: Playlist; @@ -16,7 +17,7 @@ type ChildrenParams = { type Props = { playlistId?: string; - type: 'playlist' | 'continue_watching' | 'favorites'; + type: ContentType; relatedItem?: PlaylistItem; onPlaylistUpdate?: (playlist: Playlist) => void; children: (childrenParams: ChildrenParams) => JSX.Element; @@ -25,7 +26,7 @@ type Props = { }; const PlaylistContainer = ({ playlistId, type, onPlaylistUpdate, style, children, showEmpty = false }: Props): JSX.Element | null => { - const isAlternativeShelf = PersonalShelves.includes(playlistId as PersonalShelf); + const isAlternativeShelf = PersonalShelves.some((shelfType) => shelfType === type); const { isLoading, error, diff --git a/src/screens/Home/Home.tsx b/src/screens/Home/Home.tsx index fedd2ba5c..ab74eaed1 100644 --- a/src/screens/Home/Home.tsx +++ b/src/screens/Home/Home.tsx @@ -54,8 +54,8 @@ const Home = (): JSX.Element => { const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow); const onCardClick = useCallback( - (playlistItem: PlaylistItem, playlistId?: string) => { - history.push(cardUrl(playlistItem, playlistId, playlistId === PersonalShelf.ContinueWatching)); + (playlistItem, playlistId, type) => { + history.push(cardUrl(playlistItem, playlistId, type === PersonalShelf.ContinueWatching)); }, [history], ); @@ -70,15 +70,16 @@ const Home = (): JSX.Element => { const playlistKey = contentItem.contentId || contentItem.type; return ( - + {({ playlist, error, isLoading, style }) => (
filterPlaylist(playlist, filter), [playlist, filter]); + const shouldShowFilter = !isLoading && !isPlaceholderData && Boolean(categories.length); const updateBlurImage = useBlurImageUpdater(filteredPlaylist); // User @@ -63,7 +64,7 @@ function Playlist({

{isLoading || isPlaceholderData ? 'Loading' : title}

- {!isLoading && !isPlaceholderData && } + {shouldShowFilter && }
{ const menuItem = config.menu.find((item) => item.contentId === playlistId); - const filters = menuItem?.filterTags?.split(','); + const filters = menuItem?.filterTags?.split(',').filter(Boolean); return filters || []; };