Save scroll position (grid view)

- album list
- artist list
- playlist list
- favorite list (album/artist)

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>

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>

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>

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));
+                  }}
                 />
               )}
             </>

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>