Create 1000SONS

[edmilsoneddy01-lang]

import React, { useState, useEffect } from "react";

// 1000SONS - Single-file React app (App.jsx) // Updated features: // - Downloads for listeners and artists (.mp3, .m4a, .mp4) // - Each download increments an internal admin earning of 50 Kz (stored in localStorage) — NOT displayed publicly // - Artist payment required before upload; access is released immediately after simulated payment // - LocalStorage-backed prototype (replace with secure backend and real payment integration in production)

export default function App() { // Views: home, artists, artist-register, artist-login, payment, upload, dashboard const [view, setView] = useState("home");

const [artists, setArtists] = useState(() => JSON.parse(localStorage.getItem("1000sons_artists")) || []); const [uploads, setUploads] = useState(() => JSON.parse(localStorage.getItem("1000sons_uploads")) || []); const [user, setUser] = useState(() => JSON.parse(localStorage.getItem("1000sons_user")) || null); const [current, setCurrent] = useState(() => (JSON.parse(localStorage.getItem("1000sons_uploads")) || [])[0] || null);

// Admin earnings stored privately in localStorage key '1000sons_admin_earnings' (number, in Kz) const [adminEarnings, setAdminEarnings] = useState(() => Number(localStorage.getItem("1000sons_admin_earnings") || 0));

useEffect(() => localStorage.setItem("1000sons_artists", JSON.stringify(artists)), [artists]); useEffect(() => localStorage.setItem("1000sons_uploads", JSON.stringify(uploads)), [uploads]); useEffect(() => localStorage.setItem("1000sons_user", JSON.stringify(user)), [user]); useEffect(() => localStorage.setItem("1000sons_admin_earnings", String(adminEarnings)), [adminEarnings]);

useEffect(() => { if (!current && uploads.length) setCurrent(uploads[0]); }, [uploads]);

// --- Artist / Auth logic (prototype) --- function registerArtist({ name, email, password }) { if (artists.find((a) => a.email === email)) return alert("Email já registado."); const newArtist = { id: Date.now(), name, email, password, paid: false, payments: [], uploads: [] }; setArtists((s) => [newArtist, ...s]); const u = { role: "artist", id: newArtist.id, name: newArtist.name, email: newArtist.email }; setUser(u); setView("payment"); }

function loginArtist({ email, password }) { const a = artists.find((x) => x.email === email && x.password === password); if (!a) return alert("Credenciais inválidas."); setUser({ role: "artist", id: a.id, name: a.name, email: a.email }); setView("dashboard"); }

function logout() { setUser(null); setView("home"); }

// Simulated payment — immediate access granted when >= 500 Kz function confirmPayment({ method, amount }) { if (!user || user.role !== "artist") return alert("Deves estar logado como artista para pagar."); if (amount < 500) return alert("Pagamento mínimo: 500 Kz."); setArtists((list) => list.map((a) => { if (a.id === user.id) { const payment = { id: Date.now(), method, amount, date: new Date().toISOString() }; a.payments = [payment, ...(a.payments || [])]; a.paid = true; // immediate } return a; }) ); alert("Pagamento confirmado (simulação). Acesso liberado imediatamente."); setView("upload"); }

// Uploading content (artists only, requires paid status) function submitUpload({ title, type, link }) { if (!user || user.role !== "artist") return alert("Deves entrar como artista para enviar."); const artist = artists.find((a) => a.id === user.id); if (!artist || !artist.paid) return alert("Pagamento necessário antes de enviar."); const item = { id: Date.now(), artistId: artist.id, artistName: artist.name, title, type, // 'audio' | 'video' | 'both' link, date: new Date().toISOString(), downloads: 0, approved: true, // immediate publish }; setUploads((u) => [item, ...u]); // update artist's upload list setArtists((list) => list.map((a) => (a.id === artist.id ? { ...a, uploads: [item, ...(a.uploads || [])] } : a))); alert("Conteúdo enviado e publicado (protótipo)."); setView("dashboard"); }

// Download handler: increments upload.downloads and internal admin earnings by 50 Kz function handleDownload(item) { // For demo: increment earnings and downloads locally setUploads((list) => list.map((u) => { if (u.id === item.id) { return { ...u, downloads: (u.downloads || 0) + 1 }; } return u; }) ); setAdminEarnings((prev) => prev + 50); // Note: we intentionally do NOT show admin earnings on the public UI. console.log("Download registado (interno). Total admin (Kz):", adminEarnings + 50); }

// --- UI Components --- function Header() { return (

<div style={{ display: "flex", alignItems: "center", gap: 12 }}>

1K

<h1 style={{ margin: 0 }}>1000SONS <div style={{ fontSize: 12, color: "#cbd5e1" }}>Onde o som encontra o mundo.

<nav style={{ display: "flex", gap: 8, alignItems: "center" }}> <button style={styles.btn} onClick={() => setView("home")}>Home <button style={styles.btn} onClick={() => setView("artists")}>Artistas {!user ? ( <> <button style={styles.btn} onClick={() => setView("artist-login")}>Entrar (Artista) <button style={styles.btnPrimary} onClick={() => setView("artist-register")}>Registar (Artista) </> ) : ( <div style={{ display: "flex", gap: 8, alignItems: "center" }}> <span style={{ fontSize: 14 }}>Olá, {user.name} <button style={styles.btn} onClick={() => setView("dashboard")}>Painel Sair )} ); }

