add opacity configuration for visualizers

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",

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>

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 = () => {

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">

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: [],
         },