fix: implement real upload (XHR + S3 multipart) and fix SDI recorder device_index + manual fallback: modal-new-recorder.jsx
This commit is contained in:
parent
26399f8d0a
commit
6510871448
1 changed files with 74 additions and 37 deletions
|
|
@ -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 & 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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue