Add option to play similar tracks from the context menu (#650)

* Add option to play similar songs from context menu

* remove console.log

src/i18n/locales/en.json

@@ -322,6 +322,7 @@
             "moveToTop": "$t(action.moveToTop)",
             "numberSelected": "{{count}} selected",
             "play": "$t(player.play)",
+            "playSimilarSongs": "$t(player.playSimilarSongs)",
             "removeFromFavorites": "$t(action.removeFromFavorites)",
             "removeFromPlaylist": "$t(action.removeFromPlaylist)",
             "removeFromQueue": "$t(action.removeFromQueue)",
@@ -416,6 +417,7 @@
         "playbackFetchNoResults": "no songs found",
         "playbackSpeed": "playback speed",
         "playRandom": "play random",
+        "playSimilarSongs": "play similar songs",
         "previous": "previous",
         "queue_clear": "clear queue",
         "queue_moveToBottom": "move selected to top",

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

@@ -15,7 +15,8 @@ export const QUEUE_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
 export const SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
     { id: 'play' },
     { id: 'playLast' },
-    { divider: true, id: 'playNext' },
+    { id: 'playNext' },
+    { divider: true, id: 'playSimilarSongs' },
     { divider: true, id: 'addToPlaylist' },
     { id: 'addToFavorites' },
     { divider: true, id: 'removeFromFavorites' },
@@ -34,7 +35,8 @@ export const SONG_ALBUM_PAGE: SetContextMenuItems = [
 export const PLAYLIST_SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
     { id: 'play' },
     { id: 'playLast' },
-    { divider: true, id: 'playNext' },
+    { id: 'playNext' },
+    { divider: true, id: 'playSimilarSongs' },
     { id: 'addToPlaylist' },
     { divider: true, id: 'removeFromPlaylist' },
     { id: 'addToFavorites' },
@@ -46,7 +48,8 @@ export const PLAYLIST_SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
 export const SMART_PLAYLIST_SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
     { id: 'play' },
     { id: 'playLast' },
-    { divider: true, id: 'playNext' },
+    { id: 'playNext' },
+    { divider: true, id: 'playSimilarSongs' },
     { divider: true, id: 'addToPlaylist' },
     { id: 'addToFavorites' },
     { divider: true, id: 'removeFromFavorites' },

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

@@ -29,6 +29,7 @@ import {
     RiCloseCircleLine,
     RiShareForwardFill,
     RiInformationFill,
+    RiRadio2Fill,
 } from 'react-icons/ri';
 import { AnyLibraryItems, LibraryItem, ServerType, AnyLibraryItem } from '/@/renderer/api/types';
 import {
@@ -50,6 +51,7 @@ 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 {
+    getServerById,
     useAuthStore,
     useCurrentServer,
     usePlayerStore,
@@ -58,6 +60,7 @@ import {
 import { usePlaybackType } from '/@/renderer/store/settings.store';
 import { Play, PlaybackType } from '/@/renderer/types';
 import { ItemDetailsModal } from '/@/renderer/features/item-details/components/item-details-modal';
+import { controller } from '/@/renderer/api/controller';
 
 type ContextMenuContextProps = {
     closeContextMenu: () => void;
@@ -658,6 +661,18 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
         });
     }, [ctx.data, t]);
 
+    const handleSimilar = useCallback(async () => {
+        const item = ctx.data[0];
+        const songs = await controller.getSimilarSongs({
+            apiClientProps: {
+                server: getServerById(item.serverId),
+                signal: undefined,
+            },
+            query: { albumArtistIds: item.albumArtistIds, songId: item.id },
+        });
+        handlePlayQueueAdd?.({ byData: [ctx.data[0], ...songs], playType: Play.NOW });
+    }, [ctx, handlePlayQueueAdd]);
+
     const contextMenuItems: Record<ContextMenuItemType, ContextMenuItem> = useMemo(() => {
         return {
             addToFavorites: {
@@ -719,6 +734,12 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
                 leftIcon: <RiAddCircleFill size="1.1rem" />,
                 onClick: () => handlePlay(Play.NEXT),
             },
+            playSimilarSongs: {
+                id: 'playSimilarSongs',
+                label: t('page.contextMenu.playSimilarSongs', { postProcess: 'sentenceCase' }),
+                leftIcon: <RiRadio2Fill size="1.1rem" />,
+                onClick: handleSimilar,
+            },
             removeFromFavorites: {
                 id: 'removeFromFavorites',
                 label: t('page.contextMenu.removeFromFavorites', { postProcess: 'sentenceCase' }),
@@ -838,6 +859,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
         handleUpdateRating,
         handleShareItem,
         server,
+        handleSimilar,
     ]);
 
     const mergedRef = useMergedRef(ref, clickOutsideRef);

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

@@ -35,7 +35,8 @@ export type ContextMenuItemType =
     | 'moveToTopOfQueue'
     | 'removeFromQueue'
     | 'deselectAll'
-    | 'showDetails';
+    | 'showDetails'
+    | 'playSimilarSongs';
 
 export type SetContextMenuItems = {
     children?: boolean;