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

This commit is contained in:
Damien Erambert
2026-07-15 22:27:40 -07:00
committed by GitHub
parent 62c1ac04e4
commit 5e79e385d9
14 changed files with 179 additions and 46 deletions
@@ -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);
}
});
@@ -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"
@@ -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,
@@ -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'),
@@ -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 }) => {
@@ -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) => {
@@ -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() },
@@ -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' }),