" для артиста; без art — точечная плитка в тоне hue (плейлисты, миксы)
const coverBg = (art, hue, px, glyph) => {
if (art && art.startsWith("ar:") && ARTIST_ART[art.slice(3)]) return ARTIST_ART[art.slice(3)];
if (art && glyph && GLYPH_ART[art]) return GLYPH_ART[art];
if (art && ALBUM_ART[art]) return ALBUM_ART[art];
const p = px ? Math.max(5, Math.round(px / 15)) : 11;
const r = (p * 0.24).toFixed(1);
return `radial-gradient(circle, oklch(var(--dot-l) 0.12 ${hue}) 0 ${r}px, transparent ${(+r + 0.5).toFixed(1)}px) 0 0 / ${p}px ${p}px, var(--bg2)`;
};
const Cover = ({ hue = 60, art, size = 150, radius, round = false, glyph: glyphWanted = false, style = {} }) => {
// «Обложка точками» — приём «Точки»; у Material обложка всегда обычная
const kind = useStyle(); // хук — всегда, не внутри условия
const glyph = glyphWanted && kind !== "material";
const numeric = typeof size === "number";
const gp = numeric ? Math.max(4, Math.round(size / 27)) : 9;
return (
);
};
// ---------- Полоса: прогресс, громкость, доли ----------
// У «Точки» — точки (DotBarDots), у Material — линия, а прогресс трека — волна (MBar, style.jsx).
// track — это прогресс играющего трека
const DotBar = (props) => (useStyle() === "material" ? {value} ;
const [m, s] = value.split(":");
const d = Math.max(3, Math.round(size * 0.1));
return (
{m.padStart(2, "0")}
{s}
);
};
// 10 точек оценки: горят до значения
const RateDots = ({ value, size = 6, gap = 4, on = "var(--text)" }) => (
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(n => (
);
// Ручка нижнего листа (телефон): лист едет за пальцем вниз; дальше 90px или быстрым рывком — закрывается.
// Анимацию появления снимаем на время жеста, иначе её финальный кадр перебивает transform.
const SheetGrip = ({ onClose }) => {
const st = React.useRef(null);
const end = (cancel) => {
const s = st.current; st.current = null;
if (!s) return;
const dy = s.dy || 0;
const v = dy / Math.max(1, Date.now() - s.t);
s.sh.style.transition = "transform 0.22s cubic-bezier(.2,.8,.2,1)";
if (!cancel && (dy > 90 || v > 0.6)) { s.sh.style.transform = "translateY(110%)"; buzz(8); setTimeout(onClose, 190); }
else s.sh.style.transform = "";
};
return (
{
const sh = e.currentTarget.closest(".modal");
if (!sh) return;
e.currentTarget.setPointerCapture(e.pointerId);
sh.style.animation = "none"; sh.style.transition = "none";
st.current = { y: e.clientY, t: Date.now(), sh, dy: 0 };
}}
onPointerMove={(e) => {
const s = st.current; if (!s) return;
s.dy = Math.max(0, e.clientY - s.y);
s.sh.style.transform = `translateY(${s.dy}px)`;
}}
onPointerUp={() => end(false)} onPointerCancel={() => end(true)}>
);
};
// Бегущая строка для длинных названий: едет туда-обратно с паузами по краям, только если не влезает
const Marquee = ({ children, style, className }) => {
const box = React.useRef(null);
const inner = React.useRef(null);
const [d, setD] = React.useState(0);
React.useLayoutEffect(() => {
if (!box.current || !inner.current) return;
const over = inner.current.scrollWidth - box.current.clientWidth;
setD(over > 2 ? over + 8 : 0);
}, [children]);
return (
{children}
);
};
// Окно поверх всего: затемнение, на телефоне — лист снизу с ручкой. Закрывается тапом мимо,
// ручкой и Esc. Рендерится в body: внутри страницы затемнение не накрывало плеер и правую панель
// (галерея тем, транзакции), а лист на телефоне уходил под нижнюю навигацию.
// События портала всплывают по дереву React — до того, кто окно открыл, доходит только то,
// что не погасило само окно (клик — гасит). out — окно уходит (useExit): анимация ухода, без нажатий.
const Sheet = ({ close, out, label, screen, width, children }) => {
useEscape(close, !out);
return ReactDOM.createPortal(
e.stopPropagation()}>
,
document.body
);
};
// Шапка окна: заголовок и крестик
const SheetHead = ({ title, close, style }) => (
);
// Карточка (альбом/артист/плейлист). ctx — payload для контекстного меню по ПКМ.
const MediaCard = ({ title, sub, hue, art, round, onClick, onPlay, ctx }) => {
const app = useApp();
const lp = useLongPress((x, y) => ctx && app.openCtxPoint(x, y, ctx));
return (
isTouchUI() ? e.preventDefault() : app.openCtx(e, ctx) : undefined}>
{onPlay && (
{ e.stopPropagation(); onPlay(); }}>
)}
);
};
// Свойства карточек — одинаковые на всех страницах; sub — подпись, она везде своя.
// Ключ (key) ставит сам список.
const albumCard = (app, al, sub) => ({
title: al.title, sub, hue: al.hue, art: al.id,
onClick: () => app.go("album", al.id), onPlay: () => app.playContext(albumIds(al)), ctx: { kind: "album", id: al.id },
});
// onPlay у артиста не везде: где его нет, у карточки нет и кнопки «Слушать»
const artistCard = (app, a, sub, onPlay) => ({
title: a.name, sub, hue: a.hue, art: "ar:" + a.id, round: true,
onClick: () => app.go("artist", a.id), onPlay, ctx: { kind: "artist", id: a.id },
});
// tracks — что играть (по умолчанию — текущий состав плейлиста)
const playlistCard = (app, pl, sub, tracks) => ({
title: plName(app.lang, pl), sub, hue: pl.hue,
onClick: () => app.go("playlist", pl.id), onPlay: () => app.playContext(tracks || app.playlistTracks(pl.id)), ctx: { kind: "playlist", id: pl.id },
});
// «48 213 слушателей в месяц»
const listenersLine = (app, a) => `${a.listeners.toLocaleString(app.lang)} ${app.t.monthlyListeners}`;
// Тосты
const Toasts = () => {
const app = useApp();
return (
{app.toasts.map(t => (
{t.msg}
{t.action && (
{ t.action.run(); app.dismissToast(t.id); }}>{t.action.label}
)}
))}