move categories script to a js file

js/categories.js

@@ -0,0 +1,91 @@
+document.addEventListener("DOMContentLoaded", () => {
+  // Gestion des clics sur les vidéos
+  const videoCards = document.querySelectorAll(".video-card");
+
+  for (const videoCard of videoCards) {
+    videoCard.addEventListener("click", function () {
+      const videoId = this.dataset.videoId;
+      if (videoId) {
+        window.location.href = `video.php?id=${videoId}`;
+      }
+    });
+  }
+  // Gestion du bouton "Voir plus"
+  const viewMoreBtn = document.querySelector(".view-more");
+  if (viewMoreBtn) {
+    viewMoreBtn.addEventListener("click", function () {
+      const page = Number.parseInt(this.dataset.page);
+      const categoryId =
+        document.querySelector(".video-section").dataset.categoryId;
+
+      // Changer le texte du bouton pendant le chargement
+      this.textContent = "Chargement...";
+      this.disabled = true;
+
+      // Faire la requête AJAX
+      fetch(
+        `ajax/load-more-videos.php?type=category&page=${page}&category=${categoryId}`,
+        {
+          headers: {
+            "X-Requested-With": "XMLHttpRequest",
+          },
+        }
+      )
+        .then((response) => response.json())
+        .then((data) => {
+          if (data.success) {
+            // Ajouter les nouvelles vidéos à la grille
+            const videoGrid = document.querySelector(".video-grid");
+            const tempDiv = document.createElement("div");
+            tempDiv.innerHTML = data.html;
+
+            // Ajouter chaque vidéo à la grille
+            while (tempDiv.firstChild) {
+              videoGrid.appendChild(tempDiv.firstChild);
+            }
+
+            // Mettre à jour le numéro de page
+            this.dataset.page = data.page + 1;
+
+            // Réinitialiser le texte du bouton
+            this.textContent = "Voir plus";
+            this.disabled = false;
+
+            // Si plus de vidéos à charger, masquer le bouton
+            if (!data.hasMore) {
+              this.style.display = "none";
+            }
+
+            // Initialiser les clics sur les nouvelles vidéos
+            const cards = document.querySelectorAll(".video-card:not([data-click-initialized])")
+
+            for (const card of cards) {
+              card.setAttribute("data-click-initialized", "true");
+              card.addEventListener("click", function () {
+                const videoId = this.dataset.videoId;
+                if (videoId) {
+                  window.location.href = `video.php?id=${videoId}`;
+                }
+              });
+
+            }
+          } else {
+            // Gérer l'erreur
+            this.textContent = "Erreur lors du chargement";
+            setTimeout(() => {
+              this.textContent = "Voir plus";
+              this.disabled = false;
+            }, 2000);
+          }
+        })
+        .catch((error) => {
+          console.error("Erreur:", error);
+          this.textContent = "Erreur lors du chargement";
+          setTimeout(() => {
+            this.textContent = "Voir plus";
+            this.disabled = false;
+          }, 2000);
+        });
+    });
+  }
+});