From 81e1a7088fa87194636510c286a9a6cc947b5f86 Mon Sep 17 00:00:00 2001 From: Deluan Date: Fri, 7 Feb 2020 11:45:56 -0500 Subject: [PATCH] feat: new album view (initial implementation) --- ui/src/album/AlbumList.js | 16 ++--- ui/src/album/AlbumShow.js | 94 +++++++++++++++++++++++++++ ui/src/album/index.js | 2 + ui/src/{song => common}/PlayButton.js | 0 ui/src/common/index.js | 3 +- ui/src/song/AddToQueueButton.js | 20 +++--- ui/src/song/SongList.js | 2 +- 7 files changed, 115 insertions(+), 22 deletions(-) create mode 100644 ui/src/album/AlbumShow.js rename ui/src/{song => common}/PlayButton.js (100%) diff --git a/ui/src/album/AlbumList.js b/ui/src/album/AlbumList.js index 53d70d71e..434f68261 100644 --- a/ui/src/album/AlbumList.js +++ b/ui/src/album/AlbumList.js @@ -34,13 +34,13 @@ const AlbumDetails = (props) => { ) } -const albumRowClick = (id, basePath, record) => { - const filter = { album: record.name, album_id: id } - if (!record.compilation) { - filter.artist = record.artist - } - return `/song?filter=${JSON.stringify(filter)}&order=ASC&sort=trackNumber` -} +// const albumRowClick = (id, basePath, record) => { +// const filter = { album: record.name, album_id: id } +// if (!record.compilation) { +// filter.artist = record.artist +// } +// return `/song?filter=${JSON.stringify(filter)}&order=ASC&sort=trackNumber` +// } const AlbumList = (props) => ( ( perPage={15} pagination={} > - } rowClick={albumRowClick}> + } rowClick={'show'}> diff --git a/ui/src/album/AlbumShow.js b/ui/src/album/AlbumShow.js new file mode 100644 index 000000000..112f8b3a8 --- /dev/null +++ b/ui/src/album/AlbumShow.js @@ -0,0 +1,94 @@ +import React from 'react' +import { Show, SimpleList, useGetList, useGetOne, Loading } from 'react-admin' +import { PlayButton, Title } from '../common' +import { addTrack } from '../player' +import { DurationField } from '../common' +import AddIcon from '@material-ui/icons/Add' +import { Typography, Paper } from '@material-ui/core' +import { makeStyles } from '@material-ui/core/styles' + +const AlbumTitle = ({ record }) => { + return +} + +const useStyles = makeStyles({ + container: { minWidth: '35em', padding: '1em' }, + rightAlignedCell: { textAlign: 'right' }, + boldCell: { fontWeight: 'bold' } +}) + +const AlbumDetail = (props) => { + const classes = useStyles() + const { data, loading, error } = useGetOne('album', props.id) + + if (loading) { + return <Loading /> + } + + if (error) { + return <p>ERROR: {error}</p> + } + + let genreDate = [] + if (data.genre) { + genreDate.push(data.genre) + } + if (data.year) { + genreDate.push(data.year) + } + + return ( + <Paper className={classes.container} elevation={2}> + <Typography variant="h5">{data.name}</Typography> + <Typography variant="h6">{data.albumArtist || data.artist}</Typography> + <Typography variant="h7">{genreDate.join(' - ')}</Typography> + <Typography variant="body2"></Typography> + </Paper> + ) +} + +const AlbumSongs = (props) => { + const { record } = props + const { data, total, loading, error } = useGetList( + 'song', + { page: 0, perPage: 100 }, + { field: 'album', order: 'ASC' }, + { album_id: record.id } + ) + if (error) { + return <p>ERROR: {error}</p> + } + return ( + <SimpleList + data={data} + ids={Object.keys(data)} + loading={loading} + total={total} + primaryText={(r) => ( + <> + <PlayButton record={r} /> + <PlayButton record={r} action={addTrack} icon={<AddIcon />} /> + {r.trackNumber + '. ' + r.title} + </> + )} + secondaryText={(r) => + r.albumArtist && r.artist !== r.albumArtist ? r.artist : '' + } + tertiaryText={(r) => <DurationField record={r} source={'duration'} />} + linkType={false} + /> + ) +} + +const AlbumShow = (props) => { + return ( + <> + <AlbumDetail {...props} /> + <Show title={<AlbumTitle />} {...props}> + <AlbumSongs {...props} /> + </Show> + </> + ) +} + +export default AlbumShow diff --git a/ui/src/album/index.js b/ui/src/album/index.js index 17e55f56c..3a51b26c0 100644 --- a/ui/src/album/index.js +++ b/ui/src/album/index.js @@ -1,7 +1,9 @@ import AlbumIcon from '@material-ui/icons/Album' import AlbumList from './AlbumList' +import AlbumShow from './AlbumShow' export default { list: AlbumList, + show: AlbumShow, icon: AlbumIcon } diff --git a/ui/src/song/PlayButton.js b/ui/src/common/PlayButton.js similarity index 100% rename from ui/src/song/PlayButton.js rename to ui/src/common/PlayButton.js diff --git a/ui/src/common/index.js b/ui/src/common/index.js index 8913b4ab7..b99e3b5a2 100644 --- a/ui/src/common/index.js +++ b/ui/src/common/index.js @@ -2,5 +2,6 @@ import Title from './Title' import DurationField from './DurationField' import BitrateField from './BitrateField' import Pagination from './Pagination' +import PlayButton from './PlayButton' -export { Title, DurationField, BitrateField, Pagination } +export { Title, DurationField, BitrateField, Pagination, PlayButton } diff --git a/ui/src/song/AddToQueueButton.js b/ui/src/song/AddToQueueButton.js index f4aaccbd5..6574b75e9 100644 --- a/ui/src/song/AddToQueueButton.js +++ b/ui/src/song/AddToQueueButton.js @@ -26,18 +26,14 @@ const AddToQueueButton = ({ selectedIds }) => { } return ( - <Button - color="secondary" - label={ - <Tooltip - title={translate('resources.song.bulk.addToQueue')} - placement="right" - > - <AddToQueueIcon /> - </Tooltip> - } - onClick={addToQueue} - /> + <Button color="secondary" onClick={addToQueue}> + <Tooltip + title={translate('resources.song.bulk.addToQueue')} + placement="right" + > + <AddToQueueIcon /> + </Tooltip> + </Button> ) } diff --git a/ui/src/song/SongList.js b/ui/src/song/SongList.js index e31953439..5be2cd1f1 100644 --- a/ui/src/song/SongList.js +++ b/ui/src/song/SongList.js @@ -16,7 +16,7 @@ import { import { useMediaQuery } from '@material-ui/core' import { BitrateField, DurationField, Pagination, Title } from '../common' import AddToQueueButton from './AddToQueueButton' -import PlayButton from './PlayButton' +import { PlayButton } from '../common' import { useDispatch } from 'react-redux' import { setTrack, addTrack } from '../player' import AddIcon from '@material-ui/icons/Add'