add show album / album artist context menu items (#1105)

src/renderer/features/context-menu/context-menu-items.tsx

@@ -12,6 +12,8 @@ export const QUEUE_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
     { disabled: false, divider: true, id: 'deselectAll' },
     { id: 'download' },
     { divider: true, id: 'shareItem' },
+    { id: 'goToAlbum' },
+    { id: 'goToAlbumArtist' },
     { divider: true, id: 'showDetails' },
 ];
 
@@ -27,6 +29,8 @@ export const SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
     { children: true, disabled: false, divider: true, id: 'setRating' },
     { id: 'download' },
     { divider: true, id: 'shareItem' },
+    { id: 'goToAlbum' },
+    { id: 'goToAlbumArtist' },
     { divider: true, id: 'showDetails' },
 ];
 
@@ -51,6 +55,8 @@ export const PLAYLIST_SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
     { children: true, disabled: false, id: 'setRating' },
     { id: 'download' },
     { divider: true, id: 'shareItem' },
+    { id: 'goToAlbum' },
+    { id: 'goToAlbumArtist' },
     { divider: true, id: 'showDetails' },
 ];
 
@@ -66,6 +72,8 @@ export const SMART_PLAYLIST_SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
     { children: true, disabled: false, id: 'setRating' },
     { id: 'download' },
     { divider: true, id: 'shareItem' },
+    { id: 'goToAlbum' },
+    { id: 'goToAlbumArtist' },
     { divider: true, id: 'showDetails' },
 ];
 
@@ -79,6 +87,7 @@ export const ALBUM_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
     { id: 'removeFromFavorites' },
     { children: true, disabled: false, divider: true, id: 'setRating' },
     { divider: true, id: 'shareItem' },
+    { id: 'goToAlbumArtist' },
     { divider: true, id: 'showDetails' },
 ];
 

src/renderer/features/context-menu/context-menu-provider.tsx

@@ -19,6 +19,7 @@ import {
     useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
+import { generatePath, useNavigate } from 'react-router-dom';
 
 import { api } from '/@/renderer/api';
 import { controller } from '/@/renderer/api/controller';
@@ -34,6 +35,7 @@ import { updateSong } from '/@/renderer/features/player/update-remote-song';
 import { useDeletePlaylist } from '/@/renderer/features/playlists';
 import { useRemoveFromPlaylist } from '/@/renderer/features/playlists/mutations/remove-from-playlist-mutation';
 import { useCreateFavorite, useDeleteFavorite, useSetRating } from '/@/renderer/features/shared';
+import { AppRoute } from '/@/renderer/router/routes';
 import {
     getServerById,
     useAuthStore,
@@ -131,6 +133,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
     });
 
     const handlePlayQueueAdd = usePlayQueueAdd();
+    const navigate = useNavigate();
 
     const openContextMenu = useCallback(
         (args: OpenContextMenuProps) => {
@@ -734,6 +737,24 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
         }
     }, [ctx.data, server]);
 
+    const handleGoToAlbum = useCallback(() => {
+        const item = ctx.data[0];
+        if (item.albumId) {
+            navigate(generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { albumId: item.albumId }));
+        }
+    }, [ctx.data, navigate]);
+
+    const handleGoToAlbumArtist = useCallback(() => {
+        const item = ctx.data[0];
+        if (item.albumArtists && item.albumArtists.length > 0) {
+            navigate(
+                generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
+                    albumArtistId: item.albumArtists[0].id,
+                }),
+            );
+        }
+    }, [ctx.data, navigate]);
+
     const contextMenuItems: Record<ContextMenuItemType, ContextMenuItem> = useMemo(() => {
         return {
             addToFavorites: {
@@ -772,6 +793,23 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
                 leftIcon: <Icon icon="download" />,
                 onClick: handleDownload,
             },
+            goToAlbum: {
+                disabled: ctx.data?.length !== 1 || !ctx.data[0]?.albumId,
+                id: 'goToAlbum',
+                label: t('page.contextMenu.goToAlbum', { postProcess: 'sentenceCase' }),
+                leftIcon: <Icon icon="album" />,
+                onClick: handleGoToAlbum,
+            },
+            goToAlbumArtist: {
+                disabled:
+                    ctx.data?.length !== 1 ||
+                    !ctx.data[0]?.albumArtists ||
+                    ctx.data[0]?.albumArtists?.length === 0,
+                id: 'goToAlbumArtist',
+                label: t('page.contextMenu.goToAlbumArtist', { postProcess: 'sentenceCase' }),
+                leftIcon: <Icon icon="artist" />,
+                onClick: handleGoToAlbumArtist,
+            },
             moveToBottomOfQueue: {
                 id: 'moveToBottomOfQueue',
                 label: t('page.contextMenu.moveToBottom', { postProcess: 'sentenceCase' }),
@@ -888,6 +926,8 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
         handleRemoveSelected,
         server,
         handleShareItem,
+        handleGoToAlbum,
+        handleGoToAlbumArtist,
         handleOpenItemDetails,
         handlePlay,
         handleUpdateRating,

src/renderer/features/context-menu/events.ts

@@ -15,6 +15,8 @@ export type ContextMenuItemType =
     | 'deletePlaylist'
     | 'deselectAll'
     | 'download'
+    | 'goToAlbum'
+    | 'goToAlbumArtist'
     | 'moveToBottomOfQueue'
     | 'moveToNextOfQueue'
     | 'moveToTopOfQueue'
@@ -57,6 +59,8 @@ export const CONFIGURABLE_CONTEXT_MENU_ITEMS: ContextMenuItemType[] = [
     'setRating',
     'download',
     'shareItem',
+    'goToAlbum',
+    'goToAlbumArtist',
     'showDetails',
 ];