From d75915f4cc63d2db48df5072caca8ef9317e37bc Mon Sep 17 00:00:00 2001
From: Boof2015 <75185879+Boof2015@users.noreply.github.com>
Date: Thu, 23 Apr 2026 00:59:58 -0400
Subject: [PATCH] fix transparency on solid mode in specrogram

---
 .../components/ScopeSettingsSection.tsx       |  2 +-
 src/renderer/visualizers/Spectrogram.ts       | 16 ++++++------
 test/renderer-helpers.test.ts                 | 26 +++++++++++++++++++
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/ScopeSettingsSection.tsx b/src/renderer/components/ScopeSettingsSection.tsx
index 1be5d92..2961589 100644
--- a/src/renderer/components/ScopeSettingsSection.tsx
+++ b/src/renderer/components/ScopeSettingsSection.tsx
@@ -440,7 +440,7 @@ export default function ScopeSettingsSection({
                 onChange={(value) => onUpdate('spectrogram', { colorScheme: value as ScopeSettings['spectrogram']['colorScheme'] })}
               >
                 <option value="heat">Heat</option>
-                <option value="mono">Mono</option>
+                <option value="mono">Solid</option>
               </SelectControl>
 
               <RangeControl
diff --git a/src/renderer/visualizers/Spectrogram.ts b/src/renderer/visualizers/Spectrogram.ts
index dac0f28..68a6ad6 100644
--- a/src/renderer/visualizers/Spectrogram.ts
+++ b/src/renderer/visualizers/Spectrogram.ts
@@ -1,5 +1,5 @@
 import { audioRouter } from '../audio/AudioRouter'
-import { parseColorToRgba, resolveColorToRgb } from '../utils/color'
+import { parseColorToRgba, resolveColorToRgb, type RgbaColor } from '../utils/color'
 import { defaultVisualizerSessionSource, type VisualizerSessionSource } from './dataSource'
 import { FrameScheduler } from './frameScheduler'
 import { VisualizerFrameLoop } from './visualizerFrameLoop'
@@ -591,9 +591,9 @@ export class Spectrogram {
     if (!this.columnImageData) return
 
     const imageData = this.columnImageData.data
-    const { r: tintR, g: tintG, b: tintB } = this.options.colorScheme === 'mono'
-      ? resolveColorToRgb(this.options.lineColor)
-      : { r: 0, g: 0, b: 0 }
+    const tint: RgbaColor = this.options.colorScheme === 'mono'
+      ? parseColorToRgba(this.options.lineColor) ?? { ...resolveColorToRgb(this.options.lineColor), a: 1 }
+      : { r: 0, g: 0, b: 0, a: 1 }
 
     for (let row = 0; row < values.length; row += 1) {
       const intensity = Math.max(0, Math.min(1, values[row]))
@@ -607,10 +607,10 @@ export class Spectrogram {
         imageData[dataIndex + 2] = this.heatLut[(lutIndex * 4) + 2]
         imageData[dataIndex + 3] = Math.round(this.heatLut[(lutIndex * 4) + 3] * intensity)
       } else {
-        imageData[dataIndex] = Math.round(tintR * intensity)
-        imageData[dataIndex + 1] = Math.round(tintG * intensity)
-        imageData[dataIndex + 2] = Math.round(tintB * intensity)
-        imageData[dataIndex + 3] = 255
+        imageData[dataIndex] = tint.r
+        imageData[dataIndex + 1] = tint.g
+        imageData[dataIndex + 2] = tint.b
+        imageData[dataIndex + 3] = Math.round(255 * tint.a * intensity)
       }
     }
   }
diff --git a/test/renderer-helpers.test.ts b/test/renderer-helpers.test.ts
index 6a35163..9f23f3d 100644
--- a/test/renderer-helpers.test.ts
+++ b/test/renderer-helpers.test.ts
@@ -1466,6 +1466,32 @@ test('Spectrogram heatmap preserves authored alpha in generated image data', ()
   assert.equal(imageData[11], 255)
 })
 
+test('Spectrogram solid color uses intensity as alpha while preserving tint RGB', () => {
+  const imageData = renderSpectrogramColumnImage({
+    colorScheme: 'mono',
+    lineColor: 'rgb(10, 20, 30)',
+  }, [0, 0.5, 1])
+
+  assert.deepEqual(imageData.slice(0, 3), [10, 20, 30])
+  assert.equal(imageData[3], 0)
+  assert.deepEqual(imageData.slice(4, 7), [10, 20, 30])
+  assert.equal(imageData[7], 128)
+  assert.deepEqual(imageData.slice(8, 11), [10, 20, 30])
+  assert.equal(imageData[11], 255)
+})
+
+test('Spectrogram solid color honors authored tint alpha', () => {
+  const imageData = renderSpectrogramColumnImage({
+    colorScheme: 'mono',
+    lineColor: 'rgba(100, 150, 200, 0.5)',
+  }, [0.5, 1])
+
+  assert.deepEqual(imageData.slice(0, 3), [100, 150, 200])
+  assert.equal(imageData[3], 64)
+  assert.deepEqual(imageData.slice(4, 7), [100, 150, 200])
+  assert.equal(imageData[7], 128)
+})
+
 test('Spectrogram keeps the historical display dB range for line thickness', () => {
   const dom = installFakeCanvasDom()
   const dataSource = {