Add tracks to playlist

model/playlist.go

@@ -19,6 +19,8 @@ type Playlist struct {
 	UpdatedAt time.Time  `json:"updatedAt"`
 }
 
+type Playlists []Playlist
+
 type PlaylistRepository interface {
 	CountAll(options ...QueryOptions) (int64, error)
 	Exists(id string) (bool, error)
@@ -26,18 +28,20 @@ type PlaylistRepository interface {
 	Get(id string) (*Playlist, error)
 	GetAll(options ...QueryOptions) (Playlists, error)
 	Delete(id string) error
-	Tracks(playlistId string) PlaylistTracksRepository
+	Tracks(playlistId string) PlaylistTrackRepository
 }
 
-type PlaylistTracks struct {
+type PlaylistTrack struct {
 	ID          string `json:"id"          orm:"column(id)"`
 	MediaFileID string `json:"mediaFileId" orm:"column(media_file_id)"`
+	PlaylistID  string `json:"playlistId" orm:"column(playlist_id)"`
 	MediaFile
 }
 
-type PlaylistTracksRepository interface {
-	rest.Repository
-	//rest.Persistable
-}
+type PlaylistTracks []PlaylistTrack
 
-type Playlists []Playlist
+type PlaylistTrackRepository interface {
+	rest.Repository
+	Add(mediaFileIds []string) error
+	Update(mediaFileIds []string) error
+}

persistence/playlist_repository.go

@@ -72,63 +72,17 @@ func (r *playlistRepository) Get(id string) (*model.Playlist, error) {
 
 func (r *playlistRepository) GetAll(options ...model.QueryOptions) (model.Playlists, error) {
 	sel := r.newSelect(options...).Columns("*")
-	var res model.Playlists
+	res := model.Playlists{}
 	err := r.queryAll(sel, &res)
 	return res, err
 }
 
 func (r *playlistRepository) updateTracks(id string, tracks model.MediaFiles) error {
-	// Remove old tracks
-	del := Delete("playlist_tracks").Where(Eq{"playlist_id": id})
-	_, err := r.executeSQL(del)
-	if err != nil {
-		return err
+	ids := make([]string, len(tracks))
+	for i := range tracks {
+		ids[i] = tracks[i].ID
 	}
-
-	// Break the track list in chunks to avoid hitting SQLITE_MAX_FUNCTION_ARG limit
-	numTracks := len(tracks)
-	const chunkSize = 50
-	var chunks [][]model.MediaFile
-	for i := 0; i < numTracks; i += chunkSize {
-		end := i + chunkSize
-		if end > numTracks {
-			end = numTracks
-		}
-
-		chunks = append(chunks, tracks[i:end])
-	}
-
-	// Add new tracks, chunk by chunk
-	pos := 0
-	for i := range chunks {
-		ins := Insert("playlist_tracks").Columns("playlist_id", "media_file_id", "id")
-		for _, t := range chunks[i] {
-			ins = ins.Values(id, t.ID, pos)
-			pos++
-		}
-		_, err = r.executeSQL(ins)
-		if err != nil {
-			return err
-		}
-	}
-
-	// Get total playlist duration and count
-	statsSql := Select("sum(duration) as duration", "count(*) as count").From("media_file").
-		Join("playlist_tracks f on f.media_file_id = media_file.id").
-		Where(Eq{"playlist_id": id})
-	var res struct{ Duration, Count float32 }
-	err = r.queryOne(statsSql, &res)
-	if err != nil {
-		return err
-	}
-
-	// Update total playlist duration and count
-	upd := Update(r.tableName).
-		Set("duration", res.Duration).
-		Set("song_count", res.Count).
-		Where(Eq{"id": id})
-	_, err = r.executeSQL(upd)
-	return err
+	return r.Tracks(id).Update(ids)
 }
 
 func (r *playlistRepository) loadTracks(pls *model.Playlist) (err error) {

persistence/playlist_track_repository.go

@@ -0,0 +1,146 @@
+package persistence
+
+import (
+	. "github.com/Masterminds/squirrel"
+	"github.com/deluan/navidrome/log"
+	"github.com/deluan/navidrome/model"
+	"github.com/deluan/rest"
+)
+
+type playlistTrackRepository struct {
+	sqlRepository
+	sqlRestful
+	playlistId string
+}
+
+func (r *playlistRepository) Tracks(playlistId string) model.PlaylistTrackRepository {
+	p := &playlistTrackRepository{}
+	p.playlistId = playlistId
+	p.ctx = r.ctx
+	p.ormer = r.ormer
+	p.tableName = "playlist_tracks"
+	p.sortMappings = map[string]string{
+		"id": "playlist_tracks.id",
+	}
+	return p
+}
+
+func (r *playlistTrackRepository) Count(options ...rest.QueryOptions) (int64, error) {
+	return r.count(Select().Where(Eq{"playlist_id": r.playlistId}), r.parseRestOptions(options...))
+}
+
+func (r *playlistTrackRepository) Read(id string) (interface{}, error) {
+	sel := r.newSelect().
+		LeftJoin("annotation on ("+
+			"annotation.item_id = media_file_id"+
+			" AND annotation.item_type = 'media_file'"+
+			" AND annotation.user_id = '"+userId(r.ctx)+"')").
+		Columns("starred", "starred_at", "play_count", "play_date", "rating", "f.*", "playlist_tracks.*").
+		Join("media_file f on f.id = media_file_id").
+		Where(And{Eq{"playlist_id": r.playlistId}, Eq{"id": id}})
+	var trk model.PlaylistTrack
+	err := r.queryOne(sel, &trk)
+	return &trk, err
+}
+
+func (r *playlistTrackRepository) ReadAll(options ...rest.QueryOptions) (interface{}, error) {
+	sel := r.newSelect(r.parseRestOptions(options...)).
+		LeftJoin("annotation on ("+
+			"annotation.item_id = media_file_id"+
+			" AND annotation.item_type = 'media_file'"+
+			" AND annotation.user_id = '"+userId(r.ctx)+"')").
+		Columns("starred", "starred_at", "play_count", "play_date", "rating", "f.*", "playlist_tracks.*").
+		Join("media_file f on f.id = media_file_id").
+		Where(Eq{"playlist_id": r.playlistId})
+	res := model.PlaylistTracks{}
+	err := r.queryAll(sel, &res)
+	return res, err
+}
+
+func (r *playlistTrackRepository) EntityName() string {
+	return "playlist_tracks"
+}
+
+func (r *playlistTrackRepository) NewInstance() interface{} {
+	return &model.PlaylistTrack{}
+}
+
+func (r *playlistTrackRepository) Add(mediaFileIds []string) error {
+	log.Debug(r.ctx, "Adding songs to playlist", "playlistId", r.playlistId, "mediaFileIds", mediaFileIds)
+
+	// Get all current tracks
+	all := r.newSelect().Columns("media_file_id").Where(Eq{"playlist_id": r.playlistId}).OrderBy("id")
+	var tracks model.PlaylistTracks
+	err := r.queryAll(all, &tracks)
+	if err != nil {
+		log.Error("Error querying current tracks from playlist", "playlistId", r.playlistId, err)
+		return err
+	}
+	ids := make([]string, len(tracks))
+	for i := range tracks {
+		ids[i] = tracks[i].MediaFileID
+	}
+
+	// Append new tracks
+	ids = append(ids, mediaFileIds...)
+
+	// Update tracks and playlist
+	return r.Update(ids)
+}
+
+func (r *playlistTrackRepository) Update(mediaFileIds []string) error {
+	// Remove old tracks
+	del := Delete(r.tableName).Where(Eq{"playlist_id": r.playlistId})
+	_, err := r.executeSQL(del)
+	if err != nil {
+		return err
+	}
+
+	// Break the track list in chunks to avoid hitting SQLITE_MAX_FUNCTION_ARG limit
+	numTracks := len(mediaFileIds)
+	const chunkSize = 50
+	var chunks [][]string
+	for i := 0; i < numTracks; i += chunkSize {
+		end := i + chunkSize
+		if end > numTracks {
+			end = numTracks
+		}
+
+		chunks = append(chunks, mediaFileIds[i:end])
+	}
+
+	// Add new tracks, chunk by chunk
+	pos := 0
+	for i := range chunks {
+		ins := Insert(r.tableName).Columns("playlist_id", "media_file_id", "id")
+		for _, t := range chunks[i] {
+			ins = ins.Values(r.playlistId, t, pos)
+			pos++
+		}
+		_, err = r.executeSQL(ins)
+		if err != nil {
+			return err
+		}
+	}
+
+	// Get total playlist duration and count
+	statsSql := Select("sum(duration) as duration", "count(*) as count").From("media_file").
+		Join("playlist_tracks f on f.media_file_id = media_file.id").
+		Where(Eq{"playlist_id": r.playlistId})
+	var res struct{ Duration, Count float32 }
+	err = r.queryOne(statsSql, &res)
+	if err != nil {
+		return err
+	}
+
+	// Update playlist's total duration and count
+	upd := Update("playlist").
+		Set("duration", res.Duration).
+		Set("song_count", res.Count).
+		Where(Eq{"id": r.playlistId})
+	_, err = r.executeSQL(upd)
+	return err
+}
+
+var _ model.PlaylistTrackRepository = (*playlistTrackRepository)(nil)
+var _ model.ResourceRepository = (*playlistTrackRepository)(nil)

persistence/playlist_tracks_repository.go

@@ -1,68 +0,0 @@
-package persistence
-
-import (
-	. "github.com/Masterminds/squirrel"
-	"github.com/deluan/navidrome/model"
-	"github.com/deluan/rest"
-)
-
-type playlistTracksRepository struct {
-	sqlRepository
-	sqlRestful
-	playlistId string
-}
-
-func (r *playlistRepository) Tracks(playlistId string) model.PlaylistTracksRepository {
-	p := &playlistTracksRepository{}
-	p.playlistId = playlistId
-	p.ctx = r.ctx
-	p.ormer = r.ormer
-	p.tableName = "playlist_tracks"
-	p.sortMappings = map[string]string{
-		"id": "playlist_tracks.id",
-	}
-	return p
-}
-
-func (r *playlistTracksRepository) Count(options ...rest.QueryOptions) (int64, error) {
-	return r.count(Select().Where(Eq{"playlist_id": r.playlistId}), r.parseRestOptions(options...))
-}
-
-func (r *playlistTracksRepository) Read(id string) (interface{}, error) {
-	sel := r.newSelect().
-		LeftJoin("annotation on ("+
-			"annotation.item_id = media_file_id"+
-			" AND annotation.item_type = 'media_file'"+
-			" AND annotation.user_id = '"+userId(r.ctx)+"')").
-		Columns("starred", "starred_at", "play_count", "play_date", "rating", "f.*", "playlist_tracks.*").
-		Join("media_file f on f.id = media_file_id").
-		Where(And{Eq{"playlist_id": r.playlistId}, Eq{"id": id}})
-	var trk model.PlaylistTracks
-	err := r.queryOne(sel, &trk)
-	return &trk, err
-}
-
-func (r *playlistTracksRepository) ReadAll(options ...rest.QueryOptions) (interface{}, error) {
-	sel := r.newSelect(r.parseRestOptions(options...)).
-		LeftJoin("annotation on ("+
-			"annotation.item_id = media_file_id"+
-			" AND annotation.item_type = 'media_file'"+
-			" AND annotation.user_id = '"+userId(r.ctx)+"')").
-		Columns("starred", "starred_at", "play_count", "play_date", "rating", "f.*", "playlist_tracks.*").
-		Join("media_file f on f.id = media_file_id").
-		Where(Eq{"playlist_id": r.playlistId})
-	var res []model.PlaylistTracks
-	err := r.queryAll(sel, &res)
-	return res, err
-}
-
-func (r *playlistTracksRepository) EntityName() string {
-	return "playlist_tracks"
-}
-
-func (r *playlistTracksRepository) NewInstance() interface{} {
-	return &model.PlaylistTracks{}
-}
-
-var _ model.PlaylistTracksRepository = (*playlistTracksRepository)(nil)
-var _ model.ResourceRepository = (*playlistTracksRepository)(nil)

server/app/app.go

@@ -51,7 +51,7 @@ func (app *Router) routes(path string) http.Handler {
 		app.R(r, "/transcoding", model.Transcoding{}, conf.Server.EnableTranscodingConfig)
 		app.RX(r, "/translation", newTranslationRepository, false)
 
-		app.addPlaylistTracksRoute(r)
+		app.addPlaylistTrackRoute(r)
 
 		// Keepalive endpoint to be used to keep the session valid (ex: while playing songs)
 		r.Get("/keepalive/*", func(w http.ResponseWriter, r *http.Request) { _, _ = w.Write([]byte(`{"response":"ok"}`)) })
@@ -90,7 +90,7 @@ func (app *Router) RX(r chi.Router, pathPrefix string, constructor rest.Reposito
 
 type restHandler = func(rest.RepositoryConstructor, ...rest.Logger) http.HandlerFunc
 
-func (app *Router) addPlaylistTracksRoute(r chi.Router) {
+func (app *Router) addPlaylistTrackRoute(r chi.Router) {
 	// Add a middleware to capture the playlisId
 	wrapper := func(f restHandler) http.HandlerFunc {
 		return func(res http.ResponseWriter, req *http.Request) {
@@ -110,6 +110,9 @@ func (app *Router) addPlaylistTracksRoute(r chi.Router) {
 			r.Use(UrlParams)
 			r.Get("/", wrapper(rest.Get))
 		})
+		r.With(UrlParams).Post("/", func(w http.ResponseWriter, r *http.Request) {
+			addToPlaylist(app.ds)(w, r)
+		})
 	})
 }
 

server/app/playlists.go

@@ -0,0 +1,38 @@
+package app
+
+import (
+	"encoding/json"
+	"fmt"
+	"net/http"
+
+	"github.com/deluan/navidrome/model"
+	"github.com/deluan/navidrome/utils"
+)
+
+type addTracksPayload struct {
+	Ids []string `json:"ids"`
+}
+
+func addToPlaylist(ds model.DataStore) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		playlistId := utils.ParamString(r, ":playlistId")
+		tracksRepo := ds.Playlist(r.Context()).Tracks(playlistId)
+		var payload addTracksPayload
+		err := json.NewDecoder(r.Body).Decode(&payload)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusBadRequest)
+			return
+		}
+		err = tracksRepo.Add(payload.Ids)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusBadRequest)
+			return
+		}
+
+		// Must return an object with an ID, to satisfy ReactAdmin `create` call
+		_, err = w.Write([]byte(fmt.Sprintf(`{"id":"%s"}`, playlistId)))
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusBadRequest)
+		}
+	}
+}

