${video.title}
${categoryName}
`;
videoGallery.appendChild(videoCard);
});
// Плавное появление изображений
const images = document.querySelectorAll('.video-img');
images.forEach(image => {
image.onload = () => image.style.opacity = 1;
image.style.opacity = 0;
});
requestAnimationFrame(() => window.dispatchEvent(new Event('resize')));
}
// Рендеринг кнопки "Показать ещё"
function renderLoadMoreButton(filteredVideos) {
const loadMoreContainer = document.getElementById("load-more-container");
if (loadMoreContainer) loadMoreContainer.remove();
const container = document.createElement("div");
container.id = "load-more-container";
container.style.textAlign = "center";
container.style.marginTop = "20px";
if (currentIndex {
renderVideosChunk(filteredVideos);
renderLoadMoreButton(filteredVideos);
});
container.appendChild(button);
}
videoGallery.parentElement.appendChild(container);
}
// Рендеринг кнопок фильтрации
function renderFilterButtons(categoriesList) {
filterButtonsContainer.innerHTML = ""; // Очистка перед рендером
categoriesList.forEach(category => {
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);
});
// Автоматически нажать первую кнопку
const firstButton = filterButtonsContainer.querySelector("button");
if (firstButton) {
firstButton.classList.add("active");
}
}
// Инициализация
renderFilterButtons(categories);
const initialVideos = filterVideos('all');
renderVideosChunk(initialVideos);
renderLoadMoreButton(initialVideos);
Back to top button
