Skip dispatch if filtered songs is empty

- Remove PLAY call when appending
2026-04-29 10:42:40 -04:00 · 2021-11-02 09:55:56 -07:00
parent 9aadf4d604
commit 85a890deb6
8 changed files with 255 additions and 81 deletions
--- a/src/components/card/Card.tsx
+++ b/src/components/card/Card.tsx
@@ -4,7 +4,12 @@ import { useHistory } from 'react-router-dom';
 import cacheImage from '../shared/cacheImage';
 import { getAlbum, getPlaylist, getAllArtistSongs } from '../../api/api';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
-import { appendPlayQueue, fixPlayer2Index, setPlayQueue } from '../../redux/playQueueSlice';
+import {
+  appendPlayQueue,
+  clearPlayQueue,
+  fixPlayer2Index,
+  setPlayQueue,
+} from '../../redux/playQueueSlice';
 import { filterPlayQueue, getPlayedSongsNotification, isCached } from '../../shared/utils';

 import {
@@ -43,7 +48,6 @@ const Card = ({
 }: any) => {
  const history = useHistory();
  const dispatch = useAppDispatch();
-  const playQueue = useAppSelector((state) => state.playQueue);
  const config = useAppSelector((state) => state.config);

  const handleClick = () => {
@@ -58,55 +62,88 @@ const Card = ({
    if (playClick.type === 'playlist') {
      const res = await getPlaylist(playClick.id);
      const songs = filterPlayQueue(config.playback.filters, res.song);
-      dispatch(setPlayQueue({ entries: songs.entries }));
+
+      if (songs.entries.length > 0) {
+        dispatch(setPlayQueue({ entries: songs.entries }));
+        dispatch(setStatus('PLAYING'));
+        dispatch(fixPlayer2Index());
+      } else {
+        dispatch(clearPlayQueue());
+        dispatch(setStatus('PAUSED'));
+      }
+
      notifyToast('info', getPlayedSongsNotification({ ...songs.count, type: 'play' }));
    }

    if (playClick.type === 'album') {
      const res = await getAlbum(playClick.id);
      const songs = filterPlayQueue(config.playback.filters, res.song);
-      dispatch(setPlayQueue({ entries: songs.entries }));
+
+      if (songs.entries.length > 0) {
+        dispatch(setPlayQueue({ entries: songs.entries }));
+        dispatch(setStatus('PLAYING'));
+        dispatch(fixPlayer2Index());
+      } else {
+        dispatch(clearPlayQueue());
+        dispatch(setStatus('PAUSED'));
+      }
+
      notifyToast('info', getPlayedSongsNotification({ ...songs.count, type: 'play' }));
    }

    if (playClick.type === 'artist') {
      const res = await getAllArtistSongs(playClick.id);
      const songs = filterPlayQueue(config.playback.filters, res);
-      dispatch(setPlayQueue({ entries: songs.entries }));
+
+      if (songs.entries.length > 0) {
+        dispatch(setPlayQueue({ entries: songs.entries }));
+        dispatch(setStatus('PLAYING'));
+        dispatch(fixPlayer2Index());
+      } else {
+        dispatch(clearPlayQueue());
+        dispatch(setStatus('PAUSED'));
+      }
+
      notifyToast('info', getPlayedSongsNotification({ ...songs.count, type: 'play' }));
    }
-
-    dispatch(setStatus('PLAYING'));
-    dispatch(fixPlayer2Index());
  };

  const handlePlayAppend = async (type: 'next' | 'later') => {
    if (playClick.type === 'playlist') {
      const res = await getPlaylist(playClick.id);
      const songs = filterPlayQueue(config.playback.filters, res.song);
-      dispatch(appendPlayQueue({ entries: songs.entries, type }));
+
+      if (songs.entries.length > 0) {
+        dispatch(appendPlayQueue({ entries: songs.entries, type }));
+        dispatch(fixPlayer2Index());
+      }
+
      notifyToast('info', getPlayedSongsNotification({ ...songs.count, type: 'add' }));
    }

    if (playClick.type === 'album') {
      const res = await getAlbum(playClick.id);
      const songs = filterPlayQueue(config.playback.filters, res.song);
-      dispatch(appendPlayQueue({ entries: songs.entries, type }));
+
+      if (songs.entries.length > 0) {
+        dispatch(appendPlayQueue({ entries: songs.entries, type }));
+        dispatch(fixPlayer2Index());
+      }
+
      notifyToast('info', getPlayedSongsNotification({ ...songs.count, type: 'add' }));
    }

    if (playClick.type === 'artist') {
      const res = await getAllArtistSongs(playClick.id);
      const songs = filterPlayQueue(config.playback.filters, res);
-      dispatch(appendPlayQueue({ entries: songs.entries, type }));
+
+      if (songs.entries.length > 0) {
+        dispatch(appendPlayQueue({ entries: songs.entries, type }));
+        dispatch(fixPlayer2Index());
+      }
+
      notifyToast('info', getPlayedSongsNotification({ ...songs.count, type: 'add' }));
    }
-
-    if (playQueue.entry.length < 1) {
-      dispatch(setStatus('PLAYING'));
-    }
-
-    dispatch(fixPlayer2Index());
  };

  const handleOpenModal = () => {
--- a/src/components/library/AlbumView.tsx
+++ b/src/components/library/AlbumView.tsx
@@ -14,6 +14,7 @@ import { getAlbum, star, unstar } from '../../api/api';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import {
  appendPlayQueue,
+  clearPlayQueue,
  fixPlayer2Index,
  setPlayQueue,
  setPlayQueueByRowClick,
@@ -43,7 +44,6 @@ interface AlbumParams {

 const AlbumView = ({ ...rest }: any) => {
  const dispatch = useAppDispatch();
-  const playQueue = useAppSelector((state) => state.playQueue);
  const misc = useAppSelector((state) => state.misc);
  const album = useAppSelector((state) => state.album);
  const config = useAppSelector((state) => state.config);
@@ -102,19 +102,27 @@ const AlbumView = ({ ...rest }: any) => {

  const handlePlay = () => {
    const songs = filterPlayQueue(config.playback.filters, data.song);
-    dispatch(setPlayQueue({ entries: songs.entries }));
-    dispatch(fixPlayer2Index());
-    dispatch(setStatus('PLAYING'));
+
+    if (songs.entries.length > 0) {
+      dispatch(setPlayQueue({ entries: songs.entries }));
+      dispatch(setStatus('PLAYING'));
+      dispatch(fixPlayer2Index());
+    } else {
+      dispatch(clearPlayQueue());
+      dispatch(setStatus('PAUSED'));
+    }
+
    notifyToast('info', getPlayedSongsNotification({ ...songs.count, type: 'play' }));
  };

  const handlePlayAppend = (type: 'next' | 'later') => {
    const songs = filterPlayQueue(config.playback.filters, data.song);
-    dispatch(appendPlayQueue({ entries: songs.entries, type }));
-    dispatch(fixPlayer2Index());
-    if (playQueue.entry.length < 1) {
-      dispatch(setStatus('PLAYING'));
+
+    if (songs.entries.length > 0) {
+      dispatch(appendPlayQueue({ entries: songs.entries, type }));
+      dispatch(fixPlayer2Index());
    }
+
    notifyToast('info', getPlayedSongsNotification({ ...songs.count, type: 'add' }));
  };

--- a/src/components/library/ArtistView.tsx
+++ b/src/components/library/ArtistView.tsx
@@ -29,7 +29,12 @@ import GenericPageHeader from '../layout/GenericPageHeader';
 import CustomTooltip from '../shared/CustomTooltip';
 import { TagLink } from './styled';
 import { addModalPage } from '../../redux/miscSlice';
-import { appendPlayQueue, fixPlayer2Index, setPlayQueue } from '../../redux/playQueueSlice';
+import {
+  appendPlayQueue,
+  clearPlayQueue,
+  fixPlayer2Index,
+  setPlayQueue,
+} from '../../redux/playQueueSlice';
 import { notifyToast } from '../shared/toast';
 import { filterPlayQueue, getPlayedSongsNotification, isCached } from '../../shared/utils';
 import { StyledButton, StyledPopover, StyledTag } from '../shared/styled';
@@ -43,7 +48,6 @@ const ArtistView = ({ ...rest }: any) => {
  const dispatch = useAppDispatch();
  const queryClient = useQueryClient();
  const history = useHistory();
-  const playQueue = useAppSelector((state) => state.playQueue);
  const misc = useAppSelector((state) => state.misc);
  const config = useAppSelector((state) => state.config);
  const [viewType, setViewType] = useState(settings.getSync('albumViewType') || 'list');
@@ -103,20 +107,28 @@ const ArtistView = ({ ...rest }: any) => {
  const handlePlay = async () => {
    const res = await getAllArtistSongs(data.id);
    const songs = filterPlayQueue(config.playback.filters, res);
-    dispatch(setPlayQueue({ entries: songs.entries }));
-    dispatch(fixPlayer2Index());
-    dispatch(setStatus('PLAYING'));
+
+    if (songs.entries.length > 0) {
+      dispatch(setPlayQueue({ entries: songs.entries }));
+      dispatch(setStatus('PLAYING'));
+      dispatch(fixPlayer2Index());
+    } else {
+      dispatch(clearPlayQueue());
+      dispatch(setStatus('PAUSED'));
+    }
+
    notifyToast('info', getPlayedSongsNotification({ ...songs.count, type: 'play' }));
  };

  const handlePlayAppend = async (type: 'next' | 'later') => {
    const res = await getAllArtistSongs(data.id);
    const songs = filterPlayQueue(config.playback.filters, res);
-    dispatch(appendPlayQueue({ entries: songs.entries, type }));
-    dispatch(fixPlayer2Index());
-    if (playQueue.entry.length < 1) {
-      dispatch(setStatus('PLAYING'));
+
+    if (songs.entries.length > 0) {
+      dispatch(appendPlayQueue({ entries: songs.entries, type }));
+      dispatch(fixPlayer2Index());
    }
+
    notifyToast('info', getPlayedSongsNotification({ ...songs.count, type: 'add' }));
  };

--- a/src/components/player/NowPlayingMiniView.tsx
+++ b/src/components/player/NowPlayingMiniView.tsx
@@ -203,21 +203,51 @@ const NowPlayingMiniView = () => {

    if (cleanedSongs.entries.length > 0) {
      if (action === 'play') {
-        dispatch(setPlayQueue({ entries: cleanedSongs.entries }));
-        dispatch(setStatus('PLAYING'));
-        notifyToast('info', getPlayedSongsNotification({ ...cleanedSongs.count, type: 'play' }));
+        if (cleanedSongs.entries.length > 0) {
+          dispatch(setPlayQueue({ entries: cleanedSongs.entries }));
+          dispatch(setStatus('PLAYING'));
+          dispatch(fixPlayer2Index());
+        } else {
+          dispatch(clearPlayQueue());
+          dispatch(setStatus('PAUSED'));
+        }
+
+        notifyToast(
+          'info',
+          getPlayedSongsNotification({
+            original: res.song.length,
+            filtered: cleanedSongs.count.filtered,
+            type: 'play',
+          })
+        );
      } else if (action === 'addLater') {
-        dispatch(appendPlayQueue({ entries: cleanedSongs.entries, type: 'later' }));
-        if (playQueue.entry.length < 1) {
-          dispatch(setStatus('PLAYING'));
+        if (cleanedSongs.entries.length > 0) {
+          dispatch(appendPlayQueue({ entries: cleanedSongs.entries, type: 'later' }));
+          dispatch(fixPlayer2Index());
        }
-        notifyToast('info', getPlayedSongsNotification({ ...cleanedSongs.count, type: 'add' }));
+
+        notifyToast(
+          'info',
+          getPlayedSongsNotification({
+            original: res.song.length,
+            filtered: cleanedSongs.count.filtered,
+            type: 'add',
+          })
+        );
      } else {
-        dispatch(appendPlayQueue({ entries: cleanedSongs.entries, type: 'next' }));
-        if (playQueue.entry.length < 1) {
-          dispatch(setStatus('PLAYING'));
+        if (cleanedSongs.entries.length > 0) {
+          dispatch(appendPlayQueue({ entries: cleanedSongs.entries, type: 'next' }));
+          dispatch(fixPlayer2Index());
        }
-        notifyToast('info', getPlayedSongsNotification({ ...cleanedSongs.count, type: 'add' }));
+
+        notifyToast(
+          'info',
+          getPlayedSongsNotification({
+            original: res.song.length,
+            filtered: cleanedSongs.count.filtered,
+            type: 'add',
+          })
+        );
      }
      dispatch(fixPlayer2Index());
      setIsLoadingRandom(false);
--- a/src/components/player/NowPlayingView.tsx
+++ b/src/components/player/NowPlayingView.tsx
@@ -209,21 +209,51 @@ const NowPlayingView = () => {

    if (cleanedSongs.entries.length > 0) {
      if (action === 'play') {
-        dispatch(setPlayQueue({ entries: cleanedSongs.entries }));
-        dispatch(setStatus('PLAYING'));
-        notifyToast('info', getPlayedSongsNotification({ ...cleanedSongs.count, type: 'play' }));
+        if (cleanedSongs.entries.length > 0) {
+          dispatch(setPlayQueue({ entries: cleanedSongs.entries }));
+          dispatch(setStatus('PLAYING'));
+          dispatch(fixPlayer2Index());
+        } else {
+          dispatch(clearPlayQueue());
+          dispatch(setStatus('PAUSED'));
+        }
+
+        notifyToast(
+          'info',
+          getPlayedSongsNotification({
+            original: res.song.length,
+            filtered: cleanedSongs.count.filtered,
+            type: 'play',
+          })
+        );
      } else if (action === 'addLater') {
-        dispatch(appendPlayQueue({ entries: cleanedSongs.entries, type: 'later' }));
-        if (playQueue.entry.length < 1) {
-          dispatch(setStatus('PLAYING'));
+        if (cleanedSongs.entries.length > 0) {
+          dispatch(appendPlayQueue({ entries: cleanedSongs.entries, type: 'later' }));
+          dispatch(fixPlayer2Index());
        }
-        notifyToast('info', getPlayedSongsNotification({ ...cleanedSongs.count, type: 'add' }));
+
+        notifyToast(
+          'info',
+          getPlayedSongsNotification({
+            original: res.song.length,
+            filtered: cleanedSongs.count.filtered,
+            type: 'add',
+          })
+        );
      } else {
-        dispatch(appendPlayQueue({ entries: cleanedSongs.entries, type: 'next' }));
-        if (playQueue.entry.length < 1) {
-          dispatch(setStatus('PLAYING'));
+        if (cleanedSongs.entries.length > 0) {
+          dispatch(appendPlayQueue({ entries: cleanedSongs.entries, type: 'next' }));
+          dispatch(fixPlayer2Index());
        }
-        notifyToast('info', getPlayedSongsNotification({ ...cleanedSongs.count, type: 'add' }));
+
+        notifyToast(
+          'info',
+          getPlayedSongsNotification({
+            original: res.song.length,
+            filtered: cleanedSongs.count.filtered,
+            type: 'add',
+          })
+        );
      }
      dispatch(fixPlayer2Index());
      setIsLoadingRandom(false);
--- a/src/components/playlist/PlaylistView.tsx
+++ b/src/components/playlist/PlaylistView.tsx
@@ -35,6 +35,7 @@ import {
  appendPlayQueue,
  setStar,
  setRate,
+  clearPlayQueue,
 } from '../../redux/playQueueSlice';
 import {
  toggleSelected,
@@ -77,7 +78,6 @@ const PlaylistView = ({ ...rest }) => {
  const [isModified, setIsModified] = useState(false);
  const dispatch = useAppDispatch();
  const playlist = useAppSelector((state) => state.playlist);
-  const playQueue = useAppSelector((state) => state.playQueue);
  const multiSelect = useAppSelector((state) => state.multiSelect);
  const config = useAppSelector((state) => state.config);
  const misc = useAppSelector((state) => state.misc);
@@ -175,17 +175,27 @@ const PlaylistView = ({ ...rest }) => {

  const handlePlay = () => {
    const songs = filterPlayQueue(config.playback.filters, playlist[getCurrentEntryList(playlist)]);
-    dispatch(setPlayQueue({ entries: songs.entries }));
-    dispatch(setStatus('PLAYING'));
+
+    if (songs.entries.length > 0) {
+      dispatch(setPlayQueue({ entries: songs.entries }));
+      dispatch(setStatus('PLAYING'));
+      dispatch(fixPlayer2Index());
+    } else {
+      dispatch(clearPlayQueue());
+      dispatch(setStatus('PAUSED'));
+    }
+
    notifyToast('info', getPlayedSongsNotification({ ...songs.count, type: 'play' }));
  };

  const handlePlayAppend = (type: 'next' | 'later') => {
    const songs = filterPlayQueue(config.playback.filters, playlist[getCurrentEntryList(playlist)]);
-    dispatch(appendPlayQueue({ entries: songs.entries, type }));
-    if (playQueue.entry.length < 1) {
-      dispatch(setStatus('PLAYING'));
+
+    if (songs.entries.length > 0) {
+      dispatch(appendPlayQueue({ entries: songs.entries, type }));
+      dispatch(fixPlayer2Index());
    }
+
    notifyToast('info', getPlayedSongsNotification({ ...songs.count, type: 'add' }));
  };

--- a/src/components/shared/ContextMenu.tsx
+++ b/src/components/shared/ContextMenu.tsx
@@ -26,6 +26,7 @@ import {
 } from '../../redux/miscSlice';
 import {
  appendPlayQueue,
+  clearPlayQueue,
  fixPlayer2Index,
  moveDown,
  moveToBottom,
@@ -140,7 +141,15 @@ export const GlobalContextMenu = () => {
      res.push(_.orderBy(music, 'rowIndex', 'asc'));
      const songs = filterPlayQueue(config.playback.filters, _.flatten(res));

-      dispatch(setPlayQueue({ entries: songs.entries }));
+      if (songs.entries.length > 0) {
+        dispatch(setPlayQueue({ entries: songs.entries }));
+        dispatch(setStatus('PLAYING'));
+        dispatch(fixPlayer2Index());
+      } else {
+        dispatch(clearPlayQueue());
+        dispatch(setStatus('PAUSED'));
+      }
+
      notifyToast('info', getPlayedSongsNotification({ ...songs.count, type: 'play' }));
    } else if (misc.contextMenu.type === 'playlist') {
      for (let i = 0; i < multiSelect.selected.length; i += 1) {
@@ -149,7 +158,16 @@ export const GlobalContextMenu = () => {

      const res = await Promise.all(promises);
      const songs = filterPlayQueue(config.playback.filters, _.flatten(_.map(res, 'song')));
-      dispatch(setPlayQueue({ entries: songs.entries }));
+
+      if (songs.entries.length > 0) {
+        dispatch(setPlayQueue({ entries: songs.entries }));
+        dispatch(setStatus('PLAYING'));
+        dispatch(fixPlayer2Index());
+      } else {
+        dispatch(clearPlayQueue());
+        dispatch(setStatus('PAUSED'));
+      }
+
      notifyToast('info', getPlayedSongsNotification({ ...songs.count, type: 'play' }));
    } else if (misc.contextMenu.type === 'album') {
      for (let i = 0; i < multiSelect.selected.length; i += 1) {
@@ -158,6 +176,16 @@ export const GlobalContextMenu = () => {

      const res = await Promise.all(promises);
      const songs = filterPlayQueue(config.playback.filters, _.flatten(_.map(res, 'song')));
+
+      if (songs.entries.length > 0) {
+        dispatch(setPlayQueue({ entries: songs.entries }));
+        dispatch(setStatus('PLAYING'));
+        dispatch(fixPlayer2Index());
+      } else {
+        dispatch(clearPlayQueue());
+        dispatch(setStatus('PAUSED'));
+      }
+
      dispatch(setPlayQueue({ entries: songs.entries }));
      notifyToast('info', getPlayedSongsNotification({ ...songs.count, type: 'play' }));
    } else if (misc.contextMenu.type === 'artist') {
@@ -167,13 +195,17 @@ export const GlobalContextMenu = () => {

      const res = await Promise.all(promises);
      const songs = filterPlayQueue(config.playback.filters, _.flatten(res));
-      dispatch(setPlayQueue({ entries: songs.entries }));
-      notifyToast('info', getPlayedSongsNotification({ ...songs.count, type: 'play' }));
-    }

-    if (playQueue.entry.length < 1 || playQueue.currentPlayer === 1) {
-      dispatch(setStatus('PLAYING'));
-      dispatch(fixPlayer2Index());
+      if (songs.entries.length > 0) {
+        dispatch(setPlayQueue({ entries: songs.entries }));
+        dispatch(setStatus('PLAYING'));
+        dispatch(fixPlayer2Index());
+      } else {
+        dispatch(clearPlayQueue());
+        dispatch(setStatus('PAUSED'));
+      }
+
+      notifyToast('info', getPlayedSongsNotification({ ...songs.count, type: 'play' }));
    }
  };

@@ -196,7 +228,12 @@ export const GlobalContextMenu = () => {
      const res = await Promise.all(promises);
      res.push(_.orderBy(music, 'rowIndex', 'asc'));
      const songs = filterPlayQueue(config.playback.filters, _.flatten(res));
-      dispatch(appendPlayQueue({ entries: songs.entries, type }));
+
+      if (songs.entries.length > 0) {
+        dispatch(appendPlayQueue({ entries: songs.entries, type }));
+        dispatch(fixPlayer2Index());
+      }
+
      notifyToast('info', getPlayedSongsNotification({ ...songs.count, type: 'add' }));
    } else if (misc.contextMenu.type === 'playlist') {
      for (let i = 0; i < multiSelect.selected.length; i += 1) {
@@ -205,7 +242,12 @@ export const GlobalContextMenu = () => {

      const res = await Promise.all(promises);
      const songs = filterPlayQueue(config.playback.filters, _.flatten(_.map(res, 'song')));
-      dispatch(appendPlayQueue({ entries: songs.entries, type }));
+
+      if (songs.entries.length > 0) {
+        dispatch(appendPlayQueue({ entries: songs.entries, type }));
+        dispatch(fixPlayer2Index());
+      }
+
      notifyToast('info', getPlayedSongsNotification({ ...songs.count, type: 'add' }));
    } else if (misc.contextMenu.type === 'album') {
      for (let i = 0; i < multiSelect.selected.length; i += 1) {
@@ -214,7 +256,12 @@ export const GlobalContextMenu = () => {

      const res = await Promise.all(promises);
      const songs = filterPlayQueue(config.playback.filters, _.flatten(_.map(res, 'song')));
-      dispatch(appendPlayQueue({ entries: songs.entries, type }));
+
+      if (songs.entries.length > 0) {
+        dispatch(appendPlayQueue({ entries: songs.entries, type }));
+        dispatch(fixPlayer2Index());
+      }
+
      notifyToast('info', getPlayedSongsNotification({ ...songs.count, type: 'add' }));
    } else if (misc.contextMenu.type === 'artist') {
      for (let i = 0; i < multiSelect.selected.length; i += 1) {
@@ -223,13 +270,13 @@ export const GlobalContextMenu = () => {

      const res = await Promise.all(promises);
      const songs = filterPlayQueue(config.playback.filters, _.flatten(res));
-      dispatch(appendPlayQueue({ entries: songs.entries, type }));
-      notifyToast('info', getPlayedSongsNotification({ ...songs.count, type: 'add' }));
-    }

-    if (playQueue.entry.length < 1 || playQueue.currentPlayer === 1) {
-      dispatch(setStatus('PLAYING'));
-      dispatch(fixPlayer2Index());
+      if (songs.entries.length > 0) {
+        dispatch(appendPlayQueue({ entries: songs.entries, type }));
+        dispatch(fixPlayer2Index());
+      }
+
+      notifyToast('info', getPlayedSongsNotification({ ...songs.count, type: 'add' }));
    }
  };

--- a/src/shared/utils.ts
+++ b/src/shared/utils.ts
@@ -452,12 +452,12 @@ export const getPlayedSongsNotification = (options: {
      return `Playing ${options.original} songs`;
    }

-    return `Playing ${options.filtered} songs [-${options.original - options.filtered} filtered]`;
+    return `Playing ${options.filtered} songs [${options.original - options.filtered} filtered]`;
  }

  if (options.original === options.filtered) {
    return `Added ${options.original} songs`;
  }

-  return `Added ${options.filtered} songs [-${options.original - options.filtered} filtered]`;
+  return `Added ${options.filtered} songs [${options.original - options.filtered} filtered]`;
 };