Starred/NowPlaying view cleanup

- Add functionality to miniview buttons
3 years ago · c43ba347c4
3 changed files with 101 additions and 126 deletions
--- a/src/components/player/NowPlayingMiniView.tsx
+++ b/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 = () => {
                          }
                        }}
                      />
+                      {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}
--- a/src/components/player/NowPlayingView.tsx
+++ b/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
-        ref={tableRef}
-        data={searchQuery !== '' ? filteredData : playQueue[getCurrentEntryList(playQueue)]}
-        currentIndex={playQueue.currentIndex}
-        tableColumns={settings.getSync('musicListColumns')}
-        handleRowClick={handleRowClick}
-        handleRowDoubleClick={handleRowDoubleClick}
-        handleUpClick={handleUpClick}
-        handleDownClick={handleDownClick}
-        handleDragEnd={handleDragEnd}
-        virtualized
-        rowHeight={Number(settings.getSync('musicListRowHeight'))}
-        fontSize={Number(settings.getSync('musicListFontSize'))}
-        cacheImages={{
-          enabled: settings.getSync('cacheImages'),
-          cacheType: 'album',
-          cacheIdProperty: 'albumId',
-        }}
-        listType="music"
-        nowPlaying
-        dnd
-      />
+      {!playQueue ? (
+        <PageLoader />
+      ) : (
+        <ListViewType
+          ref={tableRef}
+          data={searchQuery !== '' ? filteredData : playQueue[getCurrentEntryList(playQueue)]}
+          currentIndex={playQueue.currentIndex}
+          tableColumns={settings.getSync('musicListColumns')}
+          handleRowClick={handleRowClick}
+          handleRowDoubleClick={handleRowDoubleClick}
+          handleDragEnd={handleDragEnd}
+          virtualized
+          rowHeight={Number(settings.getSync('musicListRowHeight'))}
+          fontSize={Number(settings.getSync('musicListFontSize'))}
+          cacheImages={{
+            enabled: settings.getSync('cacheImages'),
+            cacheType: 'album',
+            cacheIdProperty: 'albumId',
+          }}
+          listType="music"
+          nowPlaying
+          dnd
+        />
+      )}
    </GenericPage>
  );
 };
--- a/src/components/starred/StarredView.tsx
+++ b/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' && (
-        <ListViewType
-          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' && (
+      {isLoading ? (
+        <PageLoader />
+      ) : (
        <>
-          {viewType === 'list' && (
+          {currentPage === 'Tracks' && (
            <ListViewType
-              data={searchQuery !== '' ? filteredData : data.album}
-              tableColumns={settings.getSync('albumListColumns')}
-              rowHeight={Number(settings.getSync('albumListRowHeight'))}
-              fontSize={settings.getSync('albumListFontSize')}
+              data={searchQuery !== '' ? filteredData : data.song}
+              tableColumns={settings.getSync('musicListColumns')}
              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' && (
-            <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"
-            />
+          {currentPage === 'Albums' && (
+            <>
+              {viewType === 'list' && (
+                <ListViewType
+                  data={searchQuery !== '' ? filteredData : data.album}
+                  tableColumns={settings.getSync('albumListColumns')}
+                  rowHeight={Number(settings.getSync('albumListRowHeight'))}
+                  fontSize={settings.getSync('albumListFontSize')}
+                  handleRowClick={handleRowClick}
+                  handleRowDoubleClick={handleRowDoubleClickAlbum}
+                  cacheImages={{
+                    enabled: settings.getSync('cacheImages'),
+                    cacheType: 'album',
+                    cacheIdProperty: 'albumId',
+                  }}
+                  listType="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"
+                />
+              )}
+            </>
          )}
        </>
      )}