diff --git a/ui/src/artist/ArtistShow.jsx b/ui/src/artist/ArtistShow.jsx index 242fdaeed..180f3a5b2 100644 --- a/ui/src/artist/ArtistShow.jsx +++ b/ui/src/artist/ArtistShow.jsx @@ -1,16 +1,18 @@ import React, { useState, createElement, useEffect } from 'react' -import { useMediaQuery } from '@material-ui/core' +import { useMediaQuery, withWidth } from '@material-ui/core' import { useShowController, ShowContextProvider, useRecordContext, useShowContext, ReferenceManyField, + Pagination, } from 'react-admin' import subsonic from '../subsonic' import AlbumGridView from '../album/AlbumGridView' import MobileArtistDetails from './MobileArtistDetails' import DesktopArtistDetails from './DesktopArtistDetails' +import { useAlbumsPerPage } from '../common/index.js' const ArtistDetails = (props) => { const record = useRecordContext(props) @@ -51,6 +53,18 @@ const ArtistDetails = (props) => { const AlbumShowLayout = (props) => { const showContext = useShowContext(props) const record = useRecordContext() + const { width } = props + const [, perPageOptions] = useAlbumsPerPage(width) + + const maxPerPage = 90 + let perPage = 0 + let pagination = null + + if (record?.stats?.['artist']?.albumCount > maxPerPage) { + perPage = Math.trunc(maxPerPage / perPageOptions[0]) * perPageOptions[0] + const rowsPerPageOptions = [1, 2, 3].map((option) => option * perPage) + pagination = + } return ( <> @@ -63,8 +77,8 @@ const AlbumShowLayout = (props) => { target="artist_id" sort={{ field: 'max_year', order: 'ASC' }} filter={{ artist_id: record?.id }} - perPage={0} - pagination={null} + perPage={perPage} + pagination={pagination} > @@ -73,13 +87,13 @@ const AlbumShowLayout = (props) => { ) } -const ArtistShow = (props) => { +const ArtistShow = withWidth()((props) => { const controllerProps = useShowController(props) return ( ) -} +}) export default ArtistShow diff --git a/ui/src/config.js b/ui/src/config.js index 7e99a8f88..92ce07893 100644 --- a/ui/src/config.js +++ b/ui/src/config.js @@ -5,7 +5,7 @@ const defaultConfig = { version: 'dev', firstTime: false, baseURL: '', - variousArtistsId: '03b645ef2100dfc42fa9785ea3102295', // See consts.VariousArtistsID in consts.go + variousArtistsId: '63sqASlAfjbGMuLP4JhnZU', // See consts.VariousArtistsID in consts.go // Login backgrounds from https://unsplash.com/collections/1065384/music-wallpapers loginBackgroundURL: 'https://source.unsplash.com/collection/1065384/1600x900', maxSidebarPlaylists: 100,