More optimization for small screens

ui/src/common/SongContextMenu.js

@@ -25,7 +25,7 @@ const useStyles = makeStyles({
   },
 })
 
-const SongContextMenu = ({ record, onAddToPlaylist, visible }) => {
+const SongContextMenu = ({ record, showStar, onAddToPlaylist, visible }) => {
   const classes = useStyles({ visible, starred: record.starred })
   const dispatch = useDispatch()
   const translate = useTranslate()
@@ -89,7 +89,7 @@ const SongContextMenu = ({ record, onAddToPlaylist, visible }) => {
 
   return (
     <span className={classes.noWrap}>
-      {config.enableStarred && !onAddToPlaylist && (
+      {config.enableStarred && showStar && (
         <IconButton
           onClick={(e) => handleToggleStar(e, record)}
           size={'small'}
@@ -137,6 +137,12 @@ SongContextMenu.propTypes = {
   record: PropTypes.object,
   onAddToPlaylist: PropTypes.func,
   visible: PropTypes.bool,
+  showStar: PropTypes.bool,
+}
+
+SongContextMenu.defaultProps = {
+  visible: true,
+  showStar: true,
 }
 
 export default SongContextMenu

ui/src/common/SongDatagrid.js

@@ -75,7 +75,7 @@ export const SongDatagrid = ({ multiDisc, contextVisible, ...rest }) => {
       }
     />
   )
-  return <Datagrid {...rest} body={<SongDatagridBody />} />
+  return <Datagrid {...rest} body={<SongDatagridBody />} optimized />
 }
 
 SongDatagrid.propTypes = {

ui/src/playlist/PlaylistSongs.js

@@ -55,6 +55,14 @@ const useStylesListToolbar = makeStyles({
   },
 })
 
+const SongsDatagridBody = (props) => (
+  <DatagridBody {...props} row={<SongDatagridRow contextVisible={true} />} />
+)
+
+const SongsDatagrid = ({ contextVisible, ...rest }) => {
+  return <Datagrid {...rest} body={<SongsDatagridBody />} />
+}
+
 const PlaylistSongs = (props) => {
   const classes = useStyles(props)
   const classesToolbar = useStylesListToolbar(props)
@@ -79,16 +87,6 @@ const PlaylistSongs = (props) => {
     }
   }
 
-  const SongsDatagridBody = (props) => (
-    <DatagridBody
-      {...props}
-      row={<SongDatagridRow contextVisible={isXsmall} />}
-    />
-  )
-  const SongsDatagrid = (props) => (
-    <Datagrid {...props} body={<SongsDatagridBody />} />
-  )
-
   return (
     <>
       <ListToolbar
@@ -131,7 +129,10 @@ const PlaylistSongs = (props) => {
               <TextField source="title" />
               {isDesktop && <TextField source="artist" />}
               <DurationField source="duration" />
-              <SongContextMenu onAddToPlaylist={onAddToPlaylist} />
+              <SongContextMenu
+                onAddToPlaylist={onAddToPlaylist}
+                showStar={false}
+              />
             </SongsDatagrid>
           )}
         </Card>

ui/src/song/SongList.js

@@ -70,10 +70,14 @@ const SongList = (props) => {
             <FunctionField source="year" render={(r) => r.year || ''} />
           )}
           <DurationField source="duration" />
+          {isDesktop ? (
             <SongContextMenu
               label={translate('resources.song.fields.starred')}
               sortBy={'starred DESC, starredAt ASC'}
             />
+          ) : (
+            <SongContextMenu showStar={false} />
+          )}
         </SongDatagrid>
       )}
     </List>