From 85a890deb643bab5b40787705bad9fee2b0807ac Mon Sep 17 00:00:00 2001 From: jeffvli Date: Tue, 2 Nov 2021 09:55:56 -0700 Subject: [PATCH] Skip dispatch if filtered songs is empty - Remove PLAY call when appending --- src/components/card/Card.tsx | 71 +++++++++++++---- src/components/library/AlbumView.tsx | 24 ++++-- src/components/library/ArtistView.tsx | 30 +++++--- src/components/player/NowPlayingMiniView.tsx | 52 ++++++++++--- src/components/player/NowPlayingView.tsx | 52 ++++++++++--- src/components/playlist/PlaylistView.tsx | 22 ++++-- src/components/shared/ContextMenu.tsx | 81 ++++++++++++++++---- src/shared/utils.ts | 4 +- 8 files changed, 255 insertions(+), 81 deletions(-) diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx index 37c1d24..bf95b43 100644 --- 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 = () => { diff --git a/src/components/library/AlbumView.tsx b/src/components/library/AlbumView.tsx index 5f4eadd..b50acd3 100644 --- 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' })); }; diff --git a/src/components/library/ArtistView.tsx b/src/components/library/ArtistView.tsx index 70e0d88..afa09ce 100644 --- 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' })); }; diff --git a/src/components/player/NowPlayingMiniView.tsx b/src/components/player/NowPlayingMiniView.tsx index 72e9911..bb8fdb6 100644 --- 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); diff --git a/src/components/player/NowPlayingView.tsx b/src/components/player/NowPlayingView.tsx index 0f2dbf8..d961599 100644 --- 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); diff --git a/src/components/playlist/PlaylistView.tsx b/src/components/playlist/PlaylistView.tsx index f7ddc07..5f719eb 100644 --- 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' })); }; diff --git a/src/components/shared/ContextMenu.tsx b/src/components/shared/ContextMenu.tsx index f4fd1b2..2e55069 100644 --- 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' })); } }; diff --git a/src/shared/utils.ts b/src/shared/utils.ts index e92d745..042ccaf 100644 --- 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]`; };