// Spotless — кнопки действий с треком (плюсик, донат, загрузка) и строка трека.
// Плюсик: поповер со списком плейлистов. ids — один трек или сразу несколько (весь альбом):
// галочка стоит, только если в плейлисте все они.
// Поповер рендерится в body (портал) с fixed-позицией от кнопки: внутри прокручиваемой страницы
// его обрезал край .main и перекрывала липкая шапка — на странице альбома верхний плейлист
// было не нажать. Монтируется только при открытии, поэтому замер позиции — в правильный момент.
const PlusPop = ({ ids, inPls, anchor, out, close }) => {
const app = useApp();
const ref = React.useRef(null);
const [pos, setPos] = React.useState(null);
React.useLayoutEffect(() => {
if (!ref.current || !anchor.current) return;
const a = boxOf(anchor.current);
const p = ref.current.getBoundingClientRect();
const left = Math.max(10, Math.min(window.innerWidth - 10 - p.width, a.left + a.width / 2 - p.width / 2));
let top = a.top - p.height - 10; // над кнопкой,
if (top < 10) top = Math.min(a.bottom + 10, window.innerHeight - 10 - p.height); // а не влезает — под ней
setPos({ left, top: Math.max(10, top) });
}, []);
React.useEffect(() => {
const outside = (e) => {
if (ref.current && ref.current.contains(e.target)) return;
if (anchor.current && anchor.current.contains(e.target)) return; // кнопка открывает и закрывает сама
close();
};
// Прокрутили то, в чём живёт кнопка, — она уехала, поповер закрываем (прокрутка текста песни не в счёт)
const scroll = (e) => {
const el = e.target;
if (!anchor.current || (ref.current && ref.current.contains(el))) return;
if (el === document || (el.contains && el.contains(anchor.current))) close();
};
window.addEventListener("pointerdown", outside, true); // перехват: многие элементы гасят всплытие
window.addEventListener("scroll", scroll, true);
return () => { window.removeEventListener("pointerdown", outside, true); window.removeEventListener("scroll", scroll, true); };
}, []);
useEscape(close, !out);
// Граница событий: портал всплывает по дереву React к строке трека и жестам плеера — не пускаем
const wall = (e) => e.stopPropagation();
return ReactDOM.createPortal(