function Home() { return (

<section style={{ marginBottom: 20 }}>

Destaques

{uploads.length === 0 &&

Sem uploads ainda. Regista-te como artista para divulgar.

} {uploads.map((u) => (

<div style={{ fontWeight: 600 }}>{u.title}

<div style={{ fontSize: 12, color: "#94a3b8" }}>{u.artistName} — {new Date(u.date).toLocaleDateString()}

{u.type !== 'video' && ( )} {u.type === 'video' && (

        <div style={{ marginTop: 8, display: "flex", gap: 8, flexWrap: "wrap" }}>
          {/* Download buttons (visible to everyone) */}
          {u.type !== 'video' && (
            <>
              <a href={u.link} download={`${u.title}.mp3`} onClick={() => handleDownload(u)} style={styles.linkBtn}>Download .mp3</a>
              <a href={u.link} download={`${u.title}.m4a`} onClick={() => handleDownload(u)} style={styles.linkBtn}>Download .m4a</a>
            </>
          )}
          {u.type === 'video' && (
            <a href={u.link} download={`${u.title}.mp4`} onClick={() => handleDownload(u)} style={styles.linkBtn}>Download .mp4</a>
          )}
        </div>
      </div>
    ))}
  </div>
</section>

<section>
  <h2>Player Rápido</h2>
  <div style={styles.card}>
    {current ? (
      <div>
        <div style={{ fontWeight: 600 }}>{current.title} <span style={{ fontSize: 12, color: "#94a3b8" }}>— {current.artistName}</span></div>
        {current.type === 'video' ? (
          <video controls style={{ width: "100%", marginTop: 8 }} src={current.link}></video>
        ) : (
          <audio controls style={{ width: "100%", marginTop: 8 }} src={current.link}></audio>
        )}
      </div>
    ) : (
      <div style={{ color: "#94a3b8" }}>Nenhum conteúdo para reproduzir.</div>
    )}
  </div>
</section>

);

}

function ArtistsList() { return (

Artistas

{artists.length === 0 &&

Ainda não há artistas registados.

} {artists.map((a) => (

<div style={{ display: "flex", gap: 12, alignItems: "center" }}>

{a.name.charAt(0).toUpperCase()}

<div style={{ fontWeight: 600 }}>{a.name}

<div style={{ fontSize: 12, color: "#94a3b8" }}>{a.email}

))} ); }

function ArtistRegister() { const [form, setForm] = useState({ name: "", email: "", password: "" }); return (

Registo de Artista

Nome <input style={styles.input} value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /> Email <input style={styles.input} value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} /> Senha <input type="password" style={styles.input} value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} /> <div style={{ display: "flex", gap: 8 }}> <button style={styles.btnPrimary} onClick={() => registerArtist(form)}>Registar e Pagar <button style={styles.btn} onClick={() => setView("home")}>Cancelar

); }

function ArtistLogin() { const [form, setForm] = useState({ email: "", password: "" }); return (

Login de Artista

Email <input style={styles.input} value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} /> Senha <input type="password" style={styles.input} value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} /> <div style={{ display: "flex", gap: 8 }}> <button style={styles.btnPrimary} onClick={() => loginArtist(form)}>Entrar <button style={styles.btn} onClick={() => setView("home")}>Cancelar

); }

function PaymentView() { const [method, setMethod] = useState("express"); const [amount, setAmount] = useState(500);

function doPay() {
if (amount < 500) return alert("Pagamento mínimo: 500 Kz.");
confirmPayment({ method, amount });
}

return (

Pagamento de Divulgação

Pagamento obrigatório antes do envio. Taxa mínima: 500 Kz.

Método setMethod(e.target.value)}> Express (Visa/MasterCard) Multicaixa (Angola) PayPal

Valor (Kz) setAmount(Number(e.target.value))} />

Pagar e Enviar setView("home")}>Cancelar

Atenção: esta é uma simulação. Em produção integre PayPal, Multicaixa e um gateway de cartões seguro; valide pagamentos via webhooks.

);

}

function UploadForm() { const [form, setForm] = useState({ title: "", type: "audio", link: "" }); return (

Enviar Música / Videoclipe

Título <input style={styles.input} value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} /> Tipo de Envio <select style={styles.input} value={form.type} onChange={(e) => setForm({ ...form, type: e.target.value })}> Música Videoclipe Ambos Link do ficheiro (YouTube, Drive, S3 ou URL direto) <input style={styles.input} value={form.link} onChange={(e) => setForm({ ...form, link: e.target.value })} />

submitUpload(form)}>Enviar setView("dashboard")}>Cancelar

);

}

