Add SongContextMenu

ui/src/i18n/en.js

@@ -15,6 +15,10 @@ export default deepmerge(englishMessages, {
       bulk: {
         addToQueue: 'Play Later',
       },
+      actions: {
+        playNow: 'Play Now',
+        addToQueue: 'Play Later',
+      },
     },
     album: {
       name: 'Album |||| Albums',
@@ -26,7 +30,7 @@ export default deepmerge(englishMessages, {
         playCount: 'Plays',
       },
       actions: {
-        playAll: 'Play',
+        playAll: 'Play Now',
         playNext: 'Play Next',
         addToQueue: 'Play Later',
         shuffle: 'Shuffle',

ui/src/i18n/pt.js

@@ -21,7 +21,11 @@ export default deepmerge(portugueseMessages, {
         updatedAt: 'Últ. Atualização',
       },
       bulk: {
-        addToQueue: 'Play Later',
+        addToQueue: 'Tocar no fim',
+      },
+      actions: {
+        playNow: 'Tocar agora',
+        addToQueue: 'Tocar no fim',
       },
     },
     album: {
@@ -37,10 +41,10 @@ export default deepmerge(portugueseMessages, {
         year: 'Ano',
       },
       actions: {
-        playAll: 'Play',
-        playNext: 'Play Next',
-        addToQueue: 'Play Later',
-        shuffle: 'Shuffle',
+        playAll: 'Tocar',
+        playNext: 'Tocar em seguida',
+        addToQueue: 'Tocar no fim',
+        shuffle: 'Aleatório',
       },
     },
     artist: {

ui/src/song/SongContextMenu.js

@@ -0,0 +1,60 @@
+import React, { useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { useTranslate } from 'react-admin'
+import { IconButton, Menu, MenuItem } from '@material-ui/core'
+import MoreVertIcon from '@material-ui/icons/MoreVert'
+import { addTrack, setTrack } from '../audioplayer'
+
+export const SongContextMenu = ({ record }) => {
+  const dispatch = useDispatch()
+  const translate = useTranslate()
+  const [anchorEl, setAnchorEl] = useState(null)
+  const options = {
+    playNow: {
+      label: translate('resources.song.actions.playNow'),
+      action: (record) => setTrack(record),
+    },
+    addToQueue: {
+      label: translate('resources.song.actions.addToQueue'),
+      action: (record) => addTrack(record),
+    },
+  }
+
+  const handleClick = (e) => {
+    setAnchorEl(e.currentTarget)
+    e.stopPropagation()
+  }
+
+  const handleClose = (e) => {
+    setAnchorEl(null)
+    e.stopPropagation()
+  }
+
+  const handleItemClick = (e) => {
+    e.preventDefault()
+    setAnchorEl(null)
+    const key = e.target.getAttribute('value')
+    dispatch(options[key].action(record))
+    e.stopPropagation()
+  }
+
+  return (
+    <>
+      <IconButton onClick={handleClick}>
+        <MoreVertIcon />
+      </IconButton>
+      <Menu
+        id={'menu' + record.id}
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        {Object.keys(options).map((key) => (
+          <MenuItem value={key} key={key} onClick={handleItemClick}>
+            {options[key].label}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  )
+}

ui/src/song/SongList.js

@@ -9,19 +9,13 @@ import {
   TextField,
 } from 'react-admin'
 import { useMediaQuery } from '@material-ui/core'
-import {
-  DurationField,
-  Pagination,
-  PlayButton,
-  SimpleList,
-  Title,
-} from '../common'
+import { DurationField, Pagination, SimpleList, Title } from '../common'
 import { useDispatch } from 'react-redux'
-import { addTrack, setTrack } from '../audioplayer'
-import AddIcon from '@material-ui/icons/Add'
+import { setTrack } from '../audioplayer'
 import { SongBulkActions } from './SongBulkActions'
 import { AlbumLinkField } from './AlbumLinkField'
 import { SongDetails } from '../common'
+import { SongContextMenu } from './SongContextMenu'
 
 const SongFilter = (props) => (
   <Filter {...props}>
@@ -48,16 +42,16 @@ const SongList = (props) => {
     >
       {isXsmall ? (
         <SimpleList
-          primaryText={(r) => (
+          primaryText={(r) => r.title}
+          secondaryText={(r) => r.artist}
+          tertiaryText={(r) => (
             <>
-              <PlayButton action={setTrack(r)} />
-              <PlayButton action={addTrack(r)} icon={<AddIcon />} />
-              {r.title}
+              <DurationField record={r} source={'duration'} />
+              &nbsp;&nbsp;&nbsp;
             </>
           )}
-          secondaryText={(r) => r.artist}
-          tertiaryText={(r) => <DurationField record={r} source={'duration'} />}
           linkType={(id, basePath, record) => dispatch(setTrack(record))}
+          rightIcon={(r) => <SongContextMenu record={r} />}
         />
       ) : (
         <Datagrid
@@ -73,6 +67,7 @@ const SongList = (props) => {
             <FunctionField source="year" render={(r) => r.year || ''} />
           )}
           <DurationField source="duration" />
+          <SongContextMenu />
         </Datagrid>
       )}
     </List>