Add "Move to next" button to queue (#781)

This commit is contained in:
Trevor 2024-10-09 18:00:25 -07:00 committed by GitHub
parent 5e628d96c7
commit a00385e78f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 85 additions and 3 deletions

View file

@ -2,6 +2,7 @@ import { SetContextMenuItems } from '/@/renderer/features/context-menu/events';
export const QUEUE_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
{ divider: true, id: 'removeFromQueue' },
{ id: 'moveToNextOfQueue' },
{ id: 'moveToBottomOfQueue' },
{ divider: true, id: 'moveToTopOfQueue' },
{ divider: true, id: 'addToPlaylist' },

View file

@ -18,6 +18,7 @@ import {
RiAddBoxFill,
RiAddCircleFill,
RiArrowDownLine,
RiArrowGoForwardLine,
RiArrowRightSFill,
RiArrowUpLine,
RiDeleteBinFill,
@ -609,7 +610,19 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
);
const playbackType = usePlaybackType();
const { moveToBottomOfQueue, moveToTopOfQueue, removeFromQueue } = useQueueControls();
const { moveToNextOfQueue, moveToBottomOfQueue, moveToTopOfQueue, removeFromQueue } =
useQueueControls();
const handleMoveToNext = useCallback(() => {
const uniqueIds = ctx.dataNodes?.map((row) => row.data.uniqueId);
if (!uniqueIds?.length) return;
const playerData = moveToNextOfQueue(uniqueIds);
if (playbackType === PlaybackType.LOCAL) {
setQueueNext(playerData);
}
}, [ctx.dataNodes, moveToNextOfQueue, playbackType]);
const handleMoveToBottom = useCallback(() => {
const uniqueIds = ctx.dataNodes?.map((row) => row.data.uniqueId);
@ -758,6 +771,12 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
leftIcon: <RiArrowDownLine size="1.1rem" />,
onClick: handleMoveToBottom,
},
moveToNextOfQueue: {
id: 'moveToNext',
label: t('page.contextMenu.moveToNext', { postProcess: 'sentenceCase' }),
leftIcon: <RiArrowGoForwardLine size="1.1rem" />,
onClick: handleMoveToNext,
},
moveToTopOfQueue: {
id: 'moveToTopOfQueue',
label: t('page.contextMenu.moveToTop', { postProcess: 'sentenceCase' }),
@ -904,6 +923,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
handleDeselectAll,
ctx.data,
handleDownload,
handleMoveToNext,
handleMoveToBottom,
handleMoveToTop,
handleSimilar,

View file

@ -32,6 +32,7 @@ export type ContextMenuItemType =
| 'shareItem'
| 'deletePlaylist'
| 'createPlaylist'
| 'moveToNextOfQueue'
| 'moveToBottomOfQueue'
| 'moveToTopOfQueue'
| 'removeFromQueue'

View file

@ -6,6 +6,7 @@ import isElectron from 'is-electron';
import { useTranslation } from 'react-i18next';
import {
RiArrowDownLine,
RiArrowGoForwardLine,
RiArrowUpLine,
RiShuffleLine,
RiDeleteBinLine,
@ -30,14 +31,32 @@ interface PlayQueueListOptionsProps {
export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsProps) => {
const { t } = useTranslation();
const { clearQueue, moveToBottomOfQueue, moveToTopOfQueue, shuffleQueue, removeFromQueue } =
useQueueControls();
const {
clearQueue,
moveToBottomOfQueue,
moveToNextOfQueue,
moveToTopOfQueue,
shuffleQueue,
removeFromQueue,
} = useQueueControls();
const { pause } = usePlayerControls();
const playbackType = usePlaybackType();
const setCurrentTime = useSetCurrentTime();
const handleMoveToNext = () => {
const selectedRows = tableRef?.current?.grid.api.getSelectedRows();
const uniqueIds = selectedRows?.map((row) => row.uniqueId);
if (!uniqueIds?.length) return;
const playerData = moveToNextOfQueue(uniqueIds);
if (playbackType === PlaybackType.LOCAL) {
setQueueNext(playerData);
}
};
const handleMoveToBottom = () => {
const selectedRows = tableRef?.current?.grid.api.getSelectedRows();
const uniqueIds = selectedRows?.map((row) => row.uniqueId);
@ -124,6 +143,15 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
>
<RiShuffleLine size="1.1rem" />
</Button>
<Button
compact
size="md"
tooltip={{ label: t('action.moveToNext', { postProcess: 'sentenceCase' }) }}
variant="default"
onClick={handleMoveToNext}
>
<RiArrowGoForwardLine size="1.1rem" />
</Button>
<Button
compact
size="md"