{/* Раскладка сцены и размер обложки (--fs-cover) — в app.css: inline-стиль перебил бы
медиа-правила, и на узком окне обложка не пряталась */}
{tr.t}
{showLyrics && }
);
};
// Жесты полного экрана на телефоне: тянуть вниз — экран едет за пальцем и сворачивается;
// вбок по обложке — лента обложек (stripDrag, core.jsx). Кнопки, полосы и прокручиваемые списки — не наша зона.
const useFullScreenGestures = ({ rootRef, stripRef, near, step, coverShown, onClose, onStep }) => {
const g = React.useRef(null);
const onDown = (e) => {
if (e.target.closest("button, input, .dotbar.seek, .fsp-scroll, [role=slider]")) return;
const strip = coverShown ? stripRef.current : null;
if (strip && strip.dataset.swiped) return;
g.current = { x: e.clientX, y: e.clientY, t: e.timeStamp, dx: 0, dy: 0, v: 0, axis: null,
onCover: !!strip && !!e.target.closest(".fsp-stage"), base: strip ? shiftX(strip) : 0 };
};
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(dy) > Math.abs(dx) ? "v" : (s.onCover ? "h" : null);
if (s.axis === "v") finishAnims(rootRef.current); // экран мог ещё выезжать
}
// Скорость — по последним движениям: важно, с какой скоростью палец отпустил, а не средняя
s.v = 0.8 * ((s.axis === "h" ? dx - s.dx : dy - s.dy) / Math.max(1, e.timeStamp - s.t)) + 0.2 * s.v;
if (s.axis === "v") {
const el = rootRef.current;
el.style.transition = "none";
el.style.transform = `translateY(${Math.max(0, dy)}px)`;
el.style.borderRadius = dy > 0 ? "28px 28px 0 0" : "";
}
if (s.axis === "h") 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 === "v") {
const el = rootRef.current;
if (s.dy > 140 || s.v > 0.6) {
const [ms, tr] = fling(el.offsetHeight - s.dy, s.v);
el.style.transition = tr;
el.style.transform = "translateY(100%)";
buzz(8); setTimeout(onClose, ms);
} else {
el.style.transition = "transform var(--t-settle) var(--ease-settle), border-radius var(--t-settle) var(--ease)";
el.style.transform = ""; el.style.borderRadius = "";
}
}
if (s.axis === "h") stripRelease(stripRef.current, s.base + s.dx, s.v, step(), near, onStep);
};
// Жест отняла система — экран и лента возвращаются на место
const onCancel = () => {
const s = g.current; g.current = null; if (!s) return;
if (s.axis === "v") { const el = rootRef.current; el.style.transition = "transform var(--t-settle) var(--ease-settle)"; el.style.transform = ""; el.style.borderRadius = ""; }
if (s.axis === "h") stripBack(stripRef.current);
};
return { onPointerDown: onDown, onPointerMove: onMove, onPointerUp: onUp, onPointerCancel: onCancel };
};
// Верх полного экрана на телефоне: «Свернуть», релиз (ссылкой), «Ещё»
const FspHeader = ({ tr, al }) => {
const app = useApp();
const t = app.t;
return (
);
};
// Текст песни на месте обложки; по тапу на строку — перемотка к ней
const FspLyrics = ({ lines, activeIdx, boxRef }) => {
const app = useApp();
return (
);
};
// Нижний ряд: плюсик, загрузка, донат и переключатели «текст» / «очередь» на месте обложки
const FspActions = ({ tr, view, toggle }) => {
const app = useApp();
const t = app.t;
const roundBtn = (on) => ({ width: 46, height: 46, background: on ? "var(--acc)" : "transparent", color: on ? "var(--acc-ink)" : "var(--text)" });
return (
);
};
// Полный экран на телефоне: обложка (по умолчанию — точечной матрицей), точечный таймкод,
// текст и очередь открываются на месте обложки
const FullScreenPhone = ({ out }) => {
const app = useApp();
const pct = useProgress();
const t = app.t;
const { tr, al, ar } = trackInfo(app.player.trackId);
const st = app.trackState(tr.id);
const [view, setView] = React.useState("cover"); // cover | lyrics | queue
const [glyph, setGlyph] = React.useState(true);
const lines = DB.lyricsFor(tr.id);
const lyricsRef = React.useRef(null);
const activeIdx = useLyricLine(lines, pct, lyricsRef, view === "lyrics", 0.35);
const left = Math.max(0, Math.round(trackSec(tr.id) * (1 - pct)));
const toggle = (v) => setView(view === v ? "cover" : v);
const rootRef = React.useRef(null);
// Лента обложек: соседние треки по бокам, листается пальцем и кнопками (useStripSync)
const stripRef = React.useRef(null);
const near = nearTracks(app.queue, tr.id);
const step = () => stripRef.current.closest(".fsp-stage").clientWidth + 24; // шаг — сцена и зазор, как в app.css (.fsp-slot)
useStripSync(stripRef, tr.id, near, step);
const gestures = useFullScreenGestures({
rootRef, stripRef, near, step, coverShown: view === "cover",
onClose: () => app.setFull(false),
onStep: (d) => (d > 0 ? app.nextTrack() : app.prevTrack()),
});
const cover = (key, id, i) => id && (
);
return (
{/* Сцена берёт всё свободное место; обложка считается от её размеров (container query),
поэтому на коротком экране она уменьшается, а не наезжает на шапку и название */}