Add music folder filters in auto playlist

3 years ago · 4cae9ecc0f
3 changed files with 130 additions and 64 deletions
--- a/src/components/player/NowPlayingMiniView.tsx
+++ b/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') {
-      dispatch(setPlayQueue({ entries: cleanedSongs }));
-      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) {
+    if (cleanedSongs.length > 0) {
+      if (action === 'play') {
+        dispatch(setPlayQueue({ entries: cleanedSongs }));
        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(
-        'info',
-        `Added ${cleanedSongs.length} ${difference !== 0 ? `(-${difference} invalid)` : ''} song(s)`
-      );
+      dispatch(fixPlayer2Index());
+      setIsLoadingRandom(false);
+      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"
--- a/src/components/player/NowPlayingView.tsx
+++ b/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') {
-      dispatch(setPlayQueue({ entries: cleanedSongs }));
-      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) {
+    if (cleanedSongs.length > 0) {
+      if (action === 'play') {
+        dispatch(setPlayQueue({ entries: cleanedSongs }));
        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(
-        'info',
-        `Added ${cleanedSongs.length} ${difference !== 0 ? `(-${difference} invalid)` : ''} song(s)`
-      );
+      dispatch(fixPlayer2Index());
+      setIsLoadingRandom(false);
+      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={pickerContainerRef}>
+                      <StyledInputPickerContainer ref={genrePickerContainerRef}>
+                        <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"
--- a/src/components/settings/ConfigPanels/ServerConfig.tsx
+++ b/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