Add artist image lightbox

navidrome · Oct 31, 2021 · 84bbcdb · 84bbcdb
1 parent 1823159
commit 84bbcdb
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 2 deletions.
diff --git a/ui/src/artist/DesktopArtistDetails.js b/ui/src/artist/DesktopArtistDetails.js
@@ -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>
   )

diff --git a/ui/src/artist/MobileArtistDetails.js b/ui/src/artist/MobileArtistDetails.js
@@ -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}
+        />
+      )}
     </>
   )
 }