WildDragonLLC/dragonflight
1
0
Fork 0
Code Issues 18 Pull requests 3 Projects Releases Packages Wiki Activity Actions

expand codec list, add MXF container, remove proxy settings (fixed profile)

Browse source
This commit is contained in:
Zac Gaetano 2026-05-22 17:20:01 -04:00
parent fa787bbe1e
commit 8b57a9a35a
1 changed files with 36 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
services/web-ui/public/modal-new-recorder.jsx
View file

@ -42,7 +42,8 @@ function NewRecorderModal({ open, onClose }) {
});
const [sdiDevices, setSdiDevices] = React.useState(null);
const [recTab, setRecTab] = React.useState('video');
const [proxyTab, setProxyTab] = React.useState('video');
const [recCodec, setRecCodec] = React.useState('prores_hq');
const [recContainer, setRecContainer] = React.useState('mov');
const [proxyOn, setProxyOn] = React.useState(true);
const [projectId, setProjectId] = React.useState(PROJECTS[0]?.id || '');
const [submitting, setSubmitting] = React.useState(false);
@ -81,6 +82,8 @@ function NewRecorderModal({ open, onClose }) {
source_type: sourceType.toLowerCase(),
project_id: projectId || undefined,
generate_proxy: proxyOn,
recording_codec: recCodec,
recording_container: recContainer,
};
if (sourceType === 'SRT') {
@ -250,8 +253,23 @@ function NewRecorderModal({ open, onClose }) {
<div className="modal-section-body">
{recTab === 'video' && (
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
<Field label="Video codec" value="ProRes 422 HQ" select />
<Field label="Resolution" value="2160p59.94 (source)" select />
<div className="field">
<label className="field-label">Video codec</label>
<select className="field-input" value={recCodec} onChange={e => setRecCodec(e.target.value)} style={{ appearance: 'auto' }}>
<option value="prores_4444xq">ProRes 4444 XQ</option>
<option value="prores_4444">ProRes 4444</option>
<option value="prores_hq">ProRes 422 HQ</option>
<option value="prores">ProRes 422</option>
<option value="prores_lt">ProRes 422 LT</option>
<option value="prores_proxy">ProRes 422 Proxy</option>
<option value="libx264">H.264 (x264)</option>
<option value="libx265">H.265 / HEVC (x265)</option>
<option value="dnxhd">DNxHD 185x</option>
<option value="dnxhr_hq">DNxHR HQ</option>
<option value="xdcam_hd422">XDCAM HD422</option>
</select>
</div>
<Field label="Resolution" value="Source (native)" select />
<Field label="Color space" value="Rec. 709" select />
<Field label="Bit depth" value="10-bit" select />
</div>
@ -266,7 +284,15 @@ function NewRecorderModal({ open, onClose }) {
)}
{recTab === 'container' && (
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
<Field label="Container" value="MOV (QuickTime)" select />
<div className="field">
<label className="field-label">Container</label>
<select className="field-input" value={recContainer} onChange={e => setRecContainer(e.target.value)} style={{ appearance: 'auto' }}>
<option value="mov">MOV (QuickTime)</option>
<option value="mxf">MXF (SMPTE)</option>
<option value="mkv">MKV (Matroska)</option>
<option value="mp4">MP4</option>
</select>
</div>
<Field label="Segment" value="None (single file)" select />
</div>
)}
@ -288,35 +314,14 @@ function NewRecorderModal({ open, onClose }) {
{proxyOn && (
<div className="modal-section">
<div className="modal-section-head">
<span>Proxy</span>
<span style={{ flex: 1 }} />
<div className="tab-group">
{['video', 'audio', 'container'].map(t => (
<button key={t} className={proxyTab === t ? 'active' : ''} onClick={() => setProxyTab(t)}>
{t[0].toUpperCase() + t.slice(1)}
</button>
<div className="modal-section-head"><span>Proxy</span></div>
<div className="modal-section-body">
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, alignItems: 'center' }}>
{['H.264', '2 Mbps', 'MP4', '1920×1080', 'AAC 128 kbps'].map(tag => (
<span key={tag} className="mono" style={{ background: 'var(--bg-3)', borderRadius: 4, padding: '2px 8px', fontSize: 12 }}>{tag}</span>
))}
</div>
</div>
<div className="modal-section-body">
{proxyTab === 'video' && (
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
<Field label="Video codec" value="H.264 (NVENC)" select />
<Field label="Resolution" value="1280×720" select />
<Field label="Bitrate" value="2 Mbps" select />
<Field label="GOP" value="2 s" select />
</div>
)}
{proxyTab === 'audio' && (
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
<Field label="Audio codec" value="AAC" select />
<Field label="Bitrate" value="128 kbps" select />
</div>
)}
{proxyTab === 'container' && (
<Field label="Container" value="fMP4 (HLS-ready)" select />
)}
<div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 6 }}>Fixed proxy profile — not configurable.</div>
</div>
</div>
)}