third-party-mirrors/navidrome
1
0
Fork 0
mirror of https://github.com/navidrome/navidrome.git synced 2025-04-15 03:30:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add artist image lightbox

Browse Source
This commit is contained in:
Deluan 2021-10-30 20:05:01 -04:00
parent 1823159b25
commit 84bbcdbfc2
2 changed files with 39 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
ui/src/artist/DesktopArtistDetails.js
View File

@ -7,6 +7,7 @@ import CardMedia from '@material-ui/core/CardMedia'
import ArtistExternalLinks from './ArtistExternalLink'
import config from '../config'
import { LoveButton, RatingField } from '../common'
import Lightbox from 'react-image-lightbox'
const useStyles = makeStyles(
(theme) => ({
@ -32,6 +33,7 @@ const useStyles = makeStyles(
cover: {
width: 151,
borderRadius: '6em',
cursor: 'pointer',
},
artistImage: {
maxHeight: '9.5rem',
@ -66,6 +68,13 @@ const DesktopArtistDetails = ({ img, artistInfo, record, biography }) => {
const [expanded, setExpanded] = useState(false)
const classes = useStyles({ img, expanded })
const title = record.name
const [isLightboxOpen, setLightboxOpen] = React.useState(false)
const handleOpenLightbox = React.useCallback(() => setLightboxOpen(true), [])
const handleCloseLightbox = React.useCallback(
() => setLightboxOpen(false),
[]
)
return (
<div className={classes.root}>
@ -74,7 +83,8 @@ const DesktopArtistDetails = ({ img, artistInfo, record, biography }) => {
{artistInfo && (
<CardMedia
className={classes.cover}
image={`${artistInfo.mediumImageUrl}`}
image={artistInfo.mediumImageUrl}
onClick={handleOpenLightbox}
title={title}
/>
)}
@ -126,6 +136,15 @@ const DesktopArtistDetails = ({ img, artistInfo, record, biography }) => {
<ArtistExternalLinks artistInfo={artistInfo} record={record} />
</Typography>
</div>
{isLightboxOpen && (
<Lightbox
imagePadding={50}
animationDuration={200}
imageTitle={record.name}
mainSrc={artistInfo.largeImageUrl}
onCloseRequest={handleCloseLightbox}
/>
)}
</Card>
</div>
)

20
ui/src/artist/MobileArtistDetails.js
View File

@ -5,6 +5,7 @@ import Card from '@material-ui/core/Card'
import CardMedia from '@material-ui/core/CardMedia'
import config from '../config'
import { LoveButton, RatingField } from '../common'
import Lightbox from 'react-image-lightbox'
const useStyles = makeStyles(
(theme) => ({
@ -77,6 +78,13 @@ const MobileArtistDetails = ({ img, artistInfo, biography, record }) => {
const [expanded, setExpanded] = useState(false)
const classes = useStyles({ img, expanded })
const title = record.name
const [isLightboxOpen, setLightboxOpen] = React.useState(false)
const handleOpenLightbox = React.useCallback(() => setLightboxOpen(true), [])
const handleCloseLightbox = React.useCallback(
() => setLightboxOpen(false),
[]
)
return (
<>
@ -86,7 +94,8 @@ const MobileArtistDetails = ({ img, artistInfo, biography, record }) => {
{artistInfo && (
<CardMedia
className={classes.cover}
image={`${artistInfo.mediumImageUrl}`}
image={artistInfo.mediumImageUrl}
onClick={handleOpenLightbox}
title={title}
/>
)}
@ -127,6 +136,15 @@ const MobileArtistDetails = ({ img, artistInfo, biography, record }) => {
</Typography>
</Collapse>
</div>
{isLightboxOpen && (
<Lightbox
imagePadding={50}
animationDuration={200}
imageTitle={record.name}
mainSrc={artistInfo.largeImageUrl}
onCloseRequest={handleCloseLightbox}
/>
)}
</>
)
}