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 {
+import { DeselectAllButton, MoveDownButton, MoveUpButton } from '../selectionbar/SelectionButtons';
-  DeselectAllButton,
-  MoveDownButton,
-  MoveManualButton,
-  MoveUpButton,
-} from '../selectionbar/SelectionButtons';
 import { getCurrentEntryList } from '../../shared/utils';
 
 const NowPlayingMiniView = () => {
@@ -85,23 +80,11 @@ const NowPlayingMiniView = () => {
   };
 
   const handleUpClick = () => {
-    const selectedIndexes: any[] = [];
+    dispatch(moveUp({ selectedEntries: multiSelect.selected }));
-    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[] = [];
+    dispatch(moveDown({ selectedEntries: multiSelect.selected }));
-    multiSelect.selected.map((selected: any) => {
-      return selectedIndexes.push(
-        playQueue.entry.findIndex((item: any) => item.id === selected.id)
-      );
-    });
-    dispatch(moveDown(selectedIndexes));
   };
 
   const handleDragEnd = () => {
@@ -156,18 +139,32 @@ const NowPlayingMiniView = () => {
                           }
                         }}
                       />
+                      {multiSelect.selected.length > 0 && (
+                        <>
+                          <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>
-                  {multiSelect.selected.length > 0 && (
+
-                    <FlexboxGrid.Item>
-                      <ButtonToolbar>
-                        <MoveUpButton />
-                        <MoveDownButton />
-                        <MoveManualButton />
-                        <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,28 +162,30 @@ const NowPlayingView = () => {
         />
       }
     >
-      <ListViewType
+      {!playQueue ? (
-        ref={tableRef}
+        <PageLoader />
-        data={searchQuery !== '' ? filteredData : playQueue[getCurrentEntryList(playQueue)]}
+      ) : (
-        currentIndex={playQueue.currentIndex}
+        <ListViewType
-        tableColumns={settings.getSync('musicListColumns')}
+          ref={tableRef}
-        handleRowClick={handleRowClick}
+          data={searchQuery !== '' ? filteredData : playQueue[getCurrentEntryList(playQueue)]}
-        handleRowDoubleClick={handleRowDoubleClick}
+          currentIndex={playQueue.currentIndex}
-        handleUpClick={handleUpClick}
+          tableColumns={settings.getSync('musicListColumns')}
-        handleDownClick={handleDownClick}
+          handleRowClick={handleRowClick}
-        handleDragEnd={handleDragEnd}
+          handleRowDoubleClick={handleRowDoubleClick}
-        virtualized
+          handleDragEnd={handleDragEnd}
-        rowHeight={Number(settings.getSync('musicListRowHeight'))}
+          virtualized
-        fontSize={Number(settings.getSync('musicListFontSize'))}
+          rowHeight={Number(settings.getSync('musicListRowHeight'))}
-        cacheImages={{
+          fontSize={Number(settings.getSync('musicListFontSize'))}
-          enabled: settings.getSync('cacheImages'),
+          cacheImages={{
-          cacheType: 'album',
+            enabled: settings.getSync('cacheImages'),
-          cacheIdProperty: 'albumId',
+            cacheType: 'album',
-        }}
+            cacheIdProperty: 'albumId',
-        listType="music"
+          }}
-        nowPlaying
+          listType="music"
-        dnd
+          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,62 +110,68 @@ const StarredView = () => {
         />
       }
     >
-      {currentPage === 'Tracks' && (
+      {isLoading ? (
-        <ListViewType
+        <PageLoader />
-          data={searchQuery !== '' ? filteredData : data.song}
+      ) : (
-          tableColumns={settings.getSync('musicListColumns')}
-          handleRowClick={handleRowClick}
-          handleRowDoubleClick={handleRowDoubleClick}
-          rowHeight={Number(settings.getSync('musicListRowHeight'))}
-          fontSize={settings.getSync('musicListFontSize')}
-          cacheImages={{
-            enabled: settings.getSync('cacheImages'),
-            cacheType: 'album',
-            cacheIdProperty: 'albumId',
-          }}
-          listType="music"
-          virtualized
-          disabledContextMenuOptions={['removeFromCurrent', 'moveSelectedTo']}
-        />
-      )}
-      {currentPage === 'Albums' && (
         <>
-          {viewType === 'list' && (
+          {currentPage === 'Tracks' && (
             <ListViewType
-              data={searchQuery !== '' ? filteredData : data.album}
+              data={searchQuery !== '' ? filteredData : data.song}
-              tableColumns={settings.getSync('albumListColumns')}
+              tableColumns={settings.getSync('musicListColumns')}
-              rowHeight={Number(settings.getSync('albumListRowHeight'))}
-              fontSize={settings.getSync('albumListFontSize')}
               handleRowClick={handleRowClick}
-              handleRowDoubleClick={handleRowDoubleClickAlbum}
+              handleRowDoubleClick={handleRowDoubleClick}
+              rowHeight={Number(settings.getSync('musicListRowHeight'))}
+              fontSize={settings.getSync('musicListFontSize')}
               cacheImages={{
                 enabled: settings.getSync('cacheImages'),
                 cacheType: 'album',
                 cacheIdProperty: 'albumId',
               }}
-              listType="album"
+              listType="music"
               virtualized
               disabledContextMenuOptions={['removeFromCurrent', 'moveSelectedTo']}
             />
           )}
-          {viewType === 'grid' && (
+          {currentPage === 'Albums' && (
-            <GridViewType
+            <>
-              data={searchQuery === '' ? data.album : filteredData}
+              {viewType === 'list' && (
-              cardTitle={{
+                <ListViewType
-                prefix: '/library/album',
+                  data={searchQuery !== '' ? filteredData : data.album}
-                property: 'name',
+                  tableColumns={settings.getSync('albumListColumns')}
-                urlProperty: 'albumId',
+                  rowHeight={Number(settings.getSync('albumListRowHeight'))}
-              }}
+                  fontSize={settings.getSync('albumListFontSize')}
-              cardSubtitle={{
+                  handleRowClick={handleRowClick}
-                prefix: 'artist',
+                  handleRowDoubleClick={handleRowDoubleClickAlbum}
-                property: 'artist',
+                  cacheImages={{
-                urlProperty: 'artistId',
+                    enabled: settings.getSync('cacheImages'),
-                unit: '',
+                    cacheType: 'album',
-              }}
+                    cacheIdProperty: 'albumId',
-              playClick={{ type: 'album', idProperty: 'id' }}
+                  }}
-              size={Number(settings.getSync('gridCardSize'))}
+                  listType="album"
-              cacheType="album"
+                  virtualized
-            />
+                  disabledContextMenuOptions={['removeFromCurrent', 'moveSelectedTo']}
+                />
+              )}
+              {viewType === 'grid' && (
+                <GridViewType
+                  data={searchQuery === '' ? data.album : filteredData}
+                  cardTitle={{
+                    prefix: '/library/album',
+                    property: 'name',
+                    urlProperty: 'albumId',
+                  }}
+                  cardSubtitle={{
+                    prefix: 'artist',
+                    property: 'artist',
+                    urlProperty: 'artistId',
+                    unit: '',
+                  }}
+                  playClick={{ type: 'album', idProperty: 'id' }}
+                  size={Number(settings.getSync('gridCardSize'))}
+                  cacheType="album"
+                />
+              )}
+            </>
           )}
         </>
       )}