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);