diff --git a/ui/src/common/SongSimpleList.js b/ui/src/common/SongSimpleList.js
new file mode 100644
index 000000000..ef3918a41
--- /dev/null
+++ b/ui/src/common/SongSimpleList.js
@@ -0,0 +1,121 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import List from '@material-ui/core/List'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
+import ListItemText from '@material-ui/core/ListItemText'
+import { makeStyles } from '@material-ui/core/styles'
+import { sanitizeListRestProps } from 'ra-core'
+import { DurationField, SongContextMenu } from './index'
+import { setTrack } from '../actions'
+import { useDispatch } from 'react-redux'
+
+const useStyles = makeStyles(
+ {
+ link: {
+ textDecoration: 'none',
+ color: 'inherit',
+ },
+ listItem: {
+ padding: '10px',
+ },
+ title: {
+ paddingRight: '10px',
+ width: '80%',
+ },
+ secondary: {
+ marginTop: '-3px',
+ width: '96%',
+ display: 'flex',
+ alignItems: 'flex-start',
+ justifyContent: 'space-between',
+ },
+ artist: {
+ paddingRight: '30px',
+ },
+ timeStamp: {
+ float: 'right',
+ color: '#fff',
+ fontWeight: '200',
+ opacity: 0.6,
+ fontSize: '12px',
+ padding: '2px',
+ },
+ rightIcon: {
+ top: '26px',
+ },
+ },
+ { name: 'RaSongSimpleList' }
+)
+
+export const SongSimpleList = ({
+ basePath,
+ className,
+ classes: classesOverride,
+ data,
+ hasBulkActions,
+ ids,
+ loading,
+ onToggleItem,
+ selectedIds,
+ total,
+ ...rest
+}) => {
+ const dispatch = useDispatch()
+ const classes = useStyles({ classes: classesOverride })
+ return (
+ (loading || total > 0) && (
+
+ {ids.map(
+ (id) =>
+ data[id] && (
+ dispatch(setTrack(data[id]))}>
+
+ {data[id].title}
+ }
+ secondary={
+
+
+ {data[id].artist}
+
+
+
+
+
+ }
+ />
+
+
+
+
+
+
+
+ )
+ )}
+
+ )
+ )
+}
+
+SongSimpleList.propTypes = {
+ basePath: PropTypes.string,
+ className: PropTypes.string,
+ classes: PropTypes.object,
+ data: PropTypes.object,
+ hasBulkActions: PropTypes.bool.isRequired,
+ ids: PropTypes.array,
+ onToggleItem: PropTypes.func,
+ selectedIds: PropTypes.arrayOf(PropTypes.any).isRequired,
+}
+
+SongSimpleList.defaultProps = {
+ hasBulkActions: false,
+ selectedIds: [],
+}
diff --git a/ui/src/common/index.js b/ui/src/common/index.js
index e0ea874c6..1029f47af 100644
--- a/ui/src/common/index.js
+++ b/ui/src/common/index.js
@@ -26,3 +26,4 @@ export * from './useInterval'
export * from './useToggleStar'
export * from './useTraceUpdate'
export * from './Writable'
+export * from './SongSimpleList'
diff --git a/ui/src/song/SongList.js b/ui/src/song/SongList.js
index 59dec1f04..1d5f7f51f 100644
--- a/ui/src/song/SongList.js
+++ b/ui/src/song/SongList.js
@@ -11,12 +11,12 @@ import StarIcon from '@material-ui/icons/Star'
import {
DurationField,
List,
- SimpleList,
SongContextMenu,
SongDatagrid,
SongDetails,
QuickFilter,
SongTitleField,
+ SongSimpleList,
} from '../common'
import { useDispatch } from 'react-redux'
import { setTrack } from '../actions'
@@ -78,18 +78,7 @@ const SongList = (props) => {
perPage={isXsmall ? 50 : 15}
>
{isXsmall ? (
- r.title}
- secondaryText={(r) => r.artist}
- tertiaryText={(r) => (
- <>
-
-
- >
- )}
- linkType={(id, basePath, record) => dispatch(setTrack(record))}
- rightIcon={(r) => }
- />
+
) : (
}