diff --git a/ui/src/i18n/en.js b/ui/src/i18n/en.js index 62b092494..399541804 100644 --- a/ui/src/i18n/en.js +++ b/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', diff --git a/ui/src/i18n/pt.js b/ui/src/i18n/pt.js index 9ab93df70..af5b3faed 100644 --- a/ui/src/i18n/pt.js +++ b/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: { diff --git a/ui/src/song/SongContextMenu.js b/ui/src/song/SongContextMenu.js new file mode 100644 index 000000000..ee583f631 --- /dev/null +++ b/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 ( + <> + + + + + {Object.keys(options).map((key) => ( + + {options[key].label} + + ))} + + + ) +} diff --git a/ui/src/song/SongList.js b/ui/src/song/SongList.js index b7de7f6c2..24587881a 100644 --- a/ui/src/song/SongList.js +++ b/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) => ( @@ -48,16 +42,16 @@ const SongList = (props) => { > {isXsmall ? ( ( + primaryText={(r) => r.title} + secondaryText={(r) => r.artist} + tertiaryText={(r) => ( <> - - } /> - {r.title} + +     )} - secondaryText={(r) => r.artist} - tertiaryText={(r) => } linkType={(id, basePath, record) => dispatch(setTrack(record))} + rightIcon={(r) => } /> ) : ( { r.year || ''} /> )} + )}