ui/src/common/SelectPlaylistDialog.js

@@ -0,0 +1,77 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useGetList, useTranslate } from 'react-admin'
+import { makeStyles } from '@material-ui/core/styles'
+import Avatar from '@material-ui/core/Avatar'
+import List from '@material-ui/core/List'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemAvatar from '@material-ui/core/ListItemAvatar'
+import ListItemText from '@material-ui/core/ListItemText'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import Dialog from '@material-ui/core/Dialog'
+import { blue } from '@material-ui/core/colors'
+import PlaylistIcon from '../icons/Playlist'
+
+const useStyles = makeStyles({
+  avatar: {
+    backgroundColor: blue[100],
+    color: blue[600],
+  },
+})
+
+function SelectPlaylistDialog(props) {
+  const classes = useStyles()
+  const translate = useTranslate()
+  const { onClose, selectedValue, open } = props
+  const { ids, data, loaded } = useGetList(
+    'playlist',
+    { page: 1, perPage: -1 },
+    { field: '', order: '' },
+    {}
+  )
+
+  if (!loaded) {
+    return <div />
+  }
+
+  const handleClose = () => {
+    onClose(selectedValue)
+  }
+
+  const handleListItemClick = (value) => {
+    onClose(value)
+  }
+
+  return (
+    <Dialog
+      onClose={handleClose}
+      aria-labelledby="select-playlist-dialog-title"
+      open={open}
+      scroll={'paper'}
+    >
+      <DialogTitle id="select-playlist-dialog-title">
+        {translate('resources.playlist.actions.selectPlaylist')}
+      </DialogTitle>
+      <List>
+        {ids.map((id) => (
+          <ListItem button onClick={() => handleListItemClick(id)} key={id}>
+            <ListItemAvatar>
+              <Avatar className={classes.avatar}>
+                <PlaylistIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary={data[id].name} />
+          </ListItem>
+        ))}
+      </List>
+    </Dialog>
+  )
+}
+
+SelectPlaylistDialog.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  open: PropTypes.bool.isRequired,
+  selectedValue: PropTypes.string.isRequired,
+}
+
+export default SelectPlaylistDialog

ui/src/common/index.js

@@ -11,6 +11,7 @@ import SizeField from './SizeField'
 import DocLink from './DocLink'
 import List from './List'
 import SongDatagridRow from './SongDatagridRow'
+import SelectPlaylistDialog from './SelectPlaylistDialog'
 
 export {
   Title,
@@ -28,4 +29,5 @@ export {
   formatRange,
   ArtistLinkField,
   artistLink,
+  SelectPlaylistDialog,
 }

ui/src/dataProvider/wrapperDataProvider.js

@@ -6,7 +6,6 @@ const restUrl = '/app/api'
 const dataProvider = jsonServerProvider(restUrl, httpClient)
 
 const mapResource = (resource, params) => {
-  console.log('R: ', resource, 'P: ', params)
   switch (resource) {
     case 'albumSong':
       return ['song', params]

ui/src/i18n/en.json

@@ -22,6 +22,7 @@
             },
             "actions": {
                 "addToQueue": "Play Later",
+                "addToPlaylist": "Add to Playlist",
                 "playNow": "Play Now"
             }
         },
@@ -63,6 +64,9 @@
                 "public": "Public",
                 "updatedAt":"Updated at",
                 "createdAt": "Created at"
+            },
+            "actions": {
+                "selectPlaylist": "Add songs to playlist:"
             }
         },
         "user": {

ui/src/playlist/PlaylistSongs.js

@@ -54,13 +54,17 @@ const PlaylistSongs = (props) => {
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   // const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   const controllerProps = useListController(props)
-  const { bulkActionButtons, expand, className } = props
-  const { data, ids, version } = controllerProps
+  const { bulkActionButtons, expand, className, playlistId } = props
+  const { data, ids, version, loaded } = controllerProps
 
   const anySong = data[ids[0]]
-  const showPlaceholder = !anySong
+  const showPlaceholder = !anySong || anySong.playlistId !== playlistId
   const hasBulkActions = props.bulkActionButtons !== false
 
+  if (loaded && ids.length === 0) {
+    return <div />
+  }
+
   return (
     <>
       <ListToolbar

ui/src/song/AddToPlaylistButton.js

@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  useTranslate,
+  useUnselectAll,
+  useDataProvider,
+  useNotify,
+} from 'react-admin'
+import SelectPlaylistDialog from '../common/SelectPlaylistDialog'
+import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd'
+
+const AddToPlaylistButton = ({ resource, selectedIds }) => {
+  const [open, setOpen] = useState(false)
+  const [selectedValue, setSelectedValue] = useState('')
+  const translate = useTranslate()
+  const unselectAll = useUnselectAll()
+  const notify = useNotify()
+  const dataProvider = useDataProvider()
+
+  const handleClickOpen = () => {
+    setOpen(true)
+  }
+
+  const handleClose = (value) => {
+    if (value !== '') {
+      dataProvider
+        .create('playlistTrack', {
+          data: { ids: selectedIds },
+          filter: { playlist_id: value },
+        })
+        .then(() => {
+          notify(`Added ${selectedIds.length} songs to playlist`)
+        })
+        .catch(() => {
+          notify('ra.page.error', 'warning')
+        })
+    }
+    setOpen(false)
+    setSelectedValue(value)
+    unselectAll(resource)
+  }
+
+  return (
+    <>
+      <Button
+        color="secondary"
+        onClick={handleClickOpen}
+        label={translate('resources.song.actions.addToPlaylist')}
+      >
+        <PlaylistAddIcon />
+      </Button>
+      <SelectPlaylistDialog
+        selectedValue={selectedValue}
+        open={open}
+        onClose={handleClose}
+      />
+    </>
+  )
+}
+
+export default AddToPlaylistButton

ui/src/song/SongBulkActions.js

@@ -1,10 +1,12 @@
 import React, { Fragment } from 'react'
 import AddToQueueButton from './AddToQueueButton'
+import AddToPlaylistButton from './AddToPlaylistButton'
 
 export const SongBulkActions = (props) => {
   return (
     <Fragment>
       <AddToQueueButton {...props} />
+      <AddToPlaylistButton {...props} />
     </Fragment>
   )
 }