add explicit blurring to left expanded image and full screen (#1701)

* add explicit blurring to left expanded image and full screen

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%;
 }

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 = () => {
                         <Icon color="muted" icon="radio" size="40%" />
                     </Center>
                 ) : imageUrl ? (
-                    <img className={styles.sidebarImage} loading="eager" src={imageUrl} />
+                    <img
+                        className={clsx(styles.sidebarImage, {
+                            [styles.censored]:
+                                currentSong?.explicitStatus === ExplicitStatus.EXPLICIT &&
+                                blurExplicitImages,
+                        })}
+                        loading="eager"
+                        src={imageUrl}
+                    />
                 ) : (
                     <ImageUnloader icon="emptySongImage" />
                 )}