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

* add explicit blurring to left expanded image and full screen

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;

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 (
         <MotionImage
-            className={clsx(styles.image, className)}
+            className={clsx(styles.image, className, {
+                [styles.censored]: explicit,
+            })}
             style={{
                 objectFit: nativeAspectRatio ? 'contain' : 'cover',
                 width: nativeAspectRatio ? 'auto' : '100%',
@@ -89,6 +101,7 @@ export const FullScreenPlayerImage = () => {
 
     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)"