add context menu item to show song in file manager (#1397)

src/renderer/features/context-menu/actions/show-in-file-explorer-action.tsx

@@ -0,0 +1,53 @@
+import isElectron from 'is-electron';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
+import { toast } from '/@/shared/components/toast/toast';
+import { QueueSong, Song } from '/@/shared/types/domain-types';
+
+interface ShowInFileExplorerActionProps {
+    items: QueueSong[] | Song[];
+}
+
+const utils = isElectron() ? window.api.utils : null;
+
+export const ShowInFileExplorerAction = ({ items }: ShowInFileExplorerActionProps) => {
+    const { t } = useTranslation();
+
+    const onSelect = useCallback(async () => {
+        if (!utils) {
+            return;
+        }
+
+        const firstItem = items[0];
+        if (!firstItem?.path) {
+            return;
+        }
+
+        try {
+            await utils.openItem(firstItem.path);
+        } catch (error) {
+            toast.error({
+                message: (error as Error).message,
+                title: t('error.openError', {
+                    postProcess: 'sentenceCase',
+                }),
+            });
+        }
+    }, [items, t]);
+
+    if (!utils) {
+        return null;
+    }
+
+    const firstItem = items[0];
+    const hasPath = firstItem?.path !== null;
+    const isDisabled = items.length > 1 || !hasPath;
+
+    return (
+        <ContextMenu.Item disabled={isDisabled} leftIcon="folder" onSelect={onSelect}>
+            {t('page.itemDetail.openFile', { postProcess: 'sentenceCase' })}
+        </ContextMenu.Item>
+    );
+};

src/renderer/features/context-menu/menus/playlist-song-context-menu.tsx

@@ -10,6 +10,7 @@ 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 { ShowInFileExplorerAction } from '/@/renderer/features/context-menu/actions/show-in-file-explorer-action';
 import { ContextMenuPreview } from '/@/renderer/features/context-menu/components/context-menu-preview';
 import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
 import { LibraryItem, Song } from '/@/shared/types/domain-types';
@@ -43,6 +44,7 @@ export const PlaylistSongContextMenu = ({ items, type }: PlaylistSongContextMenu
             <ShareAction ids={ids} itemType={type} />
             <ContextMenu.Divider />
             <GoToAction items={items} />
+            <ShowInFileExplorerAction items={items} />
             <ContextMenu.Divider />
             <GetInfoAction disabled={items.length === 0} items={items} />
         </ContextMenu.Content>

src/renderer/features/context-menu/menus/queue-context-menu.tsx

@@ -10,6 +10,7 @@ import { RemoveFromQueueAction } 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 { ShowInFileExplorerAction } from '/@/renderer/features/context-menu/actions/show-in-file-explorer-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';
@@ -45,6 +46,7 @@ export const QueueContextMenu = ({ items }: QueueContextMenuProps) => {
             <ShareAction ids={ids} itemType={LibraryItem.SONG} />
             <ContextMenu.Divider />
             <GoToAction items={items} />
+            <ShowInFileExplorerAction items={items} />
             <ContextMenu.Divider />
             <GetInfoAction disabled={items.length === 0} items={items} />
         </ContextMenu.Content>

src/renderer/features/context-menu/menus/song-context-menu.tsx

@@ -9,6 +9,7 @@ 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 { ShowInFileExplorerAction } from '/@/renderer/features/context-menu/actions/show-in-file-explorer-action';
 import { ContextMenuPreview } from '/@/renderer/features/context-menu/components/context-menu-preview';
 import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
 import { LibraryItem, Song } from '/@/shared/types/domain-types';
@@ -40,6 +41,7 @@ export const SongContextMenu = ({ items, type }: SongContextMenuProps) => {
             <ShareAction ids={ids} itemType={LibraryItem.SONG} />
             <ContextMenu.Divider />
             <GoToAction items={items} />
+            <ShowInFileExplorerAction items={items} />
             <ContextMenu.Divider />
             <GetInfoAction disabled={items.length === 0} items={items} />
         </ContextMenu.Content>