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 { useGetOne } from 'react-admin'
+import {
+  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 { 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>
-  }
+import { Title, isReadOnly } from '../common'
 
+const PlaylistShowLayout = (props) => {
+  const { loading, ...context } = useShowContext(props)
+  const { record } = context
   return (
     <>
-      <PlaylistDetails {...props} record={record} />
-      <PlaylistSongs
-        {...props}
-        playlistId={props.id}
-        readOnly={isReadOnly(record && record.owner)}
-        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} />
-        }
-      />
+      {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}
+            readOnly={isReadOnly(record.owner)}
+            title={<Title subTitle={record.name} />}
+            actions={<PlaylistActions record={record} />}
+            resource={'playlistTrack'}
+            exporter={false}
+            perPage={0}
+            pagination={null}
+          />
+        </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 (
-    <Fragment>
-      <BulkDeleteButton {...rest} resource={`playlist/${playlistId}/tracks`} />
-    </Fragment>
+    <ResourceContextProvider value={mappedResource}>
+      <Fragment>
+        <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,16 +52,23 @@ const useStyles = makeStyles(
       flexWrap: 'wrap',
     },
     noResults: { padding: 20 },
+    toolbar: {
+      justifyContent: 'flex-start',
+    },
+    row: {
+      '&:hover': {
+        '& $contextMenu': {
+          visibility: 'visible',
+        },
+      },
+    },
+    contextMenu: {
+      visibility: 'hidden',
+    },
   }),
   { name: 'RaList' }
 )
 
-const useStylesListToolbar = makeStyles({
-  toolbar: {
-    justifyContent: 'flex-start',
-  },
-})
-
 const ReorderableList = ({ readOnly, children, ...rest }) => {
   if (readOnly) {
     return children
@@ -68,113 +76,96 @@ 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 { data, ids, version, total } = controllerProps
+  const version = useVersion()
 
-  if (total === 0) {
-    return null
-  }
-
-  const anySong = data[ids[0]]
-  const showPlaceholder = !anySong || anySong.playlistId !== playlistId
-  const hasBulkActions = props.bulkActionButtons !== false
-
-  const reorder = (playlistId, id, newPos) => {
-    dataProvider
-      .update('playlistTrack', {
-        id,
-        data: { insert_before: newPos },
-        filter: { playlist_id: playlistId },
-      })
-      .then(() => {
+  const onAddToPlaylist = useCallback(
+    (pls) => {
+      if (pls.id === playlistId) {
         refresh()
-      })
-      .catch(() => {
-        notify('ra.page.error', 'warning')
-      })
-  }
+      }
+    },
+    [playlistId, refresh]
+  )
 
-  const onAddToPlaylist = (pls) => {
-    if (pls.id === props.id) {
-      refresh()
-    }
-  }
+  const reorder = useCallback(
+    (playlistId, id, newPos) => {
+      dataProvider
+        .update('playlistTrack', {
+          id,
+          data: { insert_before: newPos },
+          filter: { playlist_id: playlistId },
+        })
+        .then(() => {
+          refresh()
+        })
+        .catch(() => {
+          notify('ra.page.error', 'warning')
+        })
+    },
+    [dataProvider, notify, refresh]
+  )
 
-  const handleDragEnd = (from, to) => {
-    const toId = ids[to]
-    const fromId = ids[from]
-    reorder(playlistId, fromId, toId)
-  }
+  const handleDragEnd = useCallback(
+    (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]:
-              controllerProps.selectedIds.length > 0,
+            [classes.bulkActionsDisplayed]: props.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'}
-            />
-          ) : (
-            <ReorderableList
-              readOnly={readOnly}
-              onDragEnd={handleDragEnd}
-              nodeSelector={'tr'}
+          <BulkActionsToolbar {...props}>
+            <PlaylistSongBulkActions playlistId={playlistId} />
+          </BulkActionsToolbar>
+          <ReorderableList
+            readOnly={readOnly}
+            onDragEnd={handleDragEnd}
+            nodeSelector={'tr'}
+          >
+            <SongDatagrid
+              expand={!isXsmall && <SongDetails />}
+              rowClick={(id) => dispatch(playTracks(data, ids, id))}
+              {...props}
+              hasBulkActions={true}
+              contextAlwaysVisible={!isDesktop}
+              classes={{ row: classes.row }}
             >
-              <SongDatagrid
-                expand={!isXsmall && <SongDetails />}
-                rowClick={(id) => dispatch(playTracks(data, ids, id))}
-                {...controllerProps}
-                hasBulkActions={hasBulkActions}
-                contextAlwaysVisible={!isDesktop}
-              >
-                {isDesktop && <TextField source="id" label={'#'} />}
-                <SongTitleField source="title" showTrackNumbers={false} />
-                {isDesktop && <AlbumLinkField source="album" />}
-                {isDesktop && <TextField source="artist" />}
-                <DurationField
-                  source="duration"
-                  className={classes.draggable}
-                />
-                <SongContextMenu
-                  onAddToPlaylist={onAddToPlaylist}
-                  showStar={false}
-                />
-              </SongDatagrid>
-            </ReorderableList>
-          )}
+              {isDesktop && <TextField source="id" label={'#'} />}
+              <SongTitleField source="title" showTrackNumbers={false} />
+              {isDesktop && <AlbumLinkField source="album" />}
+              {isDesktop && <TextField source="artist" />}
+              <DurationField 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