+
+ {/* Toolbar overlay — fades in on hover */}
+
+
+
+
{/* Scope strip — fills all available space */}
- {/* Temporary source picker bar — will be replaced by Toolbar + Settings in Phase 6 */}
-
- {/* Signal indicator */}
-
-
-
-
-
-
+ {/* Settings panel — expands below strip */}
+ {settingsOpen &&
}
)
}
diff --git a/src/renderer/audio/AudioCapture.ts b/src/renderer/audio/AudioCapture.ts
index ef4af6f..553bdc9 100644
--- a/src/renderer/audio/AudioCapture.ts
+++ b/src/renderer/audio/AudioCapture.ts
@@ -15,6 +15,7 @@ class AudioCapture {
private workletNode: AudioWorkletNode | null = null
private selectedDeviceId: string | null = null
private captureMode: CaptureMode = 'system'
+ private sessionId: number | null = null
/**
* Start capturing system audio output via desktopCapturer (ScreenCaptureKit on macOS 13+).
@@ -52,8 +53,8 @@ class AudioCapture {
// Drop the video track immediately — we only need audio
this.stream.getVideoTracks().forEach((track) => track.stop())
- this.wireUpStream()
this.captureMode = 'system'
+ this.wireUpStream()
}
/**
@@ -80,8 +81,8 @@ class AudioCapture {
this.stream = await navigator.mediaDevices.getUserMedia(constraints)
- this.wireUpStream()
this.captureMode = 'device'
+ this.wireUpStream()
if (targetDeviceId) {
this.selectedDeviceId = targetDeviceId
@@ -108,6 +109,18 @@ class AudioCapture {
if (!this.audioContext || !this.stream) return
this.sourceNode = this.audioContext.createMediaStreamSource(this.stream)
+ const audioTrack = this.stream.getAudioTracks()[0] ?? null
+ const trackSettings = audioTrack?.getSettings()
+ const channelCount = Math.max(
+ 1,
+ Math.floor(trackSettings?.channelCount ?? this.sourceNode.channelCount ?? 2)
+ )
+ const sampleRate = Math.max(
+ 1,
+ Math.floor(trackSettings?.sampleRate ?? this.audioContext.sampleRate)
+ )
+ const sessionId = audioRouter.beginSession(sampleRate, channelCount)
+ this.sessionId = sessionId
this.workletNode = new AudioWorkletNode(this.audioContext, 'capture-processor', {
numberOfInputs: 1,
@@ -115,19 +128,29 @@ class AudioCapture {
channelCount: 2,
})
- this.workletNode.port.onmessage = (event: MessageEvent<{ left: Float32Array; right: Float32Array }>) => {
- audioRouter.ingestChunk(event.data.left, event.data.right)
+ this.workletNode.port.onmessage = (event: MessageEvent<{
+ left: Float32Array
+ right: Float32Array
+ channelCount?: number
+ }>) => {
+ audioRouter.ingestChunk(event.data.left, event.data.right, {
+ sessionId,
+ channelCount: event.data.channelCount ?? channelCount,
+ })
}
this.sourceNode.connect(this.workletNode)
-
- audioRouter.setSampleRate(this.audioContext.sampleRate)
- audioRouter.setCapturing(true)
+ console.log(
+ `AudioCapture: session ${sessionId} started (${sampleRate}Hz, ${channelCount}ch, mode=${this.captureMode})`
+ )
}
stop(): void {
- audioRouter.setCapturing(false)
- audioRouter.reset()
+ if (this.sessionId !== null) {
+ console.log(`AudioCapture: ending session ${this.sessionId}`)
+ audioRouter.endSession()
+ this.sessionId = null
+ }
if (this.workletNode) {
this.workletNode.disconnect()
diff --git a/src/renderer/audio/AudioRouter.ts b/src/renderer/audio/AudioRouter.ts
index 3c01b95..a09356d 100644
--- a/src/renderer/audio/AudioRouter.ts
+++ b/src/renderer/audio/AudioRouter.ts
@@ -7,6 +7,18 @@ const MAX_PENDING_CHUNKS = 20
const MAX_PENDING_SPECTRUM_CHUNKS = 96
const MAX_PENDING_VECTORSCOPE_CHUNKS = 20
+export interface AudioSessionState {
+ sessionId: number
+ sampleRate: number
+ channelCount: number
+ capturing: boolean
+}
+
+interface AudioChunkMeta {
+ sessionId?: number
+ channelCount?: number
+}
+
class AudioRouter {
private pendingOscilloscopeSamples: Float32Array[] = []
private pendingSpectrumSamples: Float32Array[] = []
@@ -18,6 +30,16 @@ class AudioRouter {
private _sampleRate = 48000
private _capturing = false
+ private _channelCount = 2
+ private _sessionId = 0
+ private sessionListeners = new Set<(state: AudioSessionState) => void>()
+
+ private emitSessionState(): void {
+ const state = this.getSessionState()
+ for (const listener of this.sessionListeners) {
+ listener(state)
+ }
+ }
setSampleRate(rate: number): void {
this._sampleRate = rate
@@ -35,12 +57,59 @@ class AudioRouter {
return this._capturing
}
- ingestChunk(left: Float32Array, right: Float32Array): void {
+ getChannelCount(): number {
+ return this._channelCount
+ }
+
+ getSessionState(): AudioSessionState {
+ return {
+ sessionId: this._sessionId,
+ sampleRate: this._sampleRate,
+ channelCount: this._channelCount,
+ capturing: this._capturing,
+ }
+ }
+
+ beginSession(sampleRate: number, channelCount: number): number {
+ this._sessionId += 1
+ this._sampleRate = sampleRate
+ this._channelCount = Math.max(1, Math.floor(channelCount) || 1)
+ this._capturing = true
+ this.reset()
+ this.emitSessionState()
+ return this._sessionId
+ }
+
+ endSession(): void {
+ this._sessionId += 1
+ this._capturing = false
+ this.reset()
+ this.emitSessionState()
+ }
+
+ subscribeToSessionChanges(listener: (state: AudioSessionState) => void): () => void {
+ this.sessionListeners.add(listener)
+ listener(this.getSessionState())
+ return () => {
+ this.sessionListeners.delete(listener)
+ }
+ }
+
+ ingestChunk(left: Float32Array, right: Float32Array, meta: AudioChunkMeta = {}): void {
+ if (!this._capturing) return
+ if (meta.sessionId !== undefined && meta.sessionId !== this._sessionId) return
+
+ const effectiveChannelCount = Math.max(1, Math.floor(meta.channelCount ?? this._channelCount) || 1)
+ this._channelCount = effectiveChannelCount
+ const resolvedRight = effectiveChannelCount > 1 && right.length > 0 ? right : left
+
// Compute mono
- const len = Math.min(left.length, right.length)
+ const len = Math.min(left.length, resolvedRight.length)
+ if (len === 0) return
+
const mono = new Float32Array(len)
for (let i = 0; i < len; i++) {
- mono[i] = (left[i] + right[i]) / 2
+ mono[i] = (left[i] + resolvedRight[i]) / 2
}
// Oscilloscope — uses left channel
@@ -49,7 +118,7 @@ class AudioRouter {
-Math.floor(MAX_PENDING_CHUNKS / 2)
)
}
- this.pendingOscilloscopeSamples.push(new Float32Array(left))
+ this.pendingOscilloscopeSamples.push(left.slice(0, len))
// Spectrum — uses mono
if (this.pendingSpectrumSamples.length >= MAX_PENDING_SPECTRUM_CHUNKS) {
@@ -74,8 +143,8 @@ class AudioRouter {
)
}
this.pendingVectorscopeSamples.push({
- left: new Float32Array(left),
- right: new Float32Array(right),
+ left: left.slice(0, len),
+ right: resolvedRight.slice(0, len),
})
// VU Meter — uses stereo
@@ -85,8 +154,8 @@ class AudioRouter {
)
}
this.pendingVUMeterSamples.push({
- left: new Float32Array(left),
- right: new Float32Array(right),
+ left: left.slice(0, len),
+ right: resolvedRight.slice(0, len),
})
// LUFS Meter — uses stereo
@@ -96,8 +165,8 @@ class AudioRouter {
)
}
this.pendingLUFSMeterSamples.push({
- left: new Float32Array(left),
- right: new Float32Array(right),
+ left: left.slice(0, len),
+ right: resolvedRight.slice(0, len),
})
// Waveform — uses left channel
diff --git a/src/renderer/components/ScopeModule.tsx b/src/renderer/components/ScopeModule.tsx
index ef4ab60..bf3d028 100644
--- a/src/renderer/components/ScopeModule.tsx
+++ b/src/renderer/components/ScopeModule.tsx
@@ -1,56 +1,124 @@
import { useEffect, useRef } from 'react'
import type { ScopeKind } from '../../types/scope'
+import { useSettingsStore, type ScopeSettings } from '../stores/settingsStore'
import { SpectrumAnalyzer } from '../visualizers/SpectrumAnalyzer'
import { Oscilloscope } from '../visualizers/Oscilloscope'
import { Vectorscope } from '../visualizers/Vectorscope'
+import { Spectrogram } from '../visualizers/Spectrogram'
+import { VUMeter } from '../visualizers/VUMeter'
+import { LUFSMeter } from '../visualizers/LUFSMeter'
+import { Waveform } from '../visualizers/Waveform'
interface ScopeModuleProps {
scopeKind: ScopeKind
lineColor?: string
+ widthWeight?: number
}
-type Visualizer = SpectrumAnalyzer | Oscilloscope | Vectorscope
+interface Visualizer {
+ start(): void
+ stop(): void
+ dispose(): void
+ resize(): void
+ setOptions(options: Record
): void
+}
-function createVisualizer(scopeKind: ScopeKind, canvas: HTMLCanvasElement, lineColor: string): Visualizer | null {
+/** Maps settingsStore scope settings to the visualizer's setOptions format */
+function scopeSettingsToOptions(kind: ScopeKind, settings: ScopeSettings[ScopeKind], lineColor: string): Record {
+ const base = { lineColor }
+ switch (kind) {
+ case 'spectrum': {
+ const s = settings as ScopeSettings['spectrum']
+ return { ...base, fftSize: s.fftSize, tiltDbPerOctave: s.tiltDbPerOctave, heatmapFill: s.heatmap, heatmapTiltDbPerOctave: s.heatmapTiltDbPerOctave, showGrid: s.showGrid, fillGradient: s.fillGradient }
+ }
+ case 'oscilloscope': {
+ const s = settings as ScopeSettings['oscilloscope']
+ return { ...base, pitchLock: s.pitchLock, underfillEnabled: s.underfillEnabled, showGrid: s.showGrid, lineWidth: s.lineWidth }
+ }
+ case 'vectorscope': {
+ const s = settings as ScopeSettings['vectorscope']
+ return { ...base, mode: s.mode, multiband: s.multiband, showGrid: s.showGrid, persistence: s.persistence }
+ }
+ case 'spectrogram': {
+ const s = settings as ScopeSettings['spectrogram']
+ return { ...base, fftSize: s.fftSize, scrollSpeed: s.scrollSpeed, clarityMode: s.clarityMode, scaleMode: s.scaleMode, colorScheme: s.colorScheme }
+ }
+ case 'vumeter': {
+ const s = settings as ScopeSettings['vumeter']
+ return { ...base, mode: s.mode, orientation: s.orientation }
+ }
+ case 'lufsmeter': {
+ const s = settings as ScopeSettings['lufsmeter']
+ return { ...base, mode: s.mode }
+ }
+ case 'waveform': {
+ const s = settings as ScopeSettings['waveform']
+ return { ...base, scrollSpeed: s.scrollSpeed, gainDb: s.gainDb, multiband: s.multiband }
+ }
+ default:
+ return base
+ }
+}
+
+function createVisualizer(scopeKind: ScopeKind, canvas: HTMLCanvasElement, mySettings: ScopeSettings[ScopeKind], lineColor: string): Visualizer | null {
+ const opts = scopeSettingsToOptions(scopeKind, mySettings, lineColor)
switch (scopeKind) {
case 'spectrum':
- return new SpectrumAnalyzer(canvas, { lineColor })
+ return new SpectrumAnalyzer(canvas, opts)
case 'oscilloscope':
- return new Oscilloscope(canvas, { lineColor })
+ return new Oscilloscope(canvas, opts)
case 'vectorscope':
- return new Vectorscope(canvas, { lineColor })
+ return new Vectorscope(canvas, opts)
+ case 'spectrogram':
+ return new Spectrogram(canvas, opts)
+ case 'vumeter':
+ return new VUMeter(canvas, opts)
+ case 'lufsmeter':
+ return new LUFSMeter(canvas, opts)
+ case 'waveform':
+ return new Waveform(canvas, opts)
default:
- console.warn(`Scope type "${scopeKind}" not yet implemented`)
return null
}
}
-export default function ScopeModule({ scopeKind, lineColor = '#38bdf8' }: ScopeModuleProps): JSX.Element {
+export default function ScopeModule({ scopeKind, lineColor = '#38bdf8', widthWeight = 1 }: ScopeModuleProps): JSX.Element {
const containerRef = useRef(null)
const canvasRef = useRef(null)
const visualizerRef = useRef(null)
+ const initializedRef = useRef(false)
- // Initialize and manage visualizer lifecycle
+ // Subscribe to ONLY this scope's settings — avoids triggering setOptions when other scopes change
+ const mySettings = useSettingsStore((s) => s.scopeSettings[scopeKind])
+
+ // Initialize visualizer
useEffect(() => {
const canvas = canvasRef.current
if (!canvas) return
- const viz = createVisualizer(scopeKind, canvas, lineColor)
+ initializedRef.current = false
+ const viz = createVisualizer(scopeKind, canvas, mySettings, lineColor)
if (!viz) return
visualizerRef.current = viz
viz.start()
+ // Mark as initialized after a frame so the settings effect skips the first run
+ requestAnimationFrame(() => { initializedRef.current = true })
+
return () => {
viz.dispose()
visualizerRef.current = null
+ initializedRef.current = false
}
- }, [scopeKind]) // Only recreate when scope type changes
+ }, [scopeKind])
- // Update lineColor without recreating
+ // Push settings + lineColor changes to live visualizer (skip initial — constructor already handled it)
useEffect(() => {
- visualizerRef.current?.setOptions({ lineColor })
- }, [lineColor])
+ if (!visualizerRef.current || !initializedRef.current) return
+ const opts = scopeSettingsToOptions(scopeKind, mySettings, lineColor)
+ visualizerRef.current.setOptions(opts)
+ }, [mySettings, lineColor])
// ResizeObserver for DPI-aware canvas sizing
useEffect(() => {
@@ -74,7 +142,7 @@ export default function ScopeModule({ scopeKind, lineColor = '#38bdf8' }: ScopeM
const observer = new ResizeObserver(resizeCanvas)
observer.observe(container)
- resizeCanvas() // Initial size
+ resizeCanvas()
return () => observer.disconnect()
}, [])
@@ -83,7 +151,7 @@ export default function ScopeModule({ scopeKind, lineColor = '#38bdf8' }: ScopeM
= {
+ spectrum: 'Spectrum',
+ oscilloscope: 'Oscilloscope',
+ vectorscope: 'Vectorscope',
+ spectrogram: 'Spectrogram',
+ vumeter: 'VU Meter',
+ lufsmeter: 'LUFS Meter',
+ waveform: 'Waveform',
+}
+
+const labelStyle: React.CSSProperties = {
+ fontSize: '9px',
+ fontFamily: "'JetBrains Mono', monospace",
+ color: 'rgba(255, 255, 255, 0.45)',
+ textTransform: 'uppercase',
+ letterSpacing: '0.08em',
+ marginBottom: '4px',
+}
+
+const selectStyle: React.CSSProperties = {
+ backgroundColor: '#0a0a0a',
+ color: 'rgba(255, 255, 255, 0.8)',
+ border: '1px solid rgba(255, 255, 255, 0.1)',
+ borderRadius: '3px',
+ padding: '4px 6px',
+ fontSize: '11px',
+ fontFamily: 'Inter, sans-serif',
+ outline: 'none',
+ width: '100%',
+}
+
+const checkboxRowStyle: React.CSSProperties = {
+ display: 'flex',
+ alignItems: 'center',
+ gap: '6px',
+ fontSize: '11px',
+ color: 'rgba(255, 255, 255, 0.7)',
+ fontFamily: 'Inter, sans-serif',
+ cursor: 'pointer',
+}
+
+interface SettingsPanelProps {
+ onClose: () => void
+}
+
+export default function SettingsPanel({ onClose }: SettingsPanelProps): JSX.Element {
+ const {
+ devices,
+ selectedDeviceId,
+ captureMode,
+ isCapturing,
+ captureStatus,
+ captureError,
+ refreshDevices,
+ selectDevice,
+ setCaptureMode,
+ startCapture,
+ } = useAudioStore()
+ const { scopeSettings, updateScopeSettings, hiddenScopes, scopeOrder } = useSettingsStore()
+ const { presetId, accent, setPreset, setCustomAccent, customAccent } = useThemeStore()
+
+ const visibleScopes = scopeOrder.filter((k) => !hiddenScopes.has(k))
+
+ useEffect(() => {
+ refreshDevices()
+ }, [])
+
+ const handleSourceChange = async (value: string): Promise
=> {
+ if (value === '__system__') {
+ setCaptureMode('system')
+ await startCapture()
+ } else {
+ await selectDevice(value)
+ await startCapture()
+ }
+ }
+
+ const indicatorColor = isCapturing
+ ? '#22c55e'
+ : captureStatus === 'error'
+ ? '#ef4444'
+ : '#71717a'
+ const indicatorLabel = isCapturing
+ ? 'Capturing'
+ : captureStatus === 'connecting'
+ ? 'Connecting...'
+ : captureStatus === 'error'
+ ? 'Capture Failed'
+ : 'Idle'
+
+ return (
+
+ {/* Audio Source section */}
+
+
+ Audio Source
+
+
+
+
Source
+
+
+
+ {/* Signal indicator */}
+
+ {captureError ? (
+
+ {captureError}
+
+ ) : null}
+
+ {/* Theme section */}
+
+
+ Theme
+
+
+ {PRESET_IDS.map((id) => {
+ const p = PRESETS[id]
+ const active = presetId === id && !customAccent
+ return (
+
+
+
Custom
+
setCustomAccent(e.target.value)}
+ style={{
+ width: '100%',
+ height: '24px',
+ border: '1px solid rgba(255, 255, 255, 0.1)',
+ borderRadius: '3px',
+ backgroundColor: '#0a0a0a',
+ cursor: 'pointer',
+ padding: '2px',
+ }}
+ />
+
+
+
+
+ {/* Per-scope settings */}
+
+ {visibleScopes.map((kind) => (
+
+ ))}
+
+
+ {/* Close button */}
+
+
+
+ {SCOPE_LABELS[kind]}
+
+
+ {kind === 'spectrum' && (() => {
+ const ss = s as ScopeSettings['spectrum']
+ return (
+ <>
+
+
FFT Size
+
+
+
+
Tilt (dB/oct)
+
onUpdate('spectrum', { tiltDbPerOctave: Number(e.target.value) })} style={{ width: '100%' }} />
+
+
+
+
+
+ )
+ })()}
+
+ {kind === 'oscilloscope' && (() => {
+ const ss = s as ScopeSettings['oscilloscope']
+ return (
+ <>
+
+
+
+
Line Width
+
onUpdate('oscilloscope', { lineWidth: Number(e.target.value) })} style={{ width: '100%' }} />
+
+
+ )
+ })()}
+
+ {kind === 'vectorscope' && (() => {
+ const ss = s as ScopeSettings['vectorscope']
+ return (
+ <>
+
+
Mode
+
+
+
+
Persistence
+
onUpdate('vectorscope', { persistence: Number(e.target.value) })} style={{ width: '100%' }} />
+
+
+
+
+ )
+ })()}
+
+ {kind === 'spectrogram' && (() => {
+ const ss = s as ScopeSettings['spectrogram']
+ return (
+ <>
+
+
FFT Size
+
+
+
+
Scale
+
+
+
+
Clarity
+
+
+
+
Color
+
+
+
+
Speed
+
onUpdate('spectrogram', { scrollSpeed: Number(e.target.value) })} style={{ width: '100%' }} />
+
+
+ )
+ })()}
+
+ {kind === 'vumeter' && (() => {
+ const ss = s as ScopeSettings['vumeter']
+ return (
+ <>
+
+
Mode
+
+
+
+
Orientation
+
+
+
+ )
+ })()}
+
+ {kind === 'lufsmeter' && (() => {
+ const ss = s as ScopeSettings['lufsmeter']
+ return (
+
+
Mode
+
+
+ )
+ })()}
+
+ {kind === 'waveform' && (() => {
+ const ss = s as ScopeSettings['waveform']
+ return (
+ <>
+
+
Gain (dB)
+
onUpdate('waveform', { gainDb: Number(e.target.value) })} style={{ width: '100%' }} />
+
+
+
Speed
+
onUpdate('waveform', { scrollSpeed: Number(e.target.value) })} style={{ width: '100%' }} />
+
+
+
+ )
+ })()}
+
-
-
-
-
-
+ {visibleScopes.map((kind, i) => (
+
+ {i > 0 && (
+
+ )}
+
+
+ ))}
+ {/* Drag region */}
+
+
+ {/* Scope toggles */}
+
+ {SCOPE_KINDS.map((kind) => {
+ const active = !hiddenScopes.has(kind)
+ return (
+
+ )
+ })}
+
+
+ {/* Right side: settings, pin, close */}
+
+
+
+
+
+
+
+