Fix playlists

ui/src/album/AlbumSongs.js

@@ -72,17 +72,16 @@ const useStyles = makeStyles(
 
 const AlbumSongs = (props) => {
   const classes = useStyles(props)
+  const { data, ids } = props
   const dispatch = useDispatch()
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
-  const { id: album_id, data, ids } = props
   const version = useVersion()
   return (
     <>
       <ListToolbar
         classes={{ toolbar: classes.toolbar }}
         actions={props.actions}
-        permanentFilter={{ album_id }}
         {...props}
       />
       <div className={classes.main}>

ui/src/dataProvider/wrapperDataProvider.js

@@ -14,7 +14,6 @@ const mapResource = (resource, params) => {
       let plsId = '0'
       if (params.filter) {
         plsId = params.filter.playlist_id
-        delete params.filter.playlist_id
       }
       return [`playlist/${plsId}/tracks`, params]
 

ui/src/playlist/PlaylistShow.js

@@ -1,43 +1,54 @@
 import React from 'react'
-import { useSelector } from 'react-redux'
+import {
-import { useGetOne } from 'react-admin'
+  ReferenceManyField,
+  ShowContextProvider,
+  useShowContext,
+  useShowController,
+} from 'react-admin'
 import PlaylistDetails from './PlaylistDetails'
-import { Title } from '../common'
 import PlaylistSongs from './PlaylistSongs'
 import PlaylistActions from './PlaylistActions'
-import PlaylistSongBulkActions from './PlaylistSongBulkActions'
+import { Title, isReadOnly } from '../common'
-import { isReadOnly } from '../common/Writable'
-
-const PlaylistShow = (props) => {
-  const viewVersion = useSelector((s) => s.admin.ui && s.admin.ui.viewVersion)
-  const { data: record, error } = useGetOne('playlist', props.id, {
-    v: viewVersion,
-  })
-
-  if (error) {
-    return <p>ERROR: {error}</p>
-  }
 
+const PlaylistShowLayout = (props) => {
+  const { loading, ...context } = useShowContext(props)
+  const { record } = context
   return (
     <>
-      <PlaylistDetails {...props} record={record} />
+      {record && <PlaylistDetails {...context} />}
+      {record && (
+        <ReferenceManyField
+          {...context}
+          addLabel={false}
+          reference="playlistTrack"
+          target="playlist_id"
+          sort={{ field: 'id', order: 'ASC' }}
+          perPage={0}
+          filter={{ playlist_id: props.id }}
+        >
           <PlaylistSongs
             {...props}
-        playlistId={props.id}
+            readOnly={isReadOnly(record.owner)}
-        readOnly={isReadOnly(record && record.owner)}
+            title={<Title subTitle={record.name} />}
-        title={<Title subTitle={record && record.name} />}
             actions={<PlaylistActions record={record} />}
-        filter={{ playlist_id: props.id }}
             resource={'playlistTrack'}
             exporter={false}
             perPage={0}
             pagination={null}
-        bulkActionButtons={
-          <PlaylistSongBulkActions playlistId={props.id} record={record} />
-        }
           />
+        </ReferenceManyField>
+      )}
     </>
   )
 }
 
+const PlaylistShow = (props) => {
+  const controllerProps = useShowController(props)
+  return (
+    <ShowContextProvider value={controllerProps}>
+      <PlaylistShowLayout {...props} {...controllerProps} />
+    </ShowContextProvider>
+  )
+}
+
 export default PlaylistShow

ui/src/playlist/PlaylistSongBulkActions.js

@@ -1,17 +1,26 @@
 import React, { Fragment, useEffect } from 'react'
-import { BulkDeleteButton, useUnselectAll } from 'react-admin'
+import {
+  BulkDeleteButton,
+  useUnselectAll,
+  ResourceContextProvider,
+} from 'react-admin'
 import PropTypes from 'prop-types'
 
-const PlaylistSongBulkActions = ({ playlistId, ...rest }) => {
+// Replace original resource with "fake" one for removing tracks from playlist
+const PlaylistSongBulkActions = ({ playlistId, resource, ...rest }) => {
   const unselectAll = useUnselectAll()
   useEffect(() => {
     unselectAll('playlistTrack')
     // eslint-disable-next-line
   }, [])
+
+  const mappedResource = `playlist/${playlistId}/tracks`
   return (
+    <ResourceContextProvider value={mappedResource}>
       <Fragment>
-      <BulkDeleteButton {...rest} resource={`playlist/${playlistId}/tracks`} />
+        <BulkDeleteButton {...rest} resource={mappedResource} />
       </Fragment>
+    </ResourceContextProvider>
   )
 }
 

ui/src/playlist/PlaylistSongs.js

@@ -1,13 +1,13 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import {
   BulkActionsToolbar,
-  DatagridLoading,
   ListToolbar,
   TextField,
-  useListController,
   useRefresh,
   useDataProvider,
   useNotify,
+  useVersion,
+  useListContext,
 } from 'react-admin'
 import classnames from 'classnames'
 import { useDispatch } from 'react-redux'
@@ -24,6 +24,7 @@ import {
 import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
 import { AlbumLinkField } from '../song/AlbumLinkField'
 import { playTracks } from '../actions'
+import PlaylistSongBulkActions from './PlaylistSongBulkActions'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -51,15 +52,22 @@ const useStyles = makeStyles(
       flexWrap: 'wrap',
     },
     noResults: { padding: 20 },
-  }),
-  { name: 'RaList' }
-)
-
-const useStylesListToolbar = makeStyles({
     toolbar: {
       justifyContent: 'flex-start',
     },
-})
+    row: {
+      '&:hover': {
+        '& $contextMenu': {
+          visibility: 'visible',
+        },
+      },
+    },
+    contextMenu: {
+      visibility: 'hidden',
+    },
+  }),
+  { name: 'RaList' }
+)
 
 const ReorderableList = ({ readOnly, children, ...rest }) => {
   if (readOnly) {
@@ -68,28 +76,28 @@ const ReorderableList = ({ readOnly, children, ...rest }) => {
   return <ReactDragListView {...rest}>{children}</ReactDragListView>
 }
 
-const PlaylistSongs = (props) => {
+const PlaylistSongs = ({ playlistId, readOnly, ...props }) => {
+  const { data, ids } = props
   const classes = useStyles(props)
-  const classesToolbar = useStylesListToolbar(props)
   const dispatch = useDispatch()
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
-  const controllerProps = useListController(props)
   const dataProvider = useDataProvider()
   const refresh = useRefresh()
   const notify = useNotify()
-  const { bulkActionButtons, expand, className, playlistId, readOnly } = props
+  const version = useVersion()
-  const { data, ids, version, total } = controllerProps
 
-  if (total === 0) {
+  const onAddToPlaylist = useCallback(
-    return null
+    (pls) => {
+      if (pls.id === playlistId) {
+        refresh()
       }
+    },
+    [playlistId, refresh]
+  )
 
-  const anySong = data[ids[0]]
+  const reorder = useCallback(
-  const showPlaceholder = !anySong || anySong.playlistId !== playlistId
+    (playlistId, id, newPos) => {
-  const hasBulkActions = props.bulkActionButtons !== false
-
-  const reorder = (playlistId, id, newPos) => {
       dataProvider
         .update('playlistTrack', {
           id,
@@ -102,52 +110,37 @@ const PlaylistSongs = (props) => {
         .catch(() => {
           notify('ra.page.error', 'warning')
         })
-  }
+    },
+    [dataProvider, notify, refresh]
+  )
 
-  const onAddToPlaylist = (pls) => {
+  const handleDragEnd = useCallback(
-    if (pls.id === props.id) {
+    (from, to) => {
-      refresh()
-    }
-  }
-
-  const handleDragEnd = (from, to) => {
       const toId = ids[to]
       const fromId = ids[from]
       reorder(playlistId, fromId, toId)
-  }
+    },
+    [playlistId, reorder, ids]
+  )
 
   return (
     <>
       <ListToolbar
-        classes={classesToolbar}
+        classes={{ toolbar: classes.toolbar }}
         filters={props.filters}
-        {...controllerProps}
         actions={props.actions}
-        permanentFilter={props.filter}
+        {...props}
       />
       <div className={classes.main}>
         <Card
           className={classnames(classes.content, {
-            [classes.bulkActionsDisplayed]:
+            [classes.bulkActionsDisplayed]: props.selectedIds.length > 0,
-              controllerProps.selectedIds.length > 0,
           })}
           key={version}
         >
-          {bulkActionButtons !== false && bulkActionButtons && (
+          <BulkActionsToolbar {...props}>
-            <BulkActionsToolbar {...controllerProps}>
+            <PlaylistSongBulkActions playlistId={playlistId} />
-              {bulkActionButtons}
           </BulkActionsToolbar>
-          )}
-          {showPlaceholder ? (
-            <DatagridLoading
-              classes={classes}
-              className={className}
-              expand={expand}
-              hasBulkActions={hasBulkActions}
-              nbChildren={3}
-              size={'small'}
-            />
-          ) : (
           <ReorderableList
             readOnly={readOnly}
             onDragEnd={handleDragEnd}
@@ -156,25 +149,23 @@ const PlaylistSongs = (props) => {
             <SongDatagrid
               expand={!isXsmall && <SongDetails />}
               rowClick={(id) => dispatch(playTracks(data, ids, id))}
-                {...controllerProps}
+              {...props}
-                hasBulkActions={hasBulkActions}
+              hasBulkActions={true}
               contextAlwaysVisible={!isDesktop}
+              classes={{ row: classes.row }}
             >
               {isDesktop && <TextField source="id" label={'#'} />}
               <SongTitleField source="title" showTrackNumbers={false} />
               {isDesktop && <AlbumLinkField source="album" />}
               {isDesktop && <TextField source="artist" />}
-                <DurationField
+              <DurationField source="duration" className={classes.draggable} />
-                  source="duration"
-                  className={classes.draggable}
-                />
               <SongContextMenu
                 onAddToPlaylist={onAddToPlaylist}
                 showStar={false}
+                className={classes.contextMenu}
               />
             </SongDatagrid>
           </ReorderableList>
-          )}
         </Card>
       </div>
       <AddToPlaylistDialog />
@@ -182,4 +173,19 @@ const PlaylistSongs = (props) => {
   )
 }
 
-export default PlaylistSongs
+const SanitizedPlaylistSongs = (props) => {
+  const { loaded, loading, total, ...rest } = useListContext(props)
+  return (
+    <>
+      {loaded && (
+        <PlaylistSongs
+          {...rest}
+          playlistId={props.id}
+          actions={props.actions}
+        />
+      )}
+    </>
+  )
+}
+
+export default SanitizedPlaylistSongs