// App.jsx — root: auth, routing, theme, upload simulation, tweaks. Mounts last. /* global React, ReactDOM, I, PlatGlyph, PLATFORMS, Login, Mark, Composer, History, Integrations, SEED_CONN, INTEGRATIONS, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "style": "elegan", "accent": "#b89048", "pattern": true }/*EDITMODE-END*/; const ACCENTS = ['#b89048', '#0d6b58', '#a8553a', '#7a6a3c']; function rowNeedsAttention(t) { const v = PLATFORMS.map(p => t[p.id]).filter(x => x && x !== 'idle'); return v.includes('failed'); } function rowRunning(t) { return PLATFORMS.map(p => t[p.id]).some(x => x === 'processing'); } function App() { const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS); const [authed, setAuthed] = React.useState(false); const [authChecked, setAuthChecked] = React.useState(false); const [screen, setScreen] = React.useState('compose'); const [theme, setTheme] = React.useState(() => localStorage.getItem('assuffah-theme') || 'light'); const [history, setHistory] = React.useState([]); const [conn, setConn] = React.useState(SEED_CONN); const [toasts, setToasts] = React.useState([]); const seq = React.useRef(100); // apply theme + tweaks to React.useEffect(() => { const el = document.documentElement; el.setAttribute('data-theme', theme); el.setAttribute('data-style', tw.style); el.style.setProperty('--accent', tw.accent); el.style.setProperty('--accent-2', tw.accent); if (!tw.pattern) el.style.setProperty('--pattern-op', '0'); else el.style.removeProperty('--pattern-op'); localStorage.setItem('assuffah-theme', theme); }, [theme, tw]); const toast = (text) => { const id = ++seq.current; setToasts(t => [...t, { id, text }]); setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 3400); }; // cek sesi saat load (hindari kedip layar login bila sudah masuk) React.useEffect(() => { window.MUAPI.me() .then(u => { if (u) setAuthed(true); }) .catch(() => {}) .finally(() => setAuthChecked(true)); }, []); // muat riwayat nyata dari backend const loadHistory = React.useCallback(async () => { try { setHistory(await window.MUAPI.listUploads()); } catch (e) { /* belum login / backend belum siap — diamkan */ } }, []); // muat status koneksi integrasi nyata dari backend const loadConn = React.useCallback(async () => { try { const c = await window.MUAPI.integrations(); setConn(prev => ({ ...prev, ...c })); } catch (e) { /* belum login — diamkan */ } }, []); React.useEffect(() => { if (authed) { loadHistory(); loadConn(); } }, [authed, loadHistory, loadConn]); // polling: selama ada baris yang masih "processing", segarkan tiap 2.5 dtk React.useEffect(() => { const running = history.some(h => rowRunning(h.targets)); if (!running) return; const t = setInterval(loadHistory, 2500); return () => clearInterval(t); }, [history, loadHistory]); const setTarget = (hid, pid, val) => setHistory(hs => hs.map(h => h.id === hid ? { ...h, targets: { ...h.targets, [pid]: val } } : h)); const addUpload = async (data) => { try { const entry = await window.MUAPI.createUpload(data); // POST multipart → backend setHistory(hs => [entry, ...hs.filter(h => h.id !== entry.id)]); setScreen('history'); toast(data.schedule ? 'Dijadwalkan & masuk antrean sebar' : 'Video diunggah — menyebar ke platform…'); // status per-platform akan ter-update lewat polling loadHistory() } catch (e) { toast('Gagal mengunggah: ' + e.message); } }; const setConnStatus = (pid, patch) => setConn(c => ({ ...c, [pid]: { ...c[pid], ...patch } })); const platName = (pid) => (PLATFORMS.find(p => p.id === pid) || {}).name || pid; // hubungkan: kirim kredensial (vals dari kartu Integrasi) ke backend const connect = async (pid, vals) => { setConnStatus(pid, { status: 'connecting' }); try { const res = await window.MUAPI.connectIntegration(pid, vals || {}); if (res.authUrl) { // platform OAuth (mis. TikTok) — arahkan untuk otorisasi toast(`Mengarahkan ke ${platName(pid)} untuk otorisasi…`); window.location.href = res.authUrl; return; } setConnStatus(pid, { status: 'connected', account: res.account, since: 'Tersambung baru saja' }); toast(`${platName(pid)} berhasil terhubung`); } catch (e) { await loadConn(); // kembalikan status sebenarnya toast(`Gagal menghubungkan ${platName(pid)}: ${e.message}`); } }; const disconnect = async (pid) => { try { await window.MUAPI.disconnectIntegration(pid); } catch (e) {} setConnStatus(pid, { status: 'disconnected', account: null, since: null }); toast(`${platName(pid)} diputuskan`); }; const refresh = (pid, vals) => connect(pid, vals); // token manual: perbarui = kirim ulang kredensial const retry = async (hid, pid) => { setTarget(hid, pid, 'processing'); // optimistik; status final dari polling try { await window.MUAPI.retry(hid, pid); } catch (e) { toast('Gagal mengulang: ' + e.message); } }; const logout = async () => { try { await window.MUAPI.logout(); } catch (e) {} setAuthed(false); setHistory([]); setScreen('compose'); }; const attention = history.filter(h => rowNeedsAttention(h.targets)).length; const connIssues = PLATFORMS.filter(p => ['disconnected', 'expired'].includes(conn[p.id].status)).length; if (!authChecked) return null; // tunggu cek sesi selesai (hindari kedip) if (!authed) { return ( <> setAuthed(true)} /> ); } return (

AssuffahStudio Multi-Upload

{screen === 'compose' ? setScreen('integrasi')} /> : screen === 'history' ? setScreen('compose')} /> : }

{toasts.map(t => (
{t.text}
))}

); } ReactDOM.createRoot(document.getElementById('root')).render();