Show Playlist tracks

ui/src/album/AlbumActions.js

@@ -10,7 +10,7 @@ import React from 'react'
 import { useDispatch } from 'react-redux'
 import { playAlbum, shuffleAlbum } from '../audioplayer'
 
-export const AlbumActions = ({
+const AlbumActions = ({
   className,
   ids,
   data,
@@ -47,3 +47,5 @@ AlbumActions.defaultProps = {
   selectedIds: [],
   onUnselectItems: () => null,
 }
+
+export default AlbumActions

ui/src/album/AlbumShow.js

@@ -3,8 +3,8 @@ import { useGetOne } from 'react-admin'
 import AlbumDetails from './AlbumDetails'
 import { Title } from '../common'
 import { useStyles } from './styles'
-import { AlbumActions } from './AlbumActions'
 import { AlbumSongBulkActions } from './AlbumSongBulkActions'
+import AlbumActions from './AlbumActions'
 import AlbumSongs from './AlbumSongs'
 
 const AlbumShow = (props) => {

ui/src/album/AlbumSongs.js

@@ -2,28 +2,19 @@ import React from 'react'
 import {
   BulkActionsToolbar,
   Datagrid,
+  DatagridBody,
+  DatagridLoading,
   FunctionField,
   ListToolbar,
   TextField,
   useListController,
-  useTranslate,
-  DatagridLoading,
-  DatagridBody,
-  DatagridRow,
 } from 'react-admin'
 import classnames from 'classnames'
 import { useDispatch } from 'react-redux'
-import {
+import { Card, useMediaQuery } from '@material-ui/core'
-  Card,
-  useMediaQuery,
-  TableRow,
-  TableCell,
-  Typography,
-} from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 import { playAlbum } from '../audioplayer'
-import { DurationField } from '../common'
+import { DurationField, SongDetails, SongDatagridRow } from '../common'
-import { SongDetails } from '../common'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -72,7 +63,6 @@ const trackName = (r) => {
 const AlbumSongs = (props) => {
   const classes = useStyles(props)
   const classesToolbar = useStylesListToolbar(props)
-  const translate = useTranslate()
   const dispatch = useDispatch()
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
@@ -93,35 +83,8 @@ const AlbumSongs = (props) => {
   const showPlaceholder = !anySong || anySong.albumId !== albumId
   const hasBulkActions = props.bulkActionButtons !== false
 
-  const SongDatagridRow = (props) => {
-    const { record, children } = props
-    return (
-      <>
-        {multiDisc && (
-          <TableRow>
-            {record.trackNumber === 1 && (
-              <TableCell colSpan={children.length + 1}>
-                <Typography variant="h6">
-                  {record.discSubtitle
-                    ? translate('message.discSubtitle', {
-                        subtitle: record.discSubtitle,
-                        number: record.discNumber,
-                      })
-                    : translate('message.discWithoutSubtitle', {
-                        number: record.discNumber,
-                      })}
-                </Typography>
-              </TableCell>
-            )}
-          </TableRow>
-        )}
-        <DatagridRow {...props} />
-      </>
-    )
-  }
-
   const SongsDatagridBody = (props) => (
-    <DatagridBody {...props} row={<SongDatagridRow />} />
+    <DatagridBody {...props} row={<SongDatagridRow multiDisc={multiDisc} />} />
   )
   const SongsDatagrid = (props) => (
     <Datagrid {...props} body={<SongsDatagridBody />} />
@@ -164,7 +127,6 @@ const AlbumSongs = (props) => {
               rowClick={(id) => dispatch(playAlbum(data, ids, id))}
               {...controllerProps}
               hasBulkActions={hasBulkActions}
-              multiDisc={multiDisc}
             >
               {isDesktop && (
                 <TextField

ui/src/common/SongDatagridRow.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import { DatagridRow, useTranslate } from 'react-admin'
+import { TableRow, TableCell, Typography } from '@material-ui/core'
+import PropTypes from 'prop-types'
+import RangeField from './RangeField'
+
+const SongDatagridRow = ({ record, children, multiDisc, ...rest }) => {
+  const translate = useTranslate()
+  return (
+    <>
+      {multiDisc && (
+        <TableRow>
+          {record.trackNumber === 1 && (
+            <TableCell colSpan={children.length + 1}>
+              <Typography variant="h6">
+                {record.discSubtitle
+                  ? translate('message.discSubtitle', {
+                      subtitle: record.discSubtitle,
+                      number: record.discNumber,
+                    })
+                  : translate('message.discWithoutSubtitle', {
+                      number: record.discNumber,
+                    })}
+              </Typography>
+            </TableCell>
+          )}
+        </TableRow>
+      )}
+      <DatagridRow record={record} {...rest}>
+        {children}
+      </DatagridRow>
+    </>
+  )
+}
+
+RangeField.propTypes = {
+  record: PropTypes.object,
+  children: PropTypes.node,
+  multiDisc: PropTypes.bool,
+}
+
+export default SongDatagridRow

ui/src/common/index.js

@@ -10,6 +10,7 @@ import SongDetails from './SongDetails'
 import SizeField from './SizeField'
 import DocLink from './DocLink'
 import List from './List'
+import SongDatagridRow from './SongDatagridRow'
 
 export {
   Title,
@@ -22,6 +23,7 @@ export {
   SimpleList,
   RangeField,
   SongDetails,
+  SongDatagridRow,
   DocLink,
   formatRange,
   ArtistLinkField,

ui/src/playlist/PlaylistDetails.js

@@ -0,0 +1,59 @@
+import React from 'react'
+import { Card, CardContent, Typography } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import { useTranslate } from 'react-admin'
+import { DurationField } from '../common'
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    [theme.breakpoints.down('xs')]: {
+      padding: '0.7em',
+      minWidth: '24em',
+    },
+    [theme.breakpoints.up('sm')]: {
+      padding: '1em',
+      minWidth: '32em',
+    },
+  },
+  details: {
+    display: 'inline-block',
+    verticalAlign: 'top',
+    [theme.breakpoints.down('xs')]: {
+      width: '14em',
+    },
+    [theme.breakpoints.up('sm')]: {
+      width: '26em',
+    },
+    [theme.breakpoints.up('lg')]: {
+      width: '38em',
+    },
+  },
+  title: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+}))
+
+const PlaylistDetails = ({ record }) => {
+  const translate = useTranslate()
+  const classes = useStyles()
+
+  return (
+    <Card className={classes.container}>
+      <CardContent className={classes.details}>
+        <Typography variant="h5" className={classes.title}>
+          {record.name}
+        </Typography>
+        <Typography component="h6">{record.comment}</Typography>
+        <Typography component="p">
+          {record.songCount}{' '}
+          {translate('resources.song.name', { smart_count: record.songCount })}{' '}
+          · <DurationField record={record} source={'duration'} />
+        </Typography>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default PlaylistDetails

ui/src/playlist/PlaylistList.js

@@ -10,7 +10,7 @@ import { DurationField, List } from '../common'
 
 const PlaylistList = (props) => (
   <List {...props} exporter={false}>
-    <Datagrid rowClick="edit">
+    <Datagrid rowClick="show">
       <TextField source="name" />
       <TextField source="owner" />
       <BooleanField source="public" />

ui/src/playlist/PlaylistShow.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import { useGetOne } from 'react-admin'
+import PlaylistDetails from './PlaylistDetails'
+import { Title } from '../common'
+import PlaylistSongs from './PlaylistSongs'
+
+const PlaylistShow = (props) => {
+  const { data: record, loading, error } = useGetOne('playlist', props.id)
+
+  if (loading) {
+    return null
+  }
+
+  if (error) {
+    return <p>ERROR: {error}</p>
+  }
+
+  return (
+    <>
+      <PlaylistDetails {...props} record={record} />
+      <PlaylistSongs
+        {...props}
+        playlistId={props.id}
+        title={<Title subTitle={record.name} />}
+        // actions={<AlbumActions />}
+        filter={{ playlist_id: props.id }}
+        resource={'playlistTrack'}
+        exporter={false}
+        perPage={-1}
+        pagination={null}
+        bulkActionButtons={false}
+        // bulkActionButtons={<AlbumSongBulkActions />}
+      />
+    </>
+  )
+}
+
+export default PlaylistShow

ui/src/playlist/PlaylistSongs.js

@@ -0,0 +1,113 @@
+import React from 'react'
+import {
+  BulkActionsToolbar,
+  Datagrid,
+  DatagridLoading,
+  ListToolbar,
+  TextField,
+  useListController,
+} from 'react-admin'
+import classnames from 'classnames'
+import { Card, useMediaQuery } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import { DurationField, SongDetails } from '../common'
+
+const useStyles = makeStyles(
+  (theme) => ({
+    root: {},
+    main: {
+      display: 'flex',
+    },
+    content: {
+      marginTop: 0,
+      transition: theme.transitions.create('margin-top'),
+      position: 'relative',
+      flex: '1 1 auto',
+      [theme.breakpoints.down('xs')]: {
+        boxShadow: 'none',
+      },
+    },
+    bulkActionsDisplayed: {
+      marginTop: -theme.spacing(8),
+      transition: theme.transitions.create('margin-top'),
+    },
+    actions: {
+      zIndex: 2,
+      display: 'flex',
+      justifyContent: 'flex-end',
+      flexWrap: 'wrap',
+    },
+    noResults: { padding: 20 },
+  }),
+  { name: 'RaList' }
+)
+
+const useStylesListToolbar = makeStyles({
+  toolbar: {
+    justifyContent: 'flex-start',
+  },
+})
+
+const PlaylistSongs = (props) => {
+  const classes = useStyles(props)
+  const classesToolbar = useStylesListToolbar(props)
+  const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
+  // const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
+  const controllerProps = useListController(props)
+  const { bulkActionButtons, expand, className } = props
+  const { data, ids, version } = controllerProps
+
+  const anySong = data[ids[0]]
+  const showPlaceholder = !anySong
+  const hasBulkActions = props.bulkActionButtons !== false
+
+  return (
+    <>
+      <ListToolbar
+        classes={classesToolbar}
+        filters={props.filters}
+        {...controllerProps}
+        actions={props.actions}
+        permanentFilter={props.filter}
+      />
+      <div className={classes.main}>
+        <Card
+          className={classnames(classes.content, {
+            [classes.bulkActionsDisplayed]:
+              controllerProps.selectedIds.length > 0,
+          })}
+          key={version}
+        >
+          {bulkActionButtons !== false && bulkActionButtons && (
+            <BulkActionsToolbar {...controllerProps}>
+              {bulkActionButtons}
+            </BulkActionsToolbar>
+          )}
+          {showPlaceholder ? (
+            <DatagridLoading
+              classes={classes}
+              className={className}
+              expand={expand}
+              hasBulkActions={hasBulkActions}
+              nbChildren={3}
+              size={'small'}
+            />
+          ) : (
+            <Datagrid
+              expand={!isXsmall && <SongDetails />}
+              rowClick={null}
+              {...controllerProps}
+              hasBulkActions={hasBulkActions}
+            >
+              <TextField source="title" sortable={false} />
+              <TextField source="artist" sortable={false} />
+              <DurationField source="duration" sortable={false} />
+            </Datagrid>
+          )}
+        </Card>
+      </div>
+    </>
+  )
+}
+
+export default PlaylistSongs

ui/src/playlist/index.js

@@ -2,10 +2,12 @@ import PlaylistIcon from '../icons/Playlist'
 import PlaylistList from './PlaylistList'
 import PlaylistEdit from './PlaylistEdit'
 import PlaylistCreate from './PlaylistCreate'
+import PlaylistShow from './PlaylistShow'
 
 export default {
   icon: PlaylistIcon,
   list: PlaylistList,
   create: PlaylistCreate,
   edit: PlaylistEdit,
+  show: PlaylistShow,
 }

ui/src/playlist/styles.js

@@ -0,0 +1,47 @@
+import { makeStyles } from '@material-ui/core/styles'
+
+export const useStyles = makeStyles((theme) => ({
+  container: {
+    [theme.breakpoints.down('xs')]: {
+      padding: '0.7em',
+      minWidth: '24em',
+    },
+    [theme.breakpoints.up('sm')]: {
+      padding: '1em',
+      minWidth: '32em',
+    },
+  },
+  albumCover: {
+    display: 'inline-block',
+    [theme.breakpoints.down('xs')]: {
+      height: '8em',
+      width: '8em',
+    },
+    [theme.breakpoints.up('sm')]: {
+      height: '10em',
+      width: '10em',
+    },
+    [theme.breakpoints.up('lg')]: {
+      height: '15em',
+      width: '15em',
+    },
+  },
+  albumDetails: {
+    display: 'inline-block',
+    verticalAlign: 'top',
+    [theme.breakpoints.down('xs')]: {
+      width: '14em',
+    },
+    [theme.breakpoints.up('sm')]: {
+      width: '26em',
+    },
+    [theme.breakpoints.up('lg')]: {
+      width: '38em',
+    },
+  },
+  albumTitle: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+}))