mirror of
https://github.com/navidrome/navidrome.git
synced 2026-11-07 02:38:50 +01:00
6c2644d208* feat(ui): add perPageStore helper for items-per-page persistence * feat(ui): persist items-per-page selection in localStorage * feat(ui): enable per-page persistence on album grid, missing files and playlist tracks * feat(ui): restore saved album grid page size on fresh load * feat(ui): restore saved items-per-page on list load * fix(ui): move defaultRowsPerPageOptions to perPageStore to satisfy react-refresh lint * fix(ui): correct defaultRowsPerPageOptions import in List and add render test * refactor(ui): default getStoredPerPage fallback to the first option The fallback equalled options[0] at three of four call sites; default it so those sites stop restating it. SongList and useAlbumsPerPage still pass an explicit fallback where it legitimately differs from the first option. * fix(ui): persist only user-selected page sizes, validate album size against width Persisting on every pagination context value let a URL-injected perPage (e.g. the perPage=15 album link in NowPlayingPanel) or a forced single-option mobile grid overwrite the saved preference. Persist only a value that is an actual option in a multi-option selector. Also validate the album grid's redux session value against the current width so a size chosen at a wider breakpoint can't leave an out-of-range selector. * fix(ui): restore saved items-per-page on the radio list RadioList passed a hard-coded perPage that overrode List's stored seed via the props spread, so a radio-list page size was persisted but never restored. Seed it from storage like the other list views. * fix(ui): persist page size only on an actual selector change Watching the pagination context value meant any valid value persisted itself: loading a list at a breakpoint where the saved size is invalid stored the responsive fallback, and opening a URL with a valid ?perPage= stored that too, either way discarding the user's real preference. Inject a wrapped setPerPage instead, so only the rows-per-page selector writes. This also drops the option-validation heuristics, which the new trigger makes unnecessary.
32 lines
1,012 B
JavaScript
32 lines
1,012 B
JavaScript
import { useSelector } from 'react-redux'
|
|
import { getStoredPerPage } from './perPageStore'
|
|
|
|
const getPerPage = (width) => {
|
|
if (width === 'xs') return 12
|
|
if (width === 'sm') return 12
|
|
if (width === 'md') return 12
|
|
if (width === 'lg') return 18
|
|
return 36
|
|
}
|
|
|
|
const getPerPageOptions = (width) => {
|
|
const options = [3, 6, 12]
|
|
if (width === 'xs') return [12]
|
|
if (width === 'sm') return [12]
|
|
if (width === 'md') return options.map((v) => v * 4)
|
|
return options.map((v) => v * 6)
|
|
}
|
|
|
|
export const useAlbumsPerPage = (width) => {
|
|
const options = getPerPageOptions(width)
|
|
const sessionPerPage = useSelector(
|
|
(state) => state?.admin.resources?.album?.list?.params?.perPage,
|
|
)
|
|
// Use the session value only when it's valid for the current width, so a
|
|
// size picked at a wider breakpoint can't leave an out-of-range selector.
|
|
const perPage = options.includes(sessionPerPage)
|
|
? sessionPerPage
|
|
: getStoredPerPage('album', options, getPerPage(width))
|
|
|
|
return [perPage, options]
|
|
}
|