feat: sync play queue for navidrome/subsonic (#1335)

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>

src/renderer/features/now-playing/components/drawer-play-queue.tsx

@@ -21,7 +21,6 @@ export const DrawerPlayQueue = () => {
                 <PlayQueueListControls
                     handleSearch={setSearch}
                     searchTerm={search}
-                    tableRef={queueRef}
                     type={ItemListKey.SIDE_QUEUE}
                 />
             </div>

src/renderer/features/now-playing/components/play-queue-list-controls.tsx

@@ -1,77 +1,31 @@
-import { RefObject } from 'react';
+import { t } from 'i18next';
 import { useTranslation } from 'react-i18next';
 
 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 { updateSong } from '/@/renderer/features/player/update-remote-song';
+import { useIsPlayerFetching, usePlayer } from '/@/renderer/features/player/context/player-context';
+import { useRestoreQueue, useSaveQueue } from '/@/renderer/features/player/hooks/use-queue-restore';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
 import { SearchInput } from '/@/renderer/features/shared/components/search-input';
-import { usePlayerSong, usePlayerStoreBase } from '/@/renderer/store';
+import { useCurrentServer } 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';
-import { QueueSong } from '/@/shared/types/domain-types';
+import { ServerFeature } from '/@/shared/types/features-types';
 import { ItemListKey, ListDisplayType } from '/@/shared/types/types';
 
 interface PlayQueueListOptionsProps {
     handleSearch: (value: string) => void;
     searchTerm?: string;
-    tableRef: RefObject<ItemListHandle | null>;
     type: ItemListKey;
 }
 
 export const PlayQueueListControls = ({
     handleSearch,
     searchTerm,
-    tableRef,
     type,
 }: PlayQueueListOptionsProps) => {
     const { t } = useTranslation();
     const player = usePlayer();
-    const currentSong = usePlayerSong();
-
-    const handleMoveToNext = () => {
-        const selectedItems = tableRef?.current?.internalState.getSelected() as
-            | QueueSong[]
-            | undefined;
-        if (!selectedItems || selectedItems.length === 0) return;
-        player.moveSelectedToNext(selectedItems);
-    };
-
-    const handleMoveToBottom = () => {
-        const selectedItems = tableRef?.current?.internalState.getSelected() as
-            | QueueSong[]
-            | undefined;
-        if (!selectedItems || selectedItems.length === 0) return;
-        player.moveSelectedToBottom(selectedItems);
-    };
-
-    const handleMoveToTop = () => {
-        const selectedItems = tableRef?.current?.internalState.getSelected() as
-            | QueueSong[]
-            | undefined;
-        if (!selectedItems || selectedItems.length === 0) return;
-        player.moveSelectedToTop(selectedItems);
-    };
-
-    const handleRemoveSelected = () => {
-        const selectedItems = tableRef?.current?.internalState.getSelected() as
-            | QueueSong[]
-            | undefined;
-        if (!selectedItems || selectedItems.length === 0) return;
-
-        const selectedUniqueIds = selectedItems.map((item) => item._uniqueId);
-        const isCurrentSongRemoved =
-            currentSong && selectedUniqueIds.includes(currentSong._uniqueId);
-
-        player.clearSelected(selectedItems);
-
-        if (isCurrentSongRemoved) {
-            // Get the new current song after removal
-            const newCurrentSong = usePlayerStoreBase.getState().getCurrentSong();
-            updateSong(newCurrentSong);
-        }
-    };
 
     const handleClearQueue = () => {
         player.clearQueue();
@@ -84,6 +38,7 @@ export const PlayQueueListControls = ({
     return (
         <Group justify="space-between" px="1rem" py="1rem" w="100%">
             <Group gap="xs">
+                <QueueRestoreActions />
                 <ActionIcon
                     icon="mediaShuffle"
                     iconProps={{ size: 'lg' }}
@@ -91,39 +46,6 @@ export const PlayQueueListControls = ({
                     tooltip={{ label: t('player.shuffle', { postProcess: 'sentenceCase' }) }}
                     variant="subtle"
                 />
-                <ActionIcon
-                    // disabled={hasSearch}
-                    icon="mediaPlayNext"
-                    iconProps={{ size: 'lg' }}
-                    onClick={handleMoveToNext}
-                    tooltip={{ label: t('action.moveToNext', { postProcess: 'sentenceCase' }) }}
-                    variant="subtle"
-                />
-                <ActionIcon
-                    // disabled={hasSearch}
-                    icon="arrowDownToLine"
-                    iconProps={{ size: 'lg' }}
-                    onClick={handleMoveToBottom}
-                    tooltip={{ label: t('action.moveToBottom', { postProcess: 'sentenceCase' }) }}
-                    variant="subtle"
-                />
-                <ActionIcon
-                    // disabled={hasSearch}
-                    icon="arrowUpToLine"
-                    iconProps={{ size: 'lg' }}
-                    onClick={handleMoveToTop}
-                    tooltip={{ label: t('action.moveToTop', { postProcess: 'sentenceCase' }) }}
-                    variant="subtle"
-                />
-                <ActionIcon
-                    icon="delete"
-                    iconProps={{ size: 'lg' }}
-                    onClick={handleRemoveSelected}
-                    tooltip={{
-                        label: t('action.removeFromQueue', { postProcess: 'sentenceCase' }),
-                    }}
-                    variant="subtle"
-                />
                 <ActionIcon
                     icon="x"
                     iconProps={{ size: 'lg' }}
@@ -158,3 +80,49 @@ export const PlayQueueListControls = ({
         </Group>
     );
 };
+
+const QueueRestoreActions = () => {
+    const server = useCurrentServer();
+    const supportsQueue = hasFeature(server, ServerFeature.SERVER_PLAY_QUEUE);
+
+    const isFetching = useIsPlayerFetching();
+
+    const { isPending: isSavingQueue, mutate: handleSaveQueue } = useSaveQueue();
+
+    const handleRestoreQueue = useRestoreQueue();
+
+    if (!supportsQueue) {
+        return null;
+    }
+
+    return (
+        <>
+            <ActionIcon
+                disabled={isFetching}
+                icon="upload"
+                iconProps={{ size: 'lg' }}
+                loading={isSavingQueue}
+                onClick={() => handleSaveQueue()}
+                tooltip={{
+                    label: t('player.saveQueueToServer', {
+                        postProcess: 'sentenceCase',
+                    }),
+                }}
+                variant="subtle"
+            />
+            <ActionIcon
+                disabled={isSavingQueue}
+                icon="download"
+                iconProps={{ size: 'lg' }}
+                loading={isFetching}
+                onClick={handleRestoreQueue}
+                tooltip={{
+                    label: t('player.restoreQueueFromServer', {
+                        postProcess: 'sentenceCase',
+                    }),
+                }}
+                variant="subtle"
+            />
+        </>
+    );
+};

src/renderer/features/now-playing/components/popover-play-queue.tsx

@@ -45,7 +45,6 @@ export const PopoverPlayQueue = () => {
                     <PlayQueueListControls
                         handleSearch={setSearch}
                         searchTerm={search}
-                        tableRef={queueRef}
                         type={ItemListKey.SIDE_QUEUE}
                     />
                     <PlayQueue

src/renderer/features/now-playing/components/sidebar-play-queue.tsx

@@ -29,7 +29,6 @@ export const SidebarPlayQueue = () => {
             <PlayQueueListControls
                 handleSearch={setSearch}
                 searchTerm={search}
-                tableRef={tableRef}
                 type={ItemListKey.SIDE_QUEUE}
             />
             <Flex direction="column" style={{ flex: 1, minHeight: 0 }}>

src/renderer/features/now-playing/routes/now-playing-route.tsx

@@ -1,6 +1,5 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, 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';
@@ -10,7 +9,6 @@ import { useAppStoreActions } from '/@/renderer/store';
 import { ItemListKey } from '/@/shared/types/types';
 
 const NowPlayingRoute = () => {
-    const queueRef = useRef<ItemListHandle | null>(null);
     const [search, setSearch] = useState<string | undefined>(undefined);
     const { setSideBar } = useAppStoreActions();
 
@@ -30,7 +28,6 @@ const NowPlayingRoute = () => {
             <PlayQueueListControls
                 handleSearch={setSearch}
                 searchTerm={search}
-                tableRef={queueRef}
                 type={ItemListKey.QUEUE_SONG}
             />
             <PlayQueue listKey={ItemListKey.QUEUE_SONG} searchTerm={search} />