let allVideos = []; let currentPage = 1; const perPage = 6; async function fetchThumbnails() { try { let response = await fetch("https://app.screenover.com/api/category/f2d10f53-5ec1-4537-80a0-de4b19aa686f"); let data = await response.json(); if (!data.medias || !data.medias.docs || data.medias.docs.length === 0) { document.getElementById("error-message").innerText = "Aucune vignette trouvée."; return; } allVideos = data.medias.docs; renderPage(currentPage); renderPagination(); } catch (error) { console.error("Erreur API :", error); document.getElementById("error-message").innerText = "Erreur de chargement."; } } function renderPage(page) { const container = document.getElementById("vignettes-container"); container.innerHTML = ""; const start = (page - 1) * perPage; const end = start + perPage; const pageItems = allVideos.slice(start, end); pageItems.forEach((video, index) => { const vignetteUrl = video.thumbnailURL; const titre = video.title || "Sans titre"; if (vignetteUrl) { let vignetteDiv = document.createElement("div"); vignetteDiv.classList.add("vignette-item"); vignetteDiv.innerHTML = '' + '' + titre + ''; vignetteDiv.addEventListener("click", function () { let iframe = document.getElementById("screenover-iframe"); let newSrc = "https://slide.screenover.com/?p=a86077fd-c84d-4877-90a2-714bfcb9d3db&c=f2d10f53-5ec1-4537-80a0-de4b19aa686f&startAt=" + (start + index) + "&embed"; iframe.src = newSrc; setTimeout(() => { document.getElementById("screenover-iframe-container").scrollIntoView({ behavior: "smooth", block: "start" }); }, 300); }); container.appendChild(vignetteDiv); } }); } function renderPagination() { const pageCount = Math.ceil(allVideos.length / perPage); const pagination = document.getElementById("pagination"); pagination.innerHTML = ""; for (let i = 1; i
