feat(ui) add Save Queue to Playlist (#4110)

* ui: add save queue to playlist * fix(ui): improve toolbar layout Signed-off-by: Deluan <deluan@navidrome.org> * fix(ui): add loading state to save queue dialog Signed-off-by: Deluan <deluan@navidrome.org> * fix(ui): refresh playlist after saving queue Signed-off-by: Deluan <deluan@navidrome.org> * fix lint Signed-off-by: Deluan <deluan@navidrome.org> * remove duplication in PlayerToolbar and add tests Signed-off-by: Deluan <deluan@navidrome.org> * fix(i18n): update save queue text for clarity in English and Portuguese Signed-off-by: Deluan <deluan@navidrome.org> --------- Signed-off-by: Deluan <deluan@navidrome.org>
2025-05-23 22:04:18 -04:00
parent 370f8ba293
commit 514aceb785
12 changed files with 510 additions and 11 deletions
@@ -1,32 +1,120 @@
 import React, { useCallback } from 'react'
+import { useDispatch } from 'react-redux'
 import { useGetOne } from 'react-admin'
 import { GlobalHotKeys } from 'react-hotkeys'
+import IconButton from '@material-ui/core/IconButton'
+import { useMediaQuery } from '@material-ui/core'
+import { RiSaveLine } from 'react-icons/ri'
 import { LoveButton, useToggleLove } from '../common'
+import { openSaveQueueDialog } from '../actions'
 import { keyMap } from '../hotkeys'
+import { makeStyles } from '@material-ui/core/styles'

-const Placeholder = () => <LoveButton disabled={true} resource={'song'} />
+const useStyles = makeStyles((theme) => ({
+  toolbar: {
+    display: 'flex',
+    alignItems: 'center',
+    flexGrow: 1,
+    justifyContent: 'flex-end',
+    gap: '0.5rem',
+    listStyle: 'none',
+    padding: 0,
+    margin: 0,
+  },
+  mobileListItem: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    listStyle: 'none',
+    padding: theme.spacing(0.5),
+    margin: 0,
+    height: 24,
+  },
+  button: {
+    width: '2.5rem',
+    height: '2.5rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 0,
+  },
+  mobileButton: {
+    width: 24,
+    height: 24,
+    padding: 0,
+    margin: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '18px',
+  },
+  mobileIcon: {
+    fontSize: '18px',
+    display: 'flex',
+    alignItems: 'center',
+  },
+}))

-const Toolbar = ({ id }) => {
+const PlayerToolbar = ({ id, isRadio }) => {
+  const dispatch = useDispatch()
  const { data, loading } = useGetOne('song', id)
  const [toggleLove, toggling] = useToggleLove('song', data)
+  const isDesktop = useMediaQuery('(min-width:810px)')
+  const classes = useStyles()

  const handlers = {
    TOGGLE_LOVE: useCallback(() => toggleLove(), [toggleLove]),
  }

+  const handleSaveQueue = useCallback(
+    (e) => {
+      dispatch(openSaveQueueDialog())
+      e.stopPropagation()
+    },
+    [dispatch],
+  )
+
+  const buttonClass = isDesktop ? classes.button : classes.mobileButton
+  const listItemClass = isDesktop ? classes.toolbar : classes.mobileListItem
+
+  const saveQueueButton = (
+    <IconButton
+      size={isDesktop ? 'small' : undefined}
+      onClick={handleSaveQueue}
+      disabled={isRadio}
+      data-testid="save-queue-button"
+      className={buttonClass}
+    >
+      <RiSaveLine className={!isDesktop ? classes.mobileIcon : undefined} />
+    </IconButton>
+  )
+
+  const loveButton = (
+    <LoveButton
+      record={data}
+      resource={'song'}
+      size={isDesktop ? undefined : 'inherit'}
+      disabled={loading || toggling || !id || isRadio}
+      className={buttonClass}
+    />
+  )
+
  return (
    <>
      <GlobalHotKeys keyMap={keyMap} handlers={handlers} allowChanges />
-      <LoveButton
-        record={data}
-        resource={'song'}
-        disabled={loading || toggling}
-      />
+      {isDesktop ? (
+        <li className={`${listItemClass} item`}>
+          {saveQueueButton}
+          {loveButton}
+        </li>
+      ) : (
+        <>
+          <li className={`${listItemClass} item`}>{saveQueueButton}</li>
+          <li className={`${listItemClass} item`}>{loveButton}</li>
+        </>
+      )}
    </>
  )
 }

-const PlayerToolbar = ({ id, isRadio }) =>
-  id && !isRadio ? <Toolbar id={id} /> : <Placeholder />
-
 export default PlayerToolbar
@@ -0,0 +1,166 @@
+import React from 'react'
+import { render, screen, fireEvent, cleanup } from '@testing-library/react'
+import { useMediaQuery } from '@material-ui/core'
+import { useGetOne } from 'react-admin'
+import { useDispatch } from 'react-redux'
+import { useToggleLove } from '../common'
+import { openSaveQueueDialog } from '../actions'
+import PlayerToolbar from './PlayerToolbar'
+
+// Mock dependencies
+vi.mock('@material-ui/core', async () => {
+  const actual = await import('@material-ui/core')
+  return {
+    ...actual,
+    useMediaQuery: vi.fn(),
+  }
+})
+
+vi.mock('react-admin', () => ({
+  useGetOne: vi.fn(),
+}))
+
+vi.mock('react-redux', () => ({
+  useDispatch: vi.fn(),
+}))
+
+vi.mock('../common', () => ({
+  LoveButton: ({ className, disabled }) => (
+    <button data-testid="love-button" className={className} disabled={disabled}>
+      Love
+    </button>
+  ),
+  useToggleLove: vi.fn(),
+}))
+
+vi.mock('../actions', () => ({
+  openSaveQueueDialog: vi.fn(),
+}))
+
+vi.mock('react-hotkeys', () => ({
+  GlobalHotKeys: () => <div data-testid="global-hotkeys" />,
+}))
+
+describe('<PlayerToolbar />', () => {
+  const mockToggleLove = vi.fn()
+  const mockDispatch = vi.fn()
+  const mockSongData = { id: 'song-1', name: 'Test Song', starred: false }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    useGetOne.mockReturnValue({ data: mockSongData, loading: false })
+    useToggleLove.mockReturnValue([mockToggleLove, false])
+    useDispatch.mockReturnValue(mockDispatch)
+    openSaveQueueDialog.mockReturnValue({ type: 'OPEN_SAVE_QUEUE_DIALOG' })
+  })
+
+  afterEach(cleanup)
+
+  describe('Desktop layout', () => {
+    beforeEach(() => {
+      useMediaQuery.mockReturnValue(true) // isDesktop = true
+    })
+
+    it('renders desktop toolbar with both buttons', () => {
+      render(<PlayerToolbar id="song-1" />)
+
+      // Both buttons should be in a single list item
+      const listItems = screen.getAllByRole('listitem')
+      expect(listItems).toHaveLength(1)
+
+      // Verify both buttons are rendered
+      expect(screen.getByTestId('save-queue-button')).toBeInTheDocument()
+      expect(screen.getByTestId('love-button')).toBeInTheDocument()
+
+      // Verify desktop classes are applied
+      expect(listItems[0].className).toContain('toolbar')
+    })
+
+    it('disables save queue button when isRadio is true', () => {
+      render(<PlayerToolbar id="song-1" isRadio={true} />)
+
+      const saveQueueButton = screen.getByTestId('save-queue-button')
+      expect(saveQueueButton).toBeDisabled()
+    })
+
+    it('disables love button when conditions are met', () => {
+      useGetOne.mockReturnValue({ data: mockSongData, loading: true })
+
+      render(<PlayerToolbar id="song-1" />)
+
+      const loveButton = screen.getByTestId('love-button')
+      expect(loveButton).toBeDisabled()
+    })
+
+    it('opens save queue dialog when save button is clicked', () => {
+      render(<PlayerToolbar id="song-1" />)
+
+      const saveQueueButton = screen.getByTestId('save-queue-button')
+      fireEvent.click(saveQueueButton)
+
+      expect(mockDispatch).toHaveBeenCalledWith({
+        type: 'OPEN_SAVE_QUEUE_DIALOG',
+      })
+    })
+  })
+
+  describe('Mobile layout', () => {
+    beforeEach(() => {
+      useMediaQuery.mockReturnValue(false) // isDesktop = false
+    })
+
+    it('renders mobile toolbar with buttons in separate list items', () => {
+      render(<PlayerToolbar id="song-1" />)
+
+      // Each button should be in its own list item
+      const listItems = screen.getAllByRole('listitem')
+      expect(listItems).toHaveLength(2)
+
+      // Verify both buttons are rendered
+      expect(screen.getByTestId('save-queue-button')).toBeInTheDocument()
+      expect(screen.getByTestId('love-button')).toBeInTheDocument()
+
+      // Verify mobile classes are applied
+      expect(listItems[0].className).toContain('mobileListItem')
+      expect(listItems[1].className).toContain('mobileListItem')
+    })
+
+    it('disables save queue button when isRadio is true', () => {
+      render(<PlayerToolbar id="song-1" isRadio={true} />)
+
+      const saveQueueButton = screen.getByTestId('save-queue-button')
+      expect(saveQueueButton).toBeDisabled()
+    })
+
+    it('disables love button when conditions are met', () => {
+      useGetOne.mockReturnValue({ data: mockSongData, loading: true })
+
+      render(<PlayerToolbar id="song-1" />)
+
+      const loveButton = screen.getByTestId('love-button')
+      expect(loveButton).toBeDisabled()
+    })
+  })
+
+  describe('Common behavior', () => {
+    it('renders global hotkeys in both layouts', () => {
+      // Test desktop layout
+      useMediaQuery.mockReturnValue(true)
+      render(<PlayerToolbar id="song-1" />)
+      expect(screen.getByTestId('global-hotkeys')).toBeInTheDocument()
+
+      // Cleanup and test mobile layout
+      cleanup()
+      useMediaQuery.mockReturnValue(false)
+      render(<PlayerToolbar id="song-1" />)
+      expect(screen.getByTestId('global-hotkeys')).toBeInTheDocument()
+    })
+
+    it('disables buttons when id is not provided', () => {
+      render(<PlayerToolbar />)
+
+      const loveButton = screen.getByTestId('love-button')
+      expect(loveButton).toBeDisabled()
+    })
+  })
+})