diff --git a/ui/src/artist/ArtistShow.jsx b/ui/src/artist/ArtistShow.jsx index ba8586d06..935b0bab7 100644 --- a/ui/src/artist/ArtistShow.jsx +++ b/ui/src/artist/ArtistShow.jsx @@ -50,7 +50,9 @@ const useStyles = makeStyles( const ArtistDetails = (props) => { const record = useRecordContext(props) - const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('sm')) + const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('sm'), { + noSsr: true, + }) const [artistInfo, setArtistInfo] = useState() const biography = artistInfo?.biography || record.biography diff --git a/ui/src/artist/MobileArtistDetails.jsx b/ui/src/artist/MobileArtistDetails.jsx index e8c044d66..4947a4634 100644 --- a/ui/src/artist/MobileArtistDetails.jsx +++ b/ui/src/artist/MobileArtistDetails.jsx @@ -83,7 +83,7 @@ const useStyles = makeStyles( ) const MobileArtistDetails = ({ artistInfo, biography, record }) => { - const img = subsonic.getCoverArtUrl(record) + const img = subsonic.getCoverArtUrl(record, 800) const [expanded, setExpanded] = useState(false) const classes = useStyles({ img, expanded }) const title = record.name diff --git a/ui/src/common/SongDatagrid.jsx b/ui/src/common/SongDatagrid.jsx index fbf2b9e31..d2c98bbe7 100644 --- a/ui/src/common/SongDatagrid.jsx +++ b/ui/src/common/SongDatagrid.jsx @@ -85,7 +85,14 @@ const DiscSubtitleRow = forwardRef( const classes = useStyles({ isDesktop }) const [imageError, setImageError] = useState(false) const [isLightboxOpen, setLightboxOpen] = useState(false) + const lightboxClosedAt = React.useRef(0) const handlePlaySubset = (discNumber) => () => { + // Ignore clicks shortly after the lightbox was closed to prevent + // mobile touch events from "falling through" the overlay and + // triggering playback. + if (Date.now() - lightboxClosedAt.current < 400) { + return + } onClick(discNumber) } @@ -112,7 +119,10 @@ const DiscSubtitleRow = forwardRef( [imageError], ) - const handleCloseLightbox = useCallback(() => setLightboxOpen(false), []) + const handleCloseLightbox = useCallback(() => { + lightboxClosedAt.current = Date.now() + setLightboxOpen(false) + }, []) const subtitle = record.discSubtitle ? record.discSubtitle