Support using alt+click on prev/next to jump to previous/next album in queue (#2220)

src/i18n/locales/en.json

@@ -678,6 +678,7 @@
         "mute": "Mute",
         "muted": "Muted",
         "next": "Next",
+        "nextAlbum": "Alt+click for next album",
         "play": "Play",
         "playbackFetchCancel": "This is taking a while… close the notification to cancel",
         "playbackFetchInProgress": "Loading songs…",
@@ -686,6 +687,7 @@
         "playRandom": "Play random",
         "playSimilarSongs": "Play similar songs",
         "previous": "Previous",
+        "previousAlbum": "Alt+click for previous album",
         "queue_clear": "Clear queue",
         "queue_moveToBottom": "Move selected to bottom",
         "queue_moveToTop": "Move selected to top",
@@ -927,10 +929,12 @@
         "hotkey_listShowPlayingSong": "Show playing song in list",
         "hotkey_navigateHome": "Navigate to home",
         "hotkey_playbackNext": "Next track",
+        "hotkey_playbackNextAlbum": "Next album",
         "hotkey_playbackPause": "Pause",
         "hotkey_playbackPlay": "Play",
         "hotkey_playbackPlayPause": "Play / pause",
         "hotkey_playbackPrevious": "Previous track",
+        "hotkey_playbackPreviousAlbum": "Previous album",
         "hotkey_playbackStop": "Stop",
         "hotkey_rate0": "Rating clear",
         "hotkey_rate1": "Rating 1 star",

src/main/index.ts

@@ -875,10 +875,12 @@ enum BindingActions {
     LOCAL_SEARCH = 'localSearch',
     MUTE = 'volumeMute',
     NEXT = 'next',
+    NEXT_ALBUM = 'nextAlbum',
     PAUSE = 'pause',
     PLAY = 'play',
     PLAY_PAUSE = 'playPause',
     PREVIOUS = 'previous',
+    PREVIOUS_ALBUM = 'previousAlbum',
     SHUFFLE = 'toggleShuffle',
     SKIP_BACKWARD = 'skipBackward',
     SKIP_FORWARD = 'skipForward',
@@ -906,11 +908,15 @@ const HOTKEY_ACTIONS: Record<BindingActions, () => void> = {
     [BindingActions.LOCAL_SEARCH]: () => {},
     [BindingActions.MUTE]: () => getMainWindow()?.webContents.send('renderer-player-volume-mute'),
     [BindingActions.NEXT]: () => getMainWindow()?.webContents.send('renderer-player-next'),
+    [BindingActions.NEXT_ALBUM]: () =>
+        getMainWindow()?.webContents.send('renderer-player-next-album'),
     [BindingActions.PAUSE]: () => getMainWindow()?.webContents.send('renderer-player-pause'),
     [BindingActions.PLAY]: () => getMainWindow()?.webContents.send('renderer-player-play'),
     [BindingActions.PLAY_PAUSE]: () =>
         getMainWindow()?.webContents.send('renderer-player-play-pause'),
     [BindingActions.PREVIOUS]: () => getMainWindow()?.webContents.send('renderer-player-previous'),
+    [BindingActions.PREVIOUS_ALBUM]: () =>
+        getMainWindow()?.webContents.send('renderer-player-previous-album'),
     [BindingActions.SHUFFLE]: () =>
         getMainWindow()?.webContents.send('renderer-player-toggle-shuffle'),
     [BindingActions.SKIP_BACKWARD]: () =>

src/preload/mpv-player.ts

@@ -118,6 +118,10 @@ const rendererNext = (cb: (data: PlayerData) => void) => {
     ipcRenderer.on('renderer-player-next', (_, data) => cb(data));
 };
 
+const rendererNextAlbum = (cb: (data: PlayerData) => void) => {
+    ipcRenderer.on('renderer-player-next-album', (_, data) => cb(data));
+};
+
 const rendererPause = (cb: (data: PlayerData) => void) => {
     ipcRenderer.on('renderer-player-pause', (_, data) => cb(data));
 };
@@ -134,6 +138,10 @@ const rendererPrevious = (cb: (data: PlayerData) => void) => {
     ipcRenderer.on('renderer-player-previous', (_, data) => cb(data));
 };
 
+const rendererPreviousAlbum = (cb: (data: PlayerData) => void) => {
+    ipcRenderer.on('renderer-player-previous-album', (_, data) => cb(data));
+};
+
 const rendererStop = (cb: (data: PlayerData) => void) => {
     ipcRenderer.on('renderer-player-stop', (_, data) => cb(data));
 };
@@ -215,11 +223,13 @@ export const mpvPlayerListener = {
     rendererError,
     rendererMpvReconnect,
     rendererNext,
+    rendererNextAlbum,
     rendererPause,
     rendererPlay,
     rendererPlayerFallback,
     rendererPlayPause,
     rendererPrevious,
+    rendererPreviousAlbum,
     rendererQuit,
     rendererSkipBackward,
     rendererSkipForward,

src/renderer/features/player/audio-player/hooks/use-main-player-listener.tsx

@@ -56,13 +56,25 @@ export const useMainPlayerListener = () => {
 
         mpvPlayerListener.rendererNext(() => {
             if (!isRadioActive) {
-                mediaNext();
+                mediaNext(false);
+            }
+        });
+
+        mpvPlayerListener.rendererNextAlbum(() => {
+            if (!isRadioActive) {
+                mediaNext(true);
             }
         });
 
         mpvPlayerListener.rendererPrevious(() => {
             if (!isRadioActive) {
-                mediaPrevious();
+                mediaPrevious(false);
+            }
+        });
+
+        mpvPlayerListener.rendererPreviousAlbum(() => {
+            if (!isRadioActive) {
+                mediaPrevious(true);
             }
         });
 

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

@@ -21,6 +21,8 @@ import {
     useSkipButtons,
 } from '/@/renderer/store';
 import { Icon } from '/@/shared/components/icon/icon';
+import { Stack } from '/@/shared/components/stack/stack';
+import { Text } from '/@/shared/components/text/text';
 import { PlayerRepeat, PlayerShuffle, PlayerStatus } from '/@/shared/types/types';
 
 export const CenterControls = () => {
@@ -163,9 +165,18 @@ const PreviousButton = ({ disabled }: { disabled?: boolean }) => {
         <PlayerButton
             disabled={disabled}
             icon={<Icon fill="default" icon="mediaPrevious" size={buttonSize} />}
-            onClick={mediaPrevious}
+            onClick={(e) => mediaPrevious(e.altKey)}
             tooltip={{
-                label: t('player.previous'),
+                label: (
+                    <Stack gap="xs" justify="center">
+                        <Text fw={500} ta="center">
+                            {t('player.previous')}
+                        </Text>
+                        <Text fw={500} isMuted size="xs" ta="center">
+                            {t('player.previousAlbum')}
+                        </Text>
+                    </Stack>
+                ),
                 openDelay: 0,
             }}
             variant="secondary"
@@ -239,9 +250,18 @@ const NextButton = ({ disabled }: { disabled?: boolean }) => {
         <PlayerButton
             disabled={disabled}
             icon={<Icon fill="default" icon="mediaNext" size={buttonSize} />}
-            onClick={mediaNext}
+            onClick={(e) => mediaNext(e.altKey)}
             tooltip={{
-                label: t('player.next'),
+                label: (
+                    <Stack gap="xs" justify="center">
+                        <Text fw={500} ta="center">
+                            {t('player.next')}
+                        </Text>
+                        <Text fw={500} isMuted size="xs" ta="center">
+                            {t('player.nextAlbum')}
+                        </Text>
+                    </Stack>
+                ),
                 openDelay: 0,
             }}
             variant="secondary"

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

@@ -31,7 +31,7 @@ export const MobileFullscreenPlayerControls = memo(
             <div className={styles.controlsContainer}>
                 <PlayerButton
                     icon={<Icon fill="default" icon="mediaPrevious" size="xl" />}
-                    onClick={mediaPrevious}
+                    onClick={(e) => mediaPrevious(e.altKey)}
                     tooltip={{
                         label: t('player.previous'),
                         openDelay: 0,
@@ -71,7 +71,7 @@ export const MobileFullscreenPlayerControls = memo(
                 />
                 <PlayerButton
                     icon={<Icon fill="default" icon="mediaNext" size="xl" />}
-                    onClick={mediaNext}
+                    onClick={(e) => mediaNext(e.altKey)}
                     tooltip={{
                         label: t('player.next'),
                         openDelay: 0,

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

@@ -203,7 +203,7 @@ export const MobilePlayerbar = () => {
                     icon={<Icon fill="default" icon="mediaPrevious" size="md" />}
                     onClick={(e) => {
                         e.stopPropagation();
-                        mediaPrevious();
+                        mediaPrevious(e.altKey);
                     }}
                     tooltip={{
                         label: t('player.previous'),
@@ -223,7 +223,7 @@ export const MobilePlayerbar = () => {
                     icon={<Icon fill="default" icon="mediaNext" size="md" />}
                     onClick={(e) => {
                         e.stopPropagation();
-                        mediaNext();
+                        mediaNext(e.altKey);
                     }}
                     tooltip={{
                         label: t('player.next'),

src/renderer/features/player/context/player-context.tsx

@@ -61,11 +61,11 @@ export interface PlayerContext {
     clearSelected: (items: QueueSong[]) => void;
     decreaseVolume: (amount: number) => void;
     increaseVolume: (amount: number) => void;
-    mediaNext: () => void;
+    mediaNext: (toNextAlbum: boolean) => void;
     mediaPause: () => void;
     mediaPlay: (id?: string) => void;
     mediaPlayByIndex: (index: number) => void;
-    mediaPrevious: () => void;
+    mediaPrevious: (toPreviousAlbum: boolean) => void;
     mediaSeekToTimestamp: (timestamp: number) => void;
     mediaSkipBackward: () => void;
     mediaSkipForward: () => void;
@@ -579,13 +579,16 @@ export const PlayerProvider = ({ children }: { children: React.ReactNode }) => {
         [storeActions],
     );
 
-    const mediaNext = useCallback(() => {
+    const mediaNext = useCallback(
-        logFn.debug(logMsg[LogCategory.PLAYER].mediaNext, {
+        (toNextAlbum: boolean) => {
-            category: LogCategory.PLAYER,
+            logFn.debug(logMsg[LogCategory.PLAYER].mediaNext, {
-        });
+                category: LogCategory.PLAYER,
+            });
 
-        storeActions.mediaNext();
+            storeActions.mediaNext(toNextAlbum);
-    }, [storeActions]);
+        },
+        [storeActions],
+    );
 
     const mediaPause = useCallback(() => {
         logFn.debug(logMsg[LogCategory.PLAYER].mediaPause, {
@@ -619,13 +622,16 @@ export const PlayerProvider = ({ children }: { children: React.ReactNode }) => {
         [storeActions],
     );
 
-    const mediaPrevious = useCallback(() => {
+    const mediaPrevious = useCallback(
-        logFn.debug(logMsg[LogCategory.PLAYER].mediaPrevious, {
+        (toPreviousAlbum: boolean) => {
-            category: LogCategory.PLAYER,
+            logFn.debug(logMsg[LogCategory.PLAYER].mediaPrevious, {
-        });
+                category: LogCategory.PLAYER,
+            });
 
-        storeActions.mediaPrevious();
+            storeActions.mediaPrevious(toPreviousAlbum);
-    }, [storeActions]);
+        },
+        [storeActions],
+    );
 
     const mediaStop = useCallback(
         (options?: { reset?: boolean }) => {

src/renderer/features/player/hooks/use-media-session.ts

@@ -100,7 +100,7 @@ export const useMediaSession = () => {
                 return;
             }
 
-            playerRef.current.mediaNext();
+            playerRef.current.mediaNext(false);
         });
 
         mediaSession.setActionHandler('pause', () => {
@@ -116,7 +116,7 @@ export const useMediaSession = () => {
                 return;
             }
 
-            playerRef.current.mediaPrevious();
+            playerRef.current.mediaPrevious(false);
         });
 
         mediaSession.setActionHandler('seekto', (e) => {

src/renderer/features/player/hooks/use-playback-hotkeys.ts

@@ -14,11 +14,13 @@ export const usePlaybackHotkeys = () => {
             binding: (typeof bindings)[keyof typeof bindings];
             handler: () => void;
         }> = [
-            { binding: bindings.next, handler: () => player.mediaNext() },
+            { binding: bindings.next, handler: () => player.mediaNext(false) },
+            { binding: bindings.nextAlbum, handler: () => player.mediaNext(true) },
             { binding: bindings.pause, handler: () => player.mediaPause() },
             { binding: bindings.play, handler: () => player.mediaPlay() },
             { binding: bindings.playPause, handler: () => player.mediaTogglePlayPause() },
-            { binding: bindings.previous, handler: () => player.mediaPrevious() },
+            { binding: bindings.previous, handler: () => player.mediaPrevious(false) },
+            { binding: bindings.previousAlbum, handler: () => player.mediaPrevious(true) },
             { binding: bindings.skipBackward, handler: () => player.mediaSkipBackward() },
             { binding: bindings.skipForward, handler: () => player.mediaSkipForward() },
             { binding: bindings.stop, handler: () => player.mediaStop() },

src/renderer/features/settings/components/hotkeys/hotkey-manager-settings.tsx

@@ -70,6 +70,7 @@ const BINDINGS_MAP: Record<BindingActions, string> = {
         context: 'navigateHome',
     }),
     next: i18n.t('setting.hotkey', { context: 'playbackNext' }),
+    nextAlbum: i18n.t('setting.hotkey', { context: 'playbackNextAlbum' }),
     pause: i18n.t('setting.hotkey', { context: 'playbackPause' }),
     play: i18n.t('setting.hotkey', { context: 'playbackPlay' }),
     playPause: i18n.t('setting.hotkey', {
@@ -78,6 +79,7 @@ const BINDINGS_MAP: Record<BindingActions, string> = {
     previous: i18n.t('setting.hotkey', {
         context: 'playbackPrevious',
     }),
+    previousAlbum: i18n.t('setting.hotkey', { context: 'playbackPreviousAlbum' }),
     rate0: i18n.t('setting.hotkey', { context: 'rate0' }),
     rate1: i18n.t('setting.hotkey', { context: 'rate1' }),
     rate2: i18n.t('setting.hotkey', { context: 'rate2' }),

src/renderer/store/player.store.ts

@@ -52,11 +52,11 @@ interface Actions {
     isFirstTrackInQueue: () => boolean;
     isLastTrackInQueue: () => boolean;
     mediaAutoNext: () => PlayerData;
-    mediaNext: () => void;
+    mediaNext: (toNextAlbum: boolean) => void;
     mediaPause: () => void;
     mediaPlay: (id?: string) => void;
     mediaPlayByIndex: (index: number) => void;
-    mediaPrevious: () => void;
+    mediaPrevious: (toPreviousAlbum: boolean) => void;
     mediaSeekToTimestamp: (timestamp: number) => void;
     mediaSkipBackward: (offset?: number) => void;
     mediaSkipForward: (offset?: number) => void;
@@ -1044,7 +1044,7 @@ export const usePlayerStoreBase = createWithEqualityFn<PlayerState>()(
                         status: newStatus,
                     };
                 },
-                mediaNext: () => {
+                mediaNext: (toNextAlbum) => {
                     const state = get();
                     const currentIndex = state.player.index;
                     const player = state.player;
@@ -1072,11 +1072,30 @@ export const usePlayerStoreBase = createWithEqualityFn<PlayerState>()(
                         return;
                     }
 
-                    const { nextIndex, shouldStop } = calculateNextIndex(
+                    const nextIndexProps = calculateNextIndex(currentIndex, playbackLength, repeat);
-                        currentIndex,
+                    let { nextIndex } = nextIndexProps;
-                        playbackLength,
+                    const { shouldStop } = nextIndexProps;
-                        repeat,
+
-                    );
+                    if (toNextAlbum && !shouldStop) {
+                        const currentItem = queue.items[currentIndex];
+                        const [start, end] = findLastAlbumRange(queue.items);
+                        const isOnLastAlbum = start <= currentIndex && currentIndex <= end;
+                        if (isOnLastAlbum) {
+                            const nextIndexWithNextAlbum = queue.items.findIndex(
+                                (i) => i.albumId !== currentItem.albumId,
+                            );
+
+                            nextIndex = nextIndexWithNextAlbum;
+                        } else {
+                            const queueStartingFromCurrent = queue.items.slice(currentIndex);
+                            const nextIndexWithNextAlbum = queueStartingFromCurrent.findIndex(
+                                (i) => i.albumId !== currentItem.albumId,
+                            );
+                            nextIndex =
+                                nextIndexWithNextAlbum +
+                                (queue.items.length - queueStartingFromCurrent.length);
+                        }
+                    }
 
                     if (shouldStop) {
                         set((state) => {
@@ -1194,7 +1213,7 @@ export const usePlayerStoreBase = createWithEqualityFn<PlayerState>()(
                         });
                     }
                 },
-                mediaPrevious: () => {
+                mediaPrevious: (toPreviousAlbum) => {
                     const currentIndex = get().player.index;
                     const player = get().player;
                     const queue = get().getQueueOrder();
@@ -1217,6 +1236,11 @@ export const usePlayerStoreBase = createWithEqualityFn<PlayerState>()(
                     } else if (player.repeat === PlayerRepeat.NONE && isFirstTrack) {
                         // Repeat none: stay on first track if already there
                         previousIndex = currentIndex;
+                    } else if (toPreviousAlbum) {
+                        previousIndex = Math.max(
+                            0,
+                            findIndexWithPreviousAlbum(queue.items, currentIndex),
+                        );
                     } else {
                         // Otherwise, go to previous track
                         previousIndex = Math.max(0, currentIndex - 1);
@@ -2262,6 +2286,47 @@ function cleanupOrphanedSongs(state: any): boolean {
     return hasOrphans;
 }
 
+function findIndexWithPreviousAlbum(queueItems: QueueSong[], currentIndex: number) {
+    const queueBeforeCurrent = queueItems.slice(0, currentIndex);
+    const currentItem = queueItems[currentIndex];
+
+    const previousAlbumIdInQueue = queueBeforeCurrent.findLast(
+        (i) => i.albumId !== currentItem.albumId,
+    )?.albumId;
+
+    let prevIndex = -1;
+
+    if (previousAlbumIdInQueue) {
+        for (let index = queueBeforeCurrent.length - 1; index > -1; index--) {
+            const element = queueBeforeCurrent[index];
+            if (element.albumId === previousAlbumIdInQueue) {
+                prevIndex = index;
+            }
+            if (prevIndex > -1 && element.albumId !== previousAlbumIdInQueue) {
+                break;
+            }
+        }
+    }
+
+    return prevIndex;
+}
+
+function findLastAlbumRange(queueItems: QueueSong[]) {
+    const lastAlbumId = queueItems.at(-1)?.albumId;
+    const rangeEnd = queueItems.length - 1;
+    let rangeStart = rangeEnd;
+
+    for (let index = rangeEnd; index > -1; index--) {
+        const element = queueItems[index];
+        rangeStart = index;
+        if (element.albumId !== lastAlbumId) {
+            break;
+        }
+    }
+
+    return [rangeStart + 1, rangeEnd];
+}
+
 function parseUniqueSeekToTimestamp(timestamp: string) {
     return Number(timestamp.split('-')[0]);
 }

src/renderer/store/settings.store.ts

@@ -145,10 +145,12 @@ const BindingActionsSchema = z.enum([
     'volumeMute',
     'navigateHome',
     'next',
+    'nextAlbum',
     'pause',
     'play',
     'playPause',
     'previous',
+    'previousAlbum',
     'rate0',
     'rate1',
     'rate2',
@@ -847,10 +849,12 @@ export enum BindingActions {
     MUTE = 'volumeMute',
     NAVIGATE_HOME = 'navigateHome',
     NEXT = 'next',
+    NEXT_ALBUM = 'nextAlbum',
     PAUSE = 'pause',
     PLAY = 'play',
     PLAY_PAUSE = 'playPause',
     PREVIOUS = 'previous',
+    PREVIOUS_ALBUM = 'previousAlbum',
     RATE_0 = 'rate0',
     RATE_1 = 'rate1',
     RATE_2 = 'rate2',
@@ -1322,10 +1326,12 @@ const initialState: SettingsState = {
             localSearch: { allowGlobal: false, hotkey: 'mod+f', isGlobal: false },
             navigateHome: { allowGlobal: false, hotkey: '', isGlobal: false },
             next: { allowGlobal: true, hotkey: '', isGlobal: false },
+            nextAlbum: { allowGlobal: true, hotkey: '', isGlobal: false },
             pause: { allowGlobal: true, hotkey: '', isGlobal: false },
             play: { allowGlobal: true, hotkey: '', isGlobal: false },
             playPause: { allowGlobal: true, hotkey: 'space', isGlobal: false },
             previous: { allowGlobal: true, hotkey: '', isGlobal: false },
+            previousAlbum: { allowGlobal: true, hotkey: '', isGlobal: false },
             rate0: { allowGlobal: true, hotkey: '', isGlobal: false },
             rate1: { allowGlobal: true, hotkey: '', isGlobal: false },
             rate2: { allowGlobal: true, hotkey: '', isGlobal: false },

src/shared/api/utils.ts

@@ -342,31 +342,31 @@ export const sortSongsByFetchedOrder = (
 
     // Group songs by the fetched ID they belong to
     const songsByFetchedId = new Map<string, Song[]>();
+    const fetchedIdsSet = new Set(fetchedIds);
 
     for (const song of songs) {
         let matchedId: string | undefined;
 
         switch (itemType) {
             case LibraryItem.ALBUM:
-                matchedId = fetchedIds.find((id) => song.albumId === id);
+                matchedId = fetchedIdsSet.has(song.albumId) ? song.albumId : undefined;
                 break;
             case LibraryItem.ALBUM_ARTIST:
-                matchedId = fetchedIds.find((id) =>
+                matchedId = song.albumArtists.find((a) => fetchedIdsSet.has(a.id))?.id;
-                    song.albumArtists.some((artist) => artist.id === id),
-                );
                 break;
             case LibraryItem.ARTIST:
-                matchedId = fetchedIds.find((id) =>
+                matchedId = song.artists.find((a) => fetchedIdsSet.has(a.id))?.id;
-                    song.artists.some((artist) => artist.id === id),
-                );
                 break;
             case LibraryItem.GENRE:
-                matchedId = fetchedIds.find((id) => song.genres.some((genre) => genre.id === id));
+                matchedId = song.genres.find((a) => fetchedIdsSet.has(a.id))?.id;
                 break;
             case LibraryItem.PLAYLIST:
                 // For playlists, we might need to track which playlist each song came from
                 // This is a simplified approach - you may need to adjust based on your data structure
-                matchedId = fetchedIds.find((id) => song.playlistItemId === id);
+                matchedId =
+                    song.playlistItemId && fetchedIdsSet.has(song.playlistItemId)
+                        ? song.playlistItemId
+                        : undefined;
                 break;
             default:
                 break;