Browse Source

Save scroll position (grid view)

- album list
- artist list
- playlist list
- favorite list (album/artist)
master
jeffvli 3 years ago
parent
commit
71423b8c81
  1. 9
      src/components/library/AlbumList.tsx
  2. 5
      src/components/library/ArtistList.tsx
  3. 4
      src/components/playlist/PlaylistList.tsx
  4. 10
      src/components/starred/StarredView.tsx
  5. 23
      src/components/viewtypes/GridViewType.tsx

9
src/components/library/AlbumList.tsx

@ -46,6 +46,7 @@ const AlbumList = () => {
const [viewType, setViewType] = useState(settings.getSync('albumViewType'));
const [musicFolder, setMusicFolder] = useState(undefined);
const albumFilterPickerContainerRef = useRef(null);
const [isRefresh, setIsRefresh] = useState(false);
useEffect(() => {
if (folder.applied.albums) {
@ -226,6 +227,7 @@ const AlbumList = () => {
cleanable={false}
placeholder="Sort Type"
onChange={async (value: string) => {
setIsRefresh(true);
await queryClient.cancelQueries([
'albumList',
album.active.filter,
@ -233,6 +235,8 @@ const AlbumList = () => {
]);
dispatch(setSearchQuery(''));
dispatch(setActive({ ...album.active, filter: value }));
localStorage.setItem('scroll_grid_albumList', '0');
setIsRefresh(false);
}}
/>
@ -299,6 +303,11 @@ const AlbumList = () => {
size={config.lookAndFeel.gridView.cardSize}
cacheType="album"
handleFavorite={handleRowFavorite}
initialScrollOffset={Number(localStorage.getItem('scroll_grid_albumList'))}
onScroll={(scrollIndex: number) => {
localStorage.setItem('scroll_grid_albumList', String(scrollIndex));
}}
refresh={isRefresh}
/>
)}
</GenericPage>

5
src/components/library/ArtistList.tsx

@ -194,8 +194,13 @@ const ArtistList = () => {
}
playClick={{ type: 'artist', idProperty: 'id' }}
size={config.lookAndFeel.gridView.cardSize}
s
cacheType="artist"
handleFavorite={handleRowFavorite}
initialScrollOffset={Number(localStorage.getItem('scroll_grid_artistList'))}
onScroll={(scrollIndex: number) => {
localStorage.setItem('scroll_grid_artistList', String(scrollIndex));
}}
/>
)}
</GenericPage>

4
src/components/playlist/PlaylistList.tsx

@ -188,6 +188,10 @@ const PlaylistList = () => {
playClick={{ type: 'playlist', idProperty: 'id' }}
size={config.lookAndFeel.gridView.cardSize}
cacheType="playlist"
initialScrollOffset={Number(localStorage.getItem('scroll_grid_playlistList'))}
onScroll={(scrollIndex: number) => {
localStorage.setItem('scroll_grid_playlistList', String(scrollIndex));
}}
/>
)}
</GenericPage>

10
src/components/starred/StarredView.tsx

@ -281,6 +281,10 @@ const StarredView = () => {
size={config.lookAndFeel.gridView.cardSize}
cacheType="album"
handleFavorite={handleRowFavoriteAlbum}
initialScrollOffset={Number(localStorage.getItem('scroll_grid_starredAlbumList'))}
onScroll={(scrollIndex: number) => {
localStorage.setItem('scroll_grid_starredAlbumList', String(scrollIndex));
}}
/>
)}
</>
@ -329,6 +333,12 @@ const StarredView = () => {
size={config.lookAndFeel.gridView.cardSize}
cacheType="artist"
handleFavorite={handleRowFavoriteArtist}
initialScrollOffset={Number(
localStorage.getItem('scroll_grid_starredArtistList')
)}
onScroll={(scrollIndex: number) => {
localStorage.setItem('scroll_grid_starredArtistList', String(scrollIndex));
}}
/>
)}
</>

23
src/components/viewtypes/GridViewType.tsx

@ -1,5 +1,5 @@
// Referenced from: https://codesandbox.io/s/jjkz5y130w?file=/index.js:700-703
import React, { useEffect, useMemo, useState } from 'react';
import React, { createRef, useEffect, useMemo, useState } from 'react';
import settings from 'electron-settings';
import { FixedSizeList as List } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';
@ -91,12 +91,16 @@ function ListWrapper({
cachePath,
handleFavorite,
musicFolderId,
initialScrollOffset,
onItemsRendered,
refresh,
}: any) {
const cardHeight = size + 55;
const cardWidth = size;
// How many cards can we show per row, given the current width?
const columnCount = Math.floor((width - gapSize + 3) / (cardWidth + gapSize + 2));
const rowCount = Math.ceil(itemCount / columnCount);
const gridRef = createRef<any>();
const itemData = useMemo(
() => ({
@ -137,14 +141,25 @@ function ListWrapper({
]
);
useEffect(() => {
if (refresh) {
gridRef.current.scrollTo(0);
}
}, [gridRef, refresh]);
return (
<List
ref={gridRef}
className="List"
height={height}
itemCount={rowCount}
itemSize={cardHeight + gapSize}
width={width}
itemData={itemData}
initialScrollOffset={initialScrollOffset && initialScrollOffset * (cardHeight + gapSize + 2)}
onItemsRendered={({ visibleStartIndex }) => {
onItemsRendered(visibleStartIndex);
}}
>
{GridCard}
</List>
@ -159,6 +174,9 @@ const GridViewType = ({
size,
cacheType,
handleFavorite,
initialScrollOffset,
onScroll,
refresh,
}: any) => {
const cacheImages = Boolean(settings.getSync('cacheImages'));
const misc = useAppSelector((state) => state.misc);
@ -191,6 +209,9 @@ const GridViewType = ({
cachePath={misc.imageCachePath}
handleFavorite={handleFavorite}
musicFolderId={musicFolder}
initialScrollOffset={initialScrollOffset}
onItemsRendered={onScroll || (() => {})}
refresh={refresh}
/>
)}
</AutoSizer>

Loading…
Cancel
Save