mirror of
https://github.com/jeffvli/feishin.git
synced 2026-07-31 09:23:36 +02:00
add configuration to blur explicit album/song art
This commit is contained in:
@@ -121,6 +121,7 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
|
||||
containerClassName={styles.albumImageContainer}
|
||||
enableDebounce={false}
|
||||
enableViewport={false}
|
||||
explicitStatus={album.explicitStatus}
|
||||
fetchPriority="high"
|
||||
id={album.imageId}
|
||||
itemType={LibraryItem.ALBUM}
|
||||
|
||||
@@ -118,6 +118,7 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
|
||||
containerClassName={styles.albumImageContainer}
|
||||
enableDebounce={false}
|
||||
enableViewport={false}
|
||||
explicitStatus={album.explicitStatus}
|
||||
fetchPriority="high"
|
||||
id={album.imageId}
|
||||
itemType={LibraryItem.ALBUM}
|
||||
|
||||
@@ -34,6 +34,7 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
|
||||
@@ -362,6 +362,9 @@ const CompactItemCard = ({
|
||||
[styles.isRound]: isRound,
|
||||
})}
|
||||
enableDebounce={false}
|
||||
explicitStatus={
|
||||
'explicitStatus' in data && data ? data.explicitStatus : null
|
||||
}
|
||||
id={data?.imageId}
|
||||
itemType={itemType}
|
||||
src={(data as Album | AlbumArtist | Playlist | Song)?.imageUrl}
|
||||
@@ -596,6 +599,9 @@ const DefaultItemCard = ({
|
||||
<ItemImage
|
||||
className={clsx(styles.image, { [styles.isRound]: isRound })}
|
||||
enableDebounce={false}
|
||||
explicitStatus={
|
||||
'explicitStatus' in data && data ? data.explicitStatus : null
|
||||
}
|
||||
id={data?.imageId}
|
||||
itemType={itemType}
|
||||
src={(data as Album | AlbumArtist | Playlist | Song)?.imageUrl}
|
||||
@@ -893,6 +899,9 @@ const PosterItemCard = ({
|
||||
<ItemImage
|
||||
className={clsx(styles.image, { [styles.isRound]: isRound })}
|
||||
enableDebounce={false}
|
||||
explicitStatus={
|
||||
'explicitStatus' in data && data ? data.explicitStatus : null
|
||||
}
|
||||
id={(data as { imageId: string })?.imageId}
|
||||
itemType={itemType}
|
||||
src={(data as { imageUrl: string })?.imageUrl}
|
||||
|
||||
@@ -7,11 +7,12 @@ import {
|
||||
getServerById,
|
||||
useAuthStore,
|
||||
useCurrentServerId,
|
||||
useGeneralSettings,
|
||||
useImageRes,
|
||||
useSettingsStore,
|
||||
} from '/@/renderer/store';
|
||||
import { BaseImage, ImageProps } from '/@/shared/components/image/image';
|
||||
import { LibraryItem } from '/@/shared/types/domain-types';
|
||||
import { ExplicitStatus, LibraryItem } from '/@/shared/types/domain-types';
|
||||
|
||||
const getUnloaderIcon = (itemType: LibraryItem) => {
|
||||
switch (itemType) {
|
||||
@@ -34,6 +35,7 @@ const getUnloaderIcon = (itemType: LibraryItem) => {
|
||||
|
||||
const BaseItemImage = (
|
||||
props: Omit<ImageProps, 'id' | 'src'> & {
|
||||
explicitStatus?: ExplicitStatus | null;
|
||||
id?: null | string;
|
||||
itemType: LibraryItem;
|
||||
serverId?: null | string;
|
||||
@@ -41,7 +43,8 @@ const BaseItemImage = (
|
||||
type?: keyof z.infer<typeof GeneralSettingsSchema>['imageRes'];
|
||||
},
|
||||
) => {
|
||||
const { serverId, src, ...rest } = props;
|
||||
const { explicitStatus, serverId, src, ...rest } = props;
|
||||
const { blurExplicitImages } = useGeneralSettings();
|
||||
|
||||
const imageUrl = useItemImageUrl({
|
||||
id: props.id,
|
||||
@@ -51,8 +54,11 @@ const BaseItemImage = (
|
||||
type: props.type,
|
||||
});
|
||||
|
||||
const isExplicit = blurExplicitImages && explicitStatus === ExplicitStatus.EXPLICIT;
|
||||
|
||||
return (
|
||||
<BaseImage
|
||||
isExplicit={isExplicit}
|
||||
src={imageUrl}
|
||||
unloaderIcon={getUnloaderIcon(props.itemType)}
|
||||
{...rest}
|
||||
|
||||
@@ -90,6 +90,7 @@ const ImageColumnBase = (props: ItemTableListInnerColumn) => {
|
||||
})}
|
||||
enableDebounce={true}
|
||||
enableViewport={false}
|
||||
explicitStatus={item?.explicitStatus}
|
||||
id={item?.imageId}
|
||||
itemType={item?._itemType}
|
||||
src={item?.imageUrl}
|
||||
|
||||
@@ -106,6 +106,7 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
|
||||
containerClassName={styles.image}
|
||||
enableDebounce={true}
|
||||
enableViewport={false}
|
||||
explicitStatus={item?.explicitStatus}
|
||||
id={item?.imageId}
|
||||
itemType={item?._itemType}
|
||||
src={item?.imageUrl}
|
||||
@@ -246,6 +247,7 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
|
||||
>
|
||||
<ItemImage
|
||||
containerClassName={styles.image}
|
||||
explicitStatus={item?.explicitStatus}
|
||||
id={item?.imageId}
|
||||
itemType={item?._itemType}
|
||||
serverId={item?._serverId}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -416,6 +416,7 @@ export const GeneralSettingsSchema = z.object({
|
||||
artistItems: z.array(SortableItemSchema(ArtistItemSchema)),
|
||||
artistRadioCount: z.number(),
|
||||
artistReleaseTypeItems: z.array(SortableItemSchema(ArtistReleaseTypeItemSchema)),
|
||||
blurExplicitImages: z.boolean(),
|
||||
buttonSize: z.number(),
|
||||
collections: z.array(CollectionSchema),
|
||||
combinedLyricsAndVisualizer: z.boolean(),
|
||||
@@ -988,6 +989,7 @@ const initialState: SettingsState = {
|
||||
artistItems,
|
||||
artistRadioCount: 20,
|
||||
artistReleaseTypeItems,
|
||||
blurExplicitImages: false,
|
||||
buttonSize: 15,
|
||||
collections: [],
|
||||
combinedLyricsAndVisualizer: false,
|
||||
|
||||
Reference in New Issue
Block a user