/* APEX CLIPS — Submit Your Clip + License Footage + Contact (Supabase-wired) */
/* ---- form helpers ---- */
function Field({ label, req, children, full, hint }) {
// Tie the label to its control so clicking the label focuses it and screen
// readers announce the pairing. We inject a generated id onto the child input
// (TextInput/Area/Select spread props straight to the DOM node); group
// controls like YesNo/Chips harmlessly ignore it.
const id = React.useId();
const control = React.isValidElement(children)
? React.cloneElement(children, { id: children.props.id || id })
: children;
return (
{label}{req && * }
{control}
{hint && {hint} }
);
}
function TextInput(props) { return {options.map((o) => {o} )} ;
}
function YesNo({ value, onChange }) {
return (
{["Yes", "No", "Unsure"].map((o) => (
onChange(o)}>{o}
))}
);
}
function Chips({ options, value, onToggle }) {
return (
{options.map((o) => (
onToggle(o)}>
{value.includes(o) ? "✓" : "＋"} {o}
))}
);
}
/* ================= SUBMIT ================= */
function Submit() {
const [step, setStep] = useState(0);
const [done, setDone] = useState(false);
const [busy, setBusy] = useState(false);
const [form, setForm] = useState({
name: "", email: "", country: "", social: "",
clip_title: "", filmed_where: "", filmed_when: "", who_filmed: "", posted_online: "", story: "", source_url: "",
owns_clip: "Yes", people_visible: "No", minors_visible: "No", music: "No", event_or_private: "No", agreed_terms: false,
});
const set = (k, v) => setForm((s) => ({ ...s, [k]: v }));
const steps = ["About you", "The clip", "Rights & releases"];
const send = async () => {
setBusy(true);
await submitLead("creator_submissions", {
name: form.name, email: form.email, country: form.country, social_handle: form.social,
clip_title: form.clip_title, filmed_where: form.filmed_where, filmed_when: form.filmed_when,
who_filmed: form.who_filmed, posted_online: form.posted_online, story: form.story, source_url: form.source_url,
owns_clip: form.owns_clip, people_visible: form.people_visible, minors_visible: form.minors_visible,
music: form.music, event_or_private: form.event_or_private, agreed_terms: form.agreed_terms,
});
setBusy(false); setDone(true);
};
const next = () => { if (step < 2) { setStep(step + 1); window.scrollTo({ top: 0 }); } else send(); };
const back = () => setStep(Math.max(0, step - 1));
const reset = () => {
setForm({ name: "", email: "", country: "", social: "", clip_title: "", filmed_where: "", filmed_when: "", who_filmed: "", posted_online: "", story: "", source_url: "", owns_clip: "Yes", people_visible: "No", minors_visible: "No", music: "No", event_or_private: "No", agreed_terms: false });
setDone(false); setStep(0);
};
if (done) {
return (
✓
Submission received
Your clip is in the queue.
Our verification team will review provenance, rights and releases, usually within 48 hours. You'll get an email at each stage, and you keep your copyright the whole way through.
Submit another clip
);
}
return (
Submit your clip
Turn your best moments
Upload from your phone in minutes. Keep your copyright. Earn every time your footage licenses, to media, brands and producers worldwide.
{["Keep ownership", "Fair revenue share", "Transparent reporting", "Rights protection"].map((t) => (
✓ {t}
))}
{/* progress */}
{steps.map((s, i) => (
{i < step ? "✓" : i + 1}
{s}
{i < 2 &&
))}
{step === 0 && (
set("name", e.target.value)} /> set("email", e.target.value)} /> set("country", e.target.value)} /> set("social", e.target.value)} />
)}
{step === 1 && (
set("clip_title", e.target.value)} /> set("filmed_where", e.target.value)} /> set("filmed_when", e.target.value)} /> set("who_filmed", e.target.value)} /> set("posted_online", e.target.value)} /> set("source_url", e.target.value)} />
⤓
Tap to upload or drag your clip here
MP4 / MOV · up to 4K · max 2GB · original quality preferred
)}
{step === 2 &&
}
{step > 0 ?
← Back :
}
Step {step + 1} of 3
{step === 2 ? (busy ? "Submitting…" : "Submit clip →") : "Continue →"}
🔒 Your clip and details are confidential. We never list or pitch footage until verification and your contributor agreement are complete.
);
}
function SubmitRights({ form, set }) {
return (
set("owns_clip", v)} /> set("people_visible", v)} /> set("minors_visible", v)} /> set("music", v)} /> set("event_or_private", v)} />
{(form.people_visible === "Yes" || form.event_or_private === "Yes") && (
!
No problem, our team will guide you through any talent or property releases needed. It won't slow down your submission.
)}
I confirm the information is accurate and I agree to the Contributor Terms . I keep my copyright; Apex Clips licenses on my behalf for an agreed revenue share.
);
}
/* ================= LICENSE ================= */
function License() {
const [f, setF] = useState({ name: "", company: "", role: "", email: "", usage: "", platforms: [], territory: "", term: "", monet: "No", paid: "No", commercial: "No", clips: "1–5", deadline: "", brief: "" });
const [sent, setSent] = useState(false);
const [busy, setBusy] = useState(false);
const set = (k, v) => setF((s) => ({ ...s, [k]: v }));
const toggle = (k, v) => setF((s) => ({ ...s, [k]: s[k].includes(v) ? s[k].filter((x) => x !== v) : [...s[k], v] }));
const send = async () => {
setBusy(true);
await submitLead("buyer_leads", {
lead_type: "license", name: f.name, company: f.company, role: f.role, email: f.email,
usage_type: f.usage, platforms: f.platforms.join(", "), territory: f.territory, term: f.term, clips: f.clips,
monetization: f.monet, paid_media: f.paid, commercial: f.commercial, deadline: f.deadline, brief: f.brief,
});
setBusy(false); setSent(true); window.scrollTo({ top: 0 });
};
if (sent) {
return (
✓
Brief received
Our content desk is on it.
You'll get matched, rights-cleared options and a quote, typically within one business day. Need it faster? Reply to our email and we'll prioritise.
setSent(false)}>Send another brief
);
}
return (
License footage
Rights-cleared adventure
Request access and tell us what you need and how you'll use it. Our team opens the library and returns verified, cleared options and a quote, built for social teams, producers and rights managers.
{["Cleared for agreed usage", "Fast preview & quoting", "Editorial context included", "Bulk & rev-share"].map((t) => (
✓ {t}
))}
Your details
set("name", e.target.value)} /> set("company", e.target.value)} /> set("role", e.target.value)} /> set("email", e.target.value)} />
Your usage
set("usage", e.target.value)} /> set("territory", e.target.value)} />
toggle("platforms", v)} />
set("term", e.target.value)} /> set("clips", e.target.value)} /> set("monet", v)} /> set("paid", v)} /> set("commercial", v)} /> set("deadline", e.target.value)} />
{/* live summary */}
ENQUIRY SUMMARY
Your licence shape
{busy ? "Sending…" : "Send Brief →"}
No commitment. We reply with cleared options & a quote within 1 business day.
Prefer to talk?
Rights or legal questions before you brief?
See rights & verification →
);
}
function SumRow({ k, v }) {
return (
{k}
{v}
);
}
/* ================= CONTACT ================= */
function Contact() {
const [f, setF] = useState({ name: "", email: "", iam: "", company: "", message: "" });
const [sent, setSent] = useState(false);
const [busy, setBusy] = useState(false);
const set = (k, v) => setF((s) => ({ ...s, [k]: v }));
const cards = [
["Licensing & briefs", "Source, quote and clear footage for your project.", "License Footage", "/license"],
["Become a creator", "Submit footage and start earning from your clips.", "Submit Your Clip", "/submit"],
["Rights & legal", "Questions on clearance, releases or liability.", "Rights & Verification", "/rights"],
];
const send = async () => {
setBusy(true);
await submitLead("buyer_leads", { lead_type: "contact", name: f.name, email: f.email, role: f.iam, company: f.company, brief: f.message });
setBusy(false); setSent(true); window.scrollTo({ top: 0 });
};
return (
Contact
Talk to the desk.
Whether you're sourcing footage, submitting a clip, or your legal team has questions, we're quick to respond.
{sent ? (
✓
Message sent.
We'll be in touch within one business day.
setSent(false)}>Send another
) : (
Send us a message
set("name", e.target.value)} /> set("email", e.target.value)} /> set("iam", e.target.value)} /> set("company", e.target.value)} />
{busy ? "Sending…" : "Send Message →"}
)}
);
}
Object.assign(window, { Submit, License, Contact, Field, TextInput, Area, Select, YesNo, Chips });