Add album cover lightbox

ui/src/album/AlbumDetails.js

@@ -1,11 +1,14 @@
 import React from 'react'
 import { Card, CardContent, CardMedia, Typography } from '@material-ui/core'
 import { useTranslate } from 'react-admin'
+import Lightbox from 'react-image-lightbox'
+import 'react-image-lightbox/style.css'
 import subsonic from '../subsonic'
 import { DurationField, formatRange } from '../common'
 import { ArtistLinkField } from '../common'
 
 const AlbumDetails = ({ classes, record }) => {
+  const [isLightboxOpen, setLightboxOpen] = React.useState(false)
   const translate = useTranslate()
   const genreYear = (record) => {
     let genreDateLine = []
@@ -19,11 +22,20 @@ const AlbumDetails = ({ classes, record }) => {
     return genreDateLine.join(' · ')
   }
 
+  const imageUrl = subsonic.url('getCoverArt', record.coverArtId || 'not_found')
+
+  const handleOpenLightbox = React.useCallback(() => setLightboxOpen(true), [])
+  const handleCloseLightbox = React.useCallback(
+    () => setLightboxOpen(false),
+    []
+  )
+
   return (
     <Card className={classes.container}>
       <CardMedia
-        image={subsonic.url('getCoverArt', record.coverArtId || 'not_found')}
+        image={imageUrl}
         className={classes.albumCover}
+        onClick={handleOpenLightbox}
       />
       <CardContent className={classes.albumDetails}>
         <Typography variant="h5" className={classes.albumTitle}>
@@ -39,6 +51,16 @@ const AlbumDetails = ({ classes, record }) => {
           · <DurationField record={record} source={'duration'} />
         </Typography>
       </CardContent>
+
+      {isLightboxOpen && (
+        <Lightbox
+          imagePadding={50}
+          animationDuration={200}
+          imageTitle={record.name}
+          mainSrc={imageUrl}
+          onCloseRequest={handleCloseLightbox}
+        />
+      )}
     </Card>
   )
 }

ui/src/album/styles.js

@@ -13,6 +13,7 @@ export const useStyles = makeStyles((theme) => ({
   },
   albumCover: {
     display: 'inline-block',
+    cursor: 'pointer',
     [theme.breakpoints.down('xs')]: {
       height: '8em',
       width: '8em',