function Dashboard() { if (!user) return

Deves entrar como artista.

; const artist = artists.find((a) => a.id === user.id); if (!artist) return

Artista não encontrado.

;

return (

Painel do Artista

{artist.name}

Email: {artist.email}

Status de pagamento: {artist.paid ? Pago : Pendente}

{!artist.paid ? (
  <div style={{ marginTop: 12 }}>
    <div style={{ color: "#f59e0b" }}>Ainda não efectuaste o pagamento. Paga para poderes enviar a tua música/vídeo.</div>
    <button style={{ ...styles.btnPrimary, marginTop: 8 }} onClick={() => setView("payment")} >Pagar Agora</button>
  </div>
) : (
  <div style={{ marginTop: 12 }}>
    <button style={styles.btnPrimary} onClick={() => setView("upload")} >Enviar Música/Videoclipe</button>
  </div>
)}

<div style={{ marginTop: 18 }}>
  <h3>Meus Envios</h3>
  <div style={{ display: "grid", gap: 8 }}>
    {(uploads.filter((u) => u.artistId === artist.id).length === 0) && <div style={styles.card}>Nenhum envio ainda.</div>}
    {uploads.filter((u) => u.artistId === artist.id).map((u) => (
      <div key={u.id} style={styles.card}>
        <div style={{ fontWeight: 600 }}>{u.title}</div>
        <div style={{ fontSize: 12, color: "#94a3b8" }}>{u.type} — {new Date(u.date).toLocaleString()}</div>
        <div style={{ marginTop: 8 }}>{u.link && <a href={u.link} target="_blank" rel="noreferrer">Ver ficheiro</a>}</div>
        <div style={{ marginTop: 8 }}>Downloads: {u.downloads || 0}</div>
        <div style={{ marginTop: 8, display: "flex", gap: 8 }}>
          {u.type !== 'video' && (
            <>
              <a href={u.link} download={`${u.title}.mp3`} onClick={() => handleDownload(u)} style={styles.linkBtn}>Download .mp3</a>
              <a href={u.link} download={`${u.title}.m4a`} onClick={() => handleDownload(u)} style={styles.linkBtn}>Download .m4a</a>
            </>
          )}
          {u.type === 'video' && (
            <a href={u.link} download={`${u.title}.mp4`} onClick={() => handleDownload(u)} style={styles.linkBtn}>Download .mp4</a>
          )}
        </div>
      </div>
    ))}
  </div>
</div>

<div style={{ marginTop: 18 }}>
  <h3>Histórico de Pagamentos</h3>
  <div style={{ display: "grid", gap: 8 }}>
    {(!artist.payments || artist.payments.length === 0) && <div style={styles.card}>Nenhum pagamento registado.</div>}
    {(artist.payments || []).map((p) => (
      <div key={p.id} style={styles.card}>Método: {p.method} — {p.amount} Kz — {new Date(p.date).toLocaleString()}</div>
    ))}
  </div>
</div>

);

}

// Footer function Footer() { return (

© 1000SONS – Todos os direitos reservados. — Siga-nos: Instagram | YouTube | TikTok ); }

return ( <div style={{ minHeight: "100vh", background: "#000", color: "#fff", fontFamily: 'Inter, system-ui, -apple-system, sans-serif' }}>

{view === "home" && } {view === "artists" && } {view === "artist-register" && } {view === "artist-login" && } {view === "payment" && user && user.role === "artist" && } {view === "upload" && user && user.role === "artist" && } {view === "dashboard" && user && user.role === "artist" && } ); }

// --- Simple inline styles for the prototype --- const styles = { header: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: 16, background: "#000", borderBottom: "1px solid huggingface#111" }, logo: { width: 44, height: 44, borderRadius: 8, background: "linear-gradient(135deg,#06b6d4,#f59e0b)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700 }, btn: { padding: "8px 12px", borderRadius: 8, background: "#374151", color: "#fff", border: "none", cursor: "pointer" }, btnPrimary: { padding: "8px 12px", borderRadius: 8, background: "#0ea5e9", color: "#fff", border: "none", cursor: "pointer" }, btnOutline: { padding: "8px 12px", borderRadius: 8, background: "transparent", color: "#fff", border: "1px solid #374151", cursor: "pointer" }, container: { padding: 24, maxWidth: 1100, margin: "0 auto" }, grid: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 16 }, card: { background: "#0f172a", padding: 16, borderRadius: 10, boxShadow: "0 6px 18px rgba(2,6,23,0.6)" }, avatar: { width: 44, height: 44, borderRadius: 999, background: "linear-gradient(135deg,#06b6d4,#f59e0b)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700 }, form: { display: "grid", gap: 8, maxWidth: 600 }, input: { padding: 10, borderRadius: 8, background: "#0b1220", border: "1px solid #1f2937", color: "#fff" }, footer: { padding: 16, textAlign: "center", background: "#071024", marginTop: 24 } };

const linkBtnStyle = { display: "inline-block", padding: "6px 10px", borderRadius: 8, background: "#111827", color: "#fff", textDecoration: "none", border: "1px solid #1f2937" };

// small helper to avoid repeating link button style object reference styles.linkBtn = linkBtnStyle;

[edmilsoneddy01-lang]

Amei vosso site

[joaopauloschuler]

Strongly rejected pull request.