From aa7a5037fad03a3679b973119c356e8e7fb2fb5d Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 27 Dec 2025 01:33:05 -0800
Subject: [PATCH] add opacity configuration for visualizers

---
 src/i18n/locales/en.json                         |  1 +
 .../visualizer-settings-form.tsx                 | 16 ++++++++++++++++
 .../audiomotionanalyzer/visualizer.tsx           | 11 ++++++++++-
 .../components/butternchurn/visualizer.tsx       |  3 ++-
 src/renderer/store/settings.store.ts             |  4 ++++
 5 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 48019f86d..b2322599f 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1134,6 +1134,7 @@
         "fillAlpha": "Fill Alpha",
         "channelLayout": "Channel Layout",
         "maxFPS": "Max FPS",
+        "opacity": "Opacity",
         "customGradients": "Custom Gradients",
         "addCustomGradient": "Add Custom Gradient",
         "gradientName": "Gradient Name",
diff --git a/src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer-settings-form.tsx b/src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer-settings-form.tsx
index 2b89daae9..783726ff3 100644
--- a/src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer-settings-form.tsx
+++ b/src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer-settings-form.tsx
@@ -988,6 +988,14 @@ const GeneralSettings = () => {
                         min={0}
                         onChangeEnd={(e) => updateProperty('maxFPS', e)}
                     />
+                    <VisualizerSlider
+                        defaultValue={visualizer.audiomotionanalyzer.opacity}
+                        label={t('visualizer.opacity')}
+                        max={1}
+                        min={0}
+                        onChangeEnd={(e) => updateProperty('opacity', e)}
+                        step={0.01}
+                    />
                 </Group>
             </Stack>
         </Fieldset>
@@ -1972,6 +1980,14 @@ const ButterchurnGeneralSettings = () => {
                         onChangeEnd={(e) => updateProperty('maxFPS', e)}
                         step={1}
                     />
+                    <VisualizerSlider
+                        defaultValue={visualizer.butterchurn.opacity}
+                        label={t('visualizer.opacity')}
+                        max={1}
+                        min={0}
+                        onChangeEnd={(e) => updateProperty('opacity', e)}
+                        step={0.01}
+                    />
                 </Group>
             </Stack>
         </Fieldset>
diff --git a/src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer.tsx b/src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer.tsx
index f23f8413d..42c7410c0 100644
--- a/src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer.tsx
+++ b/src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer.tsx
@@ -14,6 +14,9 @@ const VisualizerInner = () => {
     const canvasRef = createRef<HTMLDivElement>();
     const accent = useSettingsStore((store) => store.general.accent);
     const visualizer = useSettingsStore((store) => store.visualizer);
+    const opacity = useSettingsStore(
+        (store) => store.visualizer.audiomotionanalyzer.opacity,
+    );
     const [motion, setMotion] = useState<AudioMotionAnalyzer>();
 
     // Check if a gradient name is a custom gradient
@@ -217,7 +220,13 @@ const VisualizerInner = () => {
         }
     }, [motion, options]);
 
-    return <div className={styles.visualizer} ref={canvasRef} />;
+    return (
+        <div
+            className={styles.visualizer}
+            ref={canvasRef}
+            style={{ opacity }}
+        />
+    );
 };
 
 export const Visualizer = () => {
diff --git a/src/renderer/features/visualizer/components/butternchurn/visualizer.tsx b/src/renderer/features/visualizer/components/butternchurn/visualizer.tsx
index cf1b7877f..7a0fa0f9f 100644
--- a/src/renderer/features/visualizer/components/butternchurn/visualizer.tsx
+++ b/src/renderer/features/visualizer/components/butternchurn/visualizer.tsx
@@ -30,6 +30,7 @@ const VisualizerInner = () => {
     const cycleTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
     const cycleStartTimeRef = useRef<number | undefined>(undefined);
     const butterchurnSettings = useSettingsStore((store) => store.visualizer.butterchurn);
+    const opacity = useSettingsStore((store) => store.visualizer.butterchurn.opacity);
     const { setSettings } = useSettingsStoreActions();
     const playerStatus = usePlayerStatus();
     const isPlaying = playerStatus === PlayerStatus.PLAYING;
@@ -293,7 +294,7 @@ const VisualizerInner = () => {
     }, [visualizer, butterchurnSettings.maxFPS]);
 
     return (
-        <div className={styles.container} ref={containerRef}>
+        <div className={styles.container} ref={containerRef} style={{ opacity }}>
             <canvas className={styles.canvas} ref={canvasRef} />
             {butterchurnSettings.currentPreset && (
                 <Text className={styles['preset-overlay']} isNoSelect size="sm">
diff --git a/src/renderer/store/settings.store.ts b/src/renderer/store/settings.store.ts
index 6fd970fe0..354579f00 100644
--- a/src/renderer/store/settings.store.ts
+++ b/src/renderer/store/settings.store.ts
@@ -285,6 +285,7 @@ const AudioMotionAnalyzerSettingsSchema = z.object({
     mirror: z.number(),
     mode: z.number(),
     noteLabels: z.boolean(),
+    opacity: z.number().min(0).max(1),
     outlineBars: z.boolean(),
     peakFadeTime: z.number(),
     peakHoldTime: z.number(),
@@ -323,6 +324,7 @@ const ButterchurnSettingsSchema = z.object({
     ignoredPresets: z.array(z.string()),
     includeAllPresets: z.boolean(),
     maxFPS: z.number().min(0),
+    opacity: z.number().min(0).max(1),
     randomizeNextPreset: z.boolean(),
     selectedPresets: z.array(z.string()),
 });
@@ -1451,6 +1453,7 @@ const initialState: SettingsState = {
             mirror: 0,
             mode: 5,
             noteLabels: false,
+            opacity: 1,
             outlineBars: false,
             peakFadeTime: 900,
             peakHoldTime: 500,
@@ -1483,6 +1486,7 @@ const initialState: SettingsState = {
             ignoredPresets: [],
             includeAllPresets: true,
             maxFPS: 0,
+            opacity: 1,
             randomizeNextPreset: true,
             selectedPresets: [],
         },