From 8b57a9a35a710b49116a05ff986970457b44dd7e Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Fri, 22 May 2026 17:20:01 -0400
Subject: [PATCH] expand codec list, add MXF container, remove proxy settings
 (fixed profile)

---
 services/web-ui/public/modal-new-recorder.jsx | 67 ++++++++++---------
 1 file changed, 36 insertions(+), 31 deletions(-)

diff --git a/services/web-ui/public/modal-new-recorder.jsx b/services/web-ui/public/modal-new-recorder.jsx
index 4508f17..560bc6a 100644
--- a/services/web-ui/public/modal-new-recorder.jsx
+++ b/services/web-ui/public/modal-new-recorder.jsx
@@ -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>
           )}