{/* Скрим с контролами по наведению. Поверх затемнённой обложки кнопки всегда светлые:
в светлых темах --text тёмный, и ⏮/⏭ на тёмном скриме было почти не видно */}
{tr.t}
);
};
// ---------- Телефон (Android) ----------
// Жесты капсулы: вбок — лента треков (stripDrag, core.jsx), вверх — развернуть, тап — тоже развернуть.
// Капсула сама распознаёт тап и свайпы; кнопки внутри (лайк, play) и полоса перемотки — не её зона.
// На клик не опираемся: он всплывает от детей и может прийти не туда.
const useCapsuleGestures = ({ stripRef, near, step, onOpen, onStep }) => {
const g = React.useRef(null);
const onDown = (e) => {
const el = stripRef.current;
if (!el || el.dataset.swiped || e.target.closest("button, [role=slider], .dotbar.seek")) return;
g.current = { x: e.clientX, y: e.clientY, t: e.timeStamp, dx: 0, dy: 0, v: 0, axis: null, base: shiftX(el) };
};
const onMove = (e) => {
const s = g.current; if (!s) return;
const dx = e.clientX - s.x, dy = e.clientY - s.y;
if (!s.axis && Math.hypot(dx, dy) > SLOP) s.axis = Math.abs(dx) > Math.abs(dy) ? "h" : "v";
if (s.axis === "h") {
s.v = 0.8 * (dx - s.dx) / Math.max(1, e.timeStamp - s.t) + 0.2 * s.v;
stripDrag(stripRef.current, s.base + dx, near);
}
s.dx = dx; s.dy = dy; s.t = e.timeStamp;
};
const onUp = () => {
const s = g.current; g.current = null; if (!s) return;
if (s.axis === "h") stripRelease(stripRef.current, s.base + s.dx, s.v, step(), near, onStep);
else if (!s.axis || s.dy < -36) onOpen(); // тап или вверх
};
// Жест отняла система — лента просто возвращается
const onCancel = () => { const s = g.current; g.current = null; if (s && s.axis === "h") stripBack(stripRef.current); };
return { onPointerDown: onDown, onPointerMove: onMove, onPointerUp: onUp, onPointerCancel: onCancel };
};
// Трек в капсуле: обложка и название. Соседи по краям ленты — такие же, с прогрессом с нуля
const MpTrack = ({ id, pct, docked }) => {
const app = useApp();
const kind = useStyle();
const { tr, al, ar } = trackInfo(id);
return (
{kind === "material" && !docked ? (
// Material: название и артист двумя строками, прогресс — линией по краю капсулы (MobilePlayer)
{tr.t}{ar.name}
) : (
{tr.t}{!docked && · {ar.name}}
{docked
? {ar.name} · {zpad(app.fmtTime(pct), 5, kind)}
: }
)}
);
};
// Мини-плеер над нижней навигацией: островок-капсула или панель во всю ширину (та же настройка).
// Листается только лента с обложкой и названием, кнопки стоят на месте
const MobilePlayer = () => {
const app = useApp();
const kind = useStyle();
const pct = useProgress();
const id = app.player.trackId;
const docked = app.settings.island === "panel";
const near = nearTracks(app.queue, id);
const stripRef = React.useRef(null);
const step = () => stripRef.current.offsetWidth;
useStripSync(stripRef, id, near, step);
const gestures = useCapsuleGestures({ stripRef, near, step, onOpen: () => app.setFull(true), onStep: (d) => (d > 0 ? app.nextTrack() : app.prevTrack()) });
const slot = (key, tid, i) => tid && (