// Spotless — глобальные меню и окна: контекстное меню (ПКМ и «⋯»),
// уведомления (колокольчик), создание плейлиста.
// Поповер устройств живёт в player.jsx рядом с островком.
const MenuRow = ({ icon, label, danger, chev, check, onClick }) => (
);
const MenuDivider = () => ;
// Шапка меню-листа на телефоне: что именно мы сейчас настраиваем
const CtxHead = ({ c }) => {
const app = useApp();
const t = app.t;
let art, hue, title, sub, round = false;
if (c.kind === "track") {
const { tr, al, ar } = trackInfo(c.id);
art = al.id; hue = al.hue; title = tr.t; sub = ar.name + " · " + al.title;
} else if (c.kind === "album") {
const al = DB.albums[c.id];
art = al.id; hue = al.hue; title = al.title; sub = t[al.type] + " · " + DB.artists[al.artist].name;
} else if (c.kind === "artist") {
const ar = DB.artists[c.id];
art = "ar:" + ar.id; hue = ar.hue; title = ar.name; sub = t.artist; round = true;
} else if (c.kind === "playlist") {
const pl = app.findPl(c.id);
if (!pl) return null;
hue = pl.hue; title = plName(app.lang, pl); sub = t.nTracks(app.playlistTracks(c.id).length);
} else return null;
return (
);
};
// ---------- Пункты меню ----------
// c — про что меню (kind, id и где открыли: plId, qIndex); close — закрыть меню; setSub — подменю.
// Пункт с действием сначала делает дело, потом закрывает меню.
// Трек: «В плейлист» открывает подменю со списком
const TrackItems = ({ c, close, setSub }) => {
const app = useApp();
const t = app.t;
const tr = DB.trackIndex[c.id];
const st = app.trackState(c.id);
const dl = app.downloads[c.id] === "done";
const plMeta = c.plId ? app.findPl(c.plId) : null;
const act = (f) => () => { f(); close(); };
return (
app.playTrack(c.id))} />
app.addToQueue(c.id))} />
setSub("pl")} />
app.toggleLike(c.id))} />
app.toggleDl(c.id))} />
app.openDonate({ kind: "track", id: c.id }))} />
app.go("artist", tr.artist))} />
app.go("album", tr.album))} />
app.toast(t.copied))} />
{(plMeta && plMeta.byMe) && (
app.removeFromPlaylist(c.id, c.plId))} />
)}
{c.qIndex != null && (
app.removeFromQueue(c.qIndex))} />
)}
);
};
// Подменю трека: свои плейлисты с галочками и «Новый плейлист»
const TrackPlaylistItems = ({ c, close, setSub }) => {
const app = useApp();
const t = app.t;
const inPls = app.trackPlaylists(c.id);
return (
setSub(null)} />
{app.allPlaylists.filter(p => p.byMe).map(pl => (
app.togglePlaylist(c.id, pl.id)} />
))}
{ app.openCreatePl({ thenAdd: c.id }); close(); }} />
);
};
const AlbumItems = ({ c, close }) => {
const app = useApp();
const t = app.t;
const al = DB.albums[c.id];
const ids = albumIds(al);
const allDl = ids.every(id => app.downloads[id] === "done");
const act = (f) => () => { f(); close(); };
return (
app.playContext(ids))} />
app.addToQueue(ids))} />
app.toggleDlAlbum(c.id))} />
app.openDonate({ kind: "album", id: c.id }))} />
app.go("artist", al.artist))} />
app.toast(t.copied))} />
);
};
const ArtistItems = ({ c, close }) => {
const app = useApp();
const t = app.t;
const following = app.followed.includes(c.id);
const act = (f) => () => { f(); close(); };
return (
app.playContext(topTracks([c.id]).slice(0, 5).map(tr => tr.id)))} />
app.toggleFollow(c.id))} />
app.openDonate({ kind: "artist", id: c.id }))} />
app.toast(t.copied))} />
);
};
const PlaylistItems = ({ c, close }) => {
const app = useApp();
const t = app.t;
const ids = app.playlistTracks(c.id);
const act = (f) => () => { f(); close(); };
return (
app.playContext(ids))} />
app.addToQueue(ids))} />
app.toast(t.copied))} />
{app.findPl(c.id).user && (
app.deletePlaylist(c.id))} />
)}
);
};
const MENU_ITEMS = { track: TrackItems, album: AlbumItems, artist: ArtistItems, playlist: PlaylistItems };
// Глобальное контекстное меню. Открывается ПКМ (строки, карточки), кнопками «⋯» и долгим нажатием.
// На компьютере — поповер у курсора, на телефоне — лист снизу.
const ContextMenu = () => {
const app = useApp();
const [c, out] = useExit(app.ctx);
const [sub, setSub] = React.useState(null);
const [pos, setPos] = React.useState(null);
const ref = React.useRef(null);
const openedAt = React.useRef(0);
React.useEffect(() => { setSub(null); openedAt.current = Date.now(); }, [c]);
// Не вылезать за край окна: сдвигаем влево или поднимаем над точкой
React.useLayoutEffect(() => {
if (!c || !ref.current) return;
const r = ref.current.getBoundingClientRect();
let x = c.x, y = c.y;
if (x + r.width > window.innerWidth - 8) x = window.innerWidth - 8 - r.width;
if (y + r.height > window.innerHeight - 8) y = Math.max(8, c.y - r.height);
setPos({ x, y });
}, [c, sub]);
React.useEffect(() => {
if (!c) return;
// Меню могло открыться долгим нажатием: первые мгновения игнорируем «отпускание» пальца
const opened = Date.now();
const close = (e) => { if (Date.now() - opened < 400) return; if (ref.current && ref.current.contains(e.target)) return; app.closeCtx(); };
window.addEventListener("pointerdown", close, true);
return () => window.removeEventListener("pointerdown", close, true);
}, [c]);
// Esc закрывает только меню: открытое из полного экрана, оно раньше сворачивало и его
useEscape(() => app.closeCtx(), !!c && !out);
if (!c) return null;
if (c.kind === "playlist" && !app.findPl(c.id)) return null; // такого плейлиста уже нет
const X = () => app.closeCtx();
const Items = c.kind === "track" && sub === "pl" ? TrackPlaylistItems : MENU_ITEMS[c.kind];
const content = Items ? : null;
// Телефон: то же меню, но листом снизу — с шапкой, крупными строками и смахиванием вниз
if (app.phone) {
return (
{ if (Date.now() - openedAt.current > 450) X(); }}>
e.stopPropagation()} onContextMenu={(e) => e.preventDefault()}>
{sub !== "pl" && }
{content}
e.stopPropagation()}
onContextMenu={(e) => e.preventDefault()}
style={{
position: "fixed", left: pos ? pos.x : c.x, top: pos ? pos.y : c.y,
width: 236, padding: 6, zIndex: 130, visibility: pos ? "visible" : "hidden",
}}>
{content}
);
};
// Поповер уведомлений (живёт под колокольчиком в топбаре)
const BellPop = ({ close, out }) => {
const app = useApp();
const t = app.t;
React.useEffect(() => {
const h = () => close();
window.addEventListener("mousedown", h);
return () => window.removeEventListener("mousedown", h);
}, []);
const items = [
{ hue: 15, icon: "note", title: t.notifSingle, sub: t.notifSingleSub, go: () => app.go("album", "cassette") },
{ hue: 35, icon: "users", title: t.notifAdded, sub: t.notifAddedSub, go: () => app.go("playlist", "kitchen") },
{ hue: 95, icon: "wallet", title: t.notifTopUp, sub: t.notifTopUpSub(app.money.fmt(app.balance)), go: () => app.openTopUp() },
{ hue: 145, icon: "heart", title: t.notifThanks, sub: t.notifThanksSub(app.money), go: () => app.go("artist", "milk") },
];
return (
e.stopPropagation()}
style={{ top: "calc(100% + 10px)", right: 0, left: "auto", width: 330, padding: 8, zIndex: 70 }}>
{t.notifTitle}
{items.map((n, i) => (
))}
setName(e.target.value)}
onKeyDown={(e) => { if (e.key === "Enter") create(); }}
style={{
flex: 1, background: "var(--bg2)", border: "1px solid var(--line)", borderRadius: "var(--r-sm)",
padding: "11px 14px", fontSize: 14.5, fontWeight: 600, color: "var(--text)", outline: "none", minWidth: 0,
}} />
{PL_HUES.map(h => (
))}
);
};
Object.assign(window, { ContextMenu, BellPop, CreatePlaylistModal, MenuRow, MenuDivider });