// Spotless — раздел «Артистам» (кому идут ваши деньги) и окна доната и пополнения.
// Суммы — в валюте человека (app.money, см. core.jsx).
// Цена одной точки в распределении: ровный ряд от 5 центов до 100, а если и 100 мало —
// целая часть от деления (с округлением вверх) самой крупной доли на число точек, которое
// помещается в колонку. Потолка нет: раньше ряд кончался на 100, и у крупных сумм полосы обрезались
const DOT_UNITS = [0.05, 0.1, 0.25, 0.5, 1, 2, 5, 10, 25, 50, 100];
// Крупная сумма: знак валюты тонким шрифтом, целые — точечным, копейки — приглушённо.
// Вписывается в ширину своего виджета (useFitScale)
const BigMoney = ({ value, size: full = 150 }) => {
const m = useApp().money;
const ref = React.useRef(null);
const size = full * useFitScale(ref, [value, m]);
const { whole, cents, sep } = m.parts(value);
return (
{m.sign}{whole}
{cents !== "00" && {sep}{cents}}
);
};
// Подпись над числом: «Комиссия сервиса 0%» читается именно в таком порядке
const SupStat = ({ label, value }) => (
{label}{value}
);
// Сумма в месяц: крупная цифра, чипы, своя сумма, итоги и напоминание
const MonthlyWidget = ({ split }) => {
const app = useApp();
const t = app.t;
const m = app.money;
const passed = DB.supportHistory.reduce((a, h) => a + h.amount + h.extra, 0);
const preset = (n) => !app.customAmt && app.monthly === n;
// Выбрали новую сумму в месяц, а на балансе меньше — предложить пополнить счёт на разницу сейчас
const chosen = (v) => { if (v != null && v !== app.monthly && v > app.balance) app.offerTopUp(v); };
return (
{t.everyMonth}
{[2, 5, 10].map(n => (
))}
{t.supNote}
);
};
// Баланс кошелька и два пути пополнения
const BalanceWidget = () => {
const app = useApp();
const t = app.t;
const m = app.money;
const { whole, cents, sep } = m.parts(app.balance);
// Крупный баланс вписывается в ширину виджета
const balRef = React.useRef(null);
const k = useFitScale(balRef, [app.balance, m]);
return (
{t.supBalance}{m.sign}{whole}{sep}{cents}
);
};
// Распределение: строка на артиста, полоса точек; по нажатию — подробности
const SplitWidget = ({ split, total }) => {
const app = useApp();
const t = app.t;
const m = app.money;
const [detail, setDetail] = React.useState(null); // id артиста, у которого раскрыты подробности
// Цена одной точки растёт с суммой, чтобы самая длинная полоса помещалась в свою колонку.
// Место меряем по колонке первой строки: раньше считали на 38 точек (304px), а колонка уже почти
// везде, кроме 1440px, — полосы обрезались, и $1,90 выглядело так же, как $1,20 и $0,80
const barCell = React.useRef(null);
const cellW = useWidth(barCell);
const maxDots = cellW ? Math.max(3, Math.floor(cellW / 8)) : 38;
// От чего считать: от самой крупной доли (её полоса — во всю ширину) или от всей суммы (вся ширина —
// сумма в месяц) — настройка «Полосы распределения денег»
const base = app.settings.dotScale === "total" ? total : split[0].amount;
const unit = DOT_UNITS.find(u => base / u <= maxDots) || Math.ceil(base / maxDots);
const link = { color: "var(--text)", textDecoration: "underline", textUnderlineOffset: 3 };
// Колонка сумм — по самой длинной (13px моноширинного ≈ 7,9px на знак), не уже 60px: огромная сумма
// раньше вылезала из строки и давала прокрутку вбок
const amtW = Math.max(60, Math.ceil(Math.max(...split.map(s => m.fmt(s.amount, true).length)) * 7.9));
// Длинные суммы на телефоне уходят строкой ниже — иначе полосам не остаётся места (app.css)
const longAmt = amtW > 100;
return (
{t.howSplit(m.fmt(total))}
{t.dotIsC(unit, m.currency, unit >= 1000 ? m.int(unit) : m.fmt(unit))}
{split.map((s) => {
const a = DB.artists[s.artist];
const open = detail === s.artist;
return (
);
};
// ---------- Окно доната ----------
// Окно монтируется заново при каждом открытии: раньше его состояние жило между открытиями,
// и на долю секунды мелькало «Спасибо» от прошлого доната, а таймер закрытия от прошлого раза
// мог закрыть новое окно. Закрытое окно ещё EXIT_MS уходит с анимацией (useExit)
const DonateModal = () => {
const [tgt, out] = useExit(useApp().donateTarget);
return tgt ? : null;
};
// Кому донат: обложка, название и подпись
const donateHead = (t, tgt) => {
if (tgt.kind === "track") {
const { tr, al, ar } = trackInfo(tgt.id);
return { title: tr.t, sub: `${t.dnTrack} · ${ar.name}`, hue: al.hue, art: al.id };
}
if (tgt.kind === "album") {
const al = DB.albums[tgt.id];
return { title: al.title, sub: `${t[al.type].toLowerCase()} · ${DB.artists[al.artist].name}`, hue: al.hue, art: al.id };
}
const a = DB.artists[tgt.id];
return { title: a.name, sub: t.dnArtist, hue: a.hue, art: "ar:" + a.id, round: true };
};
const DonateSheet = ({ tgt, out }) => {
const app = useApp();
const t = app.t;
const m = app.money;
const [amt, setAmt] = React.useState(2);
const [custom, setCustom] = React.useState("");
const [sent, setSent] = React.useState(false);
const timer = React.useRef(null);
React.useEffect(() => () => clearTimeout(timer.current), []);
const close = () => app.closeDonate();
const { title, sub, hue, art, round = false } = donateHead(t, tgt);
const val = custom ? parseAmount(custom) || 0 : amt;
// Донат идёт с баланса: больше, чем на нём есть, не отправить — вместо этого предлагаем пополнить
const short = val > app.balance;
const send = () => {
if (out) return;
if (short) { close(); app.openTopUp(); return; }
if (val <= 0) return;
app.payFromBalance(val, title);
setSent(true); timer.current = setTimeout(close, 1600);
};
return (
{!sent ? (
{t.dnTitle} {sub}
{title}
{[1, 2, 5, 10].map(n => (
))}
{t.dnFrom}: {m.fmt(app.balance)}{t.dnNote}
) : (
{t.dnThanks}
)}
);
};
// ---------- Окно пополнения ----------
// Два равноправных пути: виджет платёжного партнёра (с карты) или перевод с другого кошелька.
const TU_ADDRESS = "7XbR4wqLmZk2tNcVAhuFD9rGoyPe8sJv31MxBqWnK9Qe";
// Комиссия партнёра при пополнении с карты (заглушка) и сколько заплатить, чтобы на баланс дошло need
const topUpFee = (val) => (val > 0 ? Math.max(0.25, val * 0.024) : 0);
const payFor = (need) => Math.ceil(Math.max(need + 0.25, need / 0.976) * 100 - 1e-6) / 100;
// Как и донат, монтируется заново при каждом открытии — без вспышки «Счёт пополнен» от прошлого раза
const TopUpModal = () => {
const [tu, out] = useExit(useApp().topUp);
return tu ? : null;
};
// Выбрали сумму в месяц больше баланса: предложить пополнить на разницу сейчас. «Пополнить» открывает
// обычное окно пополнения (оба пути), в пути «с карты» сумма подставлена так, чтобы дошла вся разница
const TopUpOfferModal = () => {
const [monthly, out] = useExit(useApp().topUpOffer);
return monthly ? : null;
};
const TopUpOffer = ({ monthly, out }) => {
const app = useApp();
const t = app.t;
const m = app.money;
const need = Math.round((monthly - app.balance) * 100) / 100;
const close = () => app.closeTopUpOffer();
return (