diff --git a/ui/src/album/AlbumList.js b/ui/src/album/AlbumList.js index d8d9b7ea..959e5078 100644 --- a/ui/src/album/AlbumList.js +++ b/ui/src/album/AlbumList.js @@ -1,6 +1,6 @@ import React from 'react' import { useSelector } from 'react-redux' -import { useLocation } from 'react-router-dom' +import { Redirect, useLocation } from 'react-router-dom' import { AutocompleteInput, Filter, @@ -19,6 +19,7 @@ import AlbumListView from './AlbumListView' import AlbumGridView from './AlbumGridView' import { ALBUM_MODE_LIST } from './albumState' import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog' +import albumLists from './albumLists' const AlbumFilter = (props) => { const translate = useTranslate() @@ -53,6 +54,18 @@ const AlbumList = (props) => { }) const isArtistView = !!(query.filter && query.filter.artist_id) + // If it does not have filter/sort params (usually coming from Menu), + // reload with correct filter/sort params + if (!location.search) { + let type = + location.pathname.replace(/^\/album/, '').replace(/^\//, '') || 'all' + + const listParams = albumLists[type] + if (listParams) { + return + } + } + return ( <> { bulkActionButtons={false} actions={} filters={} - sort={{ field: 'name', order: 'ASC' }} perPage={perPage} pagination={} > diff --git a/ui/src/album/albumLists.js b/ui/src/album/albumLists.js new file mode 100644 index 00000000..49ec4674 --- /dev/null +++ b/ui/src/album/albumLists.js @@ -0,0 +1,25 @@ +import ShuffleIcon from '@material-ui/icons/Shuffle' +import LibraryAddIcon from '@material-ui/icons/LibraryAdd' +import VideoLibraryIcon from '@material-ui/icons/VideoLibrary' +import RepeatIcon from '@material-ui/icons/Repeat' +import AlbumIcon from '@material-ui/icons/Album' + +export default { + all: { + icon: AlbumIcon, + params: 'sort=name&order=ASC', + }, + random: { icon: ShuffleIcon, params: 'sort=random' }, + recentlyAdded: { + icon: LibraryAddIcon, + params: 'sort=created_at&order=DESC', + }, + recentlyPlayed: { + icon: VideoLibraryIcon, + params: 'sort=play_date&order=DESC&filter={"recently_played":true}', + }, + mostPlayed: { + icon: RepeatIcon, + params: 'sort=play_count&order=DESC&filter={"recently_played":true}', + }, +} diff --git a/ui/src/layout/Menu.js b/ui/src/layout/Menu.js index ff2fa5f8..deff95bf 100644 --- a/ui/src/layout/Menu.js +++ b/ui/src/layout/Menu.js @@ -10,10 +10,7 @@ import AlbumIcon from '@material-ui/icons/Album' import SubMenu from './SubMenu' import inflection from 'inflection' import PersonalMenu from './PersonalMenu' -import ShuffleIcon from '@material-ui/icons/Shuffle' -import LibraryAddIcon from '@material-ui/icons/LibraryAdd' -import VideoLibraryIcon from '@material-ui/icons/VideoLibrary' -import RepeatIcon from '@material-ui/icons/Repeat' +import albumLists from '../album/albumLists' const translatedResourceName = (resource, translate) => translate(`resources.${resource.name}.name`, { @@ -27,26 +24,6 @@ const translatedResourceName = (resource, translate) => : inflection.humanize(inflection.pluralize(resource.name)), }) -const albumLists = [ - { type: '', icon: AlbumIcon, params: 'sort=name&order=ASC' }, - { type: 'random', icon: ShuffleIcon, params: 'sort=random' }, - { - type: 'recentlyAdded', - icon: LibraryAddIcon, - params: 'sort=created_at&order=DESC', - }, - { - type: 'recentlyPlayed', - icon: VideoLibraryIcon, - params: 'sort=play_date&order=DESC&filter={"recently_played":true}', - }, - { - type: 'mostPlayed', - icon: RepeatIcon, - params: 'sort=play_count&order=DESC&filter={"recently_played":true}', - }, -] - const Menu = ({ onMenuClick, dense, logout }) => { const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs')) const open = useSelector((state) => state.admin.ui.sidebarOpen) @@ -78,13 +55,13 @@ const Menu = ({ onMenuClick, dense, logout }) => { /> ) - const renderAlbumMenuItemLink = ({ type, params, icon }) => { + const renderAlbumMenuItemLink = (type, al) => { const resource = resources.find((r) => r.name === 'album') if (!resource) { return null } - const albumListAddress = `/album/${type}?${params}` + const albumListAddress = `/album/${type}` const name = translate(`resources.album.lists.${type || 'default'}`, { _: translatedResourceName(resource, translate), @@ -92,10 +69,10 @@ const Menu = ({ onMenuClick, dense, logout }) => { return ( } + leftIcon={(al.icon && createElement(al.icon)) || } onClick={onMenuClick} sidebarIsOpen={open} dense={dense} @@ -117,7 +94,9 @@ const Menu = ({ onMenuClick, dense, logout }) => { icon={} dense={dense} > - {albumLists.map((al) => renderAlbumMenuItemLink(al))} + {Object.keys(albumLists).map((type) => + renderAlbumMenuItemLink(type, albumLists[type]) + )} handleToggle('menuLibrary')}