mirrors
/
navidrome
mirror of https://github.com/navidrome/navidrome.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added individual AddToPlaylistDialogs to each list view

This commit is contained in:
Deluan 2020-05-25 18:34:31 -04:00 committed by Deluan Quintão
parent 00811f8000
commit f9dae2dd2a
5 changed files with 82 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/src/App.js
View File

@ -20,7 +20,6 @@ import themeReducer from './personal/themeReducer'
import { addToPlaylistDialogReducer } from './dialogs/dialogState'
import createAdminStore from './store/createAdminStore'
import { i18nProvider } from './i18n'
import AddToPlaylistDialog from './dialogs/AddToPlaylistDialog'
const history = createHashHistory()
@ -79,9 +78,7 @@ const App = () => (
<Resource name="translation" />,
<Resource name="playlistTrack" />,
// Detached components
<Player />,
<AddToPlaylistDialog />,
]}
</Admin>
</Provider>

38
ui/src/album/AlbumList.js
View File

@ -16,6 +16,7 @@ import AlbumListActions from './AlbumListActions'
import AlbumListView from './AlbumListView'
import AlbumGridView from './AlbumGridView'
import { ALBUM_MODE_LIST } from './albumState'
import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
const AlbumFilter = (props) => {
const translate = useTranslate()
@ -57,22 +58,27 @@ const AlbumList = (props) => {
const { width } = props
const albumView = useSelector((state) => state.albumView)
return (
<List
{...props}
exporter={false}
bulkActionButtons={false}
actions={<AlbumListActions />}
sort={{ field: 'created_at', order: 'DESC' }}
filters={<AlbumFilter />}
perPage={getPerPage(width)}
pagination={<Pagination rowsPerPageOptions={getPerPageOptions(width)} />}
>
{albumView.mode === ALBUM_MODE_LIST ? (
<AlbumListView {...props} />
) : (
<AlbumGridView {...props} />
)}
</List>
<>
<List
{...props}
exporter={false}
bulkActionButtons={false}
actions={<AlbumListActions />}
sort={{ field: 'created_at', order: 'DESC' }}
filters={<AlbumFilter />}
perPage={getPerPage(width)}
pagination={
<Pagination rowsPerPageOptions={getPerPageOptions(width)} />
}
>
{albumView.mode === ALBUM_MODE_LIST ? (
<AlbumListView {...props} />
) : (
<AlbumGridView {...props} />
)}
</List>
<AddToPlaylistDialog />,
</>
)
}

2
ui/src/album/AlbumSongs.js
View File

@ -19,6 +19,7 @@ import {
SongDatagrid,
SongContextMenu,
} from '../common'
import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
const useStyles = makeStyles(
(theme) => ({
@ -163,6 +164,7 @@ const AlbumSongs = (props) => {
)}
</Card>
</div>
<AddToPlaylistDialog />,
</>
)
}

2
ui/src/playlist/PlaylistSongs.js
View File

@ -18,6 +18,7 @@ import {
SongContextMenu,
SongDatagridRow,
} from '../common'
import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
const useStyles = makeStyles(
(theme) => ({
@ -137,6 +138,7 @@ const PlaylistSongs = (props) => {
)}
</Card>
</div>
<AddToPlaylistDialog />,
</>
)
}

108
ui/src/song/SongList.js
View File

@ -23,6 +23,7 @@ import { useDispatch } from 'react-redux'
import { setTrack } from '../audioplayer'
import { SongBulkActions } from './SongBulkActions'
import { AlbumLinkField } from './AlbumLinkField'
import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
const useStyles = makeStyles({
columnIcon: {
@ -48,58 +49,61 @@ const SongList = (props) => {
const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
return (
<List
{...props}
sort={{ field: 'title', order: 'ASC' }}
exporter={false}
bulkActionButtons={<SongBulkActions />}
filters={<SongFilter />}
perPage={isXsmall ? 50 : 15}
>
{isXsmall ? (
<SimpleList
primaryText={(r) => r.title}
secondaryText={(r) => r.artist}
tertiaryText={(r) => (
<>
<DurationField record={r} source={'duration'} />
&nbsp;&nbsp;&nbsp;
</>
)}
linkType={(id, basePath, record) => dispatch(setTrack(record))}
rightIcon={(r) => <SongContextMenu record={r} visible={true} />}
/>
) : (
<SongDatagrid
expand={<SongDetails />}
rowClick={(id, basePath, record) => dispatch(setTrack(record))}
>
<TextField source="title" />
{isDesktop && <AlbumLinkField source="album" />}
<TextField source="artist" />
{isDesktop && <NumberField source="trackNumber" />}
{isDesktop && <NumberField source="playCount" />}
{isDesktop && (
<FunctionField source="year" render={(r) => r.year || ''} />
)}
<DurationField source="duration" />
{isDesktop ? (
<SongContextMenu
source={'starred'}
label={
<StarBorderIcon
fontSize={'small'}
className={classes.columnIcon}
/>
}
sortBy={'starred DESC, starredAt DESC'}
/>
) : (
<SongContextMenu showStar={false} />
)}
</SongDatagrid>
)}
</List>
<>
<List
{...props}
sort={{ field: 'title', order: 'ASC' }}
exporter={false}
bulkActionButtons={<SongBulkActions />}
filters={<SongFilter />}
perPage={isXsmall ? 50 : 15}
>
{isXsmall ? (
<SimpleList
primaryText={(r) => r.title}
secondaryText={(r) => r.artist}
tertiaryText={(r) => (
<>
<DurationField record={r} source={'duration'} />
&nbsp;&nbsp;&nbsp;
</>
)}
linkType={(id, basePath, record) => dispatch(setTrack(record))}
rightIcon={(r) => <SongContextMenu record={r} visible={true} />}
/>
) : (
<SongDatagrid
expand={<SongDetails />}
rowClick={(id, basePath, record) => dispatch(setTrack(record))}
>
<TextField source="title" />
{isDesktop && <AlbumLinkField source="album" />}
<TextField source="artist" />
{isDesktop && <NumberField source="trackNumber" />}
{isDesktop && <NumberField source="playCount" />}
{isDesktop && (
<FunctionField source="year" render={(r) => r.year || ''} />
)}
<DurationField source="duration" />
{isDesktop ? (
<SongContextMenu
source={'starred'}
label={
<StarBorderIcon
fontSize={'small'}
className={classes.columnIcon}
/>
}
sortBy={'starred DESC, starredAt DESC'}
/>
) : (
<SongContextMenu showStar={false} />
)}
</SongDatagrid>
)}
</List>
<AddToPlaylistDialog />,
</>
)
}