add opacity configuration for visualizers

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