// MediaPage.jsx — раздел «Медиа»: журналы (обложки выпусков) + аудио детского хора
function getConfirmedMagazineUrl(value) {
if (!value || typeof value !== "string") return "";
try {
const url = new URL(value);
if (url.hostname.endsWith("fliphtml5.com")) return "";
return url.href;
} catch {
return "";
}
}
function getUploadUrl(value) {
return value && typeof value === "object" && typeof value.url === "string" ? value.url : "";
}
function getPayloadMagazines(category, page = 1, limit = 4) {
const params = new URLSearchParams({
depth: "1",
limit: String(limit),
page: String(page),
sort: "sortOrder,-publishedAt",
});
params.set("where[status][equals]", "published");
params.set("where[category][equals]", category);
return fetch(`/api/magazines?${params.toString()}`, {
headers: { Accept: "application/json" },
})
.then((res) => {
if (!res.ok) throw new Error("Не удалось загрузить журналы");
return res.json();
})
.then((data) => {
const docs = Array.isArray(data.docs) ? data.docs : [];
const items = docs
.map((item) => ({
category: item.category,
href: getConfirmedMagazineUrl(item.externalUrl),
issue: item.year && item.issueLabel ? `${item.year} · ${item.issueLabel}` : item.issueLabel || "",
pdfUrl: getUploadUrl(item.pdfFile),
src: getUploadUrl(item.cover),
title: item.title,
}))
.filter((item) => item.category && item.title && (item.src || item.pdfUrl));
return {
hasNextPage: Boolean(data.hasNextPage),
items,
nextPage: data.nextPage || page + 1,
totalDocs: data.totalDocs || items.length,
};
});
}
function MagazineReader({ magazine, onClose }) {
const [pdf, setPdf] = React.useState(null);
const [page, setPage] = React.useState(1);
const [pageCount, setPageCount] = React.useState(0);
const [status, setStatus] = React.useState("loading");
const [direction, setDirection] = React.useState("next");
const [singlePage, setSinglePage] = React.useState(false);
React.useEffect(() => {
const update = () => setSinglePage(window.innerWidth < 820);
update();
window.addEventListener("resize", update);
return () => window.removeEventListener("resize", update);
}, []);
React.useEffect(() => {
let cancelled = false;
const pdfjs = window.pdfjsLib;
setPdf(null);
setPage(1);
setPageCount(0);
setStatus("loading");
if (!magazine?.pdfUrl || !pdfjs) {
setStatus("fallback");
return () => { cancelled = true; };
}
if (pdfjs.GlobalWorkerOptions) {
pdfjs.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
}
pdfjs.getDocument(magazine.pdfUrl).promise
.then((doc) => {
if (cancelled) return;
setPdf(doc);
setPageCount(doc.numPages || 0);
setStatus("ready");
})
.catch(() => {
if (!cancelled) setStatus("fallback");
});
return () => { cancelled = true; };
}, [magazine]);
React.useEffect(() => {
const previous = document.body.style.overflow;
document.body.style.overflow = "hidden";
return () => { document.body.style.overflow = previous; };
}, []);
if (!magazine) return null;
const step = singlePage ? 1 : 2;
const maxStartPage = singlePage ? pageCount : pageCount % 2 === 0 ? Math.max(1, pageCount - 1) : pageCount;
const visiblePages = singlePage ? [page] : [page, page + 1].filter((n) => n <= pageCount);
const canPrev = page > 1;
const canNext = pageCount ? page < maxStartPage : false;
const spreadLabel = pageCount
? singlePage
? `Страница ${page} из ${pageCount}`
: `Страницы ${page}${visiblePages[1] ? `–${visiblePages[1]}` : ""} из ${pageCount}`
: "Открываем выпуск";
const goPrev = () => {
setDirection("prev");
setPage((current) => Math.max(1, current - step));
};
const goNext = () => {
setDirection("next");
setPage((current) => Math.min(maxStartPage, current + step));
};
React.useEffect(() => {
const onKey = (event) => {
if (event.key === "Escape") onClose();
if (event.key === "ArrowRight" && page < maxStartPage) {
setDirection("next");
setPage((current) => Math.min(maxStartPage, current + step));
}
if (event.key === "ArrowLeft" && page > 1) {
setDirection("prev");
setPage((current) => Math.max(1, current - step));
}
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [onClose, page, maxStartPage, step]);
return (
event.stopPropagation()} style={{ height: "100%", display: "flex",
flexDirection: "column", gap: 8 }}>
{magazine.issue}
{magazine.title}
{status === "ready" ? (
{visiblePages.map((n) => (
) : status === "fallback" ? (
) : (
Открываем PDF...
)}
Назад
{spreadLabel}
Вперед
);
}
function MagazinePdfPage({ pdf, pageNumber, singlePage }) {
const canvasRef = React.useRef(null);
const [rendered, setRendered] = React.useState(false);
React.useEffect(() => {
let cancelled = false;
let activeRender = null;
setRendered(false);
pdf.getPage(pageNumber).then((page) => {
if (cancelled) return;
const canvas = canvasRef.current;
if (!canvas) return;
const viewportBase = page.getViewport({ scale: 1 });
const maxWidth = singlePage ? Math.min(window.innerWidth - 26, 980) : Math.min((window.innerWidth - 62) / 2, 690);
const maxHeight = window.innerHeight - 146;
const scale = Math.min(maxWidth / viewportBase.width, maxHeight / viewportBase.height, 2.4);
const viewport = page.getViewport({ scale: Math.max(.35, scale) });
const context = canvas.getContext("2d");
canvas.width = Math.floor(viewport.width);
canvas.height = Math.floor(viewport.height);
canvas.style.width = `${Math.floor(viewport.width)}px`;
canvas.style.height = `${Math.floor(viewport.height)}px`;
activeRender = page.render({ canvasContext: context, viewport });
return activeRender.promise;
}).then(() => {
if (!cancelled) setRendered(true);
}).catch(() => {
if (!cancelled) setRendered(true);
});
return () => {
cancelled = true;
if (activeRender && activeRender.cancel) activeRender.cancel();
};
}, [pdf, pageNumber, singlePage]);
return (
);
}
function MagazineCoverPlaceholder({ title }) {
return (
);
}
// Сетка журналов: показывает ограниченное число обложек, остальные раскрываются
// по кнопке с плавной анимацией (чтобы страница не была бесконечной).
function MagazineSubscriptionNote({ children }) {
return (
{children}{" "}
window.__navTo ? window.__navTo("Подписка") : null}
style={{ color: "var(--terracotta)", fontWeight: 700, textDecoration: "none",
background: "transparent", border: "none", padding: 0, cursor: "pointer",
font: "inherit" }}>
Оформить годовую подписку.
);
}
function MagazineGrid({ category, initial = 4 }) {
const [items, setItems] = React.useState([]);
const [page, setPage] = React.useState(1);
const [hasNextPage, setHasNextPage] = React.useState(false);
const [loading, setLoading] = React.useState(true);
const [error, setError] = React.useState(false);
const [readerMagazine, setReaderMagazine] = React.useState(null);
const wrapRef = React.useRef(null);
const loadPage = React.useCallback((nextPage = 1) => {
setLoading(true);
setError(false);
getPayloadMagazines(category, nextPage, initial)
.then((data) => {
setItems((current) => nextPage === 1 ? data.items : [...current, ...data.items]);
setPage(nextPage);
setHasNextPage(data.hasNextPage);
})
.catch(() => {
setError(true);
})
.finally(() => {
setLoading(false);
});
}, [category, initial]);
React.useEffect(() => {
setItems([]);
setPage(1);
setHasNextPage(false);
loadPage(1);
}, [loadPage]);
const showMore = () => {
if (!loading && hasNextPage) loadPage(page + 1);
};
return (
{items.map((m, i) => (
= initial
? { animation: "magIn .5s cubic-bezier(.22,1,.36,1) backwards", animationDelay: ((i - initial) * 0.06) + "s" }
: undefined}>
setReaderMagazine(m)} />
))}
{loading && items.length === 0 && (
Загружаем выпуски...
)}
{error && items.length === 0 && (
Не удалось загрузить выпуски. Попробуйте обновить страницу.
)}
{hasNextPage && (
{loading ? "Загружаем..." : "Показать ещё"}
)}
{readerMagazine &&
setReaderMagazine(null)} />}
);
}
function MagazineCard({ src, issue, title, topics, href, pdfUrl, onOpenReader }) {
const [hover, setHover] = React.useState(false);
const canRead = Boolean(pdfUrl);
const content = (
<>
{src ? (
) : (
)}
{canRead && (
)}
{issue}
{title}
{topics && topics.length > 0 && (
{topics.map((t) => (
· {t}
))}
)}
);
if (canRead) {
return (
setHover(true)} onMouseLeave={() => setHover(false)}
style={{ display: "flex", flexDirection: "column", gap: 13, textAlign: "left",
background: "transparent", border: "none", padding: 0, cursor: "pointer", width: "100%" }}>
{content}
);
}
if (href) {
return (
setHover(true)} onMouseLeave={() => setHover(false)}
style={{ display: "flex", flexDirection: "column", gap: 13, textDecoration: "none", cursor: "pointer" }}>
{content}
);
}
return (
setHover(true)} onMouseLeave={() => setHover(false)}
style={{ display: "flex", flexDirection: "column", gap: 13 }}>
{content}
);
}
const ALBUMS = [
{ title: "Песни надежды", year: "2025", tracks: [
{ title: "Свет Христов", dur: "2:54" },
{ title: "Радуйтесь, друзья", dur: "3:12" },
{ title: "Песенка о доброте", dur: "2:38" },
{ title: "Небесный Отец", dur: "3:45" },
{ title: "Колыбельная веры", dur: "2:20" },
{ title: "Идём за Светом", dur: "3:05" },
{ title: "Благодарю", dur: "2:48" },
{ title: "Горные вершины", dur: "3:30" },
] },
{ title: "Свет в горах", year: "2024", tracks: [
{ title: "Утренняя молитва", dur: "2:42" },
{ title: "Дорога домой", dur: "3:18" },
{ title: "Тихий вечер", dur: "2:55" },
{ title: "Сердце нараспашку", dur: "3:01" },
{ title: "Над облаками", dur: "2:34" },
{ title: "Доброе слово", dur: "2:49" },
] },
{ title: "Голос радости", year: "2023", tracks: [
{ title: "Радость моя", dur: "2:27" },
{ title: "Поём вместе", dur: "3:08" },
{ title: "Маленький свет", dur: "2:16" },
{ title: "Под крылом", dur: "3:22" },
{ title: "Спасибо, Боже", dur: "2:51" },
] },
];
function getPayloadAudioAlbums() {
return fetch("/api/choir-albums?depth=2&limit=50&sort=-createdAt", {
headers: { Accept: "application/json" },
})
.then((res) => {
if (!res.ok) throw new Error("Не удалось загрузить альбомы хора");
return res.json();
})
.then((data) => {
const docs = Array.isArray(data.docs) ? data.docs : [];
return docs
.filter((album) => album.status === "published")
.map((album) => {
const tracks = Array.isArray(album.tracks) ? album.tracks : [];
const yearSource = album.albumDate || album.createdAt;
const year = yearSource ? String(new Date(yearSource).getFullYear()) : "";
return {
title: album.title,
subtitle: album.subtitle || "",
year,
description: album.description || "",
coverUrl: album.cover && typeof album.cover === "object" ? album.cover.url : "",
coverAlt: album.cover && typeof album.cover === "object" ? album.cover.alt || album.title : album.title,
tracks: tracks
.filter((track) => track && track.title)
.map((track) => ({
title: track.title,
dur: track.duration || "",
note: track.scriptureReference || "",
src: track.audio && typeof track.audio === "object"
? `/choir-audio-files/${encodeURIComponent(track.audio.filename || "")}`
: "",
})),
};
})
.filter((album) => album.tracks.length > 0);
});
}
// Селектор альбома — горизонтальные «пилюли» (одинаков в обоих вариантах плеера)
function AlbumSelector({ albums, current, onSelect }) {
return (
{albums.map((a, i) => {
const on = i === current;
return (
onSelect(i)} style={{
fontFamily: "var(--font-ui)", fontWeight: 600, fontSize: 13.5, cursor: "pointer",
padding: "8px 16px", borderRadius: 999, transition: "all .2s ease", whiteSpace: "nowrap",
border: "1px solid " + (on ? "var(--terracotta)" : "rgba(243,238,218,.22)"),
background: on ? "var(--terracotta)" : "transparent",
color: on ? "var(--cream)" : "rgba(243,238,218,.78)" }}>
{a.title}
);
})}
);
}
function formatAudioTime(seconds) {
if (!Number.isFinite(seconds) || seconds <= 0) return "0:00";
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${String(secs).padStart(2, "0")}`;
}
function AudioRow({ n, title, dur, note, src, active, playing, onPlay, onEnded }) {
const [hover, setHover] = React.useState(false);
const [current, setCurrent] = React.useState(0);
const [duration, setDuration] = React.useState(0);
const [volume, setVolume] = React.useState(1);
const audioRef = React.useRef(null);
const volumeRef = React.useRef(1);
const realDuration = duration || 0;
const progress = realDuration ? Math.min(100, (current / realDuration) * 100) : 0;
const volumeProgress = Math.min(100, Math.max(0, volume * 100));
React.useEffect(() => {
const audio = audioRef.current;
if (!audio) return;
audio.volume = volumeRef.current;
}, [active, src]);
React.useEffect(() => {
const audio = audioRef.current;
if (!audio) return;
if (active && playing && src) {
audio.play().catch(() => {});
} else {
audio.pause();
}
}, [active, playing, src]);
React.useEffect(() => {
if (!active) {
setCurrent(0);
setDuration(0);
}
}, [active, src]);
const seek = (value) => {
const next = Number(value);
setCurrent(next);
if (audioRef.current) audioRef.current.currentTime = next;
};
const changeVolume = (value) => {
const next = Math.min(1, Math.max(0, Number(value)));
volumeRef.current = next;
setVolume(next);
if (audioRef.current) audioRef.current.volume = next;
};
return (
setHover(true)} onMouseLeave={() => setHover(false)}
style={{ width: "100%", padding: active && src ? "12px 14px 14px" : "0",
borderRadius: 14,
background: active ? "rgba(243,238,218,.08)" : hover ? "rgba(243,238,218,.06)" : "transparent",
boxShadow: active ? "inset 0 0 0 1px rgba(243,238,218,.08)" : "none",
transition: "background .2s ease" }}>
{String(n).padStart(2, "0")}
{title}
{note && {note} }
{active && src ? `${formatAudioTime(current)} / ${dur || formatAudioTime(realDuration)}` : dur}
{active && src && (
setDuration(e.currentTarget.duration || 0)}
onTimeUpdate={(e) => setCurrent(e.currentTarget.currentTime || 0)}
onEnded={onEnded} />
)}
{coverUrl ? (
) : (
)}
{album.title}
{album.subtitle &&
{album.subtitle}
}
{choir} · {tracks.length} треков{album.year ? ` · ${album.year}` : ""}
{visibleTracks.map((t, i) => (
select(i)} onEnded={() => finishTrack(i)} />
))}
{hiddenTrackCount > 0 && (
setShowAllTracks(true)}>
Показать еще
)}
);
}
return (
{/* Обложка альбома / плеер */}
{coverUrl ? (
) : (
)}
{album.title}
{album.subtitle &&
{album.subtitle}
}
{choir} · {tracks.length} треков{album.year ? ` · ${album.year}` : ""}
{album.description &&
{album.description}
}
{playing ? "Пауза" : "Слушать альбом"}
{/* Список треков */}
{visibleTracks.map((t, i) => (
select(i)} onEnded={() => finishTrack(i)} />
))}
{hiddenTrackCount > 0 && (
setShowAllTracks(true)}>
Показать еще
)}
{/* Журналы */}
{/* Аудио — детский хор */}
);
}
Object.assign(window, { MediaPage, ChoirPlayer, MagazineCard, MagazineReader, MagazineCoverPlaceholder, AudioRow, ALBUMS, MagazineSubscriptionNote });