Redirect from plain `/album` path to a default album list
This commit is contained in:
parent
eae46d15bf
commit
d5da23ae42
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { useSelector } from 'react-redux'
|
import { useSelector } from 'react-redux'
|
||||||
import { useLocation } from 'react-router-dom'
|
import { Redirect, useLocation } from 'react-router-dom'
|
||||||
import {
|
import {
|
||||||
AutocompleteInput,
|
AutocompleteInput,
|
||||||
Filter,
|
Filter,
|
||||||
|
@ -19,6 +19,7 @@ import AlbumListView from './AlbumListView'
|
||||||
import AlbumGridView from './AlbumGridView'
|
import AlbumGridView from './AlbumGridView'
|
||||||
import { ALBUM_MODE_LIST } from './albumState'
|
import { ALBUM_MODE_LIST } from './albumState'
|
||||||
import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
|
import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
|
||||||
|
import albumLists from './albumLists'
|
||||||
|
|
||||||
const AlbumFilter = (props) => {
|
const AlbumFilter = (props) => {
|
||||||
const translate = useTranslate()
|
const translate = useTranslate()
|
||||||
|
@ -53,6 +54,18 @@ const AlbumList = (props) => {
|
||||||
})
|
})
|
||||||
const isArtistView = !!(query.filter && query.filter.artist_id)
|
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 <Redirect to={`/album/${type}?${listParams.params}`} />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<List
|
<List
|
||||||
|
@ -61,7 +74,6 @@ const AlbumList = (props) => {
|
||||||
bulkActionButtons={false}
|
bulkActionButtons={false}
|
||||||
actions={<AlbumListActions />}
|
actions={<AlbumListActions />}
|
||||||
filters={<AlbumFilter />}
|
filters={<AlbumFilter />}
|
||||||
sort={{ field: 'name', order: 'ASC' }}
|
|
||||||
perPage={perPage}
|
perPage={perPage}
|
||||||
pagination={<Pagination rowsPerPageOptions={perPageOptions} />}
|
pagination={<Pagination rowsPerPageOptions={perPageOptions} />}
|
||||||
>
|
>
|
||||||
|
|
|
@ -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}',
|
||||||
|
},
|
||||||
|
}
|
|
@ -10,10 +10,7 @@ import AlbumIcon from '@material-ui/icons/Album'
|
||||||
import SubMenu from './SubMenu'
|
import SubMenu from './SubMenu'
|
||||||
import inflection from 'inflection'
|
import inflection from 'inflection'
|
||||||
import PersonalMenu from './PersonalMenu'
|
import PersonalMenu from './PersonalMenu'
|
||||||
import ShuffleIcon from '@material-ui/icons/Shuffle'
|
import albumLists from '../album/albumLists'
|
||||||
import LibraryAddIcon from '@material-ui/icons/LibraryAdd'
|
|
||||||
import VideoLibraryIcon from '@material-ui/icons/VideoLibrary'
|
|
||||||
import RepeatIcon from '@material-ui/icons/Repeat'
|
|
||||||
|
|
||||||
const translatedResourceName = (resource, translate) =>
|
const translatedResourceName = (resource, translate) =>
|
||||||
translate(`resources.${resource.name}.name`, {
|
translate(`resources.${resource.name}.name`, {
|
||||||
|
@ -27,26 +24,6 @@ const translatedResourceName = (resource, translate) =>
|
||||||
: inflection.humanize(inflection.pluralize(resource.name)),
|
: 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 Menu = ({ onMenuClick, dense, logout }) => {
|
||||||
const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
|
const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
|
||||||
const open = useSelector((state) => state.admin.ui.sidebarOpen)
|
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')
|
const resource = resources.find((r) => r.name === 'album')
|
||||||
if (!resource) {
|
if (!resource) {
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
const albumListAddress = `/album/${type}?${params}`
|
const albumListAddress = `/album/${type}`
|
||||||
|
|
||||||
const name = translate(`resources.album.lists.${type || 'default'}`, {
|
const name = translate(`resources.album.lists.${type || 'default'}`, {
|
||||||
_: translatedResourceName(resource, translate),
|
_: translatedResourceName(resource, translate),
|
||||||
|
@ -92,10 +69,10 @@ const Menu = ({ onMenuClick, dense, logout }) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MenuItemLink
|
<MenuItemLink
|
||||||
key={`album/${type}`}
|
key={albumListAddress}
|
||||||
to={albumListAddress}
|
to={albumListAddress}
|
||||||
primaryText={name}
|
primaryText={name}
|
||||||
leftIcon={(icon && createElement(icon)) || <ViewListIcon />}
|
leftIcon={(al.icon && createElement(al.icon)) || <ViewListIcon />}
|
||||||
onClick={onMenuClick}
|
onClick={onMenuClick}
|
||||||
sidebarIsOpen={open}
|
sidebarIsOpen={open}
|
||||||
dense={dense}
|
dense={dense}
|
||||||
|
@ -117,7 +94,9 @@ const Menu = ({ onMenuClick, dense, logout }) => {
|
||||||
icon={<AlbumIcon />}
|
icon={<AlbumIcon />}
|
||||||
dense={dense}
|
dense={dense}
|
||||||
>
|
>
|
||||||
{albumLists.map((al) => renderAlbumMenuItemLink(al))}
|
{Object.keys(albumLists).map((type) =>
|
||||||
|
renderAlbumMenuItemLink(type, albumLists[type])
|
||||||
|
)}
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
<SubMenu
|
<SubMenu
|
||||||
handleToggle={() => handleToggle('menuLibrary')}
|
handleToggle={() => handleToggle('menuLibrary')}
|
||||||
|
|
Loading…
Reference in New Issue