Change toolbar buttons on now playing (and mini)

- Move up -> Move to top
- Move down -> Move to bottom
- Make buttons persistent rather than only when selected

src/components/player/NowPlayingMiniView.tsx

@@ -1,7 +1,9 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
+import _ from 'lodash';
 import settings from 'electron-settings';
-import { ButtonToolbar, FlexboxGrid, Icon } from 'rsuite';
+import { ButtonToolbar, FlexboxGrid, Icon, Whisper, ControlLabel } from 'rsuite';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { useQuery } from 'react-query';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import {
   toggleSelected,
@@ -23,15 +25,32 @@ import {
   setPlaybackSetting,
   removeFromPlayQueue,
   setStar,
+  setPlayQueue,
+  appendPlayQueue,
 } from '../../redux/playQueueSlice';
 import { resetPlayer, setStatus } from '../../redux/playerSlice';
 import ListViewType from '../viewtypes/ListViewType';
 import GenericPage from '../layout/GenericPage';
-import { StyledCheckbox, StyledIconButton } from '../shared/styled';
+import {
+  StyledButton,
+  StyledCheckbox,
+  StyledInputNumber,
+  StyledInputPicker,
+  StyledInputPickerContainer,
+  StyledPopover,
+} from '../shared/styled';
 import { MiniViewContainer } from './styled';
-import { getCurrentEntryList } from '../../shared/utils';
+import { errorMessages, getCurrentEntryList, isFailedResponse } from '../../shared/utils';
-import { star, unstar } from '../../api/api';
+import { getGenres, getRandomSongs, star, unstar } from '../../api/api';
-import CustomTooltip from '../shared/CustomTooltip';
+import {
+  AutoPlaylistButton,
+  ClearQueueButton,
+  MoveBottomButton,
+  MoveTopButton,
+  RemoveSelectedButton,
+  ShuffleButton,
+} from '../shared/ToolbarButtons';
+import { notifyToast } from '../shared/toast';
 
 const NowPlayingMiniView = () => {
   const tableRef = useRef<any>();
@@ -39,6 +58,27 @@ const NowPlayingMiniView = () => {
   const playQueue = useAppSelector((state) => state.playQueue);
   const multiSelect = useAppSelector((state) => state.multiSelect);
   const config = useAppSelector((state) => state.config);
+  const [autoPlaylistTrackCount, setRandomPlaylistTrackCount] = useState(
+    Number(settings.getSync('randomPlaylistTrackCount'))
+  );
+  const pickerContainerRef = 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 { data: genres }: any = useQuery(['genreList'], async () => {
+    const res = await getGenres();
+    const genresOrderedBySongCount = _.orderBy(res, 'songCount', 'desc');
+    return genresOrderedBySongCount.map((genre: any) => {
+      return {
+        label: `${genre.value} (${genre.songCount})`,
+        value: genre.value,
+        role: 'Genre',
+      };
+    });
+  });
 
   useHotkeys(
     'del',
@@ -127,6 +167,60 @@ const NowPlayingMiniView = () => {
     }
   };
 
+  const handlePlayRandom = async (action: 'play' | 'addNext' | 'addLater') => {
+    setIsLoadingRandom(true);
+    const res = await getRandomSongs({
+      size: autoPlaylistTrackCount,
+      fromYear: autoPlaylistFromYear !== 0 ? autoPlaylistFromYear : undefined,
+      toYear: autoPlaylistToYear !== 0 ? autoPlaylistToYear : undefined,
+      genre: randomPlaylistGenre,
+    });
+
+    if (isFailedResponse(res)) {
+      autoPlaylistTriggerRef.current.close();
+      return notifyToast('error', errorMessages(res)[0]);
+    }
+
+    const cleanedSongs = res.song.filter((song: any) => {
+      // Remove invalid songs that may break the player
+      return song.bitRate && song.duration;
+    });
+
+    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) {
+        dispatch(setStatus('PLAYING'));
+      }
+      notifyToast(
+        'info',
+        `Added ${cleanedSongs.length} ${difference !== 0 ? `(-${difference} invalid)` : ''} song(s)`
+      );
+    }
+    dispatch(fixPlayer2Index());
+    setIsLoadingRandom(false);
+    return autoPlaylistTriggerRef.current.close();
+  };
+
   const handleRowFavorite = async (rowData: any) => {
     if (!rowData.starred) {
       await star(rowData.id, 'music');
@@ -149,12 +243,11 @@ const NowPlayingMiniView = () => {
             padding="0px"
             header={
               <>
-                <FlexboxGrid justify="space-between" align="middle" style={{ height: '50px' }}>
+                <FlexboxGrid justify="space-between" align="middle">
                   <FlexboxGrid.Item>
                     <ButtonToolbar>
-                      <StyledIconButton
+                      <ClearQueueButton
-                        size="sm"
+                        size="xs"
-                        icon={<Icon icon="trash2" />}
                         onClick={() => {
                           dispatch(clearPlayQueue());
                           dispatch(setStatus('PAUSED'));
@@ -163,9 +256,8 @@ const NowPlayingMiniView = () => {
                           setTimeout(() => dispatch(resetPlayer()), 200);
                         }}
                       />
-                      <StyledIconButton
+                      <ShuffleButton
-                        size="sm"
+                        size="xs"
-                        icon={<Icon icon="random" />}
                         onClick={() => {
                           if (playQueue.shuffle) {
                             dispatch(shuffleInPlace());
@@ -174,60 +266,156 @@ const NowPlayingMiniView = () => {
                           }
                         }}
                       />
-                      {multiSelect.selected.length > 0 && (
+                      <Whisper
-                        <>
+                        ref={autoPlaylistTriggerRef}
-                          <CustomTooltip text="Move up">
+                        placement="autoVertical"
-                            <StyledIconButton
+                        trigger="none"
-                              size="xs"
+                        speaker={
-                              icon={<Icon icon="arrow-up2" />}
+                          <StyledPopover>
-                              onClick={() => {
+                            <ControlLabel>How many tracks? (1-500)*</ControlLabel>
-                                dispatch(moveUp({ selectedEntries: multiSelect.selected }));
+                            <StyledInputNumber
-
+                              min={1}
-                                if (playQueue.currentPlayer === 1) {
+                              max={500}
-                                  dispatch(fixPlayer2Index());
+                              step={10}
-                                }
+                              defaultValue={autoPlaylistTrackCount}
+                              value={autoPlaylistTrackCount}
+                              onChange={(e: number) => {
+                                settings.setSync('randomPlaylistTrackCount', Number(e));
+                                setRandomPlaylistTrackCount(Number(e));
                               }}
                             />
-                          </CustomTooltip>
+                            <br />
-                          <CustomTooltip text="Move down">
+                            <FlexboxGrid justify="space-between">
-                            <StyledIconButton
+                              <FlexboxGrid.Item>
-                              size="xs"
+                                <ControlLabel>From year</ControlLabel>
-                              icon={<Icon icon="arrow-down2" />}
+                                <div>
-                              onClick={() => {
+                                  <StyledInputNumber
-                                dispatch(moveDown({ selectedEntries: multiSelect.selected }));
+                                    width={100}
+                                    min={0}
+                                    max={3000}
+                                    step={1}
+                                    defaultValue={autoPlaylistFromYear}
+                                    value={autoPlaylistFromYear}
+                                    onChange={(e: number) => {
+                                      setRandomPlaylistFromYear(Number(e));
+                                    }}
+                                  />
+                                </div>
+                              </FlexboxGrid.Item>
+                              <FlexboxGrid.Item>
+                                <ControlLabel>To year</ControlLabel>
+                                <div>
+                                  <StyledInputNumber
+                                    width={100}
+                                    min={0}
+                                    max={3000}
+                                    step={1}
+                                    defaultValue={autoPlaylistToYear}
+                                    value={autoPlaylistToYear}
+                                    onChange={(e: number) => setRandomPlaylistToYear(Number(e))}
+                                  />
+                                </div>
+                              </FlexboxGrid.Item>
+                            </FlexboxGrid>
+                            <br />
+                            <ControlLabel>Genre</ControlLabel>
+                            <StyledInputPickerContainer ref={pickerContainerRef}>
+                              <StyledInputPicker
+                                style={{ width: '100%' }}
+                                container={() => pickerContainerRef.current}
+                                data={genres}
+                                value={randomPlaylistGenre}
+                                virtualized
+                                onChange={(e: string) => setRandomPlaylistGenre(e)}
+                              />
+                            </StyledInputPickerContainer>
+                            <br />
+                            <ButtonToolbar>
+                              <StyledButton
+                                appearance="subtle"
+                                onClick={() => handlePlayRandom('addNext')}
+                                loading={isLoadingRandom}
+                                disabled={!(typeof autoPlaylistTrackCount === 'number')}
+                              >
+                                <Icon icon="plus-circle" style={{ marginRight: '10px' }} /> Add
+                                (next)
+                              </StyledButton>
+                              <StyledButton
+                                appearance="subtle"
+                                onClick={() => handlePlayRandom('addLater')}
+                                loading={isLoadingRandom}
+                                disabled={!(typeof autoPlaylistTrackCount === 'number')}
+                              >
+                                <Icon icon="plus" style={{ marginRight: '10px' }} /> Add (later)
+                              </StyledButton>
+                            </ButtonToolbar>
+                            <ButtonToolbar>
+                              <StyledButton
+                                block
+                                appearance="primary"
+                                onClick={() => handlePlayRandom('play')}
+                                loading={isLoadingRandom}
+                                disabled={!(typeof autoPlaylistTrackCount === 'number')}
+                              >
+                                <Icon icon="play" style={{ marginRight: '10px' }} />
+                                Play
+                              </StyledButton>
+                            </ButtonToolbar>
+                          </StyledPopover>
+                        }
+                      >
+                        <AutoPlaylistButton
+                          size="xs"
+                          noText
+                          onClick={() =>
+                            autoPlaylistTriggerRef.current.state.isOverlayShown
+                              ? autoPlaylistTriggerRef.current.close()
+                              : autoPlaylistTriggerRef.current.open()
+                          }
+                        />
+                      </Whisper>
+                      <MoveTopButton
+                        size="xs"
+                        appearance="subtle"
+                        onClick={() => {
+                          dispatch(moveUp({ selectedEntries: multiSelect.selected }));
 
-                                if (playQueue.currentPlayer === 1) {
+                          if (playQueue.currentPlayer === 1) {
-                                  dispatch(fixPlayer2Index());
+                            dispatch(fixPlayer2Index());
-                                }
+                          }
-                              }}
+                        }}
-                            />
+                      />
-                          </CustomTooltip>
+                      <MoveBottomButton
+                        size="xs"
+                        appearance="subtle"
+                        onClick={() => {
+                          dispatch(moveDown({ selectedEntries: multiSelect.selected }));
 
-                          <CustomTooltip text="Remove selected">
+                          if (playQueue.currentPlayer === 1) {
-                            <StyledIconButton
+                            dispatch(fixPlayer2Index());
-                              size="xs"
+                          }
-                              icon={<Icon icon="close" />}
+                        }}
-                              onClick={() => {
+                      />
-                                if (multiSelect.selected.length === playQueue.entry.length) {
+                      <RemoveSelectedButton
-                                  // Clear the queue instead of removing individually
+                        size="xs"
-                                  dispatch(clearPlayQueue());
+                        appearance="subtle"
-                                  dispatch(setStatus('PAUSED'));
+                        onClick={() => {
-                                  setTimeout(() => dispatch(resetPlayer()), 200);
+                          if (multiSelect.selected.length === playQueue.entry.length) {
-                                } else {
+                            // Clear the queue instead of removing individually
-                                  dispatch(removeFromPlayQueue({ entries: multiSelect.selected }));
+                            dispatch(clearPlayQueue());
-                                  dispatch(clearSelected());
+                            dispatch(setStatus('PAUSED'));
-                                  if (playQueue.currentPlayer === 1) {
+                            setTimeout(() => dispatch(resetPlayer()), 200);
-                                    dispatch(fixPlayer2Index());
+                          } else {
-                                  }
+                            dispatch(removeFromPlayQueue({ entries: multiSelect.selected }));
-                                }
+                            dispatch(clearSelected());
-                              }}
+                            if (playQueue.currentPlayer === 1) {
-                            />
+                              dispatch(fixPlayer2Index());
-                          </CustomTooltip>
+                            }
-                        </>
+                          }
-                      )}
+                        }}
+                      />
                     </ButtonToolbar>
                   </FlexboxGrid.Item>
-
                   <FlexboxGrid.Item>
                     <StyledCheckbox
                       defaultChecked={playQueue.scrollWithCurrentSong}

src/components/player/NowPlayingView.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import _ from 'lodash';
 import settings from 'electron-settings';
 import { useQuery } from 'react-query';
-import { ButtonToolbar, ControlLabel, FlexboxGrid, Icon, Whisper } from 'rsuite';
+import { ButtonToolbar, ButtonGroup, ControlLabel, FlexboxGrid, Icon, Whisper } from 'rsuite';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import useSearchQuery from '../../hooks/useSearchQuery';
@@ -20,6 +20,8 @@ import {
   appendPlayQueue,
   setStar,
   setRate,
+  moveToTop,
+  moveToBottom,
 } from '../../redux/playQueueSlice';
 import {
   toggleSelected,
@@ -33,7 +35,14 @@ import GenericPageHeader from '../layout/GenericPageHeader';
 import ListViewType from '../viewtypes/ListViewType';
 import PageLoader from '../loader/PageLoader';
 import { resetPlayer, setStatus } from '../../redux/playerSlice';
-import { AutoPlaylistButton, ClearQueueButton, ShuffleButton } from '../shared/ToolbarButtons';
+import {
+  AutoPlaylistButton,
+  ClearQueueButton,
+  MoveBottomButton,
+  MoveTopButton,
+  RemoveSelectedButton,
+  ShuffleButton,
+} from '../shared/ToolbarButtons';
 import {
   StyledButton,
   StyledCheckbox,
@@ -368,6 +377,48 @@ const NowPlayingView = () => {
                     }
                   />
                 </Whisper>
+                <ButtonGroup>
+                  <MoveTopButton
+                    size="sm"
+                    appearance="subtle"
+                    onClick={() => {
+                      dispatch(moveToTop({ selectedEntries: multiSelect.selected }));
+
+                      if (playQueue.currentPlayer === 1) {
+                        dispatch(fixPlayer2Index());
+                      }
+                    }}
+                  />
+                  <MoveBottomButton
+                    size="sm"
+                    appearance="subtle"
+                    onClick={() => {
+                      dispatch(moveToBottom({ selectedEntries: multiSelect.selected }));
+
+                      if (playQueue.currentPlayer === 1) {
+                        dispatch(fixPlayer2Index());
+                      }
+                    }}
+                  />
+                  <RemoveSelectedButton
+                    size="sm"
+                    appearance="subtle"
+                    onClick={() => {
+                      if (multiSelect.selected.length === playQueue.entry.length) {
+                        // Clear the queue instead of removing individually
+                        dispatch(clearPlayQueue());
+                        dispatch(setStatus('PAUSED'));
+                        setTimeout(() => dispatch(resetPlayer()), 200);
+                      } else {
+                        dispatch(removeFromPlayQueue({ entries: multiSelect.selected }));
+                        dispatch(clearSelected());
+                        if (playQueue.currentPlayer === 1) {
+                          dispatch(fixPlayer2Index());
+                        }
+                      }
+                    }}
+                  />
+                </ButtonGroup>
               </ButtonToolbar>
             </>
           }

src/components/shared/ToolbarButtons.tsx

@@ -5,7 +5,7 @@ import { StyledButton, StyledIconButton } from './styled';
 
 export const PlayButton = ({ ...rest }) => {
   return (
-    <CustomTooltip text="Play" placement="bottom">
+    <CustomTooltip text="Play">
       <StyledIconButton tabIndex={0} icon={<Icon icon="play" />} {...rest} />
     </CustomTooltip>
   );
@@ -13,7 +13,7 @@ export const PlayButton = ({ ...rest }) => {
 
 export const PlayShuffleButton = ({ ...rest }) => {
   return (
-    <CustomTooltip text="Shuffle and play" placement="bottom">
+    <CustomTooltip text="Shuffle and play">
       <StyledIconButton tabIndex={0} icon={<Icon icon="random" />} {...rest} />
     </CustomTooltip>
   );
@@ -21,7 +21,7 @@ export const PlayShuffleButton = ({ ...rest }) => {
 
 export const PlayAppendButton = ({ ...rest }) => {
   return (
-    <CustomTooltip text="Add to queue (later)" placement="bottom">
+    <CustomTooltip text="Add to queue (later)">
       <StyledIconButton tabIndex={0} icon={<Icon icon="plus" />} {...rest} />
     </CustomTooltip>
   );
@@ -29,7 +29,7 @@ export const PlayAppendButton = ({ ...rest }) => {
 
 export const PlayAppendNextButton = ({ ...rest }) => {
   return (
-    <CustomTooltip text="Add to queue (next)" placement="bottom">
+    <CustomTooltip text="Add to queue (next)">
       <StyledIconButton tabIndex={0} icon={<Icon icon="plus-circle" />} {...rest} />
     </CustomTooltip>
   );
@@ -37,7 +37,7 @@ export const PlayAppendNextButton = ({ ...rest }) => {
 
 export const PlayShuffleAppendButton = ({ ...rest }) => {
   return (
-    <CustomTooltip text="Add shuffled to queue" placement="bottom" onClick={rest.onClick}>
+    <CustomTooltip text="Add shuffled to queue" onClick={rest.onClick}>
       <StyledIconButton tabIndex={0} icon={<Icon icon="plus-square" {...rest} />} />
     </CustomTooltip>
   );
@@ -45,7 +45,7 @@ export const PlayShuffleAppendButton = ({ ...rest }) => {
 
 export const SaveButton = ({ text, ...rest }: any) => {
   return (
-    <CustomTooltip text={text || 'Save'} placement="bottom">
+    <CustomTooltip text={text || 'Save'}>
       <StyledIconButton tabIndex={0} icon={<Icon icon="save" />} {...rest} />
     </CustomTooltip>
   );
@@ -53,7 +53,7 @@ export const SaveButton = ({ text, ...rest }: any) => {
 
 export const EditButton = ({ ...rest }) => {
   return (
-    <CustomTooltip text="Edit" placement="bottom">
+    <CustomTooltip text="Edit">
       <StyledIconButton tabIndex={0} icon={<Icon icon="edit2" />} {...rest} />
     </CustomTooltip>
   );
@@ -61,7 +61,7 @@ export const EditButton = ({ ...rest }) => {
 
 export const UndoButton = ({ ...rest }) => {
   return (
-    <CustomTooltip text="Reset" placement="bottom">
+    <CustomTooltip text="Reset">
       <StyledIconButton tabIndex={0} icon={<Icon icon="undo" />} {...rest} />
     </CustomTooltip>
   );
@@ -69,7 +69,7 @@ export const UndoButton = ({ ...rest }) => {
 
 export const DeleteButton = ({ ...rest }) => {
   return (
-    <CustomTooltip text="Delete" placement="bottom">
+    <CustomTooltip text="Delete">
       <StyledIconButton tabIndex={0} icon={<Icon icon="trash" />} {...rest} />
     </CustomTooltip>
   );
@@ -77,7 +77,7 @@ export const DeleteButton = ({ ...rest }) => {
 
 export const FavoriteButton = ({ isFavorite, ...rest }: any) => {
   return (
-    <CustomTooltip text="Toggle favorite" placement="bottom">
+    <CustomTooltip text="Toggle favorite">
       <StyledIconButton
         tabIndex={0}
         icon={<Icon icon={isFavorite ? 'heart' : 'heart-o'} />}
@@ -89,7 +89,7 @@ export const FavoriteButton = ({ isFavorite, ...rest }: any) => {
 
 export const DownloadButton = ({ ...rest }) => {
   return (
-    <CustomTooltip text="Toggle favorite" placement="bottom">
+    <CustomTooltip text="Toggle favorite">
       <StyledIconButton tabIndex={0} icon={<Icon icon="download" />} {...rest} />
     </CustomTooltip>
   );
@@ -97,7 +97,7 @@ export const DownloadButton = ({ ...rest }) => {
 
 export const ShuffleButton = ({ ...rest }) => {
   return (
-    <CustomTooltip text="Shuffle queue" placement="bottom">
+    <CustomTooltip text="Shuffle queue">
       <StyledButton tabIndex={0} {...rest}>
         <Icon icon="random" />
       </StyledButton>
@@ -107,7 +107,7 @@ export const ShuffleButton = ({ ...rest }) => {
 
 export const ClearQueueButton = ({ ...rest }) => {
   return (
-    <CustomTooltip text="Clear queue" placement="bottom">
+    <CustomTooltip text="Clear queue">
       <StyledButton tabIndex={0} {...rest}>
         <Icon icon="trash2" />
       </StyledButton>
@@ -133,11 +133,53 @@ export const RefreshButton = ({ ...rest }) => {
   );
 };
 
-export const AutoPlaylistButton = ({ ...rest }) => {
+export const AutoPlaylistButton = ({ noText, ...rest }: any) => {
   return (
-    <StyledButton tabIndex={0} {...rest}>
+    <CustomTooltip text="Auto playlist">
-      <Icon icon="plus-square" style={{ marginRight: '10px' }} />
+      <StyledButton tabIndex={0} {...rest}>
-      Auto playlist
+        <Icon icon="plus-square" style={{ marginRight: noText ? '0px' : '10px' }} />
-    </StyledButton>
+        {!noText && 'Auto playlist'}
+      </StyledButton>
+    </CustomTooltip>
+  );
+};
+
+export const MoveUpButton = ({ ...rest }) => {
+  return (
+    <CustomTooltip text="Move selected up">
+      <StyledIconButton icon={<Icon icon="angle-up" />} tabIndex={0} {...rest} />
+    </CustomTooltip>
+  );
+};
+
+export const MoveDownButton = ({ ...rest }) => {
+  return (
+    <CustomTooltip text="Move selected down">
+      <StyledIconButton icon={<Icon icon="angle-down" />} tabIndex={0} {...rest} />
+    </CustomTooltip>
+  );
+};
+
+export const MoveTopButton = ({ ...rest }) => {
+  return (
+    <CustomTooltip text="Move selected to top">
+      <StyledIconButton icon={<Icon icon="arrow-up2" />} tabIndex={0} {...rest} />
+    </CustomTooltip>
+  );
+};
+
+export const MoveBottomButton = ({ ...rest }) => {
+  return (
+    <CustomTooltip text="Move selected to bottom">
+      <StyledIconButton icon={<Icon icon="arrow-down2" />} tabIndex={0} {...rest} />
+    </CustomTooltip>
+  );
+};
+
+export const RemoveSelectedButton = ({ ...rest }) => {
+  return (
+    <CustomTooltip text="Remove selected">
+      <StyledIconButton icon={<Icon icon="close" />} tabIndex={0} {...rest} />
+    </CustomTooltip>
   );
 };