diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index 250b9b09..f3cf1a67 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -497,6 +497,10 @@ "albumBackgroundBlur_description": "adjusts the amount of blur applied to the album background image", "applicationHotkeys": "application hotkeys", "applicationHotkeys_description": "configure application hotkeys. toggle the checkbox to set as a global hotkey (desktop only)", + "artistBackground": "artist background image", + "artistBackground_description": "adds a background image for artist pages containing the artist art", + "artistBackgroundBlur": "artist background image blur size", + "artistBackgroundBlur_description": "adjusts the amount of blur applied to the artist background image", "artistConfiguration": "album artist page configuration", "artistConfiguration_description": "configure what items are shown, and in what order, on the album artist page", "audioDevice": "audio device", diff --git a/src/renderer/features/artists/components/album-artist-detail-header.tsx b/src/renderer/features/artists/components/album-artist-detail-header.tsx index f1574859..74f1139e 100644 --- a/src/renderer/features/artists/components/album-artist-detail-header.tsx +++ b/src/renderer/features/artists/components/album-artist-detail-header.tsx @@ -14,12 +14,15 @@ import { Text } from '/@/shared/components/text/text'; import { LibraryItem, ServerType } from '/@/shared/types/domain-types'; interface AlbumArtistDetailHeaderProps { - background?: string; - loading: boolean; + background: { + background?: string; + blur: number; + loading: boolean; + }; } export const AlbumArtistDetailHeader = forwardRef( - ({ background, loading }: AlbumArtistDetailHeaderProps, ref: Ref) => { + ({ background }: AlbumArtistDetailHeaderProps, ref: Ref) => { const { albumArtistId, artistId } = useParams() as { albumArtistId?: string; artistId?: string; @@ -76,12 +79,11 @@ export const AlbumArtistDetailHeader = forwardRef( return ( diff --git a/src/renderer/features/artists/routes/album-artist-detail-route.tsx b/src/renderer/features/artists/routes/album-artist-detail-route.tsx index 92d82d41..a82c9626 100644 --- a/src/renderer/features/artists/routes/album-artist-detail-route.tsx +++ b/src/renderer/features/artists/routes/album-artist-detail-route.tsx @@ -9,13 +9,14 @@ import { usePlayQueueAdd } from '/@/renderer/features/player'; import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared'; import { useFastAverageColor } from '/@/renderer/hooks'; import { useCurrentServer } from '/@/renderer/store'; -import { usePlayButtonBehavior } from '/@/renderer/store/settings.store'; +import { useGeneralSettings, usePlayButtonBehavior } from '/@/renderer/store/settings.store'; import { LibraryItem } from '/@/shared/types/domain-types'; const AlbumArtistDetailRoute = () => { const scrollAreaRef = useRef(null); const headerRef = useRef(null); const server = useCurrentServer(); + const { artistBackground, artistBackgroundBlur } = useGeneralSettings(); const { albumArtistId, artistId } = useParams() as { albumArtistId?: string; @@ -30,12 +31,16 @@ const AlbumArtistDetailRoute = () => { query: { id: routeId }, serverId: server?.id, }); - const { background, colorId } = useFastAverageColor({ - id: routeId, + + const { background: backgroundColor, colorId } = useFastAverageColor({ + id: artistId, src: detailQuery.data?.imageUrl, srcLoaded: !detailQuery.isLoading, }); + const backgroundUrl = detailQuery.data?.imageUrl || ''; + const background = (artistBackground && `url(${backgroundUrl})`) || backgroundColor; + const handlePlay = () => { handlePlayQueueAdd?.({ byItemType: { @@ -65,8 +70,11 @@ const AlbumArtistDetailRoute = () => { ref={scrollAreaRef} > diff --git a/src/renderer/features/settings/components/general/control-settings.tsx b/src/renderer/features/settings/components/general/control-settings.tsx index 4d5ace11..3220b23c 100644 --- a/src/renderer/features/settings/components/general/control-settings.tsx +++ b/src/renderer/features/settings/components/general/control-settings.tsx @@ -548,9 +548,57 @@ export const ControlSettings = () => { context: 'description', postProcess: 'sentenceCase', }), - isHidden: false, + isHidden: !settings.albumBackground, title: t('setting.albumBackgroundBlur', { postProcess: 'sentenceCase' }), }, + { + control: ( + + setSettings({ + general: { + ...settings, + artistBackground: e.currentTarget.checked, + }, + }) + } + /> + ), + description: t('setting.artistBackground', { + context: 'description', + postProcess: 'sentenceCase', + }), + isHidden: false, + title: t('setting.artistBackground', { postProcess: 'sentenceCase' }), + }, + { + control: ( + `${e} rem`} + max={6} + min={0} + onChangeEnd={(e) => { + setSettings({ + general: { + ...settings, + artistBackgroundBlur: e, + }, + }); + }} + step={0.5} + w={100} + /> + ), + description: t('setting.artistBackgroundBlur', { + context: 'description', + postProcess: 'sentenceCase', + }), + isHidden: !settings.artistBackground, + title: t('setting.artistBackgroundBlur', { postProcess: 'sentenceCase' }), + }, { control: ( []; buttonSize: number; disabledContextMenu: { [k in ContextMenuItemType]?: boolean }; @@ -389,6 +391,8 @@ const initialState: SettingsState = { albumArtRes: undefined, albumBackground: false, albumBackgroundBlur: 6, + artistBackground: false, + artistBackgroundBlur: 6, artistItems, buttonSize: 15, disabledContextMenu: {},