Add music folder filters in auto playlist

src/components/player/NowPlayingMiniView.tsx

@@ -41,7 +41,7 @@ import {
 } from '../shared/styled';
 import { MiniViewContainer } from './styled';
 import { errorMessages, getCurrentEntryList, isFailedResponse } from '../../shared/utils';
-import { getGenres, getRandomSongs, star, unstar } from '../../api/api';
+import { getGenres, getMusicFolders, getRandomSongs, star, unstar } from '../../api/api';
 import {
   AutoPlaylistButton,
   ClearQueueButton,
@@ -58,15 +58,18 @@ const NowPlayingMiniView = () => {
   const playQueue = useAppSelector((state) => state.playQueue);
   const multiSelect = useAppSelector((state) => state.multiSelect);
   const config = useAppSelector((state) => state.config);
+  const folder = useAppSelector((state) => state.folder);
   const [autoPlaylistTrackCount, setRandomPlaylistTrackCount] = useState(
     Number(settings.getSync('randomPlaylistTrackCount'))
   );
-  const pickerContainerRef = useRef(null);
+  const genrePickerContainerRef = useRef(null);
+  const musicFolderPickerContainerRef = useRef(null);
   const autoPlaylistTriggerRef = useRef<any>();
   const [autoPlaylistFromYear, setRandomPlaylistFromYear] = useState(0);
   const [autoPlaylistToYear, setRandomPlaylistToYear] = useState(0);
   const [randomPlaylistGenre, setRandomPlaylistGenre] = useState('');
   const [isLoadingRandom, setIsLoadingRandom] = useState(false);
+  const [musicFolder, setMusicFolder] = useState(folder.musicFolder);
 
   const { data: genres }: any = useQuery(['genreList'], async () => {
     const res = await getGenres();
@@ -80,6 +83,8 @@ const NowPlayingMiniView = () => {
     });
   });
 
+  const { data: musicFolders } = useQuery(['musicFolders'], getMusicFolders);
+
   useHotkeys(
     'del',
     () => {
@@ -174,6 +179,7 @@ const NowPlayingMiniView = () => {
       fromYear: autoPlaylistFromYear !== 0 ? autoPlaylistFromYear : undefined,
       toYear: autoPlaylistToYear !== 0 ? autoPlaylistToYear : undefined,
       genre: randomPlaylistGenre,
+      musicFolderId: musicFolder,
     });
 
     if (isFailedResponse(res)) {
@@ -188,37 +194,45 @@ const NowPlayingMiniView = () => {
 
     const difference = res.song.length - cleanedSongs.length;
 
-    if (action === 'play') {
+    if (cleanedSongs.length > 0) {
-      dispatch(setPlayQueue({ entries: cleanedSongs }));
+      if (action === 'play') {
-      dispatch(setStatus('PLAYING'));
+        dispatch(setPlayQueue({ entries: cleanedSongs }));
-      notifyToast(
-        'info',
-        `Playing ${cleanedSongs.length} ${
-          difference !== 0 ? `(-${difference} invalid)` : ''
-        } song(s)`
-      );
-    } else if (action === 'addLater') {
-      dispatch(appendPlayQueue({ entries: cleanedSongs, type: 'later' }));
-      if (playQueue.entry.length < 1) {
-        dispatch(setStatus('PLAYING'));
-      }
-      notifyToast(
-        'info',
-        `Added ${cleanedSongs.length} ${difference !== 0 ? `(-${difference} invalid)` : ''} song(s)`
-      );
-    } else {
-      dispatch(appendPlayQueue({ entries: cleanedSongs, type: 'next' }));
-      if (playQueue.entry.length < 1) {
         dispatch(setStatus('PLAYING'));
+        notifyToast(
+          'info',
+          `Playing ${cleanedSongs.length} ${
+            difference !== 0 ? `(-${difference} invalid)` : ''
+          } song(s)`
+        );
+      } else if (action === 'addLater') {
+        dispatch(appendPlayQueue({ entries: cleanedSongs, type: 'later' }));
+        if (playQueue.entry.length < 1) {
+          dispatch(setStatus('PLAYING'));
+        }
+        notifyToast(
+          'info',
+          `Added ${cleanedSongs.length} ${
+            difference !== 0 ? `(-${difference} invalid)` : ''
+          } song(s)`
+        );
+      } else {
+        dispatch(appendPlayQueue({ entries: cleanedSongs, type: 'next' }));
+        if (playQueue.entry.length < 1) {
+          dispatch(setStatus('PLAYING'));
+        }
+        notifyToast(
+          'info',
+          `Added ${cleanedSongs.length} ${
+            difference !== 0 ? `(-${difference} invalid)` : ''
+          } song(s)`
+        );
       }
-      notifyToast(
+      dispatch(fixPlayer2Index());
-        'info',
+      setIsLoadingRandom(false);
-        `Added ${cleanedSongs.length} ${difference !== 0 ? `(-${difference} invalid)` : ''} song(s)`
+      return autoPlaylistTriggerRef.current.close();
-      );
     }
-    dispatch(fixPlayer2Index());
     setIsLoadingRandom(false);
-    return autoPlaylistTriggerRef.current.close();
+    return notifyToast('warning', `No songs found, adjust your filters`);
   };
 
   const handleRowFavorite = async (rowData: any) => {
@@ -319,10 +333,10 @@ const NowPlayingMiniView = () => {
                             </FlexboxGrid>
                             <br />
                             <ControlLabel>Genre</ControlLabel>
-                            <StyledInputPickerContainer ref={pickerContainerRef}>
+                            <StyledInputPickerContainer ref={genrePickerContainerRef}>
                               <StyledInputPicker
                                 style={{ width: '100%' }}
-                                container={() => pickerContainerRef.current}
+                                container={() => genrePickerContainerRef.current}
                                 data={genres}
                                 value={randomPlaylistGenre}
                                 virtualized
@@ -330,6 +344,22 @@ const NowPlayingMiniView = () => {
                               />
                             </StyledInputPickerContainer>
                             <br />
+                            <StyledInputPickerContainer ref={musicFolderPickerContainerRef}>
+                              <ControlLabel>Music folder</ControlLabel>
+                              <br />
+                              <StyledInputPicker
+                                style={{ width: '100%' }}
+                                container={() => musicFolderPickerContainerRef.current}
+                                data={musicFolders}
+                                defaultValue={musicFolder}
+                                valueKey="id"
+                                labelKey="name"
+                                onChange={(e: any) => {
+                                  setMusicFolder(e);
+                                }}
+                              />
+                            </StyledInputPickerContainer>
+                            <br />
                             <ButtonToolbar>
                               <StyledButton
                                 appearance="subtle"

src/components/player/NowPlayingView.tsx

@@ -52,17 +52,19 @@ import {
   StyledPopover,
 } from '../shared/styled';
 import { errorMessages, getCurrentEntryList, isFailedResponse } from '../../shared/utils';
-import { getGenres, getRandomSongs, setRating, star, unstar } from '../../api/api';
+import { getGenres, getMusicFolders, getRandomSongs, setRating, star, unstar } from '../../api/api';
 import { notifyToast } from '../shared/toast';
 
 const NowPlayingView = () => {
   const tableRef = useRef<any>();
-  const pickerContainerRef = useRef(null);
+  const genrePickerContainerRef = useRef(null);
+  const musicFolderPickerContainerRef = useRef(null);
   const autoPlaylistTriggerRef = useRef<any>();
   const dispatch = useAppDispatch();
   const playQueue = useAppSelector((state) => state.playQueue);
   const multiSelect = useAppSelector((state) => state.multiSelect);
   const config = useAppSelector((state) => state.config);
+  const folder = useAppSelector((state) => state.folder);
   const [autoPlaylistTrackCount, setRandomPlaylistTrackCount] = useState(
     Number(settings.getSync('randomPlaylistTrackCount'))
   );
@@ -70,6 +72,9 @@ const NowPlayingView = () => {
   const [autoPlaylistToYear, setRandomPlaylistToYear] = useState(0);
   const [randomPlaylistGenre, setRandomPlaylistGenre] = useState('');
   const [isLoadingRandom, setIsLoadingRandom] = useState(false);
+  const [musicFolder, setMusicFolder] = useState(folder.musicFolder);
+
+  const { data: musicFolders } = useQuery(['musicFolders'], getMusicFolders);
 
   const [searchQuery, setSearchQuery] = useState('');
   const filteredData = useSearchQuery(searchQuery, playQueue.entry, [
@@ -180,6 +185,7 @@ const NowPlayingView = () => {
       fromYear: autoPlaylistFromYear !== 0 ? autoPlaylistFromYear : undefined,
       toYear: autoPlaylistToYear !== 0 ? autoPlaylistToYear : undefined,
       genre: randomPlaylistGenre,
+      musicFolderId: musicFolder,
     });
 
     if (isFailedResponse(res)) {
@@ -194,37 +200,45 @@ const NowPlayingView = () => {
 
     const difference = res.song.length - cleanedSongs.length;
 
-    if (action === 'play') {
+    if (cleanedSongs.length > 0) {
-      dispatch(setPlayQueue({ entries: cleanedSongs }));
+      if (action === 'play') {
-      dispatch(setStatus('PLAYING'));
+        dispatch(setPlayQueue({ entries: cleanedSongs }));
-      notifyToast(
-        'info',
-        `Playing ${cleanedSongs.length} ${
-          difference !== 0 ? `(-${difference} invalid)` : ''
-        } song(s)`
-      );
-    } else if (action === 'addLater') {
-      dispatch(appendPlayQueue({ entries: cleanedSongs, type: 'later' }));
-      if (playQueue.entry.length < 1) {
-        dispatch(setStatus('PLAYING'));
-      }
-      notifyToast(
-        'info',
-        `Added ${cleanedSongs.length} ${difference !== 0 ? `(-${difference} invalid)` : ''} song(s)`
-      );
-    } else {
-      dispatch(appendPlayQueue({ entries: cleanedSongs, type: 'next' }));
-      if (playQueue.entry.length < 1) {
         dispatch(setStatus('PLAYING'));
+        notifyToast(
+          'info',
+          `Playing ${cleanedSongs.length} ${
+            difference !== 0 ? `(-${difference} invalid)` : ''
+          } song(s)`
+        );
+      } else if (action === 'addLater') {
+        dispatch(appendPlayQueue({ entries: cleanedSongs, type: 'later' }));
+        if (playQueue.entry.length < 1) {
+          dispatch(setStatus('PLAYING'));
+        }
+        notifyToast(
+          'info',
+          `Added ${cleanedSongs.length} ${
+            difference !== 0 ? `(-${difference} invalid)` : ''
+          } song(s)`
+        );
+      } else {
+        dispatch(appendPlayQueue({ entries: cleanedSongs, type: 'next' }));
+        if (playQueue.entry.length < 1) {
+          dispatch(setStatus('PLAYING'));
+        }
+        notifyToast(
+          'info',
+          `Added ${cleanedSongs.length} ${
+            difference !== 0 ? `(-${difference} invalid)` : ''
+          } song(s)`
+        );
       }
-      notifyToast(
+      dispatch(fixPlayer2Index());
-        'info',
+      setIsLoadingRandom(false);
-        `Added ${cleanedSongs.length} ${difference !== 0 ? `(-${difference} invalid)` : ''} song(s)`
+      return autoPlaylistTriggerRef.current.close();
-      );
     }
-    dispatch(fixPlayer2Index());
     setIsLoadingRandom(false);
-    return autoPlaylistTriggerRef.current.close();
+    return notifyToast('warning', `No songs found, adjust your filters`);
   };
 
   const handleRowFavorite = async (rowData: any) => {
@@ -323,11 +337,12 @@ const NowPlayingView = () => {
                         </FlexboxGrid.Item>
                       </FlexboxGrid>
                       <br />
-                      <ControlLabel>Genre</ControlLabel>
+                      <StyledInputPickerContainer ref={genrePickerContainerRef}>
-                      <StyledInputPickerContainer ref={pickerContainerRef}>
+                        <ControlLabel>Genre</ControlLabel>
+                        <br />
                         <StyledInputPicker
                           style={{ width: '100%' }}
-                          container={() => pickerContainerRef.current}
+                          container={() => genrePickerContainerRef.current}
                           data={genres}
                           value={randomPlaylistGenre}
                           virtualized
@@ -335,6 +350,22 @@ const NowPlayingView = () => {
                         />
                       </StyledInputPickerContainer>
                       <br />
+                      <StyledInputPickerContainer ref={musicFolderPickerContainerRef}>
+                        <ControlLabel>Music folder</ControlLabel>
+                        <br />
+                        <StyledInputPicker
+                          style={{ width: '100%' }}
+                          container={() => musicFolderPickerContainerRef.current}
+                          data={musicFolders}
+                          defaultValue={musicFolder}
+                          valueKey="id"
+                          labelKey="name"
+                          onChange={(e: any) => {
+                            setMusicFolder(e);
+                          }}
+                        />
+                      </StyledInputPickerContainer>
+                      <br />
                       <ButtonToolbar>
                         <StyledButton
                           appearance="subtle"

src/components/settings/ConfigPanels/ServerConfig.tsx

@@ -16,7 +16,12 @@ const ServerConfig = () => {
 
   return (
     <ConfigPanel header="Server" bordered>
-      <p>Select a music folder (leaving this blank will use all folders).</p>
+      <p>
+        Select a music folder (leaving this blank will use all folders). If no songs are found in
+        the music folder, you may need to rescan your library. If you select a music folder and
+        switch servers, you will need to reset this setting or else an incorrect music folder filter
+        may be applied.
+      </p>
       <br />
       <StyledInputPickerContainer ref={musicFolderPickerContainerRef}>
         <StyledInputPicker