feat: redesign ConfigPanel with dark modal and custom toggles
This commit is contained in:
parent
5274ca5460
commit
275c5ad2fa
1 changed files with 213 additions and 119 deletions
|
|
@ -9,16 +9,14 @@ interface ConfigPanelProps {
|
|||
}
|
||||
|
||||
export function ConfigPanel({ portIndex, currentConfig, onSave, onClose }: ConfigPanelProps) {
|
||||
// State for each config field
|
||||
const [codec, setCodec] = useState<CodecType>('PRORES');
|
||||
const [bitrate, setBitrate] = useState('185M');
|
||||
const [qualityProfile, setQualityProfile] = useState('hq');
|
||||
const [recordingPath, setRecordingPath] = useState('/recordings/port_{port_index}_{timestamp}.mxf');
|
||||
const [recordingPath, setRecordingPath] = useState(`/recordings/port_${portIndex}_{timestamp}.mxf`);
|
||||
const [srtEnabled, setSrtEnabled] = useState(false);
|
||||
const [srtDestination, setSrtDestination] = useState('');
|
||||
const [previewEnabled, setPreviewEnabled] = useState(true);
|
||||
|
||||
// Initialize from currentConfig if provided
|
||||
useEffect(() => {
|
||||
if (currentConfig) {
|
||||
setCodec(currentConfig.codec);
|
||||
|
|
@ -32,126 +30,222 @@ export function ConfigPanel({ portIndex, currentConfig, onSave, onClose }: Confi
|
|||
}, [currentConfig]);
|
||||
|
||||
const handleSave = () => {
|
||||
const config: RecorderConfig = {
|
||||
port_index: portIndex,
|
||||
codec,
|
||||
bitrate,
|
||||
quality_profile: qualityProfile,
|
||||
recording_path: recordingPath,
|
||||
srt_enabled: srtEnabled,
|
||||
srt_destination: srtDestination,
|
||||
preview_enabled: previewEnabled,
|
||||
};
|
||||
onSave(config);
|
||||
onSave({
|
||||
port_index: portIndex, codec, bitrate, quality_profile: qualityProfile,
|
||||
recording_path: recordingPath, srt_enabled: srtEnabled,
|
||||
srt_destination: srtDestination, preview_enabled: previewEnabled,
|
||||
});
|
||||
onClose();
|
||||
};
|
||||
|
||||
const inputStyle: React.CSSProperties = {
|
||||
background: 'rgba(0,0,0,0.35)', border: '1px solid var(--border)', borderRadius: 3,
|
||||
padding: '9px 12px', fontFamily: 'var(--font-mono)', fontSize: 13,
|
||||
color: 'var(--text-primary)', outline: 'none', width: '100%',
|
||||
};
|
||||
|
||||
const selectStyle: React.CSSProperties = {
|
||||
...inputStyle,
|
||||
cursor: 'pointer', appearance: 'none' as const,
|
||||
backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%237a8fa8' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E\")",
|
||||
backgroundRepeat: 'no-repeat', backgroundPosition: 'right 12px center',
|
||||
paddingRight: 32,
|
||||
background: 'rgba(0,0,0,0.35)',
|
||||
};
|
||||
|
||||
const labelStyle: React.CSSProperties = {
|
||||
fontFamily: 'var(--font-ui)', fontSize: 10, fontWeight: 700,
|
||||
letterSpacing: '0.3em', textTransform: 'uppercase', color: 'var(--text-muted)',
|
||||
display: 'block', marginBottom: 6,
|
||||
};
|
||||
|
||||
const sectionTitleStyle: React.CSSProperties = {
|
||||
fontFamily: 'var(--font-ui)', fontSize: 9, fontWeight: 700,
|
||||
letterSpacing: '0.35em', textTransform: 'uppercase', color: 'var(--text-muted)',
|
||||
display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-gray-800 rounded-lg p-6 w-full max-w-md">
|
||||
<h2 className="text-white text-xl font-bold mb-4">Configure Port {portIndex}</h2>
|
||||
|
||||
{/* Codec Selection */}
|
||||
<div className="mb-4">
|
||||
<label className="text-gray-300 text-sm font-medium mb-1 block">Codec</label>
|
||||
<select
|
||||
value={codec}
|
||||
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setCodec(e.target.value as CodecType)}
|
||||
className="w-full bg-gray-700 text-white border border-gray-600 rounded px-3 py-2 mb-3"
|
||||
>
|
||||
<option value="PRORES">ProRes</option>
|
||||
<option value="DNXHD">DNxHD</option>
|
||||
<option value="H264">H.264</option>
|
||||
<option value="UNCOMPRESSED">Uncompressed</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Quality Profile - only show for ProRes */}
|
||||
{codec === 'PRORES' && (
|
||||
<div className="mb-4">
|
||||
<label className="text-gray-300 text-sm font-medium mb-1 block">Quality Profile</label>
|
||||
<select
|
||||
value={qualityProfile}
|
||||
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setQualityProfile(e.target.value)}
|
||||
className="w-full bg-gray-700 text-white border border-gray-600 rounded px-3 py-2 mb-3"
|
||||
>
|
||||
<option value="hq">High Quality</option>
|
||||
<option value="mq">Medium Quality</option>
|
||||
<option value="lq">Low Quality</option>
|
||||
</select>
|
||||
<div
|
||||
onClick={onClose}
|
||||
style={{
|
||||
position: 'fixed', inset: 0,
|
||||
background: 'rgba(0,0,0,0.75)', backdropFilter: 'blur(4px)',
|
||||
zIndex: 200, display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
animation: 'overlayIn 0.15s ease',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
onClick={e => e.stopPropagation()}
|
||||
style={{
|
||||
background: 'var(--bg-panel)',
|
||||
border: '1px solid var(--border-bright)',
|
||||
borderRadius: 4, width: '100%', maxWidth: 500,
|
||||
maxHeight: '90vh', overflowY: 'auto',
|
||||
boxShadow: '0 24px 80px rgba(0,0,0,0.8)',
|
||||
animation: 'modalIn 0.2s ease',
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div style={{
|
||||
padding: '18px 22px', borderBottom: '1px solid var(--border)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||
}}>
|
||||
<div>
|
||||
<span style={{ fontFamily: 'var(--font-ui)', fontSize: 14, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--text-primary)' }}>
|
||||
Port Config
|
||||
</span>
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--dragon-blue)', marginLeft: 10 }}>
|
||||
PORT {portIndex}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Bitrate - only show for DNxHD or H264 */}
|
||||
{(codec === 'DNXHD' || codec === 'H264') && (
|
||||
<div className="mb-4">
|
||||
<label className="text-gray-300 text-sm font-medium mb-1 block">Bitrate</label>
|
||||
<input
|
||||
type="text"
|
||||
value={bitrate}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setBitrate(e.target.value)}
|
||||
placeholder="e.g., 185M, 50M"
|
||||
className="w-full bg-gray-700 text-white border border-gray-600 rounded px-3 py-2 mb-3"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Recording Path */}
|
||||
<div className="mb-4">
|
||||
<label className="text-gray-300 text-sm font-medium mb-1 block">Recording Path</label>
|
||||
<input
|
||||
type="text"
|
||||
value={recordingPath}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setRecordingPath(e.target.value)}
|
||||
className="w-full bg-gray-700 text-white border border-gray-600 rounded px-3 py-2 mb-1"
|
||||
/>
|
||||
<p className="text-gray-500 text-xs">Use {'{timestamp}'} and {'{port_index}'} as placeholders</p>
|
||||
</div>
|
||||
|
||||
{/* SRT Enabled Checkbox */}
|
||||
<div className="mb-4">
|
||||
<label className="flex items-center text-gray-300 text-sm font-medium">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={srtEnabled}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSrtEnabled(e.target.checked)}
|
||||
className="mr-2 w-4 h-4 bg-gray-700 border border-gray-600 rounded"
|
||||
/>
|
||||
Enable SRT (Secure Reliable Transport)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* SRT Destination - only show when SRT enabled */}
|
||||
{srtEnabled && (
|
||||
<div className="mb-4">
|
||||
<label className="text-gray-300 text-sm font-medium mb-1 block">SRT Destination</label>
|
||||
<input
|
||||
type="text"
|
||||
value={srtDestination}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSrtDestination(e.target.value)}
|
||||
placeholder="srt://destination.example.com:9000"
|
||||
className="w-full bg-gray-700 text-white border border-gray-600 rounded px-3 py-2 mb-3"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Preview Enabled Checkbox */}
|
||||
<div className="mb-6">
|
||||
<label className="flex items-center text-gray-300 text-sm font-medium">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={previewEnabled}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPreviewEnabled(e.target.checked)}
|
||||
className="mr-2 w-4 h-4 bg-gray-700 border border-gray-600 rounded"
|
||||
/>
|
||||
Enable Preview
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded font-medium"
|
||||
>
|
||||
Cancel
|
||||
style={{ background: 'transparent', border: 'none', color: 'var(--text-muted)', cursor: 'pointer', fontSize: 20, lineHeight: 1, padding: '2px 6px', borderRadius: 2 }}
|
||||
>✕</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 22 }}>
|
||||
|
||||
{/* Codec section */}
|
||||
<div>
|
||||
<div style={sectionTitleStyle}>
|
||||
Codec
|
||||
<div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
|
||||
</div>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<label style={labelStyle}>Codec</label>
|
||||
<select value={codec} onChange={e => setCodec(e.target.value as CodecType)} style={selectStyle}>
|
||||
<option value="PRORES">ProRes</option>
|
||||
<option value="DNXHD">DNxHD</option>
|
||||
<option value="H264">H.264</option>
|
||||
<option value="UNCOMPRESSED">Uncompressed</option>
|
||||
</select>
|
||||
</div>
|
||||
{codec === 'PRORES' && (
|
||||
<div>
|
||||
<label style={labelStyle}>Quality Profile</label>
|
||||
<select value={qualityProfile} onChange={e => setQualityProfile(e.target.value)} style={selectStyle}>
|
||||
<option value="hq">High Quality</option>
|
||||
<option value="mq">Medium Quality</option>
|
||||
<option value="lq">Low Quality</option>
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
{(codec === 'DNXHD' || codec === 'H264') && (
|
||||
<div>
|
||||
<label style={labelStyle}>Bitrate</label>
|
||||
<input type="text" value={bitrate} onChange={e => setBitrate(e.target.value)} placeholder="185M, 50M..." style={inputStyle} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Output section */}
|
||||
<div>
|
||||
<div style={sectionTitleStyle}>
|
||||
Output
|
||||
<div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
|
||||
</div>
|
||||
<label style={labelStyle}>Recording Path</label>
|
||||
<input type="text" value={recordingPath} onChange={e => setRecordingPath(e.target.value)} style={inputStyle} />
|
||||
<p style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-muted)', marginTop: 6, letterSpacing: '0.05em' }}>
|
||||
Use {timestamp} and {port_index} as tokens
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Transport section */}
|
||||
<div>
|
||||
<div style={sectionTitleStyle}>
|
||||
Transport
|
||||
<div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
|
||||
</div>
|
||||
<ToggleRow
|
||||
label="SRT Output"
|
||||
sub="Secure Reliable Transport streaming"
|
||||
checked={srtEnabled}
|
||||
onChange={setSrtEnabled}
|
||||
/>
|
||||
{srtEnabled && (
|
||||
<div style={{ marginTop: 10 }}>
|
||||
<label style={labelStyle}>SRT Destination</label>
|
||||
<input type="text" value={srtDestination} onChange={e => setSrtDestination(e.target.value)} placeholder="srt://host:9000" style={inputStyle} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Preview section */}
|
||||
<div>
|
||||
<div style={sectionTitleStyle}>
|
||||
Preview
|
||||
<div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
|
||||
</div>
|
||||
<ToggleRow
|
||||
label="HLS Preview"
|
||||
sub="Low-latency live preview (~5s)"
|
||||
checked={previewEnabled}
|
||||
onChange={setPreviewEnabled}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div style={{ padding: '16px 22px', borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'flex-end', gap: 10 }}>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
background: 'transparent', border: '1px solid var(--border)', color: 'var(--text-secondary)',
|
||||
fontFamily: 'var(--font-ui)', fontSize: 12, fontWeight: 600, letterSpacing: '0.1em',
|
||||
textTransform: 'uppercase', padding: '9px 18px', borderRadius: 3, cursor: 'pointer',
|
||||
}}
|
||||
>Cancel</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
style={{
|
||||
background: 'rgba(26,58,255,0.2)', border: '1px solid rgba(26,58,255,0.5)', color: '#7aa4ff',
|
||||
fontFamily: 'var(--font-ui)', fontSize: 12, fontWeight: 700, letterSpacing: '0.15em',
|
||||
textTransform: 'uppercase', padding: '9px 22px', borderRadius: 3, cursor: 'pointer',
|
||||
}}
|
||||
>Save Config</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes modalIn { from { opacity: 0; transform: scale(0.97) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
|
||||
select option { background: var(--bg-panel); }
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ToggleRow({ label, sub, checked, onChange }: {
|
||||
label: string; sub: string; checked: boolean; onChange: (v: boolean) => void;
|
||||
}) {
|
||||
const id = `toggle-${label.replace(/\s+/g, '-').toLowerCase()}`;
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 0' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<span style={{ fontFamily: 'var(--font-ui)', fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', color: 'var(--text-primary)' }}>{label}</span>
|
||||
<span style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: 'var(--text-muted)' }}>{sub}</span>
|
||||
</div>
|
||||
<label htmlFor={id} style={{ position: 'relative', width: 40, height: 22, flexShrink: 0, cursor: 'pointer' }}>
|
||||
<input id={id} type="checkbox" checked={checked} onChange={e => onChange(e.target.checked)} style={{ opacity: 0, width: 0, height: 0, position: 'absolute' }} />
|
||||
<span style={{
|
||||
position: 'absolute', inset: 0, borderRadius: 22,
|
||||
background: checked ? 'rgba(26,58,255,0.6)' : 'var(--border)',
|
||||
transition: 'background 0.2s',
|
||||
}}>
|
||||
<span style={{
|
||||
position: 'absolute', width: 16, height: 16,
|
||||
left: checked ? 21 : 3, top: 3,
|
||||
background: checked ? '#7aa4ff' : 'var(--text-secondary)',
|
||||
borderRadius: '50%', transition: 'all 0.2s',
|
||||
}} />
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue