From 6510871448705207ca05e2ad7e5e0ad6bbd57d86 Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Fri, 22 May 2026 11:10:01 -0400
Subject: [PATCH] fix: implement real upload (XHR + S3 multipart) and fix SDI
 recorder device_index + manual fallback: modal-new-recorder.jsx

---
 services/web-ui/public/modal-new-recorder.jsx | 111 ++++++++++++------
 1 file changed, 74 insertions(+), 37 deletions(-)

diff --git a/services/web-ui/public/modal-new-recorder.jsx b/services/web-ui/public/modal-new-recorder.jsx
index 95a37ef..d54bac5 100644
--- a/services/web-ui/public/modal-new-recorder.jsx
+++ b/services/web-ui/public/modal-new-recorder.jsx
@@ -1,12 +1,16 @@
 // modal-new-recorder.jsx — New Recorder dialog (SRT / RTMP / SDI)
 
 function NewRecorderModal({ open, onClose }) {
-  const { PROJECTS } = window.ZAMPP_DATA;
+  const { PROJECTS, NODES } = window.ZAMPP_DATA;
   const [name, setName] = React.useState('');
   const [sourceType, setSourceType] = React.useState('SRT');
   const [srtUrl, setSrtUrl] = React.useState('srt://10.0.4.18:4200');
   const [rtmpUrl, setRtmpUrl] = React.useState('rtmp://stream.local/live/cam_a');
-  const [sdiPort, setSdiPort] = React.useState(1);
+  const [sdiDeviceIdx, setSdiDeviceIdx] = React.useState(0);
+  const [sdiNodeId, setSdiNodeId] = React.useState(() => {
+    const n = window.ZAMPP_DATA.NODES[0];
+    return n ? (n.id || n.hostname || '') : '';
+  });
   const [sdiDevices, setSdiDevices] = React.useState(null);
   const [recTab, setRecTab] = React.useState('video');
   const [proxyTab, setProxyTab] = React.useState('video');
@@ -24,17 +28,28 @@ function NewRecorderModal({ open, onClose }) {
 
   const handleCreate = () => {
     if (!name.trim()) { setSubmitErr('Recorder name is required.'); return; }
+    if (sourceType === 'SDI' && !sdiNodeId) { setSubmitErr('Select a capture node for SDI.'); return; }
     setSubmitting(true);
     setSubmitErr(null);
+
     const body = {
       name: name.trim(),
       source_type: sourceType.toLowerCase(),
-      source_config: sourceType === 'SRT' ? { url: srtUrl }
-                   : sourceType === 'RTMP' ? { url: rtmpUrl }
-                   : { port: sdiPort },
       project_id: projectId || undefined,
       generate_proxy: proxyOn,
     };
+
+    if (sourceType === 'SRT') {
+      body.source_config = { url: srtUrl };
+    } else if (sourceType === 'RTMP') {
+      body.source_config = { url: rtmpUrl };
+    } else {
+      // SDI: device_index and node_id are top-level fields
+      body.source_config = {};
+      body.device_index = sdiDeviceIdx;
+      body.node_id = sdiNodeId || undefined;
+    }
+
     window.ZAMPP_API.fetch('/recorders', { method: 'POST', body: JSON.stringify(body) })
       .then(() => { setSubmitting(false); onClose(); })
       .catch(e => { setSubmitting(false); setSubmitErr(e.message || 'Failed to create recorder'); });
@@ -56,7 +71,8 @@ function NewRecorderModal({ open, onClose }) {
         <div className="modal-body">
           <div className="field">
             <label className="field-label">Recorder name</label>
-            <input className="field-input" placeholder="e.g. Studio A Stage Cam" value={name} onChange={e => setName(e.target.value)} />
+            <input className="field-input" placeholder="e.g. Studio A Stage Cam"
+              value={name} onChange={e => setName(e.target.value)} />
           </div>
 
           <div className="field">
@@ -67,11 +83,9 @@ function NewRecorderModal({ open, onClose }) {
                 { id: 'RTMP', label: 'RTMP', desc: 'Real-Time Messaging Protocol',             icon: 'globe' },
                 { id: 'SDI',  label: 'SDI',  desc: 'Blackmagic DeckLink hardware',             icon: 'video' },
               ].map(t => (
-                <button
-                  key={t.id}
+                <button key={t.id}
                   className={`source-type-card ${sourceType === t.id ? 'active' : ''}`}
-                  onClick={() => setSourceType(t.id)}
-                >
+                  onClick={() => setSourceType(t.id)}>
                   <div className="source-type-icon"><Icon name={t.icon} size={16} /></div>
                   <div>
                     <div style={{ fontWeight: 600, fontSize: 13 }}>{t.label}</div>
@@ -88,7 +102,7 @@ function NewRecorderModal({ open, onClose }) {
               <input className="field-input mono" placeholder="srt://192.168.1.100:4200"
                 value={srtUrl} onChange={e => setSrtUrl(e.target.value)} />
               <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 4 }}>
-                The recorder connects out to this URL (caller mode).
+                Recorder connects out to this URL (caller mode).
               </div>
             </div>
           )}
@@ -99,41 +113,66 @@ function NewRecorderModal({ open, onClose }) {
               <input className="field-input mono" placeholder="rtmp://server/live/streamkey"
                 value={rtmpUrl} onChange={e => setRtmpUrl(e.target.value)} />
               <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 4 }}>
-                The recorder will pull this RTMP stream.
+                Recorder pulls this RTMP stream.
               </div>
             </div>
           )}
 
           {sourceType === 'SDI' && (
             <div className="field">
-              <label className="field-label">Capture device &amp; port</label>
+              <label className="field-label">Capture device</label>
               {sdiDevices === null && (
-                <div style={{ padding: '12px 0', color: 'var(--text-3)', fontSize: 12 }}>Loading DeckLink devices…</div>
-              )}
-              {sdiDevices !== null && sdiDevices.length === 0 && (
-                <div style={{ padding: '12px 0', color: 'var(--text-3)', fontSize: 12 }}>
-                  No DeckLink devices found in cluster. Ensure the capture node is online.
-                </div>
+                <div style={{ padding: '10px 0', color: 'var(--text-3)', fontSize: 12 }}>Detecting DeckLink devices…</div>
               )}
               {sdiDevices !== null && sdiDevices.length > 0 && (
                 <div className="sdi-port-mini">
                   {sdiDevices.map((dev, di) => (
-                    <div key={di} className="sdi-mini-card" style={{ marginBottom: 8 }}>
-                      <div className="sdi-mini-label">{(dev.model || dev.device || 'DECKLINK').toUpperCase()} · {dev.hostname}</div>
-                      {(dev.ports || Array.from({ length: dev.port_count || 2 }, (_, i) => ({ idx: i + 1, label: 'SDI ' + (i + 1) }))).map(p => (
-                        <button key={p.idx}
-                          className={`sdi-mini-port ${sdiPort === p.idx && di === 0 ? 'active' : ''} ${p.active ? 'live' : ''}`}
-                          onClick={() => setSdiPort(p.idx)}>
+                    <div key={di} style={{ marginBottom: 8 }}>
+                      <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', color: 'var(--text-3)', textTransform: 'uppercase', padding: '4px 0 8px' }}>
+                        {(dev.model || dev.device || 'DeckLink').toUpperCase()} · {dev.hostname}
+                      </div>
+                      {Array.from({ length: dev.port_count || 4 }, (_, i) => i).map(idx => (
+                        <button key={idx}
+                          className={`sdi-mini-port ${sdiDeviceIdx === idx && sdiNodeId === (dev.node_id || dev.hostname || '') ? 'active' : ''}`}
+                          onClick={() => { setSdiDeviceIdx(idx); setSdiNodeId(dev.node_id || dev.hostname || ''); }}>
                           <span className="sdi-mini-radio"><span className="sdi-mini-radio-dot" /></span>
-                          <span style={{ fontSize: 12, fontWeight: 600 }}>SDI {p.idx}</span>
-                          {p.label && <span style={{ fontSize: 11, color: 'var(--text-3)', marginLeft: 6 }}>{p.label}</span>}
-                          {p.active && <span className="badge success" style={{ marginLeft: 'auto' }}>{p.signal || 'SIGNAL'}</span>}
+                          <span style={{ fontSize: 12, fontWeight: 600 }}>SDI {idx + 1}</span>
+                          <span style={{ fontSize: 11, color: 'var(--text-3)', marginLeft: 6 }}>index {idx}</span>
                         </button>
                       ))}
                     </div>
                   ))}
                 </div>
               )}
+              {sdiDevices !== null && sdiDevices.length === 0 && (
+                <div style={{ padding: '8px 0' }}>
+                  <div style={{ fontSize: 12, color: 'var(--text-3)', marginBottom: 10 }}>
+                    No DeckLink devices auto-detected. Configure manually:
+                  </div>
+                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
+                    <div className="field">
+                      <label className="field-label">Capture node</label>
+                      <select className="field-input" value={sdiNodeId}
+                        onChange={e => setSdiNodeId(e.target.value)} style={{ appearance: 'auto' }}>
+                        {NODES.length === 0
+                          ? <option value="">No cluster nodes</option>
+                          : NODES.map(n => {
+                              const id = n.id || n.hostname || n.name || '';
+                              return <option key={id} value={id}>{id}</option>;
+                            })}
+                      </select>
+                    </div>
+                    <div className="field">
+                      <label className="field-label">Device index</label>
+                      <select className="field-input" value={sdiDeviceIdx}
+                        onChange={e => setSdiDeviceIdx(Number(e.target.value))} style={{ appearance: 'auto' }}>
+                        {[0, 1, 2, 3].map(i =>
+                          <option key={i} value={i}>SDI {i + 1} (index {i})</option>)}
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              )}
             </div>
           )}
 
@@ -228,8 +267,8 @@ function NewRecorderModal({ open, onClose }) {
             <div className="modal-section-body">
               <div className="field">
                 <label className="field-label">Project</label>
-                <select className="field-input" value={projectId} onChange={e => setProjectId(e.target.value)}
-                  style={{ appearance: 'auto' }}>
+                <select className="field-input" value={projectId}
+                  onChange={e => setProjectId(e.target.value)} style={{ appearance: 'auto' }}>
                   {PROJECTS.length === 0
                     ? <option value="">No projects</option>
                     : PROJECTS.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
@@ -239,19 +278,17 @@ function NewRecorderModal({ open, onClose }) {
           </div>
 
           {submitErr && (
-            <div style={{ padding: '10px 14px', background: 'var(--danger-soft)', border: '1px solid var(--danger)', borderRadius: 6, fontSize: 12.5, color: 'var(--danger)', marginTop: 4 }}>
-              {submitErr}
-            </div>
+            <div style={{
+              padding: '10px 14px', background: 'var(--danger-soft)',
+              border: '1px solid var(--danger)', borderRadius: 6,
+              fontSize: 12.5, color: 'var(--danger)', marginTop: 4,
+            }}>{submitErr}</div>
           )}
         </div>
 
         <div className="modal-foot">
           <button className="btn ghost" onClick={onClose}>Cancel</button>
           <span style={{ flex: 1 }} />
-          <button className="btn subtle" onClick={() => {
-            const url = sourceType === 'SRT' ? srtUrl : sourceType === 'RTMP' ? rtmpUrl : null;
-            if (url) window.ZAMPP_API.fetch('/recorders/probe', { method: 'POST', body: JSON.stringify({ url, source_type: sourceType.toLowerCase() }) }).catch(() => {});
-          }}><Icon name="signal" />Probe source</button>
           <button className="btn primary" onClick={handleCreate} disabled={submitting}>
             {submitting ? 'Creating…' : 'Create recorder'}
           </button>