-
-
Notifications
You must be signed in to change notification settings - Fork 798
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: option to display albums as a grid
- Loading branch information
Showing
7 changed files
with
271 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,87 @@ | ||
import React from 'react' | ||
import { GridList, GridListTile, GridListTileBar } from '@material-ui/core' | ||
import { makeStyles } from '@material-ui/core/styles' | ||
import withWidth from '@material-ui/core/withWidth' | ||
import { Link } from 'react-router-dom' | ||
import { linkToRecord } from 'ra-core' | ||
import { Loading } from 'react-admin' | ||
import { subsonicUrl } from '../subsonic' | ||
|
||
const useStyles = makeStyles((theme) => ({ | ||
root: { | ||
margin: '5px' | ||
}, | ||
cover: { | ||
display: 'inline-block', | ||
maxWidth: '100%', | ||
height: 'auto' | ||
}, | ||
tileBar: { | ||
textAlign: 'center', | ||
background: | ||
'linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.4) 70%,rgba(0,0,0,0) 100%)' | ||
}, | ||
albumArtistName: { | ||
whiteSpace: 'nowrap', | ||
overflow: 'hidden', | ||
textOverflow: 'ellipsis', | ||
textAlign: 'center', | ||
fontSize: '1em' | ||
} | ||
})) | ||
|
||
const getColsForWidth = (width) => { | ||
if (width === 'xs') return 2 | ||
if (width === 'sm') return 4 | ||
if (width === 'md') return 5 | ||
if (width === 'lg') return 6 | ||
return 7 | ||
} | ||
|
||
const LoadedAlbumGrid = ({ ids, data, basePath, width }) => { | ||
const classes = useStyles() | ||
return ( | ||
<div className={classes.root}> | ||
<GridList | ||
cellHeight={'auto'} | ||
cols={getColsForWidth(width)} | ||
className={classes.gridList} | ||
spacing={20} | ||
> | ||
{ids.map((id) => ( | ||
<GridListTile | ||
component={Link} | ||
key={id} | ||
to={linkToRecord(basePath, data[id].id, 'show')} | ||
> | ||
<img | ||
src={subsonicUrl( | ||
'getCoverArt', | ||
data[id].coverArtId || 'not_found', | ||
{ size: 300 } | ||
)} | ||
alt={data[id].album} | ||
className={classes.cover} | ||
/> | ||
<GridListTileBar | ||
className={classes.tileBar} | ||
title={data[id].name} | ||
subtitle={ | ||
<> | ||
<div className={classes.albumArtistName}> | ||
{data[id].albumArtist} | ||
</div> | ||
</> | ||
} | ||
/> | ||
</GridListTile> | ||
))} | ||
</GridList> | ||
</div> | ||
) | ||
} | ||
|
||
const AlbumGridView = ({ loading, ...props }) => | ||
loading ? <Loading /> : <LoadedAlbumGrid {...props} /> | ||
|
||
export default withWidth()(AlbumGridView) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
import React, { cloneElement } from 'react' | ||
import { Button, sanitizeListRestProps, TopToolbar } from 'react-admin' | ||
import { ButtonGroup } from '@material-ui/core' | ||
import ViewHeadlineIcon from '@material-ui/icons/ViewHeadline' | ||
import ViewModuleIcon from '@material-ui/icons/ViewModule' | ||
import { useDispatch, useSelector } from 'react-redux' | ||
import { ALBUM_GRID_MODE, ALBUM_LIST_MODE, selectViewMode } from './albumState' | ||
|
||
const AlbumListActions = ({ | ||
currentSort, | ||
className, | ||
resource, | ||
filters, | ||
displayedFilters, | ||
filterValues, | ||
permanentFilter, | ||
exporter, | ||
basePath, | ||
selectedIds, | ||
onUnselectItems, | ||
showFilter, | ||
maxResults, | ||
total, | ||
fullWidth, | ||
...rest | ||
}) => { | ||
const dispatch = useDispatch() | ||
const albumView = useSelector((state) => state.albumView) | ||
|
||
return ( | ||
<TopToolbar className={className} {...sanitizeListRestProps(rest)}> | ||
{filters && | ||
cloneElement(filters, { | ||
resource, | ||
showFilter, | ||
displayedFilters, | ||
filterValues, | ||
context: 'button' | ||
})} | ||
<ButtonGroup | ||
variant="text" | ||
color="primary" | ||
aria-label="text primary button group" | ||
> | ||
<Button | ||
size="small" | ||
color={albumView.mode === ALBUM_LIST_MODE ? 'primary' : 'secondary'} | ||
onClick={() => dispatch(selectViewMode(ALBUM_LIST_MODE))} | ||
> | ||
<ViewHeadlineIcon fontSize="inherit" /> | ||
</Button> | ||
<Button | ||
size="small" | ||
color={albumView.mode === ALBUM_GRID_MODE ? 'primary' : 'secondary'} | ||
onClick={() => dispatch(selectViewMode(ALBUM_GRID_MODE))} | ||
> | ||
<ViewModuleIcon fontSize="inherit" /> | ||
</Button> | ||
</ButtonGroup> | ||
</TopToolbar> | ||
) | ||
} | ||
|
||
AlbumListActions.defaultProps = { | ||
selectedIds: [], | ||
onUnselectItems: () => null | ||
} | ||
|
||
export default AlbumListActions |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
import React from 'react' | ||
import { | ||
BooleanField, | ||
Datagrid, | ||
DateField, | ||
NumberField, | ||
FunctionField, | ||
Show, | ||
SimpleShowLayout, | ||
TextField | ||
} from 'react-admin' | ||
import { DurationField, RangeField } from '../common' | ||
import { useMediaQuery } from '@material-ui/core' | ||
|
||
const AlbumDetails = (props) => { | ||
return ( | ||
<Show {...props} title=" "> | ||
<SimpleShowLayout> | ||
<TextField source="albumArtist" /> | ||
<TextField source="genre" /> | ||
<BooleanField source="compilation" /> | ||
<DateField source="updatedAt" showTime /> | ||
</SimpleShowLayout> | ||
</Show> | ||
) | ||
} | ||
|
||
const AlbumListView = (props) => { | ||
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md')) | ||
return ( | ||
<Datagrid {...props} expand={<AlbumDetails />} rowClick={'show'}> | ||
<TextField source="name" /> | ||
<FunctionField | ||
source="artist" | ||
render={(r) => (r.albumArtist ? r.albumArtist : r.artist)} | ||
/> | ||
{isDesktop && <NumberField source="songCount" />} | ||
<RangeField source={'year'} sortBy={'maxYear'} /> | ||
{isDesktop && <DurationField source="duration" />} | ||
</Datagrid> | ||
) | ||
} | ||
export default AlbumListView |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
const ALBUM_GRID_MODE = 'ALBUM_GRID_MODE' | ||
const ALBUM_LIST_MODE = 'ALBUM_LIST_MODE' | ||
|
||
const selectViewMode = (mode) => ({ type: mode }) | ||
|
||
const albumViewReducer = ( | ||
previousState = { | ||
mode: localStorage.getItem('albumViewMode') || ALBUM_LIST_MODE | ||
}, | ||
payload | ||
) => { | ||
const { type } = payload | ||
switch (type) { | ||
case ALBUM_GRID_MODE: | ||
case ALBUM_LIST_MODE: | ||
localStorage.setItem('albumViewMode', type) | ||
return { mode: type } | ||
default: | ||
return previousState | ||
} | ||
} | ||
|
||
export { ALBUM_LIST_MODE, ALBUM_GRID_MODE, albumViewReducer, selectViewMode } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters