{!phone && }
{/* Упала страница — остальное (плеер, навигация) живёт; другая страница — новая попытка */}
}>
{!phone && panel && }
{phone
?
: docked ? : }
{full && (phone ? : )}
{mini && }
);
};
// ---------- Ошибки ----------
// Текст ошибки мелким моноширинным шрифтом — для скриншота в отчёте о баге
const ErrDetail = ({ text }) => text
? {text}
: null;
// Упала одна страница: объяснение и выход на главную, плеер и навигация остаются
const PageError = ({ reset, detail }) => {
const app = useApp();
const t = app.t;
return (
{t.errTitle}
{t.errNote}
);
};
// Упало всё приложение: та же подсказка. Из сохранённого меняем только маршрут — открываем главную,
// настройки, оценки и плейлисты не трогаем
const AppCrash = ({ detail }) => {
const t = I18N[loadLS().lang === "en" ? "en" : "ru"];
return (
{t.errTitle}
{t.errNote}
);
};
// ---------- Сайдбар ----------
// В «Точке» пункты пронумерованы моно-цифрами, активный отмечен красной точкой;
// в рейле и старых темах вместо номеров — иконки.
// mIcon — свой значок у Material (в макетах «Артистам» — $, как на телефоне)
const NavItem = ({ page, num, icon, mIcon, label, badge }) => {
const app = useApp();
const kind = useStyle();
const active = app.route.page === page;
return (
);
};
const Sidebar = () => {
const app = useApp();
const t = app.t;
const r = app.route;
return (
);
};
// ---------- Верхняя панель ----------
// Колокольчик уведомлений с поповером
const BellBtn = () => {
const app = useApp();
const t = app.t;
const [open, setOpen] = React.useState(false);
const [pop, popOut] = useExit(open);
return (
{pop && setOpen(false)} />}
);
};
// Аватар — в свой профиль
const AvatarBtn = ({ size }) => {
const app = useApp();
return (
);
};
// Телефон: когда заголовок страницы уезжает под шапку, его имя появляется в самой шапке,
// а на страницах с большой кнопкой «Слушать» — и маленькая её копия. barRef — сама шапка
const useScrolledTitle = (barRef) => {
const app = useApp();
const [sc, setSc] = React.useState({ edge: false, title: null, play: false });
React.useEffect(() => {
const m = barRef.current && barRef.current.closest(".main");
if (!m) return;
const h = () => {
const bar = barRef.current.getBoundingClientRect();
const h1 = m.querySelector("h1");
const pb = m.querySelector(".playbig");
const past = h1 && h1.getBoundingClientRect().bottom < bar.bottom - 4;
const next = { edge: m.scrollTop > 2, title: past ? h1.textContent : null, play: !!(pb && pb.getBoundingClientRect().bottom < bar.bottom) };
setSc(p => (p.edge === next.edge && p.title === next.title && p.play === next.play) ? p : next);
};
h();
m.addEventListener("scroll", h, { passive: true });
return () => m.removeEventListener("scroll", h);
}, [app.route.page, app.route.id]);
return sc;
};
// Телефон: на вкладках — логотип, внутри разделов — «Назад»; настройки — шестерёнкой
const TopBarPhone = () => {
const app = useApp();
const t = app.t;
const barRef = React.useRef(null);
const sc = useScrolledTitle(barRef);
const isTab = MOB_TABS.some(([p]) => p === app.route.page);
const playFromPage = () => { const b = barRef.current && barRef.current.closest(".main").querySelector(".playbig"); if (b) b.click(); };
return (
{!isTab && (
)}
{/* Логотип и заголовок делят одно место: при прокрутке одно сменяет другое */}
{isTab && (
)}
{sc.title}
{sc.play && (
)}
);
};
// Компьютер: назад/вперёд, поиск, колокольчик, аватар
const TopBarDesktop = () => {
const app = useApp();
const t = app.t;
// ⌘K / Ctrl+K — к поиску: подсказка в поле обещает это сочетание. По e.code — работает и в русской раскладке
const searchRef = React.useRef(null);
React.useEffect(() => {
const k = (e) => {
if ((e.metaKey || e.ctrlKey) && !e.altKey && e.code === "KeyK" && searchRef.current) { e.preventDefault(); searchRef.current.focus(); }
};
window.addEventListener("keydown", k);
return () => window.removeEventListener("keydown", k);
}, []);
const toSearch = () => { if (app.route.page !== "search") app.go("search"); };
return (
);
};
const TopBar = () => (useApp().phone ? : );
// ---------- Нижняя навигация (телефон) ----------
// Четыре вкладки как в сайдбаре; внутри альбома или артиста подсвечена вкладка, откуда пришли
const MOB_TABS = [["home", "home"], ["search", "search"], ["library", "library"], ["support", "dollar"]];
const TAB_OF = { home: "home", search: "search", genre: "search", library: "library", liked: "library", playlist: "library", support: "support" };
const MobileNav = () => {
const app = useApp();
const t = app.t;
const last = React.useRef("home");
const cur = TAB_OF[app.route.page];
if (cur) last.current = cur;
const active = cur || last.current;
// Каждая вкладка помнит, где вы остановились; повторный тап по открытой — плавно наверх
const memo = React.useRef({});
const tap = (p) => {
const m = document.querySelector(".main");
if (app.route.page === p) { if (m) m.scrollTo({ top: 0, behavior: "smooth" }); return; }
if (m && MOB_TABS.some(([q]) => q === app.route.page)) memo.current[app.route.page] = m.scrollTop;
buzz(5);
app.go(p);
const y = memo.current[p];
if (y) requestAnimationFrame(() => requestAnimationFrame(() => { const mm = document.querySelector(".main"); if (mm) mm.scrollTop = y; }));
};
return (
);
};
Object.assign(window, { Shell, PageError, AppCrash, Sidebar, TopBar, MobileNav, BellBtn, AvatarBtn });