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

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(() => {
-        logFn.debug(logMsg[LogCategory.PLAYER].mediaNext, {
-            category: LogCategory.PLAYER,
-        });
+    const mediaNext = useCallback(
+        (toNextAlbum: boolean) => {
+            logFn.debug(logMsg[LogCategory.PLAYER].mediaNext, {
+                category: LogCategory.PLAYER,
+            });
 
-        storeActions.mediaNext();
-    }, [storeActions]);
+            storeActions.mediaNext(toNextAlbum);
+        },
+        [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(() => {
-        logFn.debug(logMsg[LogCategory.PLAYER].mediaPrevious, {
-            category: LogCategory.PLAYER,
-        });
+    const mediaPrevious = useCallback(
+        (toPreviousAlbum: boolean) => {
+            logFn.debug(logMsg[LogCategory.PLAYER].mediaPrevious, {
+                category: LogCategory.PLAYER,
+            });
 
-        storeActions.mediaPrevious();
-    }, [storeActions]);
+            storeActions.mediaPrevious(toPreviousAlbum);
+        },
+        [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(
-                        currentIndex,
-                        playbackLength,
-                        repeat,
-                    );
+                    const nextIndexProps = calculateNextIndex(currentIndex, playbackLength, repeat);
+                    let { nextIndex } = nextIndexProps;
+                    const { shouldStop } = nextIndexProps;
+
+                    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 },