From 856400048b379ed7a7d313f944a3169f225386c0 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 27 Dec 2025 14:25:57 -0800
Subject: [PATCH] fix image on context menu preview

---
 .../components/item-image/item-image.tsx      | 37 +++++++++++++++++--
 .../context-menu-preview.module.css           |  0
 .../components}/context-menu-preview.tsx      | 18 +++++++--
 .../menus/album-artist-context-menu.tsx       |  2 +-
 .../context-menu/menus/album-context-menu.tsx |  2 +-
 .../menus/artist-context-menu.tsx             |  2 +-
 .../menus/folder-context-menu.tsx             |  2 +-
 .../context-menu/menus/genre-context-menu.tsx |  2 +-
 .../menus/playlist-context-menu.tsx           |  2 +-
 .../menus/playlist-song-context-menu.tsx      |  2 +-
 .../context-menu/menus/queue-context-menu.tsx |  2 +-
 .../context-menu/menus/song-context-menu.tsx  |  2 +-
 12 files changed, 57 insertions(+), 16 deletions(-)
 rename src/{shared/components/context-menu => renderer/features/context-menu/components}/context-menu-preview.module.css (100%)
 rename src/{shared/components/context-menu => renderer/features/context-menu/components}/context-menu-preview.tsx (87%)

diff --git a/src/renderer/components/item-image/item-image.tsx b/src/renderer/components/item-image/item-image.tsx
index dd3898b93..349cadd88 100644
--- a/src/renderer/components/item-image/item-image.tsx
+++ b/src/renderer/components/item-image/item-image.tsx
@@ -2,7 +2,12 @@ import { memo, useMemo } from 'react';
 import z from 'zod';
 
 import { api } from '/@/renderer/api';
-import { GeneralSettingsSchema, useCurrentServerId, useSettingsStore } from '/@/renderer/store';
+import {
+    GeneralSettingsSchema,
+    useAuthStore,
+    useCurrentServerId,
+    useSettingsStore,
+} from '/@/renderer/store';
 import { BaseImage, ImageProps } from '/@/shared/components/image/image';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
@@ -27,6 +32,7 @@ interface UseItemImageUrlProps {
     id?: string;
     imageUrl?: null | string;
     itemType: LibraryItem;
+    serverId?: string;
     size?: number;
     type?: keyof z.infer<typeof GeneralSettingsSchema>['imageRes'];
 }
@@ -49,9 +55,34 @@ export const useItemImageUrl = (args: UseItemImageUrlProps) => {
 
         return (
             api.controller.getImageUrl({
-                apiClientProps: { serverId },
+                apiClientProps: { serverId: args.serverId || serverId },
                 query: { id, itemType, size: size ?? sizeByType },
             }) || undefined
         );
-    }, [id, imageUrl, itemType, serverId, size, sizeByType]);
+    }, [args.serverId, id, imageUrl, itemType, serverId, size, sizeByType]);
 };
+
+export function getItemImageUrl(args: UseItemImageUrlProps) {
+    const { id, imageUrl, itemType, size, type } = args;
+    const authStore = useAuthStore.getState();
+    const currentServerId = authStore.currentServer?.id;
+    const serverId = (args.serverId || currentServerId) as string;
+
+    const imageRes = useSettingsStore.getState().general.imageRes;
+    const sizeByType: number | undefined = type ? imageRes[type] : undefined;
+
+    if (imageUrl) {
+        return imageUrl;
+    }
+
+    if (!id) {
+        return undefined;
+    }
+
+    return (
+        api.controller.getImageUrl({
+            apiClientProps: { serverId },
+            query: { id, itemType, size: size ?? sizeByType },
+        }) || undefined
+    );
+}
diff --git a/src/shared/components/context-menu/context-menu-preview.module.css b/src/renderer/features/context-menu/components/context-menu-preview.module.css
similarity index 100%
rename from src/shared/components/context-menu/context-menu-preview.module.css
rename to src/renderer/features/context-menu/components/context-menu-preview.module.css
diff --git a/src/shared/components/context-menu/context-menu-preview.tsx b/src/renderer/features/context-menu/components/context-menu-preview.tsx
similarity index 87%
rename from src/shared/components/context-menu/context-menu-preview.tsx
rename to src/renderer/features/context-menu/components/context-menu-preview.tsx
index b258c08be..becae7086 100644
--- a/src/shared/components/context-menu/context-menu-preview.tsx
+++ b/src/renderer/features/context-menu/components/context-menu-preview.tsx
@@ -1,8 +1,8 @@
-import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import styles from './context-menu-preview.module.css';
 
