// Shared Playground component — drives every "try the API" surface on the site.
// Reads from ENDPOINTS / GROUPS / playgroundEnabledIds() / priceFor / docsHrefFor.
// Replaces the hardcoded V1Playground / V2Console hero panels.
const PG_DARK = {
bg: '#0e1115',
bgDeep: '#0a0c0f',
panel: '#11151a',
panelAlt: '#0d1014',
line: '#1f2228',
line2: '#171a1f',
ink: '#e6e9ed',
ink2: '#cdd1d6',
ink3: '#8b929b',
ink4: '#5b6573',
};
// ───────────────────────────────────────────────────────────── primitives ──
const PgInput = ({ ctl, value, onChange }) => {
const inputBase = {
width: '100%', boxSizing: 'border-box',
background: PG_DARK.bgDeep, border: `1px solid ${PG_DARK.line}`, borderRadius: 7,
padding: '8px 10px', minHeight: 34,
fontFamily: wf.mono, fontSize: 12.5, color: PG_DARK.ink,
outline: 'none',
};
if (ctl.type === 'toggle') {
return (
onChange(!value)} style={{
display: 'inline-flex', alignItems: 'center', gap: 8,
padding: '6px 10px', borderRadius: 7, cursor: 'pointer',
border: `1px solid ${PG_DARK.line}`, background: PG_DARK.bgDeep,
fontFamily: wf.mono, fontSize: 12, color: PG_DARK.ink2,
}}>
{value ? 'true' : 'false'}
);
}
if (ctl.type === 'select') {
return (
);
}
if (ctl.type === 'json') {
const text = typeof value === 'string' ? value : JSON.stringify(value);
return (
{
try { onChange(JSON.parse(e.target.value)); }
catch { onChange(e.target.value); }
}} style={inputBase} spellCheck={false} />
);
}
// url / text / number
return (
onChange(ctl.type === 'number' ? Number(e.target.value) : e.target.value)}
style={inputBase}
spellCheck={false}
/>
);
};
// JSON syntax-highlighter (very small)
const JsonBlock = ({ value, maxHeight = 280 }) => {
const text = typeof value === 'string' ? value : JSON.stringify(value, null, 2);
return (
{text.split('\n').map((ln, i) => {
// string highlighter
const parts = []; let key = 0; let last = 0;
const re = /"([^"]*)"(\s*:)?/g; let m;
while ((m = re.exec(ln)) !== null) {
if (m.index > last) parts.push({ln.slice(last, m.index)});
const isKey = !!m[2];
parts.push("{m[1]}");
if (isKey) parts.push(:);
last = m.index + m[0].length;
}
if (last < ln.length) {
// number highlight in trailing chunk
const tail = ln.slice(last);
const nm = tail.split(/(-?\d+\.?\d*)/);
parts.push(...nm.map((seg, i) =>
/^-?\d+\.?\d*$/.test(seg)
? {seg}
: {seg}
));
}
return {parts.length ? parts : '\u00a0'}
;
})}
);
};
// ──────────────────────────────────────────────────────── response previews ──
const FrameTile = ({ t, score, label }) => (
t={t.toFixed(1)}s
{label && {label}}
{typeof score === 'number' && (
score{score.toFixed(2)}
)}
);
const PreviewFrames = ({ ep, response }) => {
const frames = response.frames || (response.frame ? [response.frame] : []);
return (
{frames.length} frame{frames.length === 1 ? '' : 's'}
{frames.slice(0, 6).map((f, i) => (
))}
);
};
const PreviewTimelineSegments = ({ ep, response }) => {
const segs = response.segments || response.chunks || response.ranges || response.timeline || [];
const cuts = response.cuts || [];
const totalEnd = Math.max(
...segs.map(s => s.end ?? (s.t ? s.t + (s.dur || 0) : 0)),
...cuts,
response.media_seconds || 100,
);
const norm = (x) => `${(x / totalEnd) * 100}%`;
const palette = ['var(--accent)', '#9bd17b', '#e6c07b', '#c678dd', '#56b6c2'];
return (
timeline · {segs.length || cuts.length} segment{(segs.length || cuts.length) === 1 ? '' : 's'}
{segs.map((s, i) => {
const start = s.start ?? s.t ?? 0;
const end = s.end ?? (s.t ? s.t + (s.dur || 1) : start + 1);
const c = palette[i % palette.length];
return (
);
})}
{cuts.map((t, i) => (
))}
{segs.slice(0, 5).map((s, i) => {
const start = s.start ?? s.t ?? 0;
const end = s.end ?? (s.t ? s.t + (s.dur || 1) : start + 1);
return (
{start.toFixed(1)}–{end.toFixed(1)}s {s.topic || s.reason || s.kind ? `· ${s.topic || s.reason || s.kind}` : ''}
);
})}
);
};
const PreviewClip = ({ ep, response }) => (
clip rendered
▶
{response.url || 'https://cdn.momentiq.dev/clips/abc123.mp4'}
{typeof response.duration === 'number' ? `${response.duration}s` :
(response.start != null && response.end != null ? `${(response.end - response.start).toFixed(1)}s` : '32.5s')}
);
const PreviewSignal = ({ ep, response }) => {
// collect rows from any of: results, silences, peaks, music, mixed, cuts, speakers, overlaps, event
const rows = []; const colorFor = (k) => ({
laughter:'#9bd17b', silence:'#8b929b', music:'#c678dd', mixed:'#e6c07b',
energy_peak:'var(--accent)', speaker:'var(--accent)', overlap:'#e08e6e',
cut:'var(--accent)', signal:'var(--accent)',
})[k] || 'var(--accent)';
if (response.results) response.results.forEach(r => rows.push({ kind: ep.title.replace('detect-',''), t: r.t, dur: r.dur, conf: r.conf }));
if (response.silences) response.silences.forEach(r => rows.push({ kind:'silence', t: r.start, dur: r.end - r.start }));
if (response.peaks) response.peaks.forEach(r => rows.push({ kind:'energy_peak', t: r.t, conf: r.score }));
if (response.music) response.music.forEach(r => rows.push({ kind:'music', t: r.start, dur: r.end - r.start, conf: r.confidence }));
if (response.cuts && Array.isArray(response.cuts)) response.cuts.forEach(c => rows.push({ kind:'cut', t: c.t ?? c, conf: c.quality, reason: c.reason }));
if (response.speakers) response.speakers.forEach(s => rows.push({ kind:`speaker ${s.id}`, t: 0, dur: 0, label: `${(s.share*100).toFixed(0)}% · ${s.segments} segments` }));
if (response.overlaps) response.overlaps.forEach(o => rows.push({ kind:'overlap', t: o.t, dur: o.dur, label: (o.ids||[]).join('+') }));
if (response.event) rows.push({ kind: response.event.kind, t: response.event.t, dur: response.event.dur, label: `Δ ${response.delta?.toFixed(2)}s` });
if (rows.length === 0 && response.timeline) response.timeline.forEach(e => rows.push({ kind: e.kind, t: e.t, dur: e.dur }));
return (
{rows.length} event{rows.length === 1 ? '' : 's'}
{rows.slice(0, 6).map((r, i) => (
{r.kind}
t={r.t?.toFixed(2)}s
{r.dur ? `${r.dur.toFixed(2)}s` : '—'}
{r.conf != null ? `conf ${r.conf.toFixed(2)}` : (r.label || r.reason || '')}
))}
);
};
const PREVIEWS = {
'frames': PreviewFrames,
'timeline-segments': PreviewTimelineSegments,
'clip': PreviewClip,
'signal': PreviewSignal,
};
// ───────────────────────────────────────────────────────── grouped selector ──
const GroupedSelect = ({ value, onChange }) => {
return (
);
};
// ───────────────────────────────────────────────────────────────── main ────
// ── analytics helpers ─────────────────────────────────────────────────────
// Safe metadata only — never includes the media_url or full request body.
const pgEpMeta = (id) => {
const ep = ENDPOINTS[id] || {};
return {
endpoint_id: id,
endpoint_path: ep.path,
endpoint_group: ep.group,
pricing_unit: (typeof pricingUnit === 'function') ? pricingUnit(id) : undefined,
fake_response_type: ep.fakeResponseType,
};
};
const safeFileExt = (s) => {
if (typeof s !== 'string') return undefined;
const m = s.match(/\.([a-z0-9]{2,5})(?:[?#]|$)/i);
return m ? m[1].toLowerCase() : undefined;
};
const pgTrack = (name, props) => {
if (window.MIQAnalytics) window.MIQAnalytics.track(name, props || {});
};
const Playground = ({
initialId = 'audio/detect-speakers',
defaultMinutes = 18,
height = 'auto',
}) => {
const [id, setId] = React.useState(initialId);
const ep = ENDPOINTS[id];
const [params, setParams] = React.useState(() => ({ ...(ep.defaultRequest || ep.requestExample) }));
const [minutes, setMinutes] = React.useState(defaultMinutes);
const [copied, setCopied] = React.useState('');
const [running, setRunning] = React.useState(false);
const [liveResponse, setLiveResponse] = React.useState(null);
const [liveError, setLiveError] = React.useState(null);
// playground_viewed — once per mount
React.useEffect(() => {
pgTrack('playground_viewed', pgEpMeta(id));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
React.useEffect(() => {
setParams({ ...(ep.defaultRequest || ep.requestExample) });
setLiveResponse(null);
setLiveError(null);
}, [id]);
// Wrapped setter so every endpoint switch becomes a tracked event.
const selectEndpoint = (next) => {
if (next === id) return;
pgTrack('playground_endpoint_selected', { ...pgEpMeta(next), from_endpoint_id: id });
setId(next);
};
const setParam = (k, v) => {
setParams(p => ({ ...p, [k]: v }));
const ctl = (ep.playgroundControls || []).find(c => c.key === k);
if (!ctl) return;
const base = pgEpMeta(id);
if (ctl.type === 'url' && k.toLowerCase().indexOf('url') >= 0) {
// Never the URL itself — only the fact + safe extension.
pgTrack('playground_media_url_entered', {
...base,
media_url_entered: !!v,
media_source_type: 'url',
file_extension: safeFileExt(v),
});
} else if (k === 'start' || k === 'end') {
const start = k === 'start' ? v : params.start;
const end = k === 'end' ? v : params.end;
pgTrack('playground_time_window_changed', {
...base, start, end,
window_seconds: (Number.isFinite(start) && Number.isFinite(end)) ? Math.max(0, end - start) : undefined,
});
} else if (k === 'quality') {
pgTrack('playground_param_changed', { ...base, param: 'quality', quality: v });
}
};
const requestBody = React.useMemo(() => {
const out = {};
(ep.playgroundControls || []).forEach(c => { out[c.key] = params[c.key] ?? c.default; });
return out;
}, [ep, params]);
const cost = priceFor(id) * minutes;
const isFixedPrice = pricingUnit(id) === 'request';
const Preview = PREVIEWS[ep.fakeResponseType] || PreviewSignal;
const liveEnabled = id === 'video/clip-window' && window.MomentIQ && typeof window.MomentIQ.clipWindow === 'function';
const previewResponse = liveResponse?.clip || liveResponse || ep.responseExample;
// playground_price_estimate_viewed — fire when the estimated cost actually
// changes (debounced through React state, not on every keystroke).
React.useEffect(() => {
pgTrack('playground_price_estimate_viewed', {
...pgEpMeta(id),
estimated_price_usd: +cost.toFixed(4),
media_length_seconds: minutes * 60,
is_fixed_price: isFixedPrice,
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [id, minutes]);
const copy = (label, text) => {
try { navigator.clipboard?.writeText(text); } catch (e) {}
setCopied(label); setTimeout(() => setCopied(''), 1400);
};
// Fake demo runner — toggles a brief loading flag and "completes" with
// the canned ep.responseExample. Funnel events fire even before there's
// a real backend, so the visitor→demo funnel works today.
const runDemo = async () => {
const base = pgEpMeta(id);
pgTrack('playground_demo_run_clicked', {
...base,
media_length_seconds: minutes * 60,
estimated_price_usd: +cost.toFixed(4),
start: params.start, end: params.end,
quality: params.quality,
});
setRunning(true);
if (liveEnabled) {
setLiveResponse(null);
setLiveError(null);
try {
const response = await window.MomentIQ.clipWindow({
...requestBody,
mode: requestBody.mode || 'transcode',
});
setLiveResponse(response);
pgTrack('playground_demo_completed', {
...base,
media_length_seconds: minutes * 60,
estimated_price_usd: response?.job?.estimated_price_usd ?? +cost.toFixed(4),
success: true,
});
} catch (err) {
const payload = err?.payload || { error: { code: 'client_error', message: err?.message || String(err) } };
setLiveError(payload);
pgTrack('playground_demo_completed', {
...base,
media_length_seconds: minutes * 60,
estimated_price_usd: +cost.toFixed(4),
success: false,
error_code: payload?.error?.code,
});
} finally {
setRunning(false);
}
return;
}
setTimeout(() => {
setRunning(false);
pgTrack('playground_demo_completed', {
...base,
media_length_seconds: minutes * 60,
estimated_price_usd: +cost.toFixed(4),
success: true,
});
}, 650);
};
return (
{/* chrome */}
MomentIQ Playground
Authorization: Bearer miq_live_••••
{/* LEFT: selector + controls + request JSON */}
Endpoint
{ep.path}
{ep.group}
{ep.playgroundDescription || ep.short}
{/* Controls */}
{(ep.playgroundControls || []).map(ctl => {
const span = (ctl.type === 'url' || ctl.type === 'json' || ctl.type === 'text') ? '1 / -1' : 'auto';
return (
{ctl.label}
{ctl.hint && {ctl.hint}}
setParam(ctl.key, v)} />
);
})}
{/* Request JSON */}
Request body
POST {ep.path}
{/* RIGHT: response + cost + actions */}
{/* Cost row */}
Estimated cost
{isFixedPrice ? priceLabel(id) : `$${cost.toFixed(2)}`}
{!isFixedPrice && (
= {priceLabel(id)} × {minutes}m
)}
{!isFixedPrice && (
media
setMinutes(Number(e.target.value))}
style={{ width: 96, accentColor: 'var(--accent)' }} />
{minutes}m
)}
{/* Response preview */}
{liveError && (
{liveError?.error?.code || 'error'}: {liveError?.error?.message || 'MomentIQ request failed'}
)}
{/* Actions */}
{/* Response JSON (collapsed peek) */}
Show raw response JSON