r.year || ''}\n sortByOrder={'DESC'}\n />\n ),\n quality: isDesktop && ,\n bpm: isDesktop && ,\n rating: isDesktop && config.enableStarRating && (\n \n ),\n }\n }, [isDesktop, classes.ratingField])\n\n const columns = useSelectedFields({\n resource: 'albumSong',\n columns: toggleableFields,\n omittedColumns: ['title'],\n defaultOff: ['bpm', 'year'],\n })\n\n return (\n <>\n \n \n 0,\n })}\n key={version}\n >\n \n \n \n }\n rowClick={(id) => dispatch(playTracks(data, ids, id))}\n {...props}\n hasBulkActions={true}\n showDiscSubtitles={true}\n contextAlwaysVisible={!isDesktop}\n classes={{ row: classes.row }}\n >\n {columns}\n \n )\n }\n />\n \n \n
\n \n \n )\n}\n\nexport const removeAlbumCommentsFromSongs = ({ album, data }) => {\n if (album?.comment && data) {\n Object.values(data).forEach((song) => {\n song.comment = ''\n })\n }\n}\n\nconst SanitizedAlbumSongs = (props) => {\n removeAlbumCommentsFromSongs(props)\n\n const { loaded, loading, total, ...rest } = useListContext(props)\n return <>{loaded && }\n}\n\nexport default SanitizedAlbumSongs\n","import React from 'react'\nimport SvgIcon from '@material-ui/core/SvgIcon'\n\nconst MusicBrainz = (props) => {\n return (\n \n \n \n )\n}\n\nexport default MusicBrainz\n","import React from 'react'\nimport { useRecordContext, useTranslate } from 'react-admin'\nimport { IconButton, Tooltip, Link } from '@material-ui/core'\nimport { ImLastfm2 } from 'react-icons/im'\nimport MusicBrainz from '../icons/MusicBrainz'\nimport { intersperse } from '../utils'\n\nconst AlbumExternalLinks = (props) => {\n const { className } = props\n const translate = useTranslate()\n const record = useRecordContext(props)\n let links = []\n\n const addLink = (url, title, icon) => {\n const translatedTitle = translate(title)\n const link = (\n \n \n \n {icon}\n \n \n \n )\n const id = links.length\n links.push({link})\n }\n\n addLink(\n `https://last.fm/music/${\n encodeURIComponent(record.albumArtist) +\n '/' +\n encodeURIComponent(record.name)\n }`,\n 'message.openIn.lastfm',\n \n )\n\n record.mbzAlbumId &&\n addLink(\n `https://musicbrainz.org/release/${record.mbzAlbumId}`,\n 'message.openIn.musicbrainz',\n \n )\n\n return {intersperse(links, ' ')}
\n}\n\nexport default AlbumExternalLinks\n","import React, { useMemo, useCallback } from 'react'\nimport {\n Card,\n CardContent,\n CardMedia,\n Collapse,\n makeStyles,\n Typography,\n useMediaQuery,\n withWidth,\n} from '@material-ui/core'\nimport {\n useRecordContext,\n useTranslate,\n ArrayField,\n SingleFieldList,\n ChipField,\n Link,\n} from 'react-admin'\nimport clsx from 'clsx'\nimport Lightbox from 'react-image-lightbox'\nimport 'react-image-lightbox/style.css'\nimport subsonic from '../subsonic'\nimport {\n ArtistLinkField,\n DurationField,\n formatRange,\n SizeField,\n LoveButton,\n RatingField,\n useAlbumsPerPage,\n} from '../common'\nimport config from '../config'\nimport { intersperse } from '../utils'\nimport AlbumExternalLinks from './AlbumExternalLinks'\n\nconst useStyles = makeStyles(\n (theme) => ({\n root: {\n [theme.breakpoints.down('xs')]: {\n padding: '0.7em',\n minWidth: '20em',\n },\n [theme.breakpoints.up('sm')]: {\n padding: '1em',\n minWidth: '32em',\n },\n },\n cardContents: {\n display: 'flex',\n },\n details: {\n display: 'flex',\n flexDirection: 'column',\n },\n content: {\n flex: '2 0 auto',\n },\n coverParent: {\n [theme.breakpoints.down('xs')]: {\n height: '8em',\n width: '8em',\n minWidth: '8em',\n },\n [theme.breakpoints.up('sm')]: {\n height: '10em',\n width: '10em',\n minWidth: '10em',\n },\n [theme.breakpoints.up('lg')]: {\n height: '15em',\n width: '15em',\n minWidth: '15em',\n },\n },\n cover: {\n objectFit: 'contain',\n cursor: 'pointer',\n display: 'block',\n width: '100%',\n height: '100%',\n },\n loveButton: {\n top: theme.spacing(-0.2),\n left: theme.spacing(0.5),\n },\n commentBlock: {\n display: 'inline-block',\n marginTop: '1em',\n float: 'left',\n wordBreak: 'break-all',\n },\n pointerCursor: {\n cursor: 'pointer',\n },\n recordName: {},\n recordArtist: {},\n recordMeta: {},\n genreList: {\n marginTop: theme.spacing(0.5),\n },\n externalLinks: {\n marginTop: theme.spacing(1.5),\n },\n }),\n {\n name: 'NDAlbumDetails',\n }\n)\n\nconst AlbumComment = ({ record }) => {\n const classes = useStyles()\n const [expanded, setExpanded] = React.useState(false)\n\n const lines = record.comment.split('\\n')\n const formatted = useMemo(() => {\n return lines.map((line, idx) => (\n \n \n
\n \n ))\n }, [lines, record.id])\n\n const handleExpandClick = useCallback(() => {\n setExpanded(!expanded)\n }, [expanded, setExpanded])\n\n return (\n 1 && classes.pointerCursor\n )}\n >\n \n {formatted}\n \n \n )\n}\n\nexport const useGetHandleGenreClick = (width) => {\n const [perPage] = useAlbumsPerPage(width)\n\n return (id) => {\n return `/album?filter={\"genre_id\":\"${id}\"}&order=ASC&sort=name&perPage=${perPage}`\n }\n}\n\nconst GenreChipField = withWidth()(({ width, ...rest }) => {\n const record = useRecordContext(rest)\n const genreLink = useGetHandleGenreClick(width)\n\n return (\n e.stopPropagation()}>\n {}}\n />\n \n )\n})\n\nconst GenreList = () => {\n const classes = useStyles()\n return (\n \n \n \n \n \n )\n}\n\nconst Details = (props) => {\n const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))\n const translate = useTranslate()\n const record = useRecordContext(props)\n let details = []\n const addDetail = (obj) => {\n const id = details.length\n details.push({obj})\n }\n\n const year = formatRange(record, 'year')\n year && addDetail(<>{year})\n addDetail(\n <>\n {record.songCount +\n ' ' +\n translate('resources.song.name', {\n smart_count: record.songCount,\n })}\n \n )\n !isXsmall && addDetail()\n !isXsmall && addDetail()\n\n return <>{intersperse(details, ' · ')}\n}\n\nconst AlbumDetails = (props) => {\n const record = useRecordContext(props)\n const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('lg'))\n const classes = useStyles()\n const [isLightboxOpen, setLightboxOpen] = React.useState(false)\n\n const imageUrl = subsonic.getCoverArtUrl(record, 300)\n const fullImageUrl = subsonic.getCoverArtUrl(record)\n\n const handleOpenLightbox = React.useCallback(() => setLightboxOpen(true), [])\n const handleCloseLightbox = React.useCallback(\n () => setLightboxOpen(false),\n []\n )\n return (\n \n \n
\n \n
\n
\n
\n \n {record.name}\n {config.enableFavourites && (\n \n )}\n \n \n \n \n \n \n \n
\n )}\n {isDesktop ? (\n \n ) : (\n {record.genre}\n )}\n {isDesktop && (\n \n \n \n )}\n {isDesktop && record['comment'] && }\n \n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {config.enableDownloads && (\n \n \n \n )}\n \n
{isNotSmall && }
\n
\n
0,\n })}\n key={version}\n >\n \n \n \n \n }\n rowClick={(id) => dispatch(playTracks(data, ids, id))}\n {...listContext}\n hasBulkActions={true}\n contextAlwaysVisible={!isDesktop}\n classes={{ row: classes.row }}\n >\n {columns}\n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n {config.enableDownloads && (\n \n \n \n )}\n \n \n \n \n
{isNotSmall && }
\n