add configuration to blur explicit album/song art

This commit is contained in:
jeffvli
2026-02-04 01:20:31 -08:00
parent 6e3275c05c
commit 4c256348fc
19 changed files with 101 additions and 15 deletions
@@ -220,6 +220,7 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
<LibraryHeader
item={{
children: headerItem,
explicitStatus: detailQuery?.data?.explicitStatus ?? null,
imageId: detailQuery?.data?.imageId,
imageUrl: detailQuery?.data?.imageUrl,
route: AppRoute.LIBRARY_ALBUMS,
@@ -127,6 +127,7 @@ const DummyAlbumDetailRoute = () => {
<LibraryHeader
imageUrl={imageUrl}
item={{
explicitStatus: detailQuery?.data?.explicitStatus ?? null,
imageId: detailQuery?.data?.imageId,
imageUrl: detailQuery?.data?.imageUrl,
route: AppRoute.LIBRARY_SONGS,
@@ -123,6 +123,7 @@ export const LeftControls = () => {
)}
enableDebounce={false}
enableViewport={false}
explicitStatus={currentSong?.explicitStatus}
fetchPriority="high"
id={currentSong?.imageId}
itemType={LibraryItem.SONG}
@@ -94,6 +94,7 @@ export const MobilePlayerbar = () => {
)}
enableDebounce={false}
enableViewport={false}
explicitStatus={currentSong.explicitStatus}
fetchPriority="high"
id={currentSong.imageId}
itemType={LibraryItem.SONG}
@@ -166,6 +166,7 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
>
{({ isHighlighted }) => (
<LibraryCommandItem
explicitStatus={album.explicitStatus}
id={album.id}
imageId={album.imageId}
imageUrl={album.imageUrl}
@@ -238,6 +239,7 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
>
{({ isHighlighted }) => (
<LibraryCommandItem
explicitStatus={song.explicitStatus}
id={song.id}
imageId={song.imageId}
imageUrl={song.imageUrl}
@@ -13,11 +13,12 @@ import { useCurrentServer } from '/@/renderer/store';
import { ActionIcon, ActionIconGroup } from '/@/shared/components/action-icon/action-icon';
import { Flex } from '/@/shared/components/flex/flex';
import { Text } from '/@/shared/components/text/text';
import { LibraryItem, Song } from '/@/shared/types/domain-types';
import { ExplicitStatus, LibraryItem, Song } from '/@/shared/types/domain-types';
import { Play } from '/@/shared/types/types';
interface LibraryCommandItemProps {
disabled?: boolean;
explicitStatus?: ExplicitStatus | null;
id: string;
imageId: null | string;
imageUrl: null | string;
@@ -30,6 +31,7 @@ interface LibraryCommandItemProps {
export const LibraryCommandItem = ({
disabled,
explicitStatus,
id,
imageId,
imageUrl,
@@ -100,6 +102,7 @@ export const LibraryCommandItem = ({
<ItemImage
alt="cover"
className={styles.image}
explicitStatus={explicitStatus ?? song?.explicitStatus ?? null}
height={40}
id={imageId}
itemType={itemType}
@@ -621,6 +621,28 @@ export const ApplicationSettings = memo(() => {
isHidden: false,
title: t('setting.showRatings', { postProcess: 'sentenceCase' }),
},
{
control: (
<Switch
aria-label={t('setting.blurExplicitImages', { postProcess: 'sentenceCase' })}
defaultChecked={settings.blurExplicitImages}
onChange={(e) =>
setSettings({
general: {
...settings,
blurExplicitImages: e.currentTarget.checked,
},
})
}
/>
),
description: t('setting.blurExplicitImages', {
context: 'description',
postProcess: 'sentenceCase',
}),
isHidden: false,
title: t('setting.blurExplicitImages', { postProcess: 'sentenceCase' }),
},
{
control: (
<Switch
@@ -27,7 +27,7 @@ import { BaseImage } from '/@/shared/components/image/image';
import { Rating } from '/@/shared/components/rating/rating';
import { Spinner } from '/@/shared/components/spinner/spinner';
import { Text } from '/@/shared/components/text/text';
import { LibraryItem } from '/@/shared/types/domain-types';
import { ExplicitStatus, LibraryItem } from '/@/shared/types/domain-types';
import { Play } from '/@/shared/types/types';
interface LibraryHeaderProps {
@@ -37,6 +37,7 @@ interface LibraryHeaderProps {
imageUrl?: null | string;
item: {
children?: ReactNode;
explicitStatus?: ExplicitStatus | null;
imageId?: null | string;
imageUrl?: null | string;
route: string;
@@ -108,6 +109,7 @@ export const LibraryHeader = forwardRef(
enableDebounce={false}
enableViewport={false}
fetchPriority="high"
isExplicit={item.explicitStatus === ExplicitStatus.EXPLICIT}
src={imageUrl}
style={{
maxHeight: '100%',
@@ -120,7 +122,7 @@ export const LibraryHeader = forwardRef(
),
fullScreen: true,
});
}, [item.imageId, item.type]);
}, [item.explicitStatus, item.imageId, item.type]);
return (
<div className={clsx(styles.libraryHeader, containerClassName)} ref={ref}>
@@ -142,6 +144,7 @@ export const LibraryHeader = forwardRef(
containerClassName={styles.image}
enableDebounce={false}
enableViewport={false}
explicitStatus={item.explicitStatus ?? null}
fetchPriority="high"
id={item.imageId}
itemType={item.type as LibraryItem}