From f99b8ea9ee7090b2c92512e53f02009c58bcc34b Mon Sep 17 00:00:00 2001 From: Kendall Garner <17521368+kgarner7@users.noreply.github.com> Date: Mon, 2 Mar 2026 20:30:35 -0800 Subject: [PATCH] feat(queue): add go to current button --- src/i18n/locales/en.json | 1 + .../components/drawer-play-queue.tsx | 1 + .../components/play-queue-list-controls.tsx | 20 ++++++++++++++++++- .../components/popover-play-queue.tsx | 1 + .../components/sidebar-play-queue.tsx | 2 ++ .../now-playing/routes/now-playing-route.tsx | 7 +++++-- src/shared/components/icon/icon.tsx | 2 ++ 7 files changed, 31 insertions(+), 3 deletions(-) diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index 8e8a9fe63..f375e06e1 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -5,6 +5,7 @@ "addOrRemoveFromSelection": "add or remove from selection", "selectRangeOfItems": "select a range of items", "clearQueue": "clear queue", + "goToCurrent": "go to current item", "createPlaylist": "create $t(entity.playlist, {\"count\": 1})", "createRadioStation": "create $t(entity.radioStation, {\"count\": 1})", "deletePlaylist": "delete $t(entity.playlist, {\"count\": 1})", diff --git a/src/renderer/features/now-playing/components/drawer-play-queue.tsx b/src/renderer/features/now-playing/components/drawer-play-queue.tsx index a703a1087..b2ab37852 100644 --- a/src/renderer/features/now-playing/components/drawer-play-queue.tsx +++ b/src/renderer/features/now-playing/components/drawer-play-queue.tsx @@ -21,6 +21,7 @@ export const DrawerPlayQueue = () => { diff --git a/src/renderer/features/now-playing/components/play-queue-list-controls.tsx b/src/renderer/features/now-playing/components/play-queue-list-controls.tsx index fa78795cc..f4e72d12c 100644 --- a/src/renderer/features/now-playing/components/play-queue-list-controls.tsx +++ b/src/renderer/features/now-playing/components/play-queue-list-controls.tsx @@ -1,9 +1,11 @@ import { useIsFetching } from '@tanstack/react-query'; import { t } from 'i18next'; +import { RefObject } from 'react'; import { useTranslation } from 'react-i18next'; import { queryKeys } from '/@/renderer/api/query-keys'; import { SONG_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns'; +import { ItemListHandle } from '/@/renderer/components/item-list/types'; import { usePlayer } from '/@/renderer/features/player/context/player-context'; import { useRestoreQueue, useSaveQueue } from '/@/renderer/features/player/hooks/use-queue-restore'; import { @@ -11,7 +13,7 @@ import { SONG_DISPLAY_TYPES, } from '/@/renderer/features/shared/components/list-config-menu'; import { SearchInput } from '/@/renderer/features/shared/components/search-input'; -import { useCurrentServer } from '/@/renderer/store'; +import { useCurrentServer, usePlayerStoreBase } from '/@/renderer/store'; import { hasFeature } from '/@/shared/api/utils'; import { ActionIcon } from '/@/shared/components/action-icon/action-icon'; import { Group } from '/@/shared/components/group/group'; @@ -21,12 +23,14 @@ import { ItemListKey, ListDisplayType } from '/@/shared/types/types'; interface PlayQueueListOptionsProps { handleSearch: (value: string) => void; searchTerm?: string; + tableRef: RefObject; type: ItemListKey; } export const PlayQueueListControls = ({ handleSearch, searchTerm, + tableRef, type, }: PlayQueueListOptionsProps) => { const { t } = useTranslation(); @@ -36,6 +40,13 @@ export const PlayQueueListControls = ({ player.clearQueue(); }; + const handleJumpToCurrent = () => { + const index = usePlayerStoreBase.getState().player.index; + if (index !== -1) { + tableRef.current?.scrollToIndex(index); + } + }; + const handleShuffleQueue = () => { player.shuffleAll(); }; @@ -58,6 +69,13 @@ export const PlayQueueListControls = ({ tooltip={{ label: t('action.clearQueue', { postProcess: 'sentenceCase' }) }} variant="subtle" /> + {
@@ -217,6 +218,7 @@ export const SidebarPlayQueue = () => { diff --git a/src/renderer/features/now-playing/routes/now-playing-route.tsx b/src/renderer/features/now-playing/routes/now-playing-route.tsx index dbd83ada8..e3acd92b4 100644 --- a/src/renderer/features/now-playing/routes/now-playing-route.tsx +++ b/src/renderer/features/now-playing/routes/now-playing-route.tsx @@ -1,5 +1,6 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; +import { ItemListHandle } from '/@/renderer/components/item-list/types'; import { NowPlayingHeader } from '/@/renderer/features/now-playing/components/now-playing-header'; import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue'; import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls'; @@ -11,6 +12,7 @@ import { ItemListKey } from '/@/shared/types/types'; const NowPlayingRoute = () => { const [search, setSearch] = useState(undefined); const { setSideBar } = useAppStoreActions(); + const tableRef = useRef(null); useEffect(() => { // On page enter, set rightExpanded to false @@ -28,9 +30,10 @@ const NowPlayingRoute = () => { - + ); }; diff --git a/src/shared/components/icon/icon.tsx b/src/shared/components/icon/icon.tsx index 87d4f9c64..6358dda07 100644 --- a/src/shared/components/icon/icon.tsx +++ b/src/shared/components/icon/icon.tsx @@ -33,6 +33,7 @@ import { LuClipboardCopy, LuClock3, LuCloudDownload, + LuCornerDownRight, LuCornerUpRight, LuDelete, LuDisc, @@ -183,6 +184,7 @@ export const AppIcon = { filter: LuListFilter, folder: LuFolderOpen, genre: LuFlag, + goToItem: LuCornerDownRight, hash: LuHash, home: LuSquareMenu, image: LuImage,