diff --git a/model/album.go b/model/album.go index a889e06a7..8b67d6727 100644 --- a/model/album.go +++ b/model/album.go @@ -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) diff --git a/model/playlist.go b/model/playlist.go index 87c490205..87a60ab9b 100644 --- a/model/playlist.go +++ b/model/playlist.go @@ -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 diff --git a/persistence/playlist_repository.go b/persistence/playlist_repository.go index 91d258142..6a7610265 100644 --- a/persistence/playlist_repository.go +++ b/persistence/playlist_repository.go @@ -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 } } diff --git a/persistence/playlist_track_repository.go b/persistence/playlist_track_repository.go index 6a2054f69..237013e82 100644 --- a/persistence/playlist_track_repository.go +++ b/persistence/playlist_track_repository.go @@ -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) { diff --git a/server/nativeapi/playlists.go b/server/nativeapi/playlists.go index 9c65f5a1a..5288bfb70 100644 --- a/server/nativeapi/playlists.go +++ b/server/nativeapi/playlists.go @@ -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) } diff --git a/ui/package-lock.json b/ui/package-lock.json index 038d08764..a3166b2fb 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -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", diff --git a/ui/package.json b/ui/package.json index 6ae4bc723..573d68425 100644 --- a/ui/package.json +++ b/ui/package.json @@ -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", diff --git a/ui/src/album/AlbumGridView.js b/ui/src/album/AlbumGridView.js index 4807d7bdf..7808f2b9e 100644 --- a/ui/src/album/AlbumGridView.js +++ b/ui/src/album/AlbumGridView.js @@ -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 (
- {album.name} +
+ {record.name} +
) } @@ -127,7 +135,7 @@ const AlbumGridTile = ({ showArtist, record, basePath, ...props }) => { className={classes.link} to={linkToRecord(basePath, record.id, 'show')} > - + { + const { record } = props + const [, dragAlbumRef] = useDrag(() => ({ + type: 'album', + item: { albumIds: [record.id] }, + options: { dropEffect: 'copy' }, + })) + return +} + +const AlbumDatagridBody = (props) => ( + } /> +) + +const AlbumDatagrid = (props) => ( + } /> +) + const AlbumTableView = ({ hasShow, hasEdit, @@ -112,7 +137,7 @@ const AlbumTableView = ({ {...rest} /> ) : ( - + {columns} - + ) } diff --git a/ui/src/artist/ArtistList.js b/ui/src/artist/ArtistList.js index ab03e143d..d919d1996 100644 --- a/ui/src/artist/ArtistList.js +++ b/ui/src/artist/ArtistList.js @@ -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 +} + +const ArtistDatagridBody = (props) => ( + } /> +) + +const ArtistDatagrid = (props) => ( + } /> +) + 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} /> ) : ( - + {columns} { ) } /> - + ) } diff --git a/ui/src/common/SongDatagrid.js b/ui/src/common/SongDatagrid.js index 62cd5367b..4aea81d89 100644 --- a/ui/src/common/SongDatagrid.js +++ b/ui/src/common/SongDatagrid.js @@ -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 ( - - - - - {subtitle.join(': ')} - - - - - - - ) -} + return ( + + + + + {subtitle.join(': ')} + + + + + + + ) + } +) 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) && ( )} { + return httpClient(`${REST_URL}/playlist/${playlistId}/tracks`, { + method: 'POST', + body: JSON.stringify(data), + }).then(({ json }) => ({ data: json })) + }, } export default wrapperDataProvider diff --git a/ui/src/layout/Layout.js b/ui/src/layout/Layout.js index e3f13d25f..0ae30c2e8 100644 --- a/ui/src/layout/Layout.js +++ b/ui/src/layout/Layout.js @@ -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 ( - - - + + + + + ) } diff --git a/ui/src/layout/PlaylistsSubMenu.js b/ui/src/layout/PlaylistsSubMenu.js index 1b02c2e07..e76a9267f 100644 --- a/ui/src/layout/PlaylistsSubMenu.js +++ b/ui/src/layout/PlaylistsSubMenu.js @@ -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 ( + + {pls.name} + + } + 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 ( - - {pls.name} - - } - sidebarIsOpen={sidebarIsOpen} - dense={false} - /> - ) - } + const renderPlaylistMenuItemLink = (pls) => ( + + ) const user = localStorage.getItem('username') const myPlaylists = []