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,22 +58,27 @@ const AlbumList = (props) => {
   const { width } = props
   const albumView = useSelector((state) => state.albumView)
   return (
-    <List
+    <>
-      {...props}
+      <List
-      exporter={false}
+        {...props}
-      bulkActionButtons={false}
+        exporter={false}
-      actions={<AlbumListActions />}
+        bulkActionButtons={false}
-      sort={{ field: 'created_at', order: 'DESC' }}
+        actions={<AlbumListActions />}
-      filters={<AlbumFilter />}
+        sort={{ field: 'created_at', order: 'DESC' }}
-      perPage={getPerPage(width)}
+        filters={<AlbumFilter />}
-      pagination={<Pagination rowsPerPageOptions={getPerPageOptions(width)} />}
+        perPage={getPerPage(width)}
-    >
+        pagination={
-      {albumView.mode === ALBUM_MODE_LIST ? (
+          <Pagination rowsPerPageOptions={getPerPageOptions(width)} />
-        <AlbumListView {...props} />
+        }
-      ) : (
+      >
-        <AlbumGridView {...props} />
+        {albumView.mode === ALBUM_MODE_LIST ? (
-      )}
+          <AlbumListView {...props} />
-    </List>
+        ) : (
+          <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,58 +49,61 @@ const SongList = (props) => {
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   return (
-    <List
+    <>
-      {...props}
+      <List
-      sort={{ field: 'title', order: 'ASC' }}
+        {...props}
-      exporter={false}
+        sort={{ field: 'title', order: 'ASC' }}
-      bulkActionButtons={<SongBulkActions />}
+        exporter={false}
-      filters={<SongFilter />}
+        bulkActionButtons={<SongBulkActions />}
-      perPage={isXsmall ? 50 : 15}
+        filters={<SongFilter />}
-    >
+        perPage={isXsmall ? 50 : 15}
-      {isXsmall ? (
+      >
-        <SimpleList
+        {isXsmall ? (
-          primaryText={(r) => r.title}
+          <SimpleList
-          secondaryText={(r) => r.artist}
+            primaryText={(r) => r.title}
-          tertiaryText={(r) => (
+            secondaryText={(r) => r.artist}
-            <>
+            tertiaryText={(r) => (
-              <DurationField record={r} source={'duration'} />
+              <>
-              &nbsp;&nbsp;&nbsp;
+                <DurationField record={r} source={'duration'} />
-            </>
+                &nbsp;&nbsp;&nbsp;
-          )}
+              </>
-          linkType={(id, basePath, record) => dispatch(setTrack(record))}
+            )}
-          rightIcon={(r) => <SongContextMenu record={r} visible={true} />}
+            linkType={(id, basePath, record) => dispatch(setTrack(record))}
-        />
+            rightIcon={(r) => <SongContextMenu record={r} visible={true} />}
-      ) : (
+          />
-        <SongDatagrid
+        ) : (
-          expand={<SongDetails />}
+          <SongDatagrid
-          rowClick={(id, basePath, record) => dispatch(setTrack(record))}
+            expand={<SongDetails />}
-        >
+            rowClick={(id, basePath, record) => dispatch(setTrack(record))}
-          <TextField source="title" />
+          >
-          {isDesktop && <AlbumLinkField source="album" />}
+            <TextField source="title" />
-          <TextField source="artist" />
+            {isDesktop && <AlbumLinkField source="album" />}
-          {isDesktop && <NumberField source="trackNumber" />}
+            <TextField source="artist" />
-          {isDesktop && <NumberField source="playCount" />}
+            {isDesktop && <NumberField source="trackNumber" />}
-          {isDesktop && (
+            {isDesktop && <NumberField source="playCount" />}
-            <FunctionField source="year" render={(r) => r.year || ''} />
+            {isDesktop && (
-          )}
+              <FunctionField source="year" render={(r) => r.year || ''} />
-          <DurationField source="duration" />
+            )}
-          {isDesktop ? (
+            <DurationField source="duration" />
-            <SongContextMenu
+            {isDesktop ? (
-              source={'starred'}
+              <SongContextMenu
-              label={
+                source={'starred'}
-                <StarBorderIcon
+                label={
-                  fontSize={'small'}
+                  <StarBorderIcon
-                  className={classes.columnIcon}
+                    fontSize={'small'}
-                />
+                    className={classes.columnIcon}
-              }
+                  />
-              sortBy={'starred DESC, starredAt DESC'}
+                }
-            />
+                sortBy={'starred DESC, starredAt DESC'}
-          ) : (
+              />
-            <SongContextMenu showStar={false} />
+            ) : (
-          )}
+              <SongContextMenu showStar={false} />
-        </SongDatagrid>
+            )}
-      )}
+          </SongDatagrid>
-    </List>
+        )}
+      </List>
+      <AddToPlaylistDialog />,
+    </>
   )
 }