${video.title}
${categoryName}
`;
// Динамически загружаем превью
getVideoThumbnail(video, (thumbnailUrl) => {
const thumbnailContainer = videoCard.querySelector('.video-thumbnail');
thumbnailContainer.innerHTML = `
${platformName}
`;
});
videoCard.addEventListener('click', (e) => {
if (!e.target.closest('.clickable-category')) {
openVideoInModal(video);
}
});
return videoCard;
}
// Рендеринг порции видео
function renderVideosChunk(videos) {
currentVideos = videos;
currentIndex = Math.min(videos.length, currentIndex + videosPerPage);
const chunk = videos.slice(0, currentIndex);
videoGallery.innerHTML = "";
if (videos.length === 0) {
videoGallery.innerHTML = "
Нет видео для отображения.
";
return;
}
chunk.forEach(video => {
const videoCard = createVideoCard(video);
videoGallery.appendChild(videoCard);
});
}
// Рендеринг кнопки "Показать ещё"
function renderLoadMoreButton(filteredVideos) {
const loadMoreContainer = document.getElementById("load-more-container");
if (loadMoreContainer) loadMoreContainer.remove();
if (currentIndex >= filteredVideos.length) return;
const container = document.createElement("div");
container.id = "load-more-container";
container.style.textAlign = "center";
container.style.marginTop = "20px";
const button = document.createElement("button");
button.textContent = "Показать ещё";
button.style.padding = "10px 20px";
button.style.fontSize = "16px";
button.addEventListener("click", () => {
renderVideosChunk(filteredVideos);
renderLoadMoreButton(filteredVideos);
});
container.appendChild(button);
videoGallery.parentElement.appendChild(container);
}
// Рендеринг кнопок фильтрации
function renderFilterButtons(categoriesList) {
filterButtonsContainer.innerHTML = "";
const allButton = document.createElement("button");
allButton.textContent = "Все";
allButton.dataset.categoryId = "all";
allButton.classList.add("active");
allButton.addEventListener("click", () => {
document.querySelectorAll(".filter-buttons button").forEach(btn => btn.classList.remove("active"));
allButton.classList.add("active");
const filteredVideos = filterVideos('all');
currentIndex = 0;
renderVideosChunk(filteredVideos);
renderLoadMoreButton(filteredVideos);
});
filterButtonsContainer.appendChild(allButton);
categoriesList.forEach(category => {
if (category.id === 'all') return;
const button = document.createElement("button");
button.textContent = category.name;
button.dataset.categoryId = category.id;
button.addEventListener("click", () => {
document.querySelectorAll(".filter-buttons button").forEach(btn => btn.classList.remove("active"));
button.classList.add("active");
const filteredVideos = filterVideos(category.id);
currentIndex = 0;
renderVideosChunk(filteredVideos);
renderLoadMoreButton(filteredVideos);
});
filterButtonsContainer.appendChild(button);
});
}
// Обработчик клика по категории
document.addEventListener('click', (e) => {
if (e.target.classList.contains('clickable-category')) {
e.preventDefault();
e.stopPropagation();
const categoryId = e.target.dataset.categoryId;
const button = document.querySelector(`.filter-buttons button[data-category-id="${categoryId}"]`);
if (button) button.click();
}
});
// Инициализация
renderFilterButtons(categories);
const initialVideos = filterVideos('all');
renderVideosChunk(initialVideos);
renderLoadMoreButton(initialVideos);
Back to top button