fix(masterfx): xoa han panel Wave Observer khoi mastering modal - khong con hien sau khi dong GUI
This commit is contained in:
@@ -14666,97 +14666,6 @@ const addMasterVst = (path) => { const fx = (masterFxList || []).find(f => f.pat
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* WAVE OBSERVER INTEGRATION */}
|
||||
<div className="border-t border-slate-800 bg-slate-900/60 p-3 flex flex-col shrink-0">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between pb-1.5 border-b border-slate-800/80 mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[11px] font-bold text-white uppercase tracking-wider">Wave Observer</span>
|
||||
<span className="text-[9px] bg-cyan-950 text-cyan-400 border border-cyan-800/60 px-1.5 py-0.2 rounded font-mono">Real-time Oscilloscope</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={() => setWoEnabled(!woEnabled)}
|
||||
className={`px-2 py-0.5 rounded text-[10px] font-bold border ${woEnabled ? 'bg-cyan-700 border-cyan-500 text-white' : 'bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700'}`}>
|
||||
{woEnabled ? 'Scope: BẬT' : 'Scope: TẮT'}
|
||||
</button>
|
||||
{['Scope', 'Settings', 'Help', 'About'].map(tab => (
|
||||
<button key={tab} className={`px-2 py-0.5 rounded text-[10px] font-bold ${tab === 'Scope' ? 'bg-cyan-950 text-cyan-300 border border-cyan-800/60' : 'text-slate-400 hover:text-slate-200'}`}>
|
||||
{tab}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scope Canvas */}
|
||||
<div className="relative w-full h-32 bg-[#090d16] border border-slate-800/80 rounded-lg overflow-hidden mb-2">
|
||||
<canvas ref={woCanvasRef} className="w-full h-full block"></canvas>
|
||||
{!woEnabled && (
|
||||
<div className="absolute inset-0 flex items-center justify-center text-[10px] font-mono text-slate-600 select-none pointer-events-none">
|
||||
Scope đang tắt — bấm [Scope: BẬT] để chạy
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Controls bar */}
|
||||
<div className="flex items-center justify-between gap-4 text-[10px] oz-font-mono text-slate-400 mt-1 select-none">
|
||||
{/* Input level meters */}
|
||||
<div className="flex items-center gap-2 bg-slate-950 px-2.5 py-1.5 rounded border border-slate-800/80 shrink-0">
|
||||
<span className="text-[10px] font-bold text-slate-300">Input</span>
|
||||
<div className="flex flex-col gap-1 w-20">
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-[8px] text-slate-500 w-2">L</span>
|
||||
<div className="w-16 h-1.5 bg-slate-900 rounded-sm overflow-hidden flex items-center">
|
||||
<div ref={woLeftMeterRef} className="h-full bg-cyan-400 transition-all duration-75" style={{ width: '0%' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-[8px] text-slate-500 w-2">R</span>
|
||||
<div className="w-16 h-1.5 bg-slate-900 rounded-sm overflow-hidden flex items-center">
|
||||
<div ref={woRightMeterRef} className="h-full bg-teal-500 transition-all duration-75" style={{ width: '0%' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scope Controls */}
|
||||
<div className="flex items-center gap-4 bg-slate-950 px-3 py-1 rounded border border-slate-800/80 flex-1 justify-around">
|
||||
<span className="font-bold text-slate-300 uppercase tracking-widest text-[9px]">Scope</span>
|
||||
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span>Channel</span>
|
||||
<select value={woChannel} onChange={e => setWoChannel(e.target.value)} className="bg-slate-900 border border-slate-700 rounded px-1.5 py-0.5 text-[9px] text-slate-300 outline-none">
|
||||
<option value="stereo">Stereo</option>
|
||||
<option value="left">Left Only</option>
|
||||
<option value="right">Right Only</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span>Mode</span>
|
||||
<select value={woMode} onChange={e => setWoMode(e.target.value)} className="bg-slate-900 border border-slate-700 rounded px-1.5 py-0.5 text-[9px] text-slate-300 outline-none">
|
||||
<option value="waveform">Waveform</option>
|
||||
<option value="envelope">Envelope</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span>Duration:</span>
|
||||
<span className="text-cyan-400 font-bold w-10 text-right">{woDuration.toFixed(3)}s</span>
|
||||
<input type="range" min="0.5" max="5.0" step="0.1" value={woDuration} onChange={e => setWoDuration(parseFloat(e.target.value))} className="w-16 h-1 cursor-pointer accent-cyan-400" />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span>V.Zoom:</span>
|
||||
<span className="text-cyan-400 font-bold w-12 text-right">{woZoom.toFixed(1)} dB</span>
|
||||
<input type="range" min="-12" max="24" step="0.5" value={woZoom} onChange={e => setWoZoom(parseFloat(e.target.value))} className="w-16 h-1 cursor-pointer accent-cyan-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onClick={() => setWoPaused(!woPaused)} className={`px-3 py-1 rounded font-bold border transition shadow-md shrink-0 flex items-center gap-1 ${woPaused ? 'bg-amber-800 hover:bg-amber-700 border-amber-500 text-amber-100' : 'bg-slate-800 hover:bg-slate-700 border-slate-700 text-slate-200'}`}>
|
||||
{woPaused ? 'Resume' : 'Pause'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user