remote/navidrome
1
0
Fork 0
mirror of https://github.com/navidrome/navidrome.git synced 2026-10-26 10:17:09 +01:00
Code Issues Projects Releases Packages Wiki Activity

feat: add configurable UICoverArtSize option

Browse source 
Converted the hardcoded UICoverArtSize constant (600px) into a
configurable option, allowing users to reduce the cover art size
requested by the UI to mitigate slow image encoding. The value is
served to the frontend via the app config and used by all components
that request cover art. Also simplified the cache warmer by removing
a single-iteration loop in favor of direct code.
This commit is contained in:
Deluan 2026-04-01 23:30:04 -04:00
commit d8abe80d2c
20 changed files with 42 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

5
ui/src/album/AlbumDetails.jsx
View file

@ -18,7 +18,7 @@ import {
useTranslate,
} from 'react-admin'
import Lightbox from 'react-image-lightbox'
import { COVER_ART_SIZE } from '../consts'
import config from '../config'
import 'react-image-lightbox/style.css'
import subsonic from '../subsonic'
import {
@ -32,7 +32,6 @@ import {
useAlbumsPerPage,
useImageLoadingState,
} from '../common'
import config from '../config'
import { formatFullDate, intersperse } from '../utils'
import AlbumExternalLinks from './AlbumExternalLinks'
import { SafeHTML } from '../common/SafeHTML'
@ -255,7 +254,7 @@ const AlbumDetails = (props) => {
})
}, [record])
const imageUrl = subsonic.getCoverArtUrl(record, COVER_ART_SIZE)
const imageUrl = subsonic.getCoverArtUrl(record, config.uiCoverArtSize)
const fullImageUrl = subsonic.getCoverArtUrl(record)
return (

5
ui/src/album/AlbumGridView.jsx
View file

@ -20,7 +20,8 @@ import {
OverflowTooltip,
useImageUrl,
} from '../common'
import { COVER_ART_SIZE, DraggableTypes } from '../consts'
import config from '../config'
import { DraggableTypes } from '../consts'
import clsx from 'clsx'
import { AlbumDatesField } from './AlbumDatesField.jsx'
@ -135,7 +136,7 @@ const Cover = withContentRect('bounds')(({
[record],
)
const url = subsonic.getCoverArtUrl(record, COVER_ART_SIZE, true)
const url = subsonic.getCoverArtUrl(record, config.uiCoverArtSize, true)
const { imgUrl, loading: imageLoading } = useImageUrl(url)
return (

3
ui/src/artist/DesktopArtistDetails.jsx
View file

@ -15,7 +15,6 @@ import {
import Lightbox from 'react-image-lightbox'
import ExpandInfoDialog from '../dialogs/ExpandInfoDialog'
import AlbumInfo from '../album/AlbumInfo'
import { COVER_ART_SIZE } from '../consts'
import subsonic from '../subsonic'
import { SafeHTML } from '../common/SafeHTML'
@ -110,7 +109,7 @@ const DesktopArtistDetails = ({ artistInfo, record, biography }) => {
<CardMedia
key={record.id}
component="img"
src={subsonic.getCoverArtUrl(record, COVER_ART_SIZE)}
src={subsonic.getCoverArtUrl(record, config.uiCoverArtSize)}
className={`${classes.cover} ${imageLoading ? classes.coverLoading : ''}`}
onClick={handleOpenLightbox}
onLoad={handleImageLoad}

3
ui/src/artist/MobileArtistDetails.jsx
View file

@ -11,7 +11,6 @@ import {
useImageLoadingState,
} from '../common'
import Lightbox from 'react-image-lightbox'
import { COVER_ART_SIZE } from '../consts'
import subsonic from '../subsonic'
import { SafeHTML } from '../common/SafeHTML'
@ -113,7 +112,7 @@ const MobileArtistDetails = ({ artistInfo, biography, record }) => {
<CardMedia
key={record.id}
component="img"
src={subsonic.getCoverArtUrl(record, COVER_ART_SIZE)}
src={subsonic.getCoverArtUrl(record, config.uiCoverArtSize)}
className={`${classes.cover} ${imageLoading ? classes.coverLoading : ''}`}
onClick={handleOpenLightbox}
onLoad={handleImageLoad}

4
ui/src/common/CoverArtAvatar.jsx
View file

@ -2,7 +2,7 @@ import { useRecordContext } from 'react-admin'
import { Avatar } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import clsx from 'clsx'
import { COVER_ART_SIZE } from '../consts'
import config from '../config'
import subsonic from '../subsonic'
import { useImageUrl } from './useImageUrl'
@ -28,7 +28,7 @@ export const CoverArtAvatar = ({
const record = recordProp || recordContext
const square = variant !== 'circular'
const url = record
? subsonic.getCoverArtUrl(record, COVER_ART_SIZE, square)
? subsonic.getCoverArtUrl(record, config.uiCoverArtSize, square)
: null
const { imgUrl } = useImageUrl(url)
if (!record) return null

1
ui/src/config.js
View file

@ -21,6 +21,7 @@ const defaultConfig = {
defaultLanguage: '',
defaultUIVolume: 100,
uiSearchDebounceMs: 200,
uiCoverArtSize: 600,
enableUserEditing: true,
enableArtworkUpload: true,
enableSharing: true,

2
ui/src/consts.js
View file

@ -26,8 +26,6 @@ DraggableTypes.ALL.push(
export const RADIO_PLACEHOLDER_IMAGE = 'internet-radio-icon.svg'
export const COVER_ART_SIZE = 600
export const DEFAULT_SHARE_BITRATE = 128
export const BITRATE_CHOICES = [

4
ui/src/playlist/PlaylistDetails.jsx
View file

@ -18,7 +18,7 @@ import {
OverflowTooltip,
useImageLoadingState,
} from '../common'
import { COVER_ART_SIZE } from '../consts'
import config from '../config'
import subsonic from '../subsonic'
const useStyles = makeStyles(
@ -107,7 +107,7 @@ const PlaylistDetails = (props) => {
handleCloseLightbox,
} = useImageLoadingState(record.id)
const imageUrl = subsonic.getCoverArtUrl(record, COVER_ART_SIZE, true)
const imageUrl = subsonic.getCoverArtUrl(record, config.uiCoverArtSize, true)
const fullImageUrl = subsonic.getCoverArtUrl(record)
return (

5
ui/src/radio/RadioEdit.jsx
View file

@ -11,7 +11,8 @@ import { makeStyles } from '@material-ui/core/styles'
import { urlValidate } from '../utils/validations'
import { Title, ImageUploadOverlay, useImageLoadingState } from '../common'
import subsonic from '../subsonic'
import { COVER_ART_SIZE, RADIO_PLACEHOLDER_IMAGE } from '../consts'
import config from '../config'
import { RADIO_PLACEHOLDER_IMAGE } from '../consts'
const useStyles = makeStyles({
coverParent: {
@ -83,7 +84,7 @@ const RadioCoverArt = ({ record }) => {
{record.uploadedImage ? (
<CardMedia
component="img"
src={subsonic.getCoverArtUrl(record, COVER_ART_SIZE, true)}
src={subsonic.getCoverArtUrl(record, config.uiCoverArtSize, true)}
className={`${classes.cover} ${imageLoading ? classes.coverLoading : ''}`}
onLoad={handleImageLoad}
onError={handleImageError}

5
ui/src/radio/helper.jsx
View file

@ -1,5 +1,6 @@
import subsonic from '../subsonic'
import { COVER_ART_SIZE, RADIO_PLACEHOLDER_IMAGE } from '../consts'
import config from '../config'
import { RADIO_PLACEHOLDER_IMAGE } from '../consts'
export async function songFromRadio(radio) {
if (!radio) {
@ -8,7 +9,7 @@ export async function songFromRadio(radio) {
let cover = RADIO_PLACEHOLDER_IMAGE
if (radio.uploadedImage) {
cover = subsonic.getCoverArtUrl(radio, COVER_ART_SIZE, true)
cover = subsonic.getCoverArtUrl(radio, config.uiCoverArtSize, true)
} else {
// Try favicon as fallback
try {

12
ui/src/subsonic/index.test.js
View file

@ -1,5 +1,5 @@
import { vi } from 'vitest'
import { COVER_ART_SIZE } from '../consts'
import config from '../config'
import subsonic from './index'
describe('getCoverArtUrl', () => {
@ -31,7 +31,7 @@ describe('getCoverArtUrl', () => {
updatedAt: '2023-01-01T00:00:00Z',
}
const url = subsonic.getCoverArtUrl(playlistRecord, COVER_ART_SIZE, true)
const url = subsonic.getCoverArtUrl(playlistRecord, config.uiCoverArtSize, true)
expect(url).toContain('pl-playlist-123')
expect(url).toContain('size=600')
@ -45,7 +45,7 @@ describe('getCoverArtUrl', () => {
sync: true,
}
const url = subsonic.getCoverArtUrl(playlistRecord, COVER_ART_SIZE, true)
const url = subsonic.getCoverArtUrl(playlistRecord, config.uiCoverArtSize, true)
expect(url).toContain('pl-playlist-123')
expect(url).toContain('size=600')
@ -60,7 +60,7 @@ describe('getCoverArtUrl', () => {
updatedAt: '2023-01-01T00:00:00Z',
}
const url = subsonic.getCoverArtUrl(albumRecord, COVER_ART_SIZE, true)
const url = subsonic.getCoverArtUrl(albumRecord, config.uiCoverArtSize, true)
expect(url).toContain('al-album-123')
expect(url).toContain('size=600')
@ -74,7 +74,7 @@ describe('getCoverArtUrl', () => {
updatedAt: '2023-01-01T00:00:00Z',
}
const url = subsonic.getCoverArtUrl(songRecord, COVER_ART_SIZE, true)
const url = subsonic.getCoverArtUrl(songRecord, config.uiCoverArtSize, true)
expect(url).toContain('mf-song-123')
expect(url).toContain('size=600')
@ -87,7 +87,7 @@ describe('getCoverArtUrl', () => {
updatedAt: '2023-01-01T00:00:00Z',
}
const url = subsonic.getCoverArtUrl(artistRecord, COVER_ART_SIZE, true)
const url = subsonic.getCoverArtUrl(artistRecord, config.uiCoverArtSize, true)
expect(url).toContain('ar-artist-123')
expect(url).toContain('size=600')