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

Add songs to playlists with drag and drop

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
model/album.go
View File

@ -38,7 +38,13 @@ type Album struct {
UpdatedAt time.Time `structs:"updated_at" json:"updatedAt"`
}
type Albums []Album
type (
Albums []Album
DiscID struct {
AlbumID string `json:"albumId"`
DiscNumber int `json:"discNumber"`
}
)
type AlbumRepository interface {
CountAll(...QueryOptions) (int64, error)

5
model/playlist.go
View File

@ -44,7 +44,10 @@ type PlaylistTracks []PlaylistTrack
type PlaylistTrackRepository interface {
ResourceRepository
Add(mediaFileIds []string) error
Add(mediaFileIds []string) (int, error)
AddAlbums(albumIds []string) (int, error)
AddArtists(artistIds []string) (int, error)
AddDiscs(discs []DiscID) (int, error)
Update(mediaFileIds []string) error
Delete(id string) error
Reorder(pos int, newPos int) error

4
persistence/playlist_repository.go
View File

@ -214,8 +214,8 @@ func (r *playlistRepository) removeOrphans() error {
log.Debug(r.ctx, "Deleted tracks, now reordering", "id", pl.Id, "name", pl.Name, "deleted", n)
// To reorganize the playlist, just add an empty list of new tracks
trks := r.Tracks(pl.Id)
if err := trks.Add(nil); err != nil {
tracks := r.Tracks(pl.Id)
if _, err := tracks.Add(nil); err != nil {
return err
}
}

47
persistence/playlist_track_repository.go
View File

@ -70,9 +70,9 @@ func (r *playlistTrackRepository) NewInstance() interface{} {
return &model.PlaylistTrack{}
}
func (r *playlistTrackRepository) Add(mediaFileIds []string) error {
func (r *playlistTrackRepository) Add(mediaFileIds []string) (int, error) {
if !r.isWritable() {
return rest.ErrPermissionDenied
return 0, rest.ErrPermissionDenied
}
if len(mediaFileIds) > 0 {
@ -81,14 +81,53 @@ func (r *playlistTrackRepository) Add(mediaFileIds []string) error {
ids, err := r.getTracks()
if err != nil {
return err
return 0, err
}
// Append new tracks
ids = append(ids, mediaFileIds...)
// Update tracks and playlist
return r.Update(ids)
return len(mediaFileIds), r.Update(ids)
}
func (r *playlistTrackRepository) AddAlbums(albumIds []string) (int, error) {
sq := Select("id").From("media_file").Where(Eq{"album_id": albumIds})
return r.addMediaFileIds(sq)
}
func (r *playlistTrackRepository) AddArtists(artistIds []string) (int, error) {
sq := Select("id").From("media_file").Where(Eq{"album_artist_id": artistIds})
return r.addMediaFileIds(sq)
}
func (r *playlistTrackRepository) AddDiscs(discs []model.DiscID) (int, error) {
sq := Select("id").From("media_file")
if len(discs) == 0 {
return 0, nil
}
var clauses []Sqlizer
for _, d := range discs {
clauses = append(clauses, And{Eq{"album_id": d.AlbumID}, Eq{"disc_number": d.DiscNumber}})
}
sq = sq.Where(Or(clauses))
return r.addMediaFileIds(sq)
}
func (r *playlistTrackRepository) addMediaFileIds(sq SelectBuilder) (int, error) {
var res []struct{ Id string }
err := r.queryAll(sq, &res)
if err != nil {
return 0, err
}
if len(res) == 0 {
return 0, nil
}
var ids []string
for _, r := range res {
ids = append(ids, r.Id)
}
return r.Add(ids)
}
func (r *playlistTrackRepository) getTracks() ([]string, error) {

28
server/nativeapi/playlists.go
View File

@ -4,7 +4,6 @@ import (
"context"
"encoding/json"
"fmt"
"html"
"net/http"
"strconv"
"strings"
@ -107,7 +106,10 @@ func deleteFromPlaylist(ds model.DataStore) http.HandlerFunc {
func addToPlaylist(ds model.DataStore) http.HandlerFunc {
type addTracksPayload struct {
Ids []string `json:"ids"`
Ids []string `json:"ids"`
AlbumIds []string `json:"albumIds"`
ArtistIds []string `json:"artistIds"`
Discs []model.DiscID `json:"discs"`
}
return func(w http.ResponseWriter, r *http.Request) {
@ -119,14 +121,30 @@ func addToPlaylist(ds model.DataStore) http.HandlerFunc {
http.Error(w, err.Error(), http.StatusBadRequest)
return
}
err = tracksRepo.Add(payload.Ids)
if err != nil {
count, c := 0, 0
if c, err = tracksRepo.Add(payload.Ids); err != nil {
http.Error(w, err.Error(), http.StatusBadRequest)
return
}
count += c
if c, err = tracksRepo.AddAlbums(payload.AlbumIds); err != nil {
http.Error(w, err.Error(), http.StatusBadRequest)
return
}
count += c
if c, err = tracksRepo.AddArtists(payload.ArtistIds); err != nil {
http.Error(w, err.Error(), http.StatusBadRequest)
return
}
count += c
if c, err = tracksRepo.AddDiscs(payload.Discs); err != nil {
http.Error(w, err.Error(), http.StatusBadRequest)
return
}
count += c
// Must return an object with an ID, to satisfy ReactAdmin `create` call
_, err = fmt.Fprintf(w, `{"id":"%s"}`, html.EscapeString(playlistId))
_, err = fmt.Fprintf(w, `{"added":%d}`, count)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
}

109
ui/package-lock.json generated
View File

@ -26,6 +26,8 @@
"ra-i18n-polyglot": "^3.18.3",
"react": "^17.0.2",
"react-admin": "^3.18.3",
"react-dnd": "^14.0.4",
"react-dnd-html5-backend": "^14.0.2",
"react-dom": "^17.0.2",
"react-drag-listview": "^0.1.8",
"react-ga": "^3.3.0",
@ -2208,6 +2210,21 @@
"node": ">= 8"
}
},
"node_modules/@react-dnd/asap": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz",
"integrity": "sha512-0XhqJSc6pPoNnf8DhdsPHtUhRzZALVzYMTzRwV4VI6DJNJ/5xxfL9OQUwb8IH5/2x7lSf7nAZrnzUD+16VyOVQ=="
},
"node_modules/@react-dnd/invariant": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-2.0.0.tgz",
"integrity": "sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw=="
},
"node_modules/@react-dnd/shallowequal": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz",
"integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg=="
},
"node_modules/@react-icons/all-files": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/@react-icons/all-files/-/all-files-4.1.0.tgz",
@ -6588,6 +6605,16 @@
"node": ">=8"
}
},
"node_modules/dnd-core": {
"version": "14.0.1",
"resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.1.tgz",
"integrity": "sha512-+PVS2VPTgKFPYWo3vAFEA8WPbTf7/xo43TifH9G8S1KqnrQu0o77A3unrF5yOugy4mIz7K5wAVFHUcha7wsz6A==",
"dependencies": {
"@react-dnd/asap": "^4.0.0",
"@react-dnd/invariant": "^2.0.0",
"redux": "^4.1.1"
}
},
"node_modules/dns-equal": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@ -16242,6 +16269,43 @@
"node": ">= 8"
}
},
"node_modules/react-dnd": {
"version": "14.0.4",
"resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.4.tgz",
"integrity": "sha512-AFJJXzUIWp5WAhgvI85ESkDCawM0lhoVvfo/lrseLXwFdH3kEO3v8I2C81QPqBW2UEyJBIPStOhPMGYGFtq/bg==",
"dependencies": {
"@react-dnd/invariant": "^2.0.0",
"@react-dnd/shallowequal": "^2.0.0",
"dnd-core": "14.0.1",
"fast-deep-equal": "^3.1.3",
"hoist-non-react-statics": "^3.3.2"
},
"peerDependencies": {
"@types/hoist-non-react-statics": ">= 3.3.1",
"@types/node": ">= 12",
"@types/react": ">= 16",
"react": ">= 16.14"
},
"peerDependenciesMeta": {
"@types/hoist-non-react-statics": {
"optional": true
},
"@types/node": {
"optional": true
},
"@types/react": {
"optional": true
}
}
},
"node_modules/react-dnd-html5-backend": {
"version": "14.0.2",
"resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.0.2.tgz",
"integrity": "sha512-QgN6rYrOm4UUj6tIvN8ovImu6uP48xBXF2rzVsp6tvj6d5XQ7OjHI4SJ/ZgGobOneRAU3WCX4f8DGCYx0tuhlw==",
"dependencies": {
"dnd-core": "14.0.1"
}
},
"node_modules/react-dom": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@ -24174,6 +24238,21 @@
}
}
},
"@react-dnd/asap": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz",
"integrity": "sha512-0XhqJSc6pPoNnf8DhdsPHtUhRzZALVzYMTzRwV4VI6DJNJ/5xxfL9OQUwb8IH5/2x7lSf7nAZrnzUD+16VyOVQ=="
},
"@react-dnd/invariant": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-2.0.0.tgz",
"integrity": "sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw=="
},
"@react-dnd/shallowequal": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz",
"integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg=="
},
"@react-icons/all-files": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/@react-icons/all-files/-/all-files-4.1.0.tgz",
@ -27883,6 +27962,16 @@
"path-type": "^4.0.0"
}
},
"dnd-core": {
"version": "14.0.1",
"resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.1.tgz",
"integrity": "sha512-+PVS2VPTgKFPYWo3vAFEA8WPbTf7/xo43TifH9G8S1KqnrQu0o77A3unrF5yOugy4mIz7K5wAVFHUcha7wsz6A==",
"requires": {
"@react-dnd/asap": "^4.0.0",
"@react-dnd/invariant": "^2.0.0",
"redux": "^4.1.1"
}
},
"dns-equal": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@ -35798,6 +35887,26 @@
}
}
},
"react-dnd": {
"version": "14.0.4",
"resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.4.tgz",
"integrity": "sha512-AFJJXzUIWp5WAhgvI85ESkDCawM0lhoVvfo/lrseLXwFdH3kEO3v8I2C81QPqBW2UEyJBIPStOhPMGYGFtq/bg==",
"requires": {
"@react-dnd/invariant": "^2.0.0",
"@react-dnd/shallowequal": "^2.0.0",
"dnd-core": "14.0.1",
"fast-deep-equal": "^3.1.3",
"hoist-non-react-statics": "^3.3.2"
}
},
"react-dnd-html5-backend": {
"version": "14.0.2",
"resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.0.2.tgz",
"integrity": "sha512-QgN6rYrOm4UUj6tIvN8ovImu6uP48xBXF2rzVsp6tvj6d5XQ7OjHI4SJ/ZgGobOneRAU3WCX4f8DGCYx0tuhlw==",
"requires": {
"dnd-core": "14.0.1"
}
},
"react-dom": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",

2
ui/package.json
View File

@ -21,6 +21,8 @@
"ra-i18n-polyglot": "^3.18.3",
"react": "^17.0.2",
"react-admin": "^3.18.3",
"react-dnd": "^14.0.4",
"react-dnd-html5-backend": "^14.0.2",
"react-dom": "^17.0.2",
"react-drag-listview": "^0.1.8",
"react-ga": "^3.3.0",

22
ui/src/album/AlbumGridView.js
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={

31
ui/src/album/AlbumTableView.js
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>
)
}

25
ui/src/artist/ArtistList.js
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>
)
}

103
ui/src/common/SongDatagrid.js
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)}

6
ui/src/dataProvider/wrapperDataProvider.js
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

24
ui/src/layout/Layout.js
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>
)
}

72
ui/src/layout/PlaylistsSubMenu.js
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 = []