diff --git a/src/renderer/components/item-card/item-card.tsx b/src/renderer/components/item-card/item-card.tsx index 6d8de341a..38a168fe9 100644 --- a/src/renderer/components/item-card/item-card.tsx +++ b/src/renderer/components/item-card/item-card.tsx @@ -280,6 +280,7 @@ const CompactItemCard = ({ onDragStart={handleLinkDragStart} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} + state={{ item: data }} to={navigationPath} > {imageContainerContent} @@ -466,6 +467,7 @@ const DefaultItemCard = ({ onDragStart={handleLinkDragStart} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} + state={{ item: data }} to={navigationPath} > {imageContainerContent} @@ -716,6 +718,7 @@ const PosterItemCard = ({ onDragStart={handleLinkDragStart} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} + state={{ item: data }} to={navigationPath} > {imageContainerContent} @@ -789,6 +792,7 @@ export const getDataRows = (): DataRow[] => { case LibraryItem.ALBUM: return ( { case LibraryItem.ALBUM_ARTIST: return ( { case LibraryItem.PLAYLIST: return ( { return (data as Album | Song).albumArtists.map((artist, index) => ( { return (data as Album | Song).artists.map((artist, index) => ( { if ('album' in data && data.album) { const song = data as Song; if ('albumId' in song && song.albumId) { + const albumData = { + id: song.albumId, + imageUrl: song.imageUrl, + name: song.album, + }; return ( { > {albumArtists.map((albumArtist, index) => ( - + {albumArtist.name} {index < albumArtists.length - 1 && ', '} diff --git a/src/renderer/components/item-list/item-table-list/columns/artists-column.tsx b/src/renderer/components/item-list/item-table-list/columns/artists-column.tsx index 7963bb291..60ae3efce 100644 --- a/src/renderer/components/item-list/item-table-list/columns/artists-column.tsx +++ b/src/renderer/components/item-list/item-table-list/columns/artists-column.tsx @@ -40,7 +40,14 @@ const ArtistsColumn = (props: ItemTableListInnerColumn) => { > {artists.map((artist, index) => ( - + {artist.name} {index < artists.length - 1 && ', '} diff --git a/src/renderer/components/item-list/item-table-list/columns/genre-badge-column.tsx b/src/renderer/components/item-list/item-table-list/columns/genre-badge-column.tsx index aca2787fd..427f81443 100644 --- a/src/renderer/components/item-list/item-table-list/columns/genre-badge-column.tsx +++ b/src/renderer/components/item-list/item-table-list/columns/genre-badge-column.tsx @@ -39,6 +39,7 @@ const GenreBadgeColumn = (props: ItemTableListInnerColumn) => { { > {genres.map((genre, index) => ( - + {genre.name} {index < genres.length - 1 && ', '} diff --git a/src/renderer/components/item-list/item-table-list/columns/title-column.tsx b/src/renderer/components/item-list/item-table-list/columns/title-column.tsx index 16967c275..c9d0d97de 100644 --- a/src/renderer/components/item-list/item-table-list/columns/title-column.tsx +++ b/src/renderer/components/item-list/item-table-list/columns/title-column.tsx @@ -31,11 +31,13 @@ function DefaultTitleColumn(props: ItemTableListInnerColumn) { if (typeof row === 'string') { const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string); + const item = props.data[props.rowIndex] as any; const titleLinkProps = path ? { component: Link, isLink: true, + state: { item }, to: path, } : {}; @@ -74,6 +76,7 @@ function QueueSongTitleColumn(props: ItemTableListInnerColumn) { if (typeof row === 'string') { const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string); + const item = props.data[props.rowIndex] as any; const textStyles = isActive ? { color: 'var(--theme-colors-primary)' } : {}; @@ -81,6 +84,7 @@ function QueueSongTitleColumn(props: ItemTableListInnerColumn) { ? { component: Link, isLink: true, + state: { item }, to: path, } : {}; diff --git a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx index 36b6b2c20..ad1794145 100644 --- a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx +++ b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx @@ -34,10 +34,12 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => { const rowHeight = props.getRowHeight(props.rowIndex, props); const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string); + const item = props.data[props.rowIndex] as any; const titleLinkProps = path ? { component: Link, isLink: true, + state: { item }, to: path, } : {}; @@ -56,7 +58,14 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
{artists.map((artist, index) => ( - + {artist.name} {index < artists.length - 1 && ', '} @@ -97,12 +106,14 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) => const rowHeight = props.getRowHeight(props.rowIndex, props); const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string); + const item = props.data[props.rowIndex] as any; const textStyles = isActive ? { color: 'var(--theme-colors-primary)' } : {}; const titleLinkProps = path ? { component: Link, isLink: true, + state: { item }, to: path, } : {}; @@ -126,7 +137,14 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
{artists.map((artist, index) => ( - + {artist.name} {index < artists.length - 1 && ', '} diff --git a/src/renderer/features/albums/routes/album-detail-route.tsx b/src/renderer/features/albums/routes/album-detail-route.tsx index 7ec6fa65a..34bcf115b 100644 --- a/src/renderer/features/albums/routes/album-detail-route.tsx +++ b/src/renderer/features/albums/routes/album-detail-route.tsx @@ -1,6 +1,6 @@ import { useQuery } from '@tanstack/react-query'; import { useRef } from 'react'; -import { useParams } from 'react-router'; +import { useLocation, useParams } from 'react-router'; import { NativeScrollArea } from '/@/renderer/components/native-scroll-area/native-scroll-area'; import { albumQueries } from '/@/renderer/features/albums/api/album-api'; @@ -20,9 +20,13 @@ const AlbumDetailRoute = () => { const { albumId } = useParams() as { albumId: string }; const server = useCurrentServer(); - const detailQuery = useQuery( - albumQueries.detail({ query: { id: albumId }, serverId: server?.id }), - ); + const location = useLocation(); + + const detailQuery = useQuery({ + ...albumQueries.detail({ query: { id: albumId }, serverId: server?.id }), + initialData: location.state?.item, + staleTime: 0, + }); const { background: backgroundColor, colorId } = useFastAverageColor({ id: albumId, diff --git a/src/renderer/features/artists/routes/album-artist-detail-route.tsx b/src/renderer/features/artists/routes/album-artist-detail-route.tsx index f6b18a700..e6be89530 100644 --- a/src/renderer/features/artists/routes/album-artist-detail-route.tsx +++ b/src/renderer/features/artists/routes/album-artist-detail-route.tsx @@ -1,6 +1,6 @@ import { useQuery } from '@tanstack/react-query'; import { useRef } from 'react'; -import { useParams } from 'react-router'; +import { useLocation, useParams } from 'react-router'; import { NativeScrollArea } from '/@/renderer/components/native-scroll-area/native-scroll-area'; import { artistsQueries } from '/@/renderer/features/artists/api/artists-api'; @@ -26,12 +26,16 @@ const AlbumArtistDetailRoute = () => { const routeId = (artistId || albumArtistId) as string; - const detailQuery = useQuery( - artistsQueries.albumArtistDetail({ + const location = useLocation(); + + const detailQuery = useQuery({ + ...artistsQueries.albumArtistDetail({ query: { id: routeId }, serverId: server?.id, }), - ); + initialData: location.state?.item, + staleTime: 0, + }); const { background: backgroundColor, colorId } = useFastAverageColor({ id: artistId, diff --git a/src/renderer/router/app-router.tsx b/src/renderer/router/app-router.tsx index 5371989d7..60a44aebe 100644 --- a/src/renderer/router/app-router.tsx +++ b/src/renderer/router/app-router.tsx @@ -1,13 +1,12 @@ import { lazy, Suspense } from 'react'; import { HashRouter, Route, Routes } from 'react-router'; -import { AppRoute } from './routes'; - import { RouterErrorBoundary } from '/@/renderer/components/error-boundary/router-error-boundary'; import { AddToPlaylistContextModal } from '/@/renderer/features/playlists/components/add-to-playlist-context-modal'; import { ShareItemContextModal } from '/@/renderer/features/sharing/components/share-item-context-modal'; import { ResponsiveLayout } from '/@/renderer/layouts/responsive-layout'; import { AppOutlet } from '/@/renderer/router/app-outlet'; +import { AppRoute } from '/@/renderer/router/routes'; import { TitlebarOutlet } from '/@/renderer/router/titlebar-outlet'; import { BaseContextModal, ModalsProvider } from '/@/shared/components/modal/modal';