+import { useItemImageUrl } from '/@/renderer/components/item-image/item-image';
 import { Icon } from '/@/shared/components/icon/icon';
 import { Text } from '/@/shared/components/text/text';
 import { LibraryItem } from '/@/shared/types/domain-types';
@@ -26,6 +26,10 @@ const getItemName = (item: unknown): string => {
 
 const getItemImage = (item: unknown): null | string => {
     if (item && typeof item === 'object') {
+        if ('imageId' in item && typeof item.imageId === 'string') {
+            return item.imageId;
+        }
+
         if ('imageUrl' in item && typeof item.imageUrl === 'string') {
             return item.imageUrl;
         }
@@ -33,7 +37,7 @@ const getItemImage = (item: unknown): null | string => {
     return null;
 };
 
-export const ContextMenuPreview = memo(({ items, itemType }: ContextMenuPreviewProps) => {
+export const ContextMenuPreview = ({ items, itemType }: ContextMenuPreviewProps) => {
     const { t } = useTranslation();
     const itemCount = items.length;
     const firstItem = items[0];
@@ -41,6 +45,12 @@ export const ContextMenuPreview = memo(({ items, itemType }: ContextMenuPreviewP
     const itemImage = firstItem ? getItemImage(firstItem) : null;
     const isMultiple = itemCount > 1;
 
+    const imageUrl = useItemImageUrl({
+        id: (firstItem as { imageId?: string })?.imageId,
+        itemType: itemType || LibraryItem.SONG,
+        type: 'table',
+    });
+
     if (itemCount === 0) {
         return null;
     }
@@ -52,7 +62,7 @@ export const ContextMenuPreview = memo(({ items, itemType }: ContextMenuPreviewP
                 <div className={styles.content}>
                     {itemImage ? (
                         <div className={styles.imageContainer}>
-                            <img alt={itemName} className={styles.image} src={itemImage} />
+                            <img alt={itemName} className={styles.image} src={imageUrl} />
                             <div className={styles.imageOverlay} />
                         </div>
                     ) : (
@@ -85,6 +95,6 @@ export const ContextMenuPreview = memo(({ items, itemType }: ContextMenuPreviewP
             </div>
         </div>
     );
-});
+};
 
 ContextMenuPreview.displayName = 'ContextMenuPreview';
diff --git a/src/renderer/features/context-menu/menus/album-artist-context-menu.tsx b/src/renderer/features/context-menu/menus/album-artist-context-menu.tsx
index 2b9aeb228..7a9f6032b 100644
--- a/src/renderer/features/context-menu/menus/album-artist-context-menu.tsx
+++ b/src/renderer/features/context-menu/menus/album-artist-context-menu.tsx
@@ -9,8 +9,8 @@ import { PlayArtistRadioAction } from '/@/renderer/features/context-menu/actions
 import { SetFavoriteAction } from '/@/renderer/features/context-menu/actions/set-favorite-action';
 import { SetRatingAction } from '/@/renderer/features/context-menu/actions/set-rating-action';
 import { ShareAction } from '/@/renderer/features/context-menu/actions/share-action';
+import { ContextMenuPreview } from '/@/renderer/features/context-menu/components/context-menu-preview';
 import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
-import { ContextMenuPreview } from '/@/shared/components/context-menu/context-menu-preview';
 import { AlbumArtist, LibraryItem } from '/@/shared/types/domain-types';
 
 interface AlbumArtistContextMenuProps {
diff --git a/src/renderer/features/context-menu/menus/album-context-menu.tsx b/src/renderer/features/context-menu/menus/album-context-menu.tsx
index d1f9ec846..1c3a8db30 100644
--- a/src/renderer/features/context-menu/menus/album-context-menu.tsx
+++ b/src/renderer/features/context-menu/menus/album-context-menu.tsx
@@ -8,8 +8,8 @@ import { PlayAction } from '/@/renderer/features/context-menu/actions/play-actio
 import { SetFavoriteAction } from '/@/renderer/features/context-menu/actions/set-favorite-action';
 import { SetRatingAction } from '/@/renderer/features/context-menu/actions/set-rating-action';
 import { ShareAction } from '/@/renderer/features/context-menu/actions/share-action';
+import { ContextMenuPreview } from '/@/renderer/features/context-menu/components/context-menu-preview';
 import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
-import { ContextMenuPreview } from '/@/shared/components/context-menu/context-menu-preview';
 import { Album, LibraryItem } from '/@/shared/types/domain-types';
 
 interface AlbumContextMenuProps {
diff --git a/src/renderer/features/context-menu/menus/artist-context-menu.tsx b/src/renderer/features/context-menu/menus/artist-context-menu.tsx
index fc07ef183..c9ce4ec75 100644
--- a/src/renderer/features/context-menu/menus/artist-context-menu.tsx
+++ b/src/renderer/features/context-menu/menus/artist-context-menu.tsx
@@ -9,8 +9,8 @@ import { PlayArtistRadioAction } from '/@/renderer/features/context-menu/actions
 import { SetFavoriteAction } from '/@/renderer/features/context-menu/actions/set-favorite-action';
 import { SetRatingAction } from '/@/renderer/features/context-menu/actions/set-rating-action';
 import { ShareAction } from '/@/renderer/features/context-menu/actions/share-action';
+import { ContextMenuPreview } from '/@/renderer/features/context-menu/components/context-menu-preview';
 import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
-import { ContextMenuPreview } from '/@/shared/components/context-menu/context-menu-preview';
 import { Artist, LibraryItem } from '/@/shared/types/domain-types';
 
 interface ArtistContextMenuProps {
diff --git a/src/renderer/features/context-menu/menus/folder-context-menu.tsx b/src/renderer/features/context-menu/menus/folder-context-menu.tsx
index cca3c9dee..5f98d26d4 100644
--- a/src/renderer/features/context-menu/menus/folder-context-menu.tsx
+++ b/src/renderer/features/context-menu/menus/folder-context-menu.tsx
@@ -4,8 +4,8 @@ import { AddToPlaylistAction } from '/@/renderer/features/context-menu/actions/a
 import { DownloadAction } from '/@/renderer/features/context-menu/actions/download-action';
 import { PlayAction } from '/@/renderer/features/context-menu/actions/play-action';
 import { ShareAction } from '/@/renderer/features/context-menu/actions/share-action';
+import { ContextMenuPreview } from '/@/renderer/features/context-menu/components/context-menu-preview';
 import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
-import { ContextMenuPreview } from '/@/shared/components/context-menu/context-menu-preview';
 import { Folder, LibraryItem } from '/@/shared/types/domain-types';
 
 interface FolderContextMenuProps {
diff --git a/src/renderer/features/context-menu/menus/genre-context-menu.tsx b/src/renderer/features/context-menu/menus/genre-context-menu.tsx
index 5de3705dd..29614d688 100644
--- a/src/renderer/features/context-menu/menus/genre-context-menu.tsx
+++ b/src/renderer/features/context-menu/menus/genre-context-menu.tsx
@@ -2,8 +2,8 @@ import { useMemo } from 'react';
 
 import { AddToPlaylistAction } from '/@/renderer/features/context-menu/actions/add-to-playlist-action';
 import { PlayAction } from '/@/renderer/features/context-menu/actions/play-action';
+import { ContextMenuPreview } from '/@/renderer/features/context-menu/components/context-menu-preview';
 import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
-import { ContextMenuPreview } from '/@/shared/components/context-menu/context-menu-preview';
 import { Genre, LibraryItem } from '/@/shared/types/domain-types';
 
 interface GenreContextMenuProps {
diff --git a/src/renderer/features/context-menu/menus/playlist-context-menu.tsx b/src/renderer/features/context-menu/menus/playlist-context-menu.tsx
index 608309292..c5d7d941c 100644
--- a/src/renderer/features/context-menu/menus/playlist-context-menu.tsx
+++ b/src/renderer/features/context-menu/menus/playlist-context-menu.tsx
@@ -5,9 +5,9 @@ import { DeletePlaylistAction } from '/@/renderer/features/context-menu/actions/
 import { EditPlaylistAction } from '/@/renderer/features/context-menu/actions/edit-playlist-action';
 import { GetInfoAction } from '/@/renderer/features/context-menu/actions/get-info-action';
 import { PlayAction } from '/@/renderer/features/context-menu/actions/play-action';
+import { ContextMenuPreview } from '/@/renderer/features/context-menu/components/context-menu-preview';
 import { usePermissions } from '/@/renderer/store';
 import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
-import { ContextMenuPreview } from '/@/shared/components/context-menu/context-menu-preview';
 import { LibraryItem, Playlist } from '/@/shared/types/domain-types';
 
 interface PlaylistContextMenuProps {
diff --git a/src/renderer/features/context-menu/menus/playlist-song-context-menu.tsx b/src/renderer/features/context-menu/menus/playlist-song-context-menu.tsx
index 40b8ca985..a55e59855 100644
--- a/src/renderer/features/context-menu/menus/playlist-song-context-menu.tsx
+++ b/src/renderer/features/context-menu/menus/playlist-song-context-menu.tsx
@@ -10,8 +10,8 @@ import { RemoveFromPlaylistAction } from '/@/renderer/features/context-menu/acti
 import { SetFavoriteAction } from '/@/renderer/features/context-menu/actions/set-favorite-action';
 import { SetRatingAction } from '/@/renderer/features/context-menu/actions/set-rating-action';
 import { ShareAction } from '/@/renderer/features/context-menu/actions/share-action';
+import { ContextMenuPreview } from '/@/renderer/features/context-menu/components/context-menu-preview';
 import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
-import { ContextMenuPreview } from '/@/shared/components/context-menu/context-menu-preview';
 import { LibraryItem, Song } from '/@/shared/types/domain-types';
 
 interface PlaylistSongContextMenuProps {
diff --git a/src/renderer/features/context-menu/menus/queue-context-menu.tsx b/src/renderer/features/context-menu/menus/queue-context-menu.tsx
index a8701b504..caac1be4c 100644
--- a/src/renderer/features/context-menu/menus/queue-context-menu.tsx
+++ b/src/renderer/features/context-menu/menus/queue-context-menu.tsx
@@ -11,8 +11,8 @@ import { SetFavoriteAction } from '/@/renderer/features/context-menu/actions/set
 import { SetRatingAction } from '/@/renderer/features/context-menu/actions/set-rating-action';
 import { ShareAction } from '/@/renderer/features/context-menu/actions/share-action';
 import { ShuffleItemsAction } from '/@/renderer/features/context-menu/actions/shuffle-items-action';
+import { ContextMenuPreview } from '/@/renderer/features/context-menu/components/context-menu-preview';
 import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
-import { ContextMenuPreview } from '/@/shared/components/context-menu/context-menu-preview';
 import { LibraryItem, QueueSong } from '/@/shared/types/domain-types';
 
 interface QueueContextMenuProps {
diff --git a/src/renderer/features/context-menu/menus/song-context-menu.tsx b/src/renderer/features/context-menu/menus/song-context-menu.tsx
index 6444c13f3..56fd465f1 100644
--- a/src/renderer/features/context-menu/menus/song-context-menu.tsx
+++ b/src/renderer/features/context-menu/menus/song-context-menu.tsx
@@ -9,8 +9,8 @@ import { PlayTrackRadioAction } from '/@/renderer/features/context-menu/actions/
 import { SetFavoriteAction } from '/@/renderer/features/context-menu/actions/set-favorite-action';
 import { SetRatingAction } from '/@/renderer/features/context-menu/actions/set-rating-action';
 import { ShareAction } from '/@/renderer/features/context-menu/actions/share-action';
+import { ContextMenuPreview } from '/@/renderer/features/context-menu/components/context-menu-preview';
 import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
-import { ContextMenuPreview } from '/@/shared/components/context-menu/context-menu-preview';
 import { LibraryItem, Song } from '/@/shared/types/domain-types';
 
 interface SongContextMenuProps {