Starred/NowPlaying view cleanup

- Add functionality to miniview buttons

src/components/player/NowPlayingMiniView.tsx

@@ -26,12 +26,7 @@ import ListViewType from '../viewtypes/ListViewType';
 import GenericPage from '../layout/GenericPage';
 import { StyledCheckbox, StyledIconButton } from '../shared/styled';
 import { MiniViewContainer } from './styled';
-import {
-  DeselectAllButton,
-  MoveDownButton,
-  MoveManualButton,
-  MoveUpButton,
-} from '../selectionbar/SelectionButtons';
+import { DeselectAllButton, MoveDownButton, MoveUpButton } from '../selectionbar/SelectionButtons';
 import { getCurrentEntryList } from '../../shared/utils';
 
 const NowPlayingMiniView = () => {
@@ -85,23 +80,11 @@ const NowPlayingMiniView = () => {
   };
 
   const handleUpClick = () => {
-    const selectedIndexes: any[] = [];
-    multiSelect.selected.map((selected: any) => {
-      return selectedIndexes.push(
-        playQueue.entry.findIndex((item: any) => item.id === selected.id)
-      );
-    });
-    dispatch(moveUp(selectedIndexes));
+    dispatch(moveUp({ selectedEntries: multiSelect.selected }));
   };
 
   const handleDownClick = () => {
-    const selectedIndexes: any[] = [];
-    multiSelect.selected.map((selected: any) => {
-      return selectedIndexes.push(
-        playQueue.entry.findIndex((item: any) => item.id === selected.id)
-      );
-    });
-    dispatch(moveDown(selectedIndexes));
+    dispatch(moveDown({ selectedEntries: multiSelect.selected }));
   };
 
   const handleDragEnd = () => {
@@ -156,18 +139,32 @@ const NowPlayingMiniView = () => {
                           }
                         }}
                       />
-                    </ButtonToolbar>
-                  </FlexboxGrid.Item>
                       {multiSelect.selected.length > 0 && (
-                    <FlexboxGrid.Item>
-                      <ButtonToolbar>
-                        <MoveUpButton />
-                        <MoveDownButton />
-                        <MoveManualButton />
+                        <>
+                          <MoveUpButton
+                            handleClick={() => {
+                              dispatch(moveUp({ selectedEntries: multiSelect.selected }));
+
+                              if (playQueue.currentPlayer === 1) {
+                                dispatch(fixPlayer2Index());
+                              }
+                            }}
+                          />
+                          <MoveDownButton
+                            handleClick={() => {
+                              dispatch(moveDown({ selectedEntries: multiSelect.selected }));
+
+                              if (playQueue.currentPlayer === 1) {
+                                dispatch(fixPlayer2Index());
+                              }
+                            }}
+                          />
                           <DeselectAllButton />
+                        </>
+                      )}
                     </ButtonToolbar>
                   </FlexboxGrid.Item>
-                  )}
+
                   <FlexboxGrid.Item>
                     <StyledCheckbox
                       defaultChecked={playQueue.scrollWithCurrentSong}

src/components/player/NowPlayingView.tsx

@@ -4,8 +4,6 @@ import { ButtonToolbar } from 'rsuite';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import useSearchQuery from '../../hooks/useSearchQuery';
 import {
-  moveUp,
-  moveDown,
   setPlayerIndex,
   setPlayerVolume,
   fixPlayer2Index,
@@ -88,26 +86,6 @@ const NowPlayingView = () => {
     dispatch(setStatus('PLAYING'));
   };
 
-  const handleUpClick = () => {
-    const selectedIndexes: any[] = [];
-    multiSelect.selected.map((selected: any) => {
-      return selectedIndexes.push(
-        playQueue.entry.findIndex((item: any) => item.id === selected.id)
-      );
-    });
-    dispatch(moveUp(selectedIndexes));
-  };
-
-  const handleDownClick = () => {
-    const selectedIndexes: any[] = [];
-    multiSelect.selected.map((selected: any) => {
-      return selectedIndexes.push(
-        playQueue.entry.findIndex((item: any) => item.id === selected.id)
-      );
-    });
-    dispatch(moveDown(selectedIndexes));
-  };
-
   const handleDragEnd = () => {
     if (multiSelect.isDragging) {
       dispatch(
@@ -123,10 +101,6 @@ const NowPlayingView = () => {
     }
   };
 
-  if (!playQueue) {
-    return <PageLoader />;
-  }
-
   return (
     <GenericPage
       hideDivider
@@ -188,6 +162,9 @@ const NowPlayingView = () => {
         />
       }
     >
+      {!playQueue ? (
+        <PageLoader />
+      ) : (
         <ListViewType
           ref={tableRef}
           data={searchQuery !== '' ? filteredData : playQueue[getCurrentEntryList(playQueue)]}
@@ -195,8 +172,6 @@ const NowPlayingView = () => {
           tableColumns={settings.getSync('musicListColumns')}
           handleRowClick={handleRowClick}
           handleRowDoubleClick={handleRowDoubleClick}
-        handleUpClick={handleUpClick}
-        handleDownClick={handleDownClick}
           handleDragEnd={handleDragEnd}
           virtualized
           rowHeight={Number(settings.getSync('musicListRowHeight'))}
@@ -210,6 +185,7 @@ const NowPlayingView = () => {
           nowPlaying
           dnd
         />
+      )}
     </GenericPage>
   );
 };

src/components/starred/StarredView.tsx

@@ -82,10 +82,6 @@ const StarredView = () => {
     history.push(`/library/album/${e.id}`);
   };
 
-  if (isLoading) {
-    return <PageLoader />;
-  }
-
   if (isError) {
     return <span>Error: {error.message}</span>;
   }
@@ -114,6 +110,10 @@ const StarredView = () => {
         />
       }
     >
+      {isLoading ? (
+        <PageLoader />
+      ) : (
+        <>
           {currentPage === 'Tracks' && (
             <ListViewType
               data={searchQuery !== '' ? filteredData : data.song}
@@ -173,6 +173,8 @@ const StarredView = () => {
               )}
             </>
           )}
+        </>
+      )}
     </GenericPage>
   );
 };