diff --git a/src/components/library/AlbumList.tsx b/src/components/library/AlbumList.tsx index 1e81760..c1c633c 100644 --- a/src/components/library/AlbumList.tsx +++ b/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} /> )} diff --git a/src/components/library/ArtistList.tsx b/src/components/library/ArtistList.tsx index 9de503b..934f51b 100644 --- a/src/components/library/ArtistList.tsx +++ b/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)); + }} /> )} diff --git a/src/components/playlist/PlaylistList.tsx b/src/components/playlist/PlaylistList.tsx index f2a75a8..5b2f13e 100644 --- a/src/components/playlist/PlaylistList.tsx +++ b/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)); + }} /> )} diff --git a/src/components/starred/StarredView.tsx b/src/components/starred/StarredView.tsx index cb697dc..4d04473 100644 --- a/src/components/starred/StarredView.tsx +++ b/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)); + }} /> )} diff --git a/src/components/viewtypes/GridViewType.tsx b/src/components/viewtypes/GridViewType.tsx index 4d38bdf..dbe3a6c 100644 --- a/src/components/viewtypes/GridViewType.tsx +++ b/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(); const itemData = useMemo( () => ({ @@ -137,14 +141,25 @@ function ListWrapper({ ] ); + useEffect(() => { + if (refresh) { + gridRef.current.scrollTo(0); + } + }, [gridRef, refresh]); + return ( { + onItemsRendered(visibleStartIndex); + }} > {GridCard} @@ -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} /> )}