From 78875572e9728d01cbdd127949ea8ce7f5274bfc Mon Sep 17 00:00:00 2001 From: Kendall Garner <17521368+kgarner7@users.noreply.github.com> Date: Fri, 13 Feb 2026 02:49:57 +0000 Subject: [PATCH] add explicit blurring to left expanded image and full screen (#1701) * add explicit blurring to left expanded image and full screen --- .../full-screen-player-image.module.css | 4 +++ .../components/full-screen-player-image.tsx | 33 ++++++++++++++++--- .../sidebar/components/sidebar.module.css | 4 +++ .../features/sidebar/components/sidebar.tsx | 14 ++++++-- 4 files changed, 49 insertions(+), 6 deletions(-) diff --git a/src/renderer/features/player/components/full-screen-player-image.module.css b/src/renderer/features/player/components/full-screen-player-image.module.css index 638e3c1ed..503900ff1 100644 --- a/src/renderer/features/player/components/full-screen-player-image.module.css +++ b/src/renderer/features/player/components/full-screen-player-image.module.css @@ -6,6 +6,10 @@ filter: drop-shadow(0 0 5px rgb(0 0 0 / 40%)) drop-shadow(0 0 5px rgb(0 0 0 / 40%)); } +.censored.image { + filter: blur(30px); +} + .image-container { position: relative; display: flex; diff --git a/src/renderer/features/player/components/full-screen-player-image.tsx b/src/renderer/features/player/components/full-screen-player-image.tsx index eb830f832..f47753ca1 100644 --- a/src/renderer/features/player/components/full-screen-player-image.tsx +++ b/src/renderer/features/player/components/full-screen-player-image.tsx @@ -11,7 +11,12 @@ import { useRadioPlayer, } from '/@/renderer/features/radio/hooks/use-radio-player'; import { AppRoute } from '/@/renderer/router/routes'; -import { useNativeAspectRatio, usePlayerData, usePlayerSong } from '/@/renderer/store'; +import { + useGeneralSettings, + useNativeAspectRatio, + usePlayerData, + usePlayerSong, +} from '/@/renderer/store'; import { Badge } from '/@/shared/components/badge/badge'; import { Center } from '/@/shared/components/center/center'; import { Flex } from '/@/shared/components/flex/flex'; @@ -20,7 +25,7 @@ import { Icon } from '/@/shared/components/icon/icon'; import { Stack } from '/@/shared/components/stack/stack'; import { Text } from '/@/shared/components/text/text'; import { useSetState } from '/@/shared/hooks/use-set-state'; -import { LibraryItem } from '/@/shared/types/domain-types'; +import { ExplicitStatus, LibraryItem } from '/@/shared/types/domain-types'; const imageVariants: Variants = { closed: { @@ -49,9 +54,14 @@ const MotionImage = motion.img; const ImageWithPlaceholder = ({ className, + explicit, placeholderIcon = 'itemAlbum', ...props -}: HTMLMotionProps<'img'> & { placeholder?: string; placeholderIcon?: 'itemAlbum' | 'radio' }) => { +}: HTMLMotionProps<'img'> & { + explicit?: boolean; + placeholder?: string; + placeholderIcon?: 'itemAlbum' | 'radio'; +}) => { const nativeAspectRatio = useNativeAspectRatio(); if (!props.src) { @@ -71,7 +81,9 @@ const ImageWithPlaceholder = ({ return ( { const currentSong = usePlayerSong(); const { nextSong } = usePlayerData(); + const { blurExplicitImages } = useGeneralSettings(); const isPlayingRadio = isRadioActive && isRadioPlaying; @@ -107,8 +120,10 @@ export const FullScreenPlayerImage = () => { }); const [imageState, setImageState] = useSetState({ + bottomExplicit: nextSong?.explicitStatus === ExplicitStatus.EXPLICIT, bottomImage: nextImageUrl, current: 0, + topExplicit: currentSong?.explicitStatus === ExplicitStatus.EXPLICIT, topImage: currentImageUrl, }); @@ -133,8 +148,14 @@ export const FullScreenPlayerImage = () => { const isTop = imageStateRef.current.current === 0; setImageState({ + bottomExplicit: + (isTop ? currentSong?.explicitStatus : nextSong?.explicitStatus) === + ExplicitStatus.EXPLICIT, bottomImage: isTop ? currentImageUrl : nextImageUrl, current: isTop ? 1 : 0, + topExplicit: + (isTop ? nextSong?.explicitStatus : currentSong?.explicitStatus) === + ExplicitStatus.EXPLICIT, topImage: isTop ? nextImageUrl : currentImageUrl, }); @@ -146,6 +167,8 @@ export const FullScreenPlayerImage = () => { nextSong?._uniqueId, nextImageUrl, setImageState, + currentSong?.explicitStatus, + nextSong?.explicitStatus, ]); return ( @@ -165,6 +188,7 @@ export const FullScreenPlayerImage = () => { custom={{ isOpen: imageState.current === 0 }} draggable={false} exit="closed" + explicit={blurExplicitImages && imageState.topExplicit} initial="closed" key={`top-${currentSong?._uniqueId || 'none'}`} placeholder="var(--theme-colors-foreground-muted)" @@ -180,6 +204,7 @@ export const FullScreenPlayerImage = () => { custom={{ isOpen: imageState.current === 1 }} draggable={false} exit="closed" + explicit={blurExplicitImages && imageState.bottomExplicit} initial="closed" key={`bottom-${currentSong?._uniqueId || 'none'}`} placeholder="var(--theme-colors-foreground-muted)" diff --git a/src/renderer/features/sidebar/components/sidebar.module.css b/src/renderer/features/sidebar/components/sidebar.module.css index aceaa0bf3..46a4c8e18 100644 --- a/src/renderer/features/sidebar/components/sidebar.module.css +++ b/src/renderer/features/sidebar/components/sidebar.module.css @@ -53,6 +53,10 @@ border-radius: var(--theme-radius-md); } +.censored.sidebar-image { + filter: blur(20px); +} + .accordion-root { height: 100%; } diff --git a/src/renderer/features/sidebar/components/sidebar.tsx b/src/renderer/features/sidebar/components/sidebar.tsx index 5828594ac..872ab24a4 100644 --- a/src/renderer/features/sidebar/components/sidebar.tsx +++ b/src/renderer/features/sidebar/components/sidebar.tsx @@ -24,6 +24,7 @@ import { useAppStore, useAppStoreActions, useFullScreenPlayerStore, + useGeneralSettings, usePlayerSong, useSetFullScreenPlayerStore, } from '/@/renderer/store'; @@ -42,7 +43,7 @@ import { ImageUnloader } from '/@/shared/components/image/image'; import { ScrollArea } from '/@/shared/components/scroll-area/scroll-area'; import { Text } from '/@/shared/components/text/text'; import { Tooltip } from '/@/shared/components/tooltip/tooltip'; -import { LibraryItem } from '/@/shared/types/domain-types'; +import { ExplicitStatus, LibraryItem } from '/@/shared/types/domain-types'; import { Platform } from '/@/shared/types/types'; export const Sidebar = () => { @@ -167,6 +168,7 @@ const SidebarImage = () => { const currentSong = usePlayerSong(); const isRadioActive = useIsRadioActive(); const { isPlaying: isRadioPlaying } = useRadioPlayer(); + const { blurExplicitImages } = useGeneralSettings(); const imageUrl = useItemImageUrl({ id: currentSong?.imageId || undefined, @@ -235,7 +237,15 @@ const SidebarImage = () => { ) : imageUrl ? ( - + ) : ( )}