Add frontend/src/components/ConfigPanel.tsx
This commit is contained in:
parent
52df4d0e11
commit
d8e4386426
1 changed files with 157 additions and 0 deletions
157
frontend/src/components/ConfigPanel.tsx
Normal file
157
frontend/src/components/ConfigPanel.tsx
Normal file
|
|
@ -0,0 +1,157 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { RecorderConfig, CodecType } from '../types';
|
||||||
|
|
||||||
|
interface ConfigPanelProps {
|
||||||
|
portIndex: number;
|
||||||
|
currentConfig: RecorderConfig | null;
|
||||||
|
onSave: (config: RecorderConfig) => void;
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 [srtEnabled, setSrtEnabled] = useState(false);
|
||||||
|
const [srtDestination, setSrtDestination] = useState('');
|
||||||
|
const [previewEnabled, setPreviewEnabled] = useState(true);
|
||||||
|
|
||||||
|
// Initialize from currentConfig if provided
|
||||||
|
useEffect(() => {
|
||||||
|
if (currentConfig) {
|
||||||
|
setCodec(currentConfig.codec);
|
||||||
|
setBitrate(currentConfig.bitrate);
|
||||||
|
setQualityProfile(currentConfig.quality_profile);
|
||||||
|
setRecordingPath(currentConfig.recording_path);
|
||||||
|
setSrtEnabled(currentConfig.srt_enabled);
|
||||||
|
setSrtDestination(currentConfig.srt_destination);
|
||||||
|
setPreviewEnabled(currentConfig.preview_enabled);
|
||||||
|
}
|
||||||
|
}, [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);
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 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
|
||||||
Loading…
Reference in a new issue