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