remove refresh buttons from grid carousel by default

This commit is contained in:
jeffvli
2025-12-23 21:27:12 -08:00
parent 05efd0f318
commit 936ba73fe4
4 changed files with 19 additions and 3 deletions
@@ -18,6 +18,7 @@ interface Card {
interface GridCarouselProps { interface GridCarouselProps {
cards: Card[]; cards: Card[];
enableRefresh?: boolean;
hasNextPage?: boolean; hasNextPage?: boolean;
loadNextPage?: () => void; loadNextPage?: () => void;
onNextPage: (page: number) => void; onNextPage: (page: number) => void;
@@ -46,6 +47,7 @@ const pageVariants: Variants = {
function BaseGridCarousel(props: GridCarouselProps) { function BaseGridCarousel(props: GridCarouselProps) {
const { const {
cards, cards,
enableRefresh = false,
hasNextPage, hasNextPage,
loadNextPage, loadNextPage,
onNextPage, onNextPage,
@@ -164,10 +166,10 @@ function BaseGridCarousel(props: GridCarouselProps) {
) : ( ) : (
title title
)} )}
{onRefresh && ( {enableRefresh && onRefresh && (
<ActionIcon <ActionIcon
icon="refresh" icon="refresh"
iconProps={{ size: 'md' }} iconProps={{ size: 'xs' }}
onClick={onRefresh} onClick={onRefresh}
size="xs" size="xs"
tooltip={{ label: 'Refresh' }} tooltip={{ label: 'Refresh' }}
@@ -342,6 +342,7 @@ export const AlbumDetailContent = () => {
uniqueId: 'moreFromArtist', uniqueId: 'moreFromArtist',
}, },
{ {
enableRefresh: true,
excludeIds: detailQuery?.data?.id ? [detailQuery.data.id] : undefined, excludeIds: detailQuery?.data?.id ? [detailQuery.data.id] : undefined,
isHidden: !detailQuery?.data?.genres?.[0], isHidden: !detailQuery?.data?.genres?.[0],
query: { query: {
@@ -413,6 +414,7 @@ export const AlbumDetailContent = () => {
.filter((c) => !c.isHidden) .filter((c) => !c.isHidden)
.map((carousel) => ( .map((carousel) => (
<AlbumInfiniteCarousel <AlbumInfiniteCarousel
enableRefresh={carousel.enableRefresh}
excludeIds={carousel.excludeIds} excludeIds={carousel.excludeIds}
key={`carousel-${carousel.uniqueId}`} key={`carousel-${carousel.uniqueId}`}
query={carousel.query} query={carousel.query}
@@ -19,6 +19,7 @@ import {
import { ItemListKey } from '/@/shared/types/types'; import { ItemListKey } from '/@/shared/types/types';
interface AlbumCarouselProps { interface AlbumCarouselProps {
enableRefresh?: boolean;
excludeIds?: string[]; excludeIds?: string[];
query?: Partial<Omit<AlbumListQuery, 'startIndex'>>; query?: Partial<Omit<AlbumListQuery, 'startIndex'>>;
rowCount?: number; rowCount?: number;
@@ -28,7 +29,15 @@ interface AlbumCarouselProps {
} }
const BaseAlbumInfiniteCarousel = (props: AlbumCarouselProps) => { const BaseAlbumInfiniteCarousel = (props: AlbumCarouselProps) => {
const { excludeIds, query: additionalQuery, rowCount = 1, sortBy, sortOrder, title } = props; const {
enableRefresh,
excludeIds,
query: additionalQuery,
rowCount = 1,
sortBy,
sortOrder,
title,
} = props;
const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM); const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM);
const { const {
data: albums, data: albums,
@@ -81,6 +90,7 @@ const BaseAlbumInfiniteCarousel = (props: AlbumCarouselProps) => {
return ( return (
<GridCarousel <GridCarousel
cards={cards} cards={cards}
enableRefresh={enableRefresh}
hasNextPage={hasNextPage} hasNextPage={hasNextPage}
loadNextPage={fetchNextPage} loadNextPage={fetchNextPage}
onNextPage={handleNextPage} onNextPage={handleNextPage}
@@ -38,6 +38,7 @@ const HomeRoute = () => {
title: t('page.home.mostPlayed', { postProcess: 'sentenceCase' }), title: t('page.home.mostPlayed', { postProcess: 'sentenceCase' }),
}, },
[HomeItem.RANDOM]: { [HomeItem.RANDOM]: {
enableRefresh: true,
itemType: LibraryItem.ALBUM, itemType: LibraryItem.ALBUM,
sortBy: AlbumListSort.RANDOM, sortBy: AlbumListSort.RANDOM,
sortOrder: SortOrder.ASC, sortOrder: SortOrder.ASC,
@@ -118,6 +119,7 @@ const HomeRoute = () => {
if (carousel.itemType === LibraryItem.ALBUM) { if (carousel.itemType === LibraryItem.ALBUM) {
return ( return (
<AlbumInfiniteCarousel <AlbumInfiniteCarousel
enableRefresh={carousel.enableRefresh}
key={`carousel-${carousel.uniqueId}`} key={`carousel-${carousel.uniqueId}`}
rowCount={1} rowCount={1}
sortBy={carousel.sortBy} sortBy={carousel.sortBy}