arian/navidrome
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Add songs to playlists with drag and drop

Browse Source
This commit is contained in:
Deluan
2021-10-01 10:37:05 -04:00
parent 2ab4647420
commit 6c3e45de41
14 changed files with 392 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/album/AlbumGridView.js
+15 -7
View File
@@ -11,6 +11,7 @@ import withWidth from '@material-ui/core/withWidth'
import { Link } from 'react-router-dom'
import { linkToRecord, useListContext, Loading } from 'react-admin'
import { withContentRect } from 'react-measure'
import { useDrag } from 'react-dnd'
import subsonic from '../subsonic'
import {
AlbumContextMenu,
@@ -97,17 +98,24 @@ const getColsForWidth = (width) => {
}
const Cover = withContentRect('bounds')(
({ album, measureRef, contentRect }) => {
({ record, measureRef, contentRect }) => {
// Force height to be the same as the width determined by the GridList
// noinspection JSSuspiciousNameCombination
const classes = useCoverStyles({ height: contentRect.bounds.width })
const [, dragAlbumRef] = useDrag(() => ({
type: 'album',
item: { albumIds: [record.id] },
options: { dropEffect: 'copy' },
}))
return (
<div ref={measureRef}>
<img
src={subsonic.getCoverArtUrl(album, 300)}
alt={album.name}
className={classes.cover}
/>
<div ref={dragAlbumRef}>
<img
src={subsonic.getCoverArtUrl(record, 300)}
alt={record.name}
className={classes.cover}
/>
</div>
</div>
)
}
@@ -127,7 +135,7 @@ const AlbumGridTile = ({ showArtist, record, basePath, ...props }) => {
className={classes.link}
to={linkToRecord(basePath, record.id, 'show')}
>
<Cover album={record} />
<Cover record={record} />
<GridListTileBar
className={isDesktop ? classes.tileBar : classes.tileBarMobile}
subtitle={
ui/src/album/AlbumTableView.js
+28 -3
View File
@@ -1,8 +1,15 @@
import React, { useMemo } from 'react'
import { Datagrid, NumberField, TextField } from 'react-admin'
import {
Datagrid,
DatagridBody,
DatagridRow,
NumberField,
TextField,
} from 'react-admin'
import { useMediaQuery } from '@material-ui/core'
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
import { makeStyles } from '@material-ui/core/styles'
import { useDrag } from 'react-dnd'
import {
ArtistLinkField,
DurationField,
@@ -41,6 +48,24 @@ const useStyles = makeStyles({
},
})
const AlbumDatagridRow = (props) => {
const { record } = props
const [, dragAlbumRef] = useDrag(() => ({
type: 'album',
item: { albumIds: [record.id] },
options: { dropEffect: 'copy' },
}))
return <DatagridRow ref={dragAlbumRef} {...props} />
}
const AlbumDatagridBody = (props) => (
<DatagridBody {...props} row={<AlbumDatagridRow />} />
)
const AlbumDatagrid = (props) => (
<Datagrid {...props} body={<AlbumDatagridBody />} />
)
const AlbumTableView = ({
hasShow,
hasEdit,
@@ -112,7 +137,7 @@ const AlbumTableView = ({
{...rest}
/>
) : (
<Datagrid rowClick={'show'} classes={{ row: classes.row }} {...rest}>
<AlbumDatagrid rowClick={'show'} classes={{ row: classes.row }} {...rest}>
<TextField source="name" />
{columns}
<AlbumContextMenu
@@ -130,7 +155,7 @@ const AlbumTableView = ({
)
}
/>
</Datagrid>
</AlbumDatagrid>
)
}
ui/src/artist/ArtistList.js
+23 -2
View File
@@ -3,6 +3,8 @@ import { useHistory } from 'react-router-dom'
import {
AutocompleteInput,
Datagrid,
DatagridBody,
DatagridRow,
Filter,
NumberField,
ReferenceInput,
@@ -14,6 +16,7 @@ import { useMediaQuery, withWidth } from '@material-ui/core'
import FavoriteIcon from '@material-ui/icons/Favorite'
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
import { makeStyles } from '@material-ui/core/styles'
import { useDrag } from 'react-dnd'
import { AddToPlaylistDialog } from '../dialogs'
import {
ArtistContextMenu,
@@ -78,6 +81,24 @@ const ArtistFilter = (props) => {
)
}
const ArtistDatagridRow = (props) => {
const { record } = props
const [, dragArtistRef] = useDrag(() => ({
type: 'artist',
item: { artistIds: [record.id] },
options: { dropEffect: 'copy' },
}))
return <DatagridRow ref={dragArtistRef} {...props} />
}
const ArtistDatagridBody = (props) => (
<DatagridBody {...props} row={<ArtistDatagridRow />} />
)
const ArtistDatagrid = (props) => (
<Datagrid {...props} body={<ArtistDatagridBody />} />
)
const ArtistListView = ({ hasShow, hasEdit, hasList, width, ...rest }) => {
const classes = useStyles()
const handleArtistLink = useGetHandleArtistClick(width)
@@ -112,7 +133,7 @@ const ArtistListView = ({ hasShow, hasEdit, hasList, width, ...rest }) => {
{...rest}
/>
) : (
<Datagrid rowClick={handleArtistLink} classes={{ row: classes.row }}>
<ArtistDatagrid rowClick={handleArtistLink} classes={{ row: classes.row }}>
<TextField source="name" />
{columns}
<ArtistContextMenu
@@ -130,7 +151,7 @@ const ArtistListView = ({ hasShow, hasEdit, hasList, width, ...rest }) => {
)
}
/>
</Datagrid>
</ArtistDatagrid>
)
}
ui/src/common/SongDatagrid.js
+60 -43
View File
@@ -1,4 +1,4 @@
import React, { isValidElement, useMemo, useCallback } from 'react'
import React, { isValidElement, useMemo, useCallback, forwardRef } from 'react'
import { useDispatch } from 'react-redux'
import { Datagrid, PureDatagridBody, PureDatagridRow } from 'react-admin'
import {
@@ -11,6 +11,7 @@ import PropTypes from 'prop-types'
import { makeStyles } from '@material-ui/core/styles'
import AlbumIcon from '@material-ui/icons/Album'
import clsx from 'clsx'
import { useDrag } from 'react-dnd'
import { playTracks } from '../actions'
import { AlbumContextMenu } from '../common'
@@ -47,50 +48,48 @@ const useStyles = makeStyles({
},
})
const DiscSubtitleRow = ({
record,
onClick,
colSpan,
contextAlwaysVisible,
}) => {
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
const classes = useStyles({ isDesktop })
const handlePlayDisc = (discNumber) => () => {
onClick(discNumber)
}
const DiscSubtitleRow = forwardRef(
({ record, onClick, colSpan, contextAlwaysVisible }, ref) => {
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
const classes = useStyles({ isDesktop })
const handlePlayDisc = (discNumber) => () => {
onClick(discNumber)
}
let subtitle = []
if (record.discNumber > 0) {
subtitle.push(record.discNumber)
}
if (record.discSubtitle) {
subtitle.push(record.discSubtitle)
}
let subtitle = []
if (record.discNumber > 0) {
subtitle.push(record.discNumber)
}
if (record.discSubtitle) {
subtitle.push(record.discSubtitle)
}
return (
<TableRow
hover
onClick={handlePlayDisc(record.discNumber)}
className={classes.row}
>
<TableCell colSpan={colSpan}>
<Typography variant="h6" className={classes.subtitle}>
<AlbumIcon className={classes.discIcon} fontSize={'small'} />
{subtitle.join(': ')}
</Typography>
</TableCell>
<TableCell>
<AlbumContextMenu
record={{ id: record.albumId }}
discNumber={record.discNumber}
showLove={false}
className={classes.contextMenu}
visible={contextAlwaysVisible}
/>
</TableCell>
</TableRow>
)
}
return (
<TableRow
hover
ref={ref}
onClick={handlePlayDisc(record.discNumber)}
className={classes.row}
>
<TableCell colSpan={colSpan}>
<Typography variant="h6" className={classes.subtitle}>
<AlbumIcon className={classes.discIcon} fontSize={'small'} />
{subtitle.join(': ')}
</Typography>
</TableCell>
<TableCell>
<AlbumContextMenu
record={{ id: record.albumId }}
discNumber={record.discNumber}
showLove={false}
className={classes.contextMenu}
visible={contextAlwaysVisible}
/>
</TableCell>
</TableRow>
)
}
)
export const SongDatagridRow = ({
record,
@@ -105,14 +104,31 @@ export const SongDatagridRow = ({
const fields = React.Children.toArray(children).filter((c) =>
isValidElement(c)
)
const [, dragDiscRef] = useDrag(() => ({
type: 'disc',
item: {
discs: [{ albumId: record.albumId, discNumber: record.discNumber }],
},
options: { dropEffect: 'copy' },
}))
const [, dragSongRef] = useDrag(() => ({
type: 'song',
item: { ids: [record.id] },
options: { dropEffect: 'copy' },
}))
if (!record || !record.title) {
return null
}
const childCount = fields.length
return (
<>
{firstTracks.has(record.id) && (
<DiscSubtitleRow
ref={dragDiscRef}
record={record}
onClick={onClickDiscSubtitle}
contextAlwaysVisible={contextAlwaysVisible}
@@ -120,6 +136,7 @@ export const SongDatagridRow = ({
/>
)}
<PureDatagridRow
ref={dragSongRef}
record={record}
{...rest}
className={clsx(className, classes.row)}
ui/src/dataProvider/wrapperDataProvider.js
+6
View File
@@ -57,6 +57,12 @@ const wrapperDataProvider = {
const [r, p] = mapResource(resource, params)
return dataProvider.deleteMany(r, p)
},
addToPlaylist: (playlistId, data) => {
return httpClient(`${REST_URL}/playlist/${playlistId}/tracks`, {
method: 'POST',
body: JSON.stringify(data),
}).then(({ json }) => ({ data: json }))
},
}
export default wrapperDataProvider
ui/src/layout/Layout.js
+14 -10
View File
@@ -3,6 +3,8 @@ import { useDispatch, useSelector } from 'react-redux'
import { Layout as RALayout, toggleSidebar } from 'react-admin'
import { makeStyles } from '@material-ui/core/styles'
import { HotKeys } from 'react-hotkeys'
import { HTML5Backend } from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd'
import Menu from './Menu'
import AppBar from './AppBar'
import Notification from './Notification'
@@ -23,16 +25,18 @@ const Layout = (props) => {
}
return (
<HotKeys handlers={keyHandlers}>
<RALayout
{...props}
className={classes.root}
menu={Menu}
appBar={AppBar}
theme={theme}
notification={Notification}
/>
</HotKeys>
<DndProvider backend={HTML5Backend}>
<HotKeys handlers={keyHandlers}>
<RALayout
{...props}
className={classes.root}
menu={Menu}
appBar={AppBar}
theme={theme}
notification={Notification}
/>
</HotKeys>
</DndProvider>
)
}
ui/src/layout/PlaylistsSubMenu.js
+56 -16
View File
@@ -1,12 +1,60 @@
import React, { useCallback } from 'react'
import { MenuItemLink, useQueryWithStore } from 'react-admin'
import {
MenuItemLink,
useDataProvider,
useNotify,
useQueryWithStore,
} from 'react-admin'
import { useHistory } from 'react-router-dom'
import QueueMusicIcon from '@material-ui/icons/QueueMusic'
import { Typography } from '@material-ui/core'
import QueueMusicOutlinedIcon from '@material-ui/icons/QueueMusicOutlined'
import { BiCog } from 'react-icons/all'
import { useDrop } from 'react-dnd'
import SubMenu from './SubMenu'
const PlaylistMenuItemLink = ({ pls, sidebarIsOpen }) => {
const dataProvider = useDataProvider()
const notify = useNotify()
const addToPlaylist = (playlistId, data) => {
dataProvider
.addToPlaylist(playlistId, data)
.then((res) => {
notify('message.songsAddedToPlaylist', 'info', {
smart_count: res.data?.added,
})
})
.catch(() => {
notify('ra.page.error', 'warning')
})
}
const [, dropRef] = useDrop(() => ({
accept: ['song', 'album', 'disc', 'artist'],
drop: (item) => {
addToPlaylist(pls.id, item)
},
}))
if (!pls) {
return null
}
return (
<MenuItemLink
to={`/playlist/${pls.id}/show`}
primaryText={
<Typography variant="inherit" noWrap ref={dropRef}>
{pls.name}
</Typography>
}
sidebarIsOpen={sidebarIsOpen}
dense={false}
/>
)
}
const PlaylistsSubMenu = ({ state, setState, sidebarIsOpen, dense }) => {
const history = useHistory()
const { data, loaded } = useQueryWithStore({
@@ -25,21 +73,13 @@ const PlaylistsSubMenu = ({ state, setState, sidebarIsOpen, dense }) => {
setState((state) => ({ ...state, [menu]: !state[menu] }))
}
const renderPlaylistMenuItemLink = (pls) => {
return (
<MenuItemLink
key={pls.id}
to={`/playlist/${pls.id}/show`}
primaryText={
<Typography variant="inherit" noWrap>
{pls.name}
</Typography>
}
sidebarIsOpen={sidebarIsOpen}
dense={false}
/>
)
}
const renderPlaylistMenuItemLink = (pls) => (
<PlaylistMenuItemLink
pls={pls}
sidebarIsOpen={sidebarIsOpen}
key={pls.id}
/>
)
const user = localStorage.getItem('username')
const myPlaylists = []