) : null}
{err && (
Raw mermaid zdroj (na kopírovanie do mermaid.live)
{code}
)}
kapitola pôvodná nahrávkabridge otázka narátoravetva ack + tail ~25sre-ask tichofallback AI nerozumiefinále koniec
)}
);
}
// ───────────────────────────────────────────────────────────────
// Studio login — Supabase email+password checked against studio.members
// (the isolated studio schema, see supabase/migrations/0006). Falls back
// to the legacy /api/login password gate when Supabase isn't configured
// (pure-local dev without network).
// ───────────────────────────────────────────────────────────────
function StudioLogin({ onUnlock }) {
const [email, setEmail] = useState('');
const [pw, setPw] = useState('');
const [err, setErr] = useState('');
const [busy, setBusy] = useState(false);
const submit = async (e) => {
e.preventDefault();
if (busy) return;
setBusy(true); setErr('');
try {
if (studioSb) {
const { error } = await studioSb.auth.signInWithPassword({ email: email.trim(), password: pw });
if (error) { setErr('Prihlásenie nesedí.'); return; }
// Membership check: any studio API call 403s for non-members.
const probe = await studioFetch('/api/studio/manifest?book=cirkus');
if (probe.status === 403) {
await studioSb.auth.signOut();
setErr('Tento účet nemá prístup do studia.');
return;
}
onUnlock();
return;
}
// Legacy fallback (local dev without Supabase config).
const r = await fetch('/api/login', {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ password: pw }),
});
if (r.status === 404) { onUnlock(); return; }
const j = await r.json().catch(() => ({}));
if (j && j.authenticated) onUnlock();
else setErr('Heslo nesedí.');
} catch { setErr('Neviem osloviť server.'); }
finally { setBusy(false); }
};
return (
);
}
// ───────────────────────────────────────────────────────────────
// One audio clip with its own waveform + play/pause.
// Used for bridge / ack / tail rows in the split panel.
// ───────────────────────────────────────────────────────────────
// Plain HTML5 audio element with a custom play button + progress bar.
// We dropped the per-clip WaveSurfer instance because rendering 37+
// waveforms in parallel saturated the browser and audio was never
// becoming 'ready'. The big book-level waveform on top still uses
// WaveSurfer (just one instance — fine).
function MiniClip({ src, label, kind, color = STUDIO.blue, missing = false }) {
const audioRef = useRef(null);
const [playing, setPlaying] = useState(false);
const [duration, setDuration] = useState(0);
const [progress, setProgress] = useState(0);
const [err, setErr] = useState('');
useEffect(() => {
if (!src || missing) return;
const a = audioRef.current;
if (!a) return;
setErr(''); setDuration(0); setProgress(0); setPlaying(false);
const onMeta = () => setDuration(a.duration || 0);
const onTime = () => setProgress(a.duration ? a.currentTime / a.duration : 0);
const onPlay = () => setPlaying(true);
const onPause = () => setPlaying(false);
const onEnded = () => { setPlaying(false); setProgress(0); };
const onErr = () => setErr('audio fail');
a.addEventListener('loadedmetadata', onMeta);
a.addEventListener('timeupdate', onTime);
a.addEventListener('play', onPlay);
a.addEventListener('pause', onPause);
a.addEventListener('ended', onEnded);
a.addEventListener('error', onErr);
return () => {
try { a.pause(); } catch {}
a.removeEventListener('loadedmetadata', onMeta);
a.removeEventListener('timeupdate', onTime);
a.removeEventListener('play', onPlay);
a.removeEventListener('pause', onPause);
a.removeEventListener('ended', onEnded);
a.removeEventListener('error', onErr);
};
}, [src, missing]);
const togglePlay = () => {
const a = audioRef.current;
if (!a || missing) return;
if (a.paused) a.play().catch((e) => setErr(String((e && e.message) || 'play fail')));
else a.pause();
};
const onBarClick = (e) => {
const a = audioRef.current;
if (!a || !a.duration) return;
const r = e.currentTarget.getBoundingClientRect();
const x = Math.max(0, Math.min(r.width, e.clientX - r.left));
a.currentTime = (x / r.width) * a.duration;
};
return (
{kind}
{missing ? (
chýba audio — treba re-renderovať
) : err ? (
{err}
) : (
)}
{!missing && (
)}
{duration ? fmtTime(duration) : '…'}
);
}
// Locked textarea with click-to-edit. Once unlocked, an inline warning
// appears + the user knows the audio for this clip will be stale until
// they hit "Re-render" (round 2 endpoint).
function LockedField({ value, onChange, multiline = true, rows = 2, big = false, dirty = false, frozen = false }) {
const [editing, setEditing] = useState(false);
const wasEdited = dirty;
// When the parent book is frozen, the field is hard-readonly — the
// "upraviť" pill never appears and edits cannot start. This is the
// UI half of the frozen-manifest contract; the audit script enforces
// the other half at the data layer.
const baseStyle = {
width: '100%', borderRadius: 10,
padding: '8px 10px',
fontFamily: big ? '"Caveat", cursive' : '"Patrick Hand", cursive',
fontWeight: big ? 700 : 400,
fontSize: big ? 18 : 15,
color: STUDIO.ink, outline: 'none',
border: editing ? `2.5px solid ${STUDIO.pink}` : `2px solid ${STUDIO.inkSoft}55`,
background: editing ? '#FFF8E1' : (wasEdited ? '#FFEFCC' : STUDIO.paperLt),
resize: 'vertical',
};
const canEdit = !frozen;
const showEditing = editing && canEdit;
return (