Added individual AddToPlaylistDialogs to each list view

ui/src/App.js

@@ -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>

ui/src/album/AlbumList.js

@@ -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,6 +58,7 @@ const AlbumList = (props) => {
   const { width } = props
   const albumView = useSelector((state) => state.albumView)
   return (
+    <>
       <List
         {...props}
         exporter={false}
@@ -65,7 +67,9 @@ const AlbumList = (props) => {
         sort={{ field: 'created_at', order: 'DESC' }}
         filters={<AlbumFilter />}
         perPage={getPerPage(width)}
-      pagination={<Pagination rowsPerPageOptions={getPerPageOptions(width)} />}
+        pagination={
+          <Pagination rowsPerPageOptions={getPerPageOptions(width)} />
+        }
       >
         {albumView.mode === ALBUM_MODE_LIST ? (
           <AlbumListView {...props} />
@@ -73,6 +77,8 @@ const AlbumList = (props) => {
           <AlbumGridView {...props} />
         )}
       </List>
+      <AddToPlaylistDialog />,
+    </>
   )
 }
 

ui/src/album/AlbumSongs.js

@@ -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 />,
     </>
   )
 }

ui/src/playlist/PlaylistSongs.js

@@ -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 />,
     </>
   )
 }

ui/src/song/SongList.js

@@ -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,6 +49,7 @@ 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' }}
@@ -100,6 +102,8 @@ const SongList = (props) => {
           </SongDatagrid>
         )}
       </List>
+      <AddToPlaylistDialog />,
+    </>
   )
 }