home funzionante !

<div id=”video-container”>
<figure class=”wp-block-video”>
<video id=”main-video” data-webm-fallback=”true” controls width=”100%” height=”auto”>
<source id=”video-source-webm” src=”” type=”video/webm”>
<source id=”video-source-mp4″ src=”” type=”video/mp4″>
Il tuo browser non supporta i video HTML5.
</video>
</figure>
<div id=”comment-icon”>🔍</div>
<div id=”video-title-box”></div>
<div id=”video-count”>Video 0 di 0</div>
<button id=”prev-video”>←</button>
<button id=”next-video”>→</button>

<div id=”video-info”>
<p id=”video-author”></p>
<p id=”video-date”></p>
</div>

<ul id=”video-list” style=”display: none;”></ul>
<button id=”load-more-videos” style=”display: none;”>Carica altri video</button>
</div>

<!– Il toggle è ora fuori dal video-container –>
<button id=”toggle-video-list”>↘︎</button>

<script>
document.addEventListener(“DOMContentLoaded”, function () {
const videoPlayer = document.getElementById(“main-video”);

// Funzione per passare al video successivo su mobile
function handleTapToNext(event) {
if (window.innerWidth <= 768) { // Solo su mobile
event.preventDefault();
document.getElementById(“next-video”).click();
}
}

videoPlayer.addEventListener(“touchend”, handleTapToNext);
});
document.addEventListener(“DOMContentLoaded”, function () {
document.addEventListener(“keydown”, function (event) {
if (document.activeElement.tagName !== “INPUT” && document.activeElement.tagName !== “TEXTAREA”) {
if (event.key === “ArrowRight”) {
document.getElementById(“next-video”).click();
} else if (event.key === “ArrowLeft”) {
document.getElementById(“prev-video”).click();
}
}
});
});

document.addEventListener(“DOMContentLoaded”, function () {
const videoPlayer = document.getElementById(“main-video”);
const videoList = document.getElementById(“video-list”);
const videoCount = document.getElementById(“video-count”);
const commentIcon = document.getElementById(“comment-icon”);
const toggleButton = document.getElementById(“toggle-video-list”);
const prevButton = document.getElementById(“prev-video”);
const nextButton = document.getElementById(“next-video”);
const loadMoreButton = document.getElementById(“load-more-videos”);

const videoAuthor = document.getElementById(“video-author”);
const videoDate = document.getElementById(“video-date”);

let videoQueue = [];
let currentIndex = 0;
let currentPage = 1;
const videosPerPage = 35;
let isSecondTranceLoaded = false;

toggleButton.addEventListener(“click”, function () {
videoList.style.display = videoList.style.display === “none” ? “block” : “none”;
toggleButton.textContent = videoList.style.display === “none” ? “↘︎” : “↖︎”;
});

prevButton.addEventListener(“click”, function () {
if (currentIndex > 0) {
playVideo(currentIndex – 1);
}
});

nextButton.addEventListener(“click”, function () {
if (currentIndex + 1 < videoQueue.length) {
playVideo(currentIndex + 1);
}
});

loadMoreButton.addEventListener(“click”, function () {
currentPage++;
fetchVideos();
});

async function fetchVideos() {
try {
const response = await fetch(`/wp-json/wp/v2/posts?per_page=${videosPerPage}&page=${currentPage}&_embed&context=view&order=asc`);
const posts = await response.json();

if (!Array.isArray(posts) || posts.length === 0) {
loadMoreButton.style.display = “none”;
return;
}

const newVideos = posts.map(post => {
const videoUrl = extractVideoUrl(post.content.rendered);
const thumbnailUrl = extractThumbnailUrl(post);

return videoUrl ? {
url: videoUrl,
title: post.title.rendered,
author: post._embedded?.author?.[0]?.name || “Sconosciuto”,
date: post.date,
excerpt: post.excerpt.rendered,
articleUrl: post.link,
thumbnailUrl: thumbnailUrl
} : null;
}).filter(Boolean);

if (newVideos.length > 0) {
videoQueue = […newVideos, …videoQueue];
videoQueue.sort(() => Math.random() – 0.5);

updateVideoList();
updateVideoCount();
loadMoreButton.style.display = “block”;

if (!isSecondTranceLoaded && currentPage > 1) {
// Simula il click su “avanti” dopo aver caricato la seconda trance
setTimeout(() => {
nextButton.click();
}, 500); // Ritardo per far sì che i video vengano caricati prima del click
isSecondTranceLoaded = true; // Segna che la seconda trance è stata caricata
}

if (currentPage === 1 && videoQueue.length > 0) {
playVideo(0, false);
}
} else {
loadMoreButton.style.display = “none”;
}
} catch (error) {
console.error(“Errore nel recupero dei video:”, error);
}
}

function extractVideoUrl(content) {
const videoRegex = /https?://[^s]+(?:.mp4|.mp4)/gi;
const match = content.match(videoRegex);
return match ? match[0] : null;
}

function extractThumbnailUrl(post) {
return post._embedded?.[‘wp:featuredmedia’]?.[0]?.source_url || ‘https://www.publicmusic.it/wp-content/uploads/2024/08/358971.jpeg’;
}

function playVideo(index, autoplay = true) {
if (index >= 0 && index < videoQueue.length) {
currentIndex = index;
const video = videoQueue[index];

document.getElementById(“video-title-box”).innerHTML = video.title || “Senza titolo”;
videoAuthor.textContent = `Autore: ${video.author}`;
videoDate.textContent = `Data: ${new Date(video.date).toLocaleDateString()}`;

document.getElementById(“video-source-mp4”).src = video.url.replace(“.mp4”, “.mp4”);
document.getElementById(“video-source-webm”).src = video.url;
videoPlayer.load();

commentIcon.onclick = () => window.open(video.articleUrl, “_blank”);

if (autoplay) {
videoPlayer.play().catch(() => console.warn(“Autoplay bloccato, attesa interazione utente.”));
}

updateVideoList();
updateVideoCount();
videoList.style.display = “none”;
toggleButton.textContent = “↘︎”;
}
}

function updateVideoList() {
videoList.innerHTML = “”;
videoQueue.forEach((video, index) => {
const listItem = document.createElement(“li”);
listItem.innerHTML = `
<div class=”video-item-content”>
<img src=”${video.thumbnailUrl}” alt=”Thumbnail” class=”video-thumbnail”>
<div>
<a href=”#” data-index=”${index}”>${video.title || “Senza titolo”}</a><br>
<em>Autore: ${video.author}</em><br>
<em>Data: ${new Date(video.date).toLocaleDateString()}</em><br>

</div>
</div>
`;
listItem.addEventListener(“click”, () => playVideo(index));
videoList.appendChild(listItem);
});

if (!videoList.contains(loadMoreButton)) {
videoList.appendChild(loadMoreButton);
}
}

function updateVideoCount() {
videoCount.textContent = `Video ${currentIndex + 1} di ${videoQueue.length}`;
}

videoPlayer.onended = function () {
if (currentIndex + 1 < videoQueue.length) {
playVideo(currentIndex + 1);
} else {
currentPage++;
fetchVideos();
}
};

fetchVideos();
});

 

</script>