diff --git a/src/renderer/components/item-card/item-card.module.css b/src/renderer/components/item-card/item-card.module.css index 026212d79..73b590446 100644 --- a/src/renderer/components/item-card/item-card.module.css +++ b/src/renderer/components/item-card/item-card.module.css @@ -20,6 +20,11 @@ opacity: 0.5; } +.container.external { + opacity: 0.6; + filter: grayscale(0.3) saturate(0.7); +} + .image-container { position: relative; display: block; @@ -65,6 +70,14 @@ } } +.image-container.no-hover-overlay { + &:hover { + &::before { + opacity: 0 !important; + } + } +} + .favorite-badge { position: absolute; top: -50px; diff --git a/src/renderer/components/item-card/item-card.tsx b/src/renderer/components/item-card/item-card.tsx index cf7ce6792..ca0b077b5 100644 --- a/src/renderer/components/item-card/item-card.tsx +++ b/src/renderer/components/item-card/item-card.tsx @@ -42,6 +42,7 @@ import { Genre, LibraryItem, Playlist, + ServerType, Song, } from '/@/shared/types/domain-types'; import { DragOperation, DragTarget } from '/@/shared/types/drag-and-drop'; @@ -339,9 +340,11 @@ const CompactItemCard = ({ ? (data as { userRating: null | number }).userRating : null; const hasRating = showRating && userRating !== null && userRating > 0; + const isExternal = data._serverType === ServerType.EXTERNAL; const imageContainerClassName = clsx(styles.imageContainer, { [styles.isRound]: isRound, + [styles.noHoverOverlay]: isExternal, }); const imageContainerContent = ( @@ -374,7 +377,7 @@ const CompactItemCard = ({ {isFavorite &&
} {hasRating &&
{userRating}
} - {withControls && showControls && data && ( + {withControls && showControls && data && !isExternal && ( 0; + const isExternal = data._serverType === ServerType.EXTERNAL; + + const imageContainerClassName = clsx(styles.imageContainer, { + [styles.isRound]: isRound, + [styles.noHoverOverlay]: isExternal, + }); const imageContainerContent = ( <> @@ -611,7 +617,7 @@ const DefaultItemCard = ({ {isFavorite &&
} {hasRating &&
{userRating}
} - {withControls && showControls && ( + {withControls && showControls && !isExternal && ( @@ -870,10 +877,6 @@ const PosterItemCard = ({ e.stopPropagation(); }; - const imageContainerClassName = clsx(styles.imageContainer, { - [styles.isRound]: isRound, - }); - const isFavorite = 'userFavorite' in data && (data as { userFavorite: boolean }).userFavorite; const userRating = @@ -882,6 +885,12 @@ const PosterItemCard = ({ ? (data as { userRating: null | number }).userRating : null; const hasRating = showRating && userRating !== null && userRating > 0; + const isExternal = data._serverType === ServerType.EXTERNAL; + + const imageContainerClassName = clsx(styles.imageContainer, { + [styles.isRound]: isRound, + [styles.noHoverOverlay]: isExternal, + }); const imageContainerContent = ( <> @@ -911,7 +920,7 @@ const PosterItemCard = ({ {isFavorite &&
} {hasRating &&
{userRating}
} - {withControls && showControls && data && ( + {withControls && showControls && data && !isExternal && ( { albumArtistId?: string; artistId?: string; }; + + const serverId = useCurrentServerId(); const routeId = (artistId || albumArtistId) as string; + const detailQuery = useSuspenseQuery( + artistsQueries.albumArtistDetail({ + query: { id: routeId }, + serverId: serverId, + }), + ); + + const musicbrainzArtistQuery = useQuery({ + ...musicbrainzQueries.artist({ mbzArtistId: detailQuery.data?.mbz as string }), + meta: { + albumArtist: detailQuery.data, + }, + }); + + const musicbrainzAlbums = useMemo(() => { + return musicbrainzArtistQuery.data || []; + }, [musicbrainzArtistQuery.data]); + const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM); const controls = useDefaultItemListControls(); const filteredAndSortedAlbums = useMemo(() => { - const albums = albumsQuery.data?.items || []; + const existingReleaseIds = new Set( + albumsQuery.data?.items?.map((item) => item.mbzId) || [], + ); + + const newMusicbrainzAlbums = musicbrainzAlbums.filter( + (album) => !existingReleaseIds.has(album.mbzId), + ); + + const albums = [...(albumsQuery.data?.items || []), ...newMusicbrainzAlbums]; const searched = searchLibraryItems(albums, debouncedSearchTerm, LibraryItem.ALBUM); return sortAlbumList(searched, sortBy, sortOrder); - }, [albumsQuery.data?.items, debouncedSearchTerm, sortBy, sortOrder]); + }, [albumsQuery.data?.items, debouncedSearchTerm, musicbrainzAlbums, sortBy, sortOrder]); const albumsByReleaseType = useMemo(() => { return groupAlbumsByReleaseType(filteredAndSortedAlbums, routeId, groupingType);