diff --git a/src/renderer/features/albums/components/album-detail-content.tsx b/src/renderer/features/albums/components/album-detail-content.tsx index 6db00607..7c4e164a 100644 --- a/src/renderer/features/albums/components/album-detail-content.tsx +++ b/src/renderer/features/albums/components/album-detail-content.tsx @@ -1,40 +1,36 @@ -import { MutableRefObject, useCallback, useMemo } from 'react'; -import { Button } from '/@/renderer/components'; import { ColDef, RowDoubleClickedEvent, RowHeightParams, RowNode } from '@ag-grid-community/core'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import { Box, Group, Stack } from '@mantine/core'; import { useSetState } from '@mantine/hooks'; +import { MutableRefObject, useCallback, useMemo } from 'react'; import { RiHeartFill, RiHeartLine, RiMoreFill } from 'react-icons/ri'; import { generatePath, useParams } from 'react-router'; -import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query'; import { Link } from 'react-router-dom'; import styled from 'styled-components'; -import { AppRoute } from '/@/renderer/router/routes'; -import { useContainerQuery } from '/@/renderer/hooks'; -import { PersistedTableColumn, usePlayButtonBehavior } from '/@/renderer/store/settings.store'; +import { AlbumListSort, LibraryItem, QueueSong, SortOrder } from '/@/renderer/api/types'; +import { Button } from '/@/renderer/components'; +import { MemoizedSwiperGridCarousel } from '/@/renderer/components/grid-carousel'; +import { getColumnDefs, VirtualTable } from '/@/renderer/components/virtual-table'; +import { FullWidthDiscCell } from '/@/renderer/components/virtual-table/cells/full-width-disc-cell'; +import { useCurrentSongRowStyles } from '/@/renderer/components/virtual-table/hooks/use-current-song-row-styles'; +import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query'; +import { useAlbumList } from '/@/renderer/features/albums/queries/album-list-query'; import { useHandleGeneralContextMenu, useHandleTableContextMenu, } from '/@/renderer/features/context-menu'; -import { Play, ServerType, TableColumn } from '/@/renderer/types'; import { ALBUM_CONTEXT_MENU_ITEMS, SONG_CONTEXT_MENU_ITEMS, } from '/@/renderer/features/context-menu/context-menu-items'; -import { PlayButton, useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared'; -import { useAlbumList } from '/@/renderer/features/albums/queries/album-list-query'; -import { AlbumListSort, LibraryItem, QueueSong, SortOrder } from '/@/renderer/api/types'; import { usePlayQueueAdd } from '/@/renderer/features/player'; -import { useCurrentServer } from '/@/renderer/store'; -import { - getColumnDefs, - useFixedTableHeader, - VirtualTable, -} from '/@/renderer/components/virtual-table'; -import { SwiperGridCarousel } from '/@/renderer/components/grid-carousel'; -import { FullWidthDiscCell } from '/@/renderer/components/virtual-table/cells/full-width-disc-cell'; -import { useCurrentSongRowStyles } from '/@/renderer/components/virtual-table/hooks/use-current-song-row-styles'; +import { PlayButton, useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared'; import { LibraryBackgroundOverlay } from '/@/renderer/features/shared/components/library-background-overlay'; +import { useContainerQuery } from '/@/renderer/hooks'; +import { AppRoute } from '/@/renderer/router/routes'; +import { useCurrentServer } from '/@/renderer/store'; +import { PersistedTableColumn, usePlayButtonBehavior } from '/@/renderer/store/settings.store'; +import { Play, ServerType, TableColumn } from '/@/renderer/types'; const isFullWidthRow = (node: RowNode) => { return node.id?.startsWith('disc-'); @@ -373,59 +369,55 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP ref={cq.ref} mt="5rem" > - <> - {cq.height || cq.width ? ( - <> - {carousels - .filter((c) => !c.isHidden) - .map((carousel, index) => ( - + {carousels + .filter((c) => !c.isHidden) + .map((carousel, index) => ( + - ))} - - ) : null} - + }, + ]} + data={carousel.data} + isLoading={carousel.loading} + itemType={LibraryItem.ALBUM} + route={{ + route: AppRoute.LIBRARY_ALBUMS_DETAIL, + slugs: [{ idProperty: 'id', slugProperty: 'albumId' }], + }} + title={{ + label: carousel.title, + }} + uniqueId={carousel.uniqueId} + /> + ))} + + ) : null} diff --git a/src/renderer/features/artists/components/album-artist-detail-content.tsx b/src/renderer/features/artists/components/album-artist-detail-content.tsx index 1bed239c..764e73ad 100644 --- a/src/renderer/features/artists/components/album-artist-detail-content.tsx +++ b/src/renderer/features/artists/components/album-artist-detail-content.tsx @@ -1,26 +1,10 @@ -import { useMemo } from 'react'; -import { Button, Text, TextTitle } from '/@/renderer/components'; import { ColDef, RowDoubleClickedEvent } from '@ag-grid-community/core'; import { Box, Group, Stack } from '@mantine/core'; +import { useMemo } from 'react'; import { RiHeartFill, RiHeartLine, RiMoreFill } from 'react-icons/ri'; import { generatePath, useParams } from 'react-router'; -import { useCurrentServer } from '/@/renderer/store'; import { createSearchParams, Link } from 'react-router-dom'; import styled from 'styled-components'; -import { AppRoute } from '/@/renderer/router/routes'; -import { useContainerQuery } from '/@/renderer/hooks'; -import { usePlayButtonBehavior } from '/@/renderer/store/settings.store'; -import { - useHandleGeneralContextMenu, - useHandleTableContextMenu, -} from '/@/renderer/features/context-menu'; -import { CardRow, Play, TableColumn } from '/@/renderer/types'; -import { - ARTIST_CONTEXT_MENU_ITEMS, - SONG_CONTEXT_MENU_ITEMS, -} from '/@/renderer/features/context-menu/context-menu-items'; -import { PlayButton, useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared'; -import { useAlbumList } from '/@/renderer/features/albums/queries/album-list-query'; import { Album, AlbumArtist, @@ -30,12 +14,28 @@ import { ServerType, SortOrder, } from '/@/renderer/api/types'; -import { usePlayQueueAdd } from '/@/renderer/features/player'; +import { Button, Text, TextTitle } from '/@/renderer/components'; +import { MemoizedSwiperGridCarousel } from '/@/renderer/components/grid-carousel'; +import { getColumnDefs, VirtualTable } from '/@/renderer/components/virtual-table'; +import { useAlbumList } from '/@/renderer/features/albums/queries/album-list-query'; import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query'; import { useTopSongsList } from '/@/renderer/features/artists/queries/top-songs-list-query'; -import { getColumnDefs, VirtualTable } from '/@/renderer/components/virtual-table'; -import { SwiperGridCarousel } from '/@/renderer/components/grid-carousel'; +import { + useHandleGeneralContextMenu, + useHandleTableContextMenu, +} from '/@/renderer/features/context-menu'; +import { + ARTIST_CONTEXT_MENU_ITEMS, + SONG_CONTEXT_MENU_ITEMS, +} from '/@/renderer/features/context-menu/context-menu-items'; +import { usePlayQueueAdd } from '/@/renderer/features/player'; +import { PlayButton, useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared'; import { LibraryBackgroundOverlay } from '/@/renderer/features/shared/components/library-background-overlay'; +import { useContainerQuery } from '/@/renderer/hooks'; +import { AppRoute } from '/@/renderer/router/routes'; +import { useCurrentServer } from '/@/renderer/store'; +import { usePlayButtonBehavior } from '/@/renderer/store/settings.store'; +import { CardRow, Play, TableColumn } from '/@/renderer/types'; const ContentContainer = styled.div` position: relative; @@ -195,64 +195,74 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten }, }; - const carousels = [ - { - data: recentAlbumsQuery?.data?.items, - isHidden: !recentAlbumsQuery?.data?.items?.length, - itemType: LibraryItem.ALBUM, - loading: recentAlbumsQuery?.isLoading || recentAlbumsQuery.isFetching, - title: ( - + const carousels = useMemo(() => { + return [ + { + data: recentAlbumsQuery?.data?.items, + isHidden: !recentAlbumsQuery?.data?.items?.length, + itemType: LibraryItem.ALBUM, + loading: recentAlbumsQuery?.isLoading || recentAlbumsQuery.isFetching, + title: ( + + + Recent releases + + + + ), + uniqueId: 'recentReleases', + }, + { + data: compilationAlbumsQuery?.data?.items, + isHidden: !compilationAlbumsQuery?.data?.items?.length, + itemType: LibraryItem.ALBUM, + loading: compilationAlbumsQuery?.isLoading || compilationAlbumsQuery.isFetching, + title: ( - Recent releases + Appears on - - - ), - uniqueId: 'recentReleases', - }, - { - data: compilationAlbumsQuery?.data?.items, - isHidden: !compilationAlbumsQuery?.data?.items?.length, - itemType: LibraryItem.ALBUM, - loading: compilationAlbumsQuery?.isLoading || compilationAlbumsQuery.isFetching, - title: ( - - Appears on - - ), - uniqueId: 'compilationAlbums', - }, - { - data: detailQuery?.data?.similarArtists || [], - isHidden: !detailQuery?.data?.similarArtists, - itemType: LibraryItem.ALBUM_ARTIST, - loading: detailQuery?.isLoading || detailQuery.isFetching, - title: ( - - Related artists - - ), - uniqueId: 'similarArtists', - }, - ]; + Related artists + + ), + uniqueId: 'similarArtists', + }, + ]; + }, [ + artistDiscographyLink, + compilationAlbumsQuery?.data?.items, + compilationAlbumsQuery.isFetching, + compilationAlbumsQuery?.isLoading, + detailQuery?.data?.similarArtists, + recentAlbumsQuery?.data?.items, + recentAlbumsQuery.isFetching, + recentAlbumsQuery?.isLoading, + ]); const playButtonBehavior = usePlayButtonBehavior(); @@ -457,6 +467,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten autoFitColumns autoHeight deselectOnClickOutside + stickyHeader suppressCellFocus suppressHorizontalScroll suppressLoadingOverlay @@ -477,7 +488,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten {carousels .filter((c) => !c.isHidden) .map((carousel) => ( - { @@ -161,7 +161,7 @@ const HomeRoute = () => { return carousel; }) .map((carousel) => ( -