Make SmartPlaylists read-only

ui/src/common/Writable.js

@@ -20,3 +20,8 @@ export const Writable = (props) => {
   }
   return null
 }
+
+export const isSmartPlaylist = (pls) => !!pls.rules
+
+export const canChangeTracks = (pls) =>
+  isWritable(pls.owner) && !isSmartPlaylist(pls)

ui/src/layout/PlaylistsSubMenu.js

@@ -12,7 +12,7 @@ import QueueMusicOutlinedIcon from '@material-ui/icons/QueueMusicOutlined'
 import { BiCog } from 'react-icons/all'
 import { useDrop } from 'react-dnd'
 import SubMenu from './SubMenu'
-import { isWritable } from '../common'
+import { canChangeTracks } from '../common'
 import { DraggableTypes, MAX_SIDEBAR_PLAYLISTS } from '../consts'
 
 const PlaylistMenuItemLink = ({ pls, sidebarIsOpen }) => {
@@ -20,7 +20,7 @@ const PlaylistMenuItemLink = ({ pls, sidebarIsOpen }) => {
   const notify = useNotify()
 
   const [, dropRef] = useDrop(() => ({
-    accept: isWritable(pls.owner) ? DraggableTypes.ALL : [],
+    accept: canChangeTracks(pls) ? DraggableTypes.ALL : [],
     drop: (item) =>
       dataProvider
         .addToPlaylist(pls.id, item)

ui/src/playlist/PlaylistEdit.js

@@ -10,7 +10,7 @@ import {
   required,
   useTranslate,
 } from 'react-admin'
-import { Title } from '../common'
+import { isSmartPlaylist, isWritable, Title } from '../common'
 
 const SyncFragment = ({ formData, variant, ...rest }) => {
   return (
@@ -27,16 +27,26 @@ const PlaylistTitle = ({ record }) => {
   return <Title subTitle={`${resourceName} "${record ? record.name : ''}"`} />
 }
 
-const PlaylistEdit = (props) => (
-  <Edit title={<PlaylistTitle />} {...props}>
-    <SimpleForm redirect="list" variant={'outlined'}>
+const PlaylistEditForm = (props) => {
+  const { record } = props
+  return (
+    <SimpleForm redirect="list" variant={'outlined'} {...props}>
       <TextInput source="name" validate={required()} />
       <TextInput multiline source="comment" />
-      <BooleanInput source="public" />
+      <BooleanInput
+        source="public"
+        disabled={!isWritable(record.owner) || isSmartPlaylist(record)}
+      />
       <FormDataConsumer>
         {(formDataProps) => <SyncFragment {...formDataProps} />}
       </FormDataConsumer>
     </SimpleForm>
+  )
+}
+
+const PlaylistEdit = (props) => (
+  <Edit title={<PlaylistTitle />} {...props}>
+    <PlaylistEditForm {...props} />
   </Edit>
 )
 

ui/src/playlist/PlaylistList.js

@@ -9,6 +9,7 @@ import {
   TextField,
   useUpdate,
   useNotify,
+  useRecordContext,
 } from 'react-admin'
 import Switch from '@material-ui/core/Switch'
 import { useMediaQuery } from '@material-ui/core'
@@ -19,6 +20,7 @@ import {
   isWritable,
   useSelectedFields,
   useResourceRefresh,
+  isSmartPlaylist,
 } from '../common'
 import PlaylistListActions from './PlaylistListActions'
 
@@ -28,7 +30,8 @@ const PlaylistFilter = (props) => (
   </Filter>
 )
 
-const TogglePublicInput = ({ permissions, resource, record = {}, source }) => {
+const TogglePublicInput = ({ resource, source }) => {
+  const record = useRecordContext()
   const notify = useNotify()
   const [togglePublic] = useUpdate(
     resource,
@@ -51,20 +54,16 @@ const TogglePublicInput = ({ permissions, resource, record = {}, source }) => {
     e.stopPropagation()
   }
 
-  const canChange =
-    permissions === 'admin' ||
-    localStorage.getItem('username') === record['owner']
-
   return (
     <Switch
       checked={record[source]}
       onClick={handleClick}
-      disabled={!canChange}
+      disabled={!isWritable(record.owner) || isSmartPlaylist(record)}
     />
   )
 }
 
-const PlaylistList = ({ permissions, ...props }) => {
+const PlaylistList = (props) => {
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   useResourceRefresh('playlist')
@@ -78,14 +77,10 @@ const PlaylistList = ({ permissions, ...props }) => {
         <DateField source="updatedAt" sortByOrder={'DESC'} />
       ),
       public: !isXsmall && (
-        <TogglePublicInput
-          source="public"
-          permissions={permissions}
-          sortByOrder={'DESC'}
-        />
+        <TogglePublicInput source="public" sortByOrder={'DESC'} />
       ),
     }
-  }, [isDesktop, isXsmall, permissions])
+  }, [isDesktop, isXsmall])
 
   const columns = useSelectedFields({
     resource: 'playlist',

ui/src/playlist/PlaylistShow.js

@@ -10,7 +10,8 @@ import { makeStyles } from '@material-ui/core/styles'
 import PlaylistDetails from './PlaylistDetails'
 import PlaylistSongs from './PlaylistSongs'
 import PlaylistActions from './PlaylistActions'
-import { Title, isReadOnly } from '../common'
+import { Title, canChangeTracks } from '../common'
+
 const useStyles = makeStyles(
   (theme) => ({
     playlistActions: {
@@ -42,7 +43,7 @@ const PlaylistShowLayout = (props) => {
         >
           <PlaylistSongs
             {...props}
-            readOnly={isReadOnly(record.owner)}
+            readOnly={!canChangeTracks(record)}
             title={<Title subTitle={record.name} />}
             actions={
               <PlaylistActions

ui/src/playlist/PlaylistSongs.js

@@ -182,6 +182,7 @@ const PlaylistSongs = ({ playlistId, readOnly, actions, ...props }) => {
             <PlaylistSongBulkActions
               playlistId={playlistId}
               onUnselectItems={onUnselectItems}
+              readOnly={readOnly}
             />
           </BulkActionsToolbar>
           <ReorderableList
@@ -192,7 +193,7 @@ const PlaylistSongs = ({ playlistId, readOnly, actions, ...props }) => {
             <SongDatagrid
               rowClick={(id) => dispatch(playTracks(data, ids, id))}
               {...listContext}
-              hasBulkActions={true}
+              hasBulkActions={!readOnly}
               contextAlwaysVisible={!isDesktop}
               classes={{ row: classes.row }}
             >