From 457704a4fe0792e78f6de5233e5b4590c112fb8c Mon Sep 17 00:00:00 2001
From: iiPython <ben@iipython.dev>
Date: Fri, 1 Mar 2024 17:45:03 -0600
Subject: [PATCH 1/7] Add an option for a dynamic background image in the
 fullscreen player

---
 src/i18n/locales/en.json                      |  1 +
 .../player/components/full-screen-player.tsx  | 39 ++++++++++++++++---
 .../store/full-screen-player.store.ts         |  2 +
 3 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 438e44a22..966303ede 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -311,6 +311,7 @@
         "fullscreenPlayer": {
             "config": {
                 "dynamicBackground": "dynamic background",
+                "dynamicIsImage": "enable background image",
                 "followCurrentLyric": "follow current lyric",
                 "lyricAlignment": "lyric alignment",
                 "lyricGap": "lyric gap",
diff --git a/src/renderer/features/player/components/full-screen-player.tsx b/src/renderer/features/player/components/full-screen-player.tsx
index 970f52e42..6429daca6 100644
--- a/src/renderer/features/player/components/full-screen-player.tsx
+++ b/src/renderer/features/player/components/full-screen-player.tsx
@@ -68,11 +68,12 @@ const BackgroundImageOverlay = styled.div`
     width: 100%;
     height: 100%;
     background: var(--bg-header-overlay);
+    backdrop-filter: blur(1.5rem);
 `;
 
 const Controls = () => {
     const { t } = useTranslation();
-    const { dynamicBackground, expanded, opacity, useImageAspectRatio } =
+    const { dynamicBackground, dynamicIsImage, expanded, opacity, useImageAspectRatio } =
         useFullScreenPlayerStore();
     const { setStore } = useFullScreenPlayerStoreActions();
     const { setSettings } = useSettingsStoreActions();
@@ -141,6 +142,25 @@ const Controls = () => {
                             />
                         </Option.Control>
                     </Option>
+                    {dynamicBackground && (
+                        <Option>
+                            <Option.Label>
+                                {t('page.fullscreenPlayer.config.dynamicIsImage', {
+                                    postProcess: 'sentenceCase',
+                                })}
+                            </Option.Label>
+                            <Option.Control>
+                                <Switch
+                                    defaultChecked={dynamicIsImage}
+                                    onChange={(e) =>
+                                        setStore({
+                                            dynamicIsImage: e.target.checked,
+                                        })
+                                    }
+                                />
+                            </Option.Control>
+                        </Option>
+                    )}
                     {dynamicBackground && (
                         <Option>
                             <Option.Label>
@@ -368,9 +388,10 @@ const containerVariants: Variants = {
         };
     },
     open: (custom) => {
-        const { dynamicBackground, background, windowBarStyle } = custom;
+        const { dynamicBackground, parsedBackground, windowBarStyle } = custom;
         return {
-            background: dynamicBackground ? background : 'var(--main-bg)',
+            background: dynamicBackground ? parsedBackground : 'var(--main-bg)',
+            backgroundSize: 'cover',
             height:
                 windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS
                     ? 'calc(100vh - 120px)'
@@ -394,7 +415,7 @@ const containerVariants: Variants = {
 };
 
 export const FullScreenPlayer = () => {
-    const { dynamicBackground } = useFullScreenPlayerStore();
+    const { dynamicBackground, dynamicIsImage } = useFullScreenPlayerStore();
     const { setStore } = useFullScreenPlayerStoreActions();
     const { windowBarStyle } = useWindowSettings();
 
@@ -416,10 +437,18 @@ export const FullScreenPlayer = () => {
         srcLoaded: true,
     });
 
+    const imageUrl = currentSong?.imageUrl;
+    const parsedBackground =
+        imageUrl && dynamicIsImage
+            ? `url("${imageUrl
+                  .replace(/size=\d+/g, 'size=500')
+                  .replace(currentSong.id, currentSong.albumId)}") no-repeat fixed`
+            : background;
+
     return (
         <Container
             animate="open"
-            custom={{ background, dynamicBackground, windowBarStyle }}
+            custom={{ dynamicBackground, parsedBackground, windowBarStyle }}
             exit="closed"
             initial="closed"
             transition={{ duration: 2 }}
diff --git a/src/renderer/store/full-screen-player.store.ts b/src/renderer/store/full-screen-player.store.ts
index 429f4a0af..cc281163b 100644
--- a/src/renderer/store/full-screen-player.store.ts
+++ b/src/renderer/store/full-screen-player.store.ts
@@ -6,6 +6,7 @@ import { immer } from 'zustand/middleware/immer';
 interface FullScreenPlayerState {
     activeTab: string | 'queue' | 'related' | 'lyrics';
     dynamicBackground?: boolean;
+    dynamicIsImage?: boolean;
     expanded: boolean;
     opacity: number;
     useImageAspectRatio: boolean;
@@ -28,6 +29,7 @@ export const useFullScreenPlayerStore = create<FullScreenPlayerSlice>()(
                 },
                 activeTab: 'queue',
                 dynamicBackground: true,
+                dynamicIsImage: false,
                 expanded: false,
                 opacity: 60,
                 useImageAspectRatio: false,

From b60b7806b5def7b7743b166cce6ac5cb063e1d4a Mon Sep 17 00:00:00 2001
From: iiPython <ben@iipython.dev>
Date: Fri, 1 Mar 2024 18:18:23 -0600
Subject: [PATCH 2/7] Center the background image and fix some more bugs

---
 .../player/components/full-screen-player.tsx   | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/renderer/features/player/components/full-screen-player.tsx b/src/renderer/features/player/components/full-screen-player.tsx
index 6429daca6..0ebec4dc2 100644
--- a/src/renderer/features/player/components/full-screen-player.tsx
+++ b/src/renderer/features/player/components/full-screen-player.tsx
@@ -71,6 +71,8 @@ const BackgroundImageOverlay = styled.div`
     backdrop-filter: blur(1.5rem);
 `;
 
+const mainBackground = 'var(--main-bg)';
+
 const Controls = () => {
     const { t } = useTranslation();
     const { dynamicBackground, dynamicIsImage, expanded, opacity, useImageAspectRatio } =
@@ -388,9 +390,15 @@ const containerVariants: Variants = {
         };
     },
     open: (custom) => {
-        const { dynamicBackground, parsedBackground, windowBarStyle } = custom;
+        const { background, backgroundImage, dynamicBackground, windowBarStyle } = custom;
         return {
-            background: dynamicBackground ? parsedBackground : 'var(--main-bg)',
+            // If dynamic background is enabled:
+            //   Use the background image (if enabled, else use the default background color)
+            // Else:
+            //   Use the default background color
+            background: dynamicBackground ? backgroundImage || mainBackground : mainBackground,
+            backgroundColor: dynamicBackground ? background : mainBackground,
+            backgroundPosition: 'center',
             backgroundSize: 'cover',
             height:
                 windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS
@@ -438,17 +446,17 @@ export const FullScreenPlayer = () => {
     });
 
     const imageUrl = currentSong?.imageUrl;
-    const parsedBackground =
+    const backgroundImage =
         imageUrl && dynamicIsImage
             ? `url("${imageUrl
                   .replace(/size=\d+/g, 'size=500')
                   .replace(currentSong.id, currentSong.albumId)}") no-repeat fixed`
-            : background;
+            : null;
 
     return (
         <Container
             animate="open"
-            custom={{ dynamicBackground, parsedBackground, windowBarStyle }}
+            custom={{ background, backgroundImage, dynamicBackground, windowBarStyle }}
             exit="closed"
             initial="closed"
             transition={{ duration: 2 }}

From 32325832e5bb5e1d1ba1c4c44c1d4faf5bfcf696 Mon Sep 17 00:00:00 2001
From: iiPython <ben@iipython.dev>
Date: Fri, 1 Mar 2024 18:21:33 -0600
Subject: [PATCH 3/7] More cleaning up the background image

---
 .../features/player/components/full-screen-player.tsx     | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/renderer/features/player/components/full-screen-player.tsx b/src/renderer/features/player/components/full-screen-player.tsx
index 0ebec4dc2..9663c9281 100644
--- a/src/renderer/features/player/components/full-screen-player.tsx
+++ b/src/renderer/features/player/components/full-screen-player.tsx
@@ -392,11 +392,7 @@ const containerVariants: Variants = {
     open: (custom) => {
         const { background, backgroundImage, dynamicBackground, windowBarStyle } = custom;
         return {
-            // If dynamic background is enabled:
-            //   Use the background image (if enabled, else use the default background color)
-            // Else:
-            //   Use the default background color
-            background: dynamicBackground ? backgroundImage || mainBackground : mainBackground,
+            background: dynamicBackground ? backgroundImage : mainBackground,
             backgroundColor: dynamicBackground ? background : mainBackground,
             backgroundPosition: 'center',
             backgroundSize: 'cover',
@@ -451,7 +447,7 @@ export const FullScreenPlayer = () => {
             ? `url("${imageUrl
                   .replace(/size=\d+/g, 'size=500')
                   .replace(currentSong.id, currentSong.albumId)}") no-repeat fixed`
-            : null;
+            : mainBackground;
 
     return (
         <Container

From ba4d94579d11627338944da934f6dd2b5c032083 Mon Sep 17 00:00:00 2001
From: iiPython <ben@iipython.dev>
Date: Fri, 1 Mar 2024 20:05:38 -0600
Subject: [PATCH 4/7] Add option for customizable blur amount

---
 .../player/components/full-screen-player.tsx  | 42 ++++++++++++++++---
 .../store/full-screen-player.store.ts         |  2 +
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/renderer/features/player/components/full-screen-player.tsx b/src/renderer/features/player/components/full-screen-player.tsx
index 9663c9281..8f2e6d8aa 100644
--- a/src/renderer/features/player/components/full-screen-player.tsx
+++ b/src/renderer/features/player/components/full-screen-player.tsx
@@ -60,7 +60,11 @@ const ResponsiveContainer = styled.div`
     }
 `;
 
-const BackgroundImageOverlay = styled.div`
+interface BackgroundImageOverlayProps {
+    $blur: number;
+}
+
+const BackgroundImageOverlay = styled.div<BackgroundImageOverlayProps>`
     position: absolute;
     top: 0;
     left: 0;
@@ -68,15 +72,21 @@ const BackgroundImageOverlay = styled.div`
     width: 100%;
     height: 100%;
     background: var(--bg-header-overlay);
-    backdrop-filter: blur(1.5rem);
+    backdrop-filter: blur(${({ $blur }) => $blur}rem);
 `;
 
 const mainBackground = 'var(--main-bg)';
 
 const Controls = () => {
     const { t } = useTranslation();
-    const { dynamicBackground, dynamicIsImage, expanded, opacity, useImageAspectRatio } =
-        useFullScreenPlayerStore();
+    const {
+        dynamicBackground,
+        dynamicImageBlur,
+        dynamicIsImage,
+        expanded,
+        opacity,
+        useImageAspectRatio,
+    } = useFullScreenPlayerStore();
     const { setStore } = useFullScreenPlayerStoreActions();
     const { setSettings } = useSettingsStoreActions();
     const lyricConfig = useLyricsSettings();
@@ -163,6 +173,26 @@ const Controls = () => {
                             </Option.Control>
                         </Option>
                     )}
+                    {dynamicIsImage && (
+                        <Option>
+                            <Option.Label>
+                                {t('page.fullscreenPlayer.config.dynamicImageBlur', {
+                                    postProcess: 'sentenceCase',
+                                })}
+                            </Option.Label>
+                            <Option.Control>
+                                <Slider
+                                    defaultValue={dynamicImageBlur}
+                                    label={(e) => `${e} rem`}
+                                    max={6}
+                                    min={0}
+                                    step={0.5}
+                                    w="100%"
+                                    onChangeEnd={(e) => setStore({ dynamicImageBlur: Number(e) })}
+                                />
+                            </Option.Control>
+                        </Option>
+                    )}
                     {dynamicBackground && (
                         <Option>
                             <Option.Label>
@@ -419,7 +449,7 @@ const containerVariants: Variants = {
 };
 
 export const FullScreenPlayer = () => {
-    const { dynamicBackground, dynamicIsImage } = useFullScreenPlayerStore();
+    const { dynamicBackground, dynamicImageBlur, dynamicIsImage } = useFullScreenPlayerStore();
     const { setStore } = useFullScreenPlayerStoreActions();
     const { windowBarStyle } = useWindowSettings();
 
@@ -459,7 +489,7 @@ export const FullScreenPlayer = () => {
             variants={containerVariants}
         >
             <Controls />
-            {dynamicBackground && <BackgroundImageOverlay />}
+            {dynamicBackground && <BackgroundImageOverlay $blur={dynamicImageBlur} />}
             <ResponsiveContainer>
                 <FullScreenPlayerImage />
                 <FullScreenPlayerQueue />
diff --git a/src/renderer/store/full-screen-player.store.ts b/src/renderer/store/full-screen-player.store.ts
index cc281163b..4ac852f6e 100644
--- a/src/renderer/store/full-screen-player.store.ts
+++ b/src/renderer/store/full-screen-player.store.ts
@@ -6,6 +6,7 @@ import { immer } from 'zustand/middleware/immer';
 interface FullScreenPlayerState {
     activeTab: string | 'queue' | 'related' | 'lyrics';
     dynamicBackground?: boolean;
+    dynamicImageBlur: number;
     dynamicIsImage?: boolean;
     expanded: boolean;
     opacity: number;
@@ -29,6 +30,7 @@ export const useFullScreenPlayerStore = create<FullScreenPlayerSlice>()(
                 },
                 activeTab: 'queue',
                 dynamicBackground: true,
+                dynamicImageBlur: 1.5,
                 dynamicIsImage: false,
                 expanded: false,
                 opacity: 60,

From 6d637f5a0e958262d1d5e9fc017bc73fd14f5630 Mon Sep 17 00:00:00 2001
From: iiPython <ben@iipython.dev>
Date: Fri, 1 Mar 2024 20:35:31 -0600
Subject: [PATCH 5/7] Fix missing translation key for image blur

---
 src/i18n/locales/en.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 966303ede..da0b7acbc 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -311,6 +311,7 @@
         "fullscreenPlayer": {
             "config": {
                 "dynamicBackground": "dynamic background",
+                "dynamicImageBlur": "image blur size",
                 "dynamicIsImage": "enable background image",
                 "followCurrentLyric": "follow current lyric",
                 "lyricAlignment": "lyric alignment",

From 2342d1ceb15fe9dedd0f133b3dbaf262a016836d Mon Sep 17 00:00:00 2001
From: Jeff <42182408+jeffvli@users.noreply.github.com>
Date: Tue, 5 Mar 2024 00:27:23 -0800
Subject: [PATCH 6/7] Fix dynamic image shifting when player is opened

---
 .../features/player/components/full-screen-player.tsx        | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/renderer/features/player/components/full-screen-player.tsx b/src/renderer/features/player/components/full-screen-player.tsx
index 8f2e6d8aa..7ff8ebdd2 100644
--- a/src/renderer/features/player/components/full-screen-player.tsx
+++ b/src/renderer/features/player/components/full-screen-player.tsx
@@ -425,6 +425,7 @@ const containerVariants: Variants = {
             background: dynamicBackground ? backgroundImage : mainBackground,
             backgroundColor: dynamicBackground ? background : mainBackground,
             backgroundPosition: 'center',
+            backgroundRepeat: 'no-repeat',
             backgroundSize: 'cover',
             height:
                 windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS
@@ -474,9 +475,7 @@ export const FullScreenPlayer = () => {
     const imageUrl = currentSong?.imageUrl;
     const backgroundImage =
         imageUrl && dynamicIsImage
-            ? `url("${imageUrl
-                  .replace(/size=\d+/g, 'size=500')
-                  .replace(currentSong.id, currentSong.albumId)}") no-repeat fixed`
+            ? `url("${imageUrl.replace(/size=\d+/g, 'size=500')}`
             : mainBackground;
 
     return (

From ae1db48cd35ef32de33740b11f08a7c518465c58 Mon Sep 17 00:00:00 2001
From: Jeff <42182408+jeffvli@users.noreply.github.com>
Date: Tue, 5 Mar 2024 00:29:25 -0800
Subject: [PATCH 7/7] Hide image blur size config if dynamic background is
 disabled

---
 src/renderer/features/player/components/full-screen-player.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/features/player/components/full-screen-player.tsx b/src/renderer/features/player/components/full-screen-player.tsx
index 7ff8ebdd2..edb8e320f 100644
--- a/src/renderer/features/player/components/full-screen-player.tsx
+++ b/src/renderer/features/player/components/full-screen-player.tsx
@@ -173,7 +173,7 @@ const Controls = () => {
                             </Option.Control>
                         </Option>
                     )}
-                    {dynamicIsImage && (
+                    {dynamicBackground && dynamicIsImage && (
                         <Option>
                             <Option.Label>
                                 {t('page.fullscreenPlayer.config.dynamicImageBlur', {