use correct id for runtime images in useItemImageUrl

src/renderer/components/feature-carousel/feature-carousel.tsx

@@ -79,7 +79,7 @@ interface CarouselItemProps {
 
 const CarouselItem = ({ album }: CarouselItemProps) => {
     const imageUrl = useItemImageUrl({
-        id: album.id,
+        id: album.imageId || undefined,
         itemType: LibraryItem.ALBUM,
         type: 'itemCard',
     });

src/renderer/features/albums/components/album-detail-header.tsx

@@ -84,7 +84,7 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
     const releaseYear = detailQuery?.data?.releaseYear;
 
     const imageUrl = useItemImageUrl({
-        id: detailQuery?.data?.id,
+        id: detailQuery?.data?.imageId || undefined,
         itemType: LibraryItem.ALBUM,
         type: 'header',
     });

src/renderer/features/albums/components/expanded-album-list-item.tsx

@@ -199,7 +199,7 @@ export const ExpandedAlbumListItem = ({ internalState, item }: ExpandedAlbumList
     const player = usePlayer();
 
     const imageUrl = useItemImageUrl({
-        id: item.id,
+        id: item.imageId || undefined,
         itemType: LibraryItem.ALBUM,
         type: 'itemCard',
     });

src/renderer/features/albums/routes/album-detail-route.tsx

@@ -37,7 +37,7 @@ const AlbumDetailRoute = () => {
 
     const imageUrl =
         useItemImageUrl({
-            id: albumId,
+            id: detailQuery?.data?.imageId || undefined,
             itemType: LibraryItem.ALBUM,
             type: 'itemCard',
         }) || '';

src/renderer/features/albums/routes/dummy-album-detail-route.tsx

@@ -115,7 +115,7 @@ const DummyAlbumDetailRoute = () => {
     ];
 
     const imageUrl = useItemImageUrl({
-        id: albumId,
+        id: detailQuery?.data?.imageId || undefined,
         itemType: LibraryItem.ALBUM,
         type: 'header',
     });

src/renderer/features/artists/components/album-artist-detail-header.tsx

@@ -144,7 +144,7 @@ export const AlbumArtistDetailHeader = forwardRef((_props, ref: Ref<HTMLDivEleme
     const showRating = detailQuery?.data?._serverType === ServerType.NAVIDROME;
 
     const imageUrl = useItemImageUrl({
-        id: detailQuery?.data?.id,
+        id: detailQuery?.data?.imageId || undefined,
         itemType: LibraryItem.ALBUM_ARTIST,
         type: 'itemCard',
     });

src/renderer/features/artists/components/album-artist-grid-carousel.tsx

@@ -31,6 +31,7 @@ export function AlbumArtistGridCarousel(props: AlbumArtistGridCarouselProps) {
                     controls={controls}
                     data={albumArtist}
                     enableDrag
+                    isRound
                     itemType={LibraryItem.ALBUM_ARTIST}
                     rows={rows}
                     type="poster"

src/renderer/features/discord-rpc/use-discord-rpc.ts

@@ -37,7 +37,7 @@ export const useDiscordRpc = () => {
 
     const currentSong = usePlayerSong();
     const imageUrl = useItemImageUrl({
-        id: currentSong?.id,
+        id: currentSong?.imageId || undefined,
         imageUrl: currentSong?.imageUrl,
         itemType: LibraryItem.SONG,
         type: 'table',

src/renderer/features/player/components/full-screen-player-image.tsx

@@ -84,13 +84,13 @@ export const FullScreenPlayerImage = () => {
     const { nextSong } = usePlayerData();
 
     const currentImageUrl = useItemImageUrl({
-        id: currentSong?.id,
+        id: currentSong?.imageId || undefined,
         itemType: LibraryItem.SONG,
         type: 'fullScreenPlayer',
     });
 
     const nextImageUrl = useItemImageUrl({
-        id: nextSong?.id,
+        id: nextSong?.imageId || undefined,
         itemType: LibraryItem.SONG,
         type: 'fullScreenPlayer',
     });

src/renderer/features/player/components/full-screen-player.tsx

@@ -78,13 +78,13 @@ const BackgroundImage = memo(({ dynamicBackground, dynamicIsImage }: BackgroundI
     const { nextSong } = usePlayerData();
 
     const currentImageUrl = useItemImageUrl({
-        id: currentSong?.id,
+        id: currentSong?.imageId || undefined,
         itemType: LibraryItem.SONG,
         type: 'itemCard',
     });
 
     const nextImageUrl = useItemImageUrl({
-        id: nextSong?.id,
+        id: nextSong?.imageId || undefined,
         itemType: LibraryItem.SONG,
         type: 'itemCard',
     });
@@ -632,7 +632,7 @@ const PlayerContainer = memo(
     }: PlayerContainerProps) => {
         const currentSong = usePlayerSong();
         const imageUrl = useItemImageUrl({
-            id: currentSong?.id,
+            id: currentSong?.imageId || undefined,
             imageUrl: currentSong?.imageUrl,
             itemType: LibraryItem.SONG,
             type: 'itemCard',

src/renderer/features/player/components/mobile-fullscreen-player-album-art.tsx

@@ -84,14 +84,14 @@ export const MobileFullscreenPlayerAlbumArt = () => {
     const { nextSong } = usePlayerData();
 
     const currentImageUrl = useItemImageUrl({
-        id: currentSong?.id,
+        id: currentSong?.imageId || undefined,
         itemType: LibraryItem.SONG,
         size: mainImageDimensions.idealSize,
         type: 'fullScreenPlayer',
     });
 
     const nextImageUrl = useItemImageUrl({
-        id: nextSong?.id,
+        id: nextSong?.imageId || undefined,
         itemType: LibraryItem.SONG,
         size: mainImageDimensions.idealSize,
         type: 'fullScreenPlayer',

src/renderer/features/player/components/mobile-fullscreen-player.tsx

@@ -76,13 +76,13 @@ const BackgroundImage = memo(({ dynamicBackground, dynamicIsImage }: BackgroundI
     const { nextSong } = usePlayerData();
 
     const currentImageUrl = useItemImageUrl({
-        id: currentSong?.id,
+        id: currentSong?.imageId || undefined,
         itemType: LibraryItem.SONG,
         type: 'itemCard',
     });
 
     const nextImageUrl = useItemImageUrl({
-        id: nextSong?.id,
+        id: nextSong?.imageId || undefined,
         itemType: LibraryItem.SONG,
         type: 'itemCard',
     });
@@ -303,7 +303,7 @@ const MobilePlayerContainer = memo(
     ({ children, dynamicBackground, dynamicIsImage }: MobilePlayerContainerProps) => {
         const currentSong = usePlayerSong();
         const imageUrl = useItemImageUrl({
-            id: currentSong?.id,
+            id: currentSong?.imageId || undefined,
             imageUrl: currentSong?.imageUrl,
             itemType: LibraryItem.SONG,
             type: 'itemCard',

src/renderer/features/player/hooks/use-media-session.ts

@@ -23,7 +23,7 @@ export const useMediaSession = () => {
     const currentSong = usePlayerSong();
 
     const imageUrl = useItemImageUrl({
-        id: currentSong?.id,
+        id: currentSong?.imageId || undefined,
         imageUrl: currentSong?.imageUrl,
         itemType: LibraryItem.SONG,
         type: 'itemCard',

src/renderer/features/player/hooks/use-mpris.ts

@@ -16,7 +16,7 @@ export const useMPRIS = () => {
     const currentSong = usePlayerSong();
 
     const imageUrl = useItemImageUrl({
-        id: currentSong?.id,
+        id: currentSong?.imageId || undefined,
         imageUrl: currentSong?.imageUrl,
         itemType: LibraryItem.SONG,
         type: 'itemCard',

src/renderer/features/player/hooks/use-scrobble.ts

@@ -69,7 +69,7 @@ export const useScrobble = () => {
     const currentSong = usePlayerSong();
 
     const imageUrl = useItemImageUrl({
-        id: currentSong?.id,
+        id: currentSong?.imageId || undefined,
         imageUrl: currentSong?.imageUrl,
         itemType: LibraryItem.SONG,
         type: 'itemCard',

src/renderer/features/shared/components/library-header.tsx

@@ -180,7 +180,7 @@ const calculateTitleSize = (title: string) => {
 
 interface LibraryHeaderMenuProps {
     favorite?: boolean;
-    onArtistRadio: () => void;
+    onArtistRadio?: () => void;
     onFavorite?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onMore?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onPlay?: (type: Play) => void;

src/renderer/features/sidebar/components/sidebar-playlist-list.tsx

@@ -162,7 +162,7 @@ const PlaylistRowButton = memo(({ item, name, onContextMenu, to }: PlaylistRowBu
     );
 
     const imageUrl = useItemImageUrl({
-        id: item.id,
+        id: item.imageId || undefined,
         itemType: LibraryItem.PLAYLIST,
         type: 'table',
     });

src/renderer/features/sidebar/components/sidebar.tsx

@@ -153,7 +153,7 @@ const SidebarImage = () => {
     const currentSong = usePlayerSong();
 
     const imageUrl = useItemImageUrl({
-        id: currentSong?.id,
+        id: currentSong?.imageId || undefined,
         itemType: LibraryItem.SONG,
         type: 'sidebar',
     });

src/renderer/lib/react-query.ts

@@ -13,6 +13,7 @@ import { toast } from '/@/shared/components/toast/toast';
 const queryCache = new QueryCache({
     onError: (error: any, query) => {
         if (query.state.data !== undefined) {
+            console.error(error);
             toast.show({ message: `${error.message}`, type: 'error' });
         }
     },