// Submit — title + cover (palette OR upload) + MP3 dropzone, then post.
//
// All the real work lives server-side: validation, transcoding to
// 96 kbps, CDN upload, kicking off the copyright check + lyrics
// transcription jobs. This screen is just a thin form on top of
// Api.submit().
//
// Gate chain (top to bottom):
// 1. banned → blocking "Du bist gebannt"
// 2. blocked → blocking "Vom Hochladen gesperrt"
// 3. <100h playtime → soft "Noch nicht ganz so weit"
// 4. no artist profile → onboarding form (sets stage name + bio)
// 5. posted=true → success state
// 6. default → the actual upload form
// Outer wrapper. For non-admins it's a pass-through to the single-
// track form; for admins it adds a small mode-toggle at the top so
// they can switch between "Einzelner Track" and "Bulk-Upload"
// without leaving this route. Keeps the nav lean (no separate
// /bulk tab) and bulk machinery out of view for regular users.
function SubmitScreen({ me, setRoute, refresh }) {
const [mode, setMode] = React.useState('single'); // 'single' | 'bulk'
const adminBulk = canForceAccept(me);
// Render the toggle BAR — only for admins, only when the page is
// in a state where the toggle is meaningful (i.e. the single
// gate-states like banned/blocked/playtime don't render the form
// anyway, so we skip the toggle there too).
const toggle = adminBulk ? (
) : null;
if (mode === 'bulk' && adminBulk) {
return (
<>
{toggle}
);
}
return (
<>
{toggle}
);
}
// Sub-tab chip used by the admin mode toggle. Tabbed-pill look,
// matches the visual style of the home library's filter chips +
// the stats screen's sub-tab toggles so the affordance reads
// consistently across screens.
function ModeChip({ active, icon, onClick, children }) {
return (
);
}
function SingleSubmitScreen({ me, setRoute, refresh }) {
const [title, setTitle] = React.useState('');
const [coverIdx, setCoverIdx] = React.useState(0);
const [coverFile, setCoverFile] = React.useState(null);
// Raw pre-crop image — fed into the cropper modal. After cropping,
// the result lands in coverFile and gets uploaded.
const [rawCoverFile, setRawCoverFile] = React.useState(null);
const [mp3, setMp3] = React.useState(null);
const [mp3Url, setMp3Url] = React.useState(null);
const [mp3Drag, setMp3Drag] = React.useState(false);
const [coverDrag, setCoverDrag] = React.useState(false);
const [busy, setBusy] = React.useState(false);
const [posted, setPosted] = React.useState(false);
const [err, setErr] = React.useState('');
// Object-URL lifecycle for the audio + cover previews. Without
// revocation these slowly leak across many file picks.
React.useEffect(() => {
if (!mp3) { setMp3Url(null); return; }
const url = URL.createObjectURL(mp3);
setMp3Url(url);
return () => URL.revokeObjectURL(url);
}, [mp3]);
const coverPreviewUrl = React.useMemo(
() => coverFile ? URL.createObjectURL(coverFile) : null,
[coverFile],
);
React.useEffect(() => {
if (!coverPreviewUrl) return;
return () => URL.revokeObjectURL(coverPreviewUrl);
}, [coverPreviewUrl]);
// Beachy-Lila palette set. 9 gradients sampled from the brand's
// colour ramps — every artist's first cover defaults to the lila-
// coral combo (index 0). Picking one only matters until the user
// uploads a real image; then `coverFile` overrides the palette.
const palettes = [
['#FF7E8B', '#8A4FE2'], ['#6EE0D2', '#2BB0C8'], ['#FFD27A', '#FF7E8B'],
['#A972F4', '#6F39C9'], ['#E94CD0', '#8A4FE2'], ['#FFD27A', '#FFB48A'],
['#8FB7FF', '#A972F4'], ['#6EE0D2', '#8FB7FF'], ['#FF7E8B', '#FFD27A'],
];
// ── Gate states ────────────────────────────────────────────────
if (isBanned(me)) {
return (
Solange dein Bann aktiv ist, kannst du keine Tracks hochladen.
Wenn das ein Fehler ist, melde dich beim Team.
);
}
if (isBlocked(me)) {
return (
Ein Admin hat dich vom Hochladen gesperrt. Auf dem Server selbst
bist du nicht eingeschränkt — nur neue Tracks gehen aktuell
nicht. Melde dich beim Team, falls das ein Fehler ist.
{/* Block details — only render when the server actually
shipped a blockInfo. Older sessions or race conditions
might leave it null; the generic copy above still reads
sensibly without it. */}
{me.blockInfo && (
Grund
{me.blockInfo.reason || Kein Grund angegeben}
Gesperrt {timeAgo(me.blockInfo.blockedAt)}
)}
);
}
if (!canSubmit(me)) {
return (
Du hast aktuell {me.playtime}h auf dem Server. Ab{' '}
100 Stunden kannst du eigene Tracks hochladen.
);
}
// Eligible but no stage name yet → onboarding. ArtistProfileForm
// saves via Api.artist.putMe(); `onSaved={refresh}` re-fetches /me
// so this screen re-renders with hasArtistProfile(me) === true.
if (!hasArtistProfile(me)) {
return ;
}
if (posted) {
return (
Track ist hochgeladen
Dein Track liegt jetzt zur Prüfung. Sobald entschieden wurde,
siehst du das in deinem Profil.
);
}
// ── Submit handler ─────────────────────────────────────────────
const handleSubmit = async (e) => {
e.preventDefault();
if (!title.trim() || !mp3) return;
setBusy(true); setErr('');
try {
const form = new FormData();
form.append('title', title.trim());
form.append('coverGradient', JSON.stringify(palettes[coverIdx]));
if (coverFile) form.append('cover', coverFile);
form.append('mp3', mp3);
await Api.submit(form);
await refresh();
setPosted(true);
toast.success('Track hochgeladen — viel Erfolg!');
} catch (ex) {
const msg = ex.message || 'Hochladen fehlgeschlagen.';
setErr(msg);
toast.error(msg);
} finally {
setBusy(false);
}
};
// Drop handlers reused for both file slots — pick the right slot
// based on MIME. Reject anything that isn't audio/mpeg or image/*.
const handleMp3Drop = (e) => {
e.preventDefault();
setMp3Drag(false);
const f = e.dataTransfer.files?.[0];
if (!f) return;
if (!/^audio\/(mpeg|mp3)$/i.test(f.type) && !f.name.toLowerCase().endsWith('.mp3')) {
toast.error('Bitte eine MP3-Datei wählen.');
return;
}
setMp3(f);
};
const handleCoverDrop = (e) => {
e.preventDefault();
setCoverDrag(false);
const f = e.dataTransfer.files?.[0];
if (!f) return;
if (!/^image\//i.test(f.type)) {
toast.error('Bitte ein Bild wählen.');
return;
}
// Even square drops go through the cropper so the user gets a
// chance to re-frame and confirm.
setRawCoverFile(f);
};
// ── Main form ──────────────────────────────────────────────────
const canPost = title.trim() && mp3 && !busy;
return (
Schritt 1 von 1 · automatisch geprüft
Track hochladen
Lade deinen Track hoch und gib ihm einen Titel — der Rest läuft automatisch.
Sobald er freigegeben ist, taucht er ingame auf.
);
}
// Reusable centred block-card for the three gate states (banned,
// blocked, not-eligible). All share the same shape — coloured icon
// in a circle, headline, body copy — so we don't repeat the markup.
function BlockCard({ icon, iconColor, title, children }) {
return (