handle external imageUrl

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

@@ -94,6 +94,7 @@ export const FullScreenPlayerImage = () => {
 
     const currentImageUrl = useItemImageUrl({
         id: currentSong?.imageId || undefined,
+        imageUrl: currentSong?.imageUrl,
         itemType: LibraryItem.SONG,
         serverId: currentSong?._serverId,
         type: 'fullScreenPlayer',
@@ -101,6 +102,7 @@ export const FullScreenPlayerImage = () => {
 
     const nextImageUrl = useItemImageUrl({
         id: nextSong?.imageId || undefined,
+        imageUrl: nextSong?.imageUrl,
         itemType: LibraryItem.SONG,
         serverId: nextSong?._serverId,
         type: 'fullScreenPlayer',

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

@@ -83,13 +83,17 @@ const BackgroundImage = memo(({ dynamicBackground, dynamicIsImage }: BackgroundI
 
     const currentImageUrl = useItemImageUrl({
         id: currentSong?.imageId || undefined,
+        imageUrl: currentSong?.imageUrl,
         itemType: LibraryItem.SONG,
+        serverId: currentSong?._serverId,
         type: 'itemCard',
     });
 
     const nextImageUrl = useItemImageUrl({
         id: nextSong?.imageId || undefined,
+        imageUrl: nextSong?.imageUrl,
         itemType: LibraryItem.SONG,
+        serverId: nextSong?._serverId,
         type: 'itemCard',
     });
 

src/renderer/features/player/components/left-controls.tsx

@@ -140,6 +140,7 @@ export const LeftControls = () => {
                                             id={currentSong?.imageId}
                                             itemType={LibraryItem.SONG}
                                             serverId={currentSong?._serverId}
+                                            src={currentSong?.imageUrl}
                                             type="table"
                                         />
                                     )}

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

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

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

@@ -81,13 +81,17 @@ const BackgroundImage = memo(({ dynamicBackground, dynamicIsImage }: BackgroundI
 
     const currentImageUrl = useItemImageUrl({
         id: currentSong?.imageId || undefined,
+        imageUrl: currentSong?.imageUrl,
         itemType: LibraryItem.SONG,
+        serverId: currentSong?._serverId,
         type: 'itemCard',
     });
 
     const nextImageUrl = useItemImageUrl({
         id: nextSong?.imageId || undefined,
+        imageUrl: nextSong?.imageUrl,
         itemType: LibraryItem.SONG,
+        serverId: nextSong?._serverId,
         type: 'itemCard',
     });
 
@@ -310,6 +314,7 @@ const MobilePlayerContainer = memo(
             id: currentSong?.imageId || undefined,
             imageUrl: currentSong?.imageUrl,
             itemType: LibraryItem.SONG,
+            serverId: currentSong?._serverId,
             type: 'itemCard',
         });
         const { background } = useFastAverageColor({

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

@@ -98,6 +98,8 @@ export const MobilePlayerbar = () => {
                                             fetchPriority="high"
                                             id={currentSong.imageId}
                                             itemType={LibraryItem.SONG}
+                                            serverId={currentSong?._serverId}
+                                            src={currentSong?.imageUrl}
                                             type="table"
                                         />
                                     </Tooltip>

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

@@ -170,6 +170,7 @@ const SidebarImage = () => {
 
     const imageUrl = useItemImageUrl({
         id: currentSong?.imageId || undefined,
+        imageUrl: currentSong?.imageUrl,
         itemType: LibraryItem.SONG,
         serverId: currentSong?._serverId,
         type: 'sidebar',