Add album cover lightbox

ui/package-lock.json

@@ -6191,6 +6191,11 @@
         "strip-eof": "^1.0.0"
       }
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+    },
     "exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -13494,6 +13499,15 @@
         "react-icon-base": "2.1.0"
       }
     },
+    "react-image-lightbox": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/react-image-lightbox/-/react-image-lightbox-5.1.1.tgz",
+      "integrity": "sha512-GprldD8AqpRb2hsOdns3sI7Xeo9hJlcybDxuli4RB+ml1J/GaFaUuRkT/7IrTLv2+4vkR74ahz2LD0HOUHI7wA==",
+      "requires": {
+        "prop-types": "^15.6.2",
+        "react-modal": "^3.8.1"
+      }
+    },
     "react-is": {
       "version": "16.12.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
@@ -13531,6 +13545,17 @@
         "resize-observer-polyfill": "^1.5.0"
       }
     },
+    "react-modal": {
+      "version": "3.11.2",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.11.2.tgz",
+      "integrity": "sha512-o8gvvCOFaG1T7W6JUvsYjRjMVToLZgLIsi5kdhFIQCtHxDkA47LznX62j+l6YQkpXDbvQegsDyxe/+JJsFQN7w==",
+      "requires": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.5.10",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "react-redux": {
       "version": "7.2.1",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.1.tgz",

ui/package.json

@@ -17,6 +17,7 @@
     "react-dom": "^16.13.1",
     "react-drag-listview": "^0.1.7",
     "react-ga": "^3.1.2",
+    "react-image-lightbox": "^5.1.1",
     "react-jinke-music-player": "^4.16.5",
     "react-measure": "^2.3.0",
     "react-redux": "^7.2.1",

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',