From b3eae9ea8263a514be5ef1904ff8548627428826 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Thu, 15 Jan 2026 19:38:55 +0400
Subject: [PATCH] fix: load more button

---
 ajax/load-more-videos.php |   8 ++-
 categories.php            |   4 +-
 includes/security.php     |  27 +++++++---
 index.php                 |   6 +--
 js/categories.js          | 100 ++++----------------------------------
 js/main.js                |  55 +++++++++------------
 6 files changed, 64 insertions(+), 136 deletions(-)

diff --git a/ajax/load-more-videos.php b/ajax/load-more-videos.php
index 3bfc18b..e243645 100644
--- a/ajax/load-more-videos.php
+++ b/ajax/load-more-videos.php
@@ -1,4 +1,9 @@
 <?php
+// Démarrer la session avant tout
+if (session_status() === PHP_SESSION_NONE) {
+    session_start();
+}
+
 // Inclure la configuration
 require_once '../includes/config.php';
 
@@ -44,7 +49,8 @@ if ($type === 'category' && $categoryId <= 0) {
 
 // Récupérer les vidéos en fonction du type
 $videos = [];
-$offset = $page * LOAD_MORE_COUNT;
+// Utiliser offset directement s'il est fourni, sinon calculer à partir de page
+$offset = isset($_GET['offset']) ? intval($_GET['offset']) : $page * LOAD_MORE_COUNT;
 
 switch ($type) {
     case 'recent':
diff --git a/categories.php b/categories.php
index 3dab39a..f7cf50a 100644
--- a/categories.php
+++ b/categories.php
@@ -164,7 +164,7 @@ if ($categoryId && isset($allCategories[$categoryId])) {
     <?php include 'includes/footer.php'; ?>
     <?php include 'includes/mobile-menu.php'; ?>
 
-    <script src="js/main.js"></script>
-    <script src="js/categories.js"></script>
+    <script src="js/main.js?v=<?php echo filemtime('js/main.js'); ?>"></script>
+    <script src="js/categories.js?v=<?php echo filemtime('js/categories.js'); ?>"></script>
 </body>
 </html>
diff --git a/includes/security.php b/includes/security.php
index 216680a..e2b3980 100644
--- a/includes/security.php
+++ b/includes/security.php
@@ -289,19 +289,32 @@ function setSecurityHeaders() {
 
 /**
  * Valide l'origine de la requête pour les requêtes AJAX
- * 
+ *
  * @return bool True si l'origine est valide
  */
 function validateAjaxOrigin() {
-    $origin = $_SERVER['HTTP_ORIGIN'] ?? '';
     $host = $_SERVER['HTTP_HOST'] ?? '';
-    
-    if (empty($origin) || empty($host)) {
+
+    if (empty($host)) {
         return false;
     }
-    
+
     $expectedOrigin = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http') . '://' . $host;
-    
-    return $origin === $expectedOrigin;
+
+    // Vérifier l'en-tête Origin si présent
+    $origin = $_SERVER['HTTP_ORIGIN'] ?? '';
+    if (!empty($origin)) {
+        return $origin === $expectedOrigin;
+    }
+
+    // Si Origin est absent (requête same-origin), vérifier le Referer
+    $referer = $_SERVER['HTTP_REFERER'] ?? '';
+    if (!empty($referer)) {
+        return strpos($referer, $expectedOrigin) === 0;
+    }
+
+    // Accepter si ni Origin ni Referer (certains navigateurs/configs)
+    // La protection CSRF reste active via le token
+    return true;
 }
 ?>
\ No newline at end of file
diff --git a/index.php b/index.php
index 41d622f..9046c1c 100644
--- a/index.php
+++ b/index.php
@@ -424,7 +424,7 @@ setSecurityHeaders();
         <hr class="section-divider">
 
         <!-- Section Dernières vidéos -->
-        <section class="video-section" aria-labelledby="recent-videos-heading">
+        <section class="video-section" data-video-type="recent" aria-labelledby="recent-videos-heading">
             <header class="section-header">
                 <div class="section-logo">
                     <img src="img/logo.png" alt="Logo kaubuntu.re" aria-hidden="true">
@@ -484,7 +484,7 @@ setSecurityHeaders();
         <hr class="section-divider">
 
         <!-- Section Tendances -->
-        <section class="video-section" aria-labelledby="trending-videos-heading">
+        <section class="video-section" data-video-type="trending" aria-labelledby="trending-videos-heading">
             <header class="section-header">
                 <div class="section-logo">
                     <img src="img/logo.png" alt="Logo kaubuntu.re" aria-hidden="true">
@@ -642,7 +642,7 @@ setSecurityHeaders();
     </main>
     <?php include 'includes/footer.php'; ?>
     <?php include 'includes/mobile-menu.php'; ?>
-    <script src="js/main.js"></script>
+    <script src="js/main.js?v=<?php echo filemtime('js/main.js'); ?>"></script>
     <script src="js/mastodon-timeline.umd.js"></script>
     <script src="js/mastodon-config.php"></script>
 
diff --git a/js/categories.js b/js/categories.js
index eeff00d..166b8ad 100644
--- a/js/categories.js
+++ b/js/categories.js
@@ -1,97 +1,17 @@
 document.addEventListener("DOMContentLoaded", () => {
-  // Gestion des clics sur les vidéos
+  // Gestion des clics sur les vidéos initiales de la page catégorie
+  // Note: Le bouton "Voir Plus" est géré par main.js via data-category-id
   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;
-
-      // Préparer les données avec token CSRF
-      const formData = new FormData();
-      formData.append('csrf_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
-      
-      // Faire la requête AJAX
-      fetch(
-        `ajax/load-more-videos.php?type=category&page=${page}&category=${categoryId}`,
-        {
-          method: 'POST',
-          headers: {
-            "X-Requested-With": "XMLHttpRequest",
-          },
-          body: formData
+    if (!videoCard.hasAttribute("data-click-initialized")) {
+      videoCard.setAttribute("data-click-initialized", "true");
+      videoCard.addEventListener("click", function () {
+        const videoId = this.dataset.videoId;
+        if (videoId) {
+          window.location.href = `video.php?id=${videoId}`;
         }
-      )
-        .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);
-        });
-    });
+      });
+    }
   }
 });
diff --git a/js/main.js b/js/main.js
index c8c9ff2..52e376e 100644
--- a/js/main.js
+++ b/js/main.js
@@ -320,51 +320,42 @@ document.addEventListener('DOMContentLoaded', function() {
     viewMoreButtons.forEach(button => {
         // Déterminer le type de vidéos à charger
         const section = button.closest('.video-section');
-        const sectionTitle = section.querySelector('.section-title').textContent.trim().toLowerCase();
         const videoGrid = section.querySelector('.video-grid');
         let videoType = '';
         let categoryId = null;
-        
-        if (sectionTitle.includes('dernières')) {
-            videoType = 'recent';
-        } else if (sectionTitle.includes('tendances')) {
-            videoType = 'trending';
-        } else if (sectionTitle.includes('indépendance')) {
-            videoType = 'independence';
-        } else {
-            // Vérifier si c'est une section de catégorie
-            const categorySection = section.querySelector('[data-category-id]');
-            if (categorySection) {
-                videoType = 'category';
-                categoryId = categorySection.dataset.categoryId;
-            } else if (section.hasAttribute('data-category-id')) {
-                videoType = 'category';
-                categoryId = section.dataset.categoryId;
-            }
+
+        // Utiliser l'attribut data-video-type si présent (méthode prioritaire)
+        if (section.hasAttribute('data-video-type')) {
+            videoType = section.dataset.videoType;
+        } else if (section.hasAttribute('data-category-id')) {
+            // Section de catégorie
+            videoType = 'category';
+            categoryId = section.dataset.categoryId;
         }
-        
+
         // Si aucun type reconnu, ne pas configurer l'événement
         if (!videoType) return;
-        
-        // Stocker le numéro de page actuel
-        button.dataset.page = '1';
-        
+
         button.addEventListener('click', function() {
-            const page = parseInt(this.dataset.page);
-            
+            // Compter les vidéos déjà affichées pour calculer l'offset
+            const currentCount = videoGrid.querySelectorAll('.video-card').length;
+
             // Changer le texte du bouton pendant le chargement
             button.textContent = 'Chargement...';
             button.disabled = true;
-            
-            // Préparer l'URL avec les paramètres
-            let url = `ajax/load-more-videos.php?type=${videoType}&page=${page}`;
+
+            // Préparer l'URL avec les paramètres (utiliser offset au lieu de page)
+            let url = `ajax/load-more-videos?type=${videoType}&offset=${currentCount}`;
             if (videoType === 'category' && categoryId) {
                 url += `&category=${categoryId}`;
             }
             
             // Préparer les données avec token CSRF
             const formData = new FormData();
-            formData.append('csrf_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
+            const csrfMeta = document.querySelector('meta[name="csrf-token"]');
+            if (csrfMeta) {
+                formData.append('csrf_token', csrfMeta.getAttribute('content'));
+            }
             
             // Faire la requête AJAX
             fetch(url, {
@@ -372,7 +363,8 @@ document.addEventListener('DOMContentLoaded', function() {
                 headers: {
                     'X-Requested-With': 'XMLHttpRequest'
                 },
-                body: formData
+                body: formData,
+                credentials: 'same-origin'
             })
             .then(response => response.json())
             .then(data => {
@@ -386,9 +378,6 @@ document.addEventListener('DOMContentLoaded', function() {
                         videoGrid.appendChild(tempDiv.firstChild);
                     }
                     
-                    // Mettre à jour le numéro de page
-                    this.dataset.page = data.page + 1;
-                    
                     // Réinitialiser le texte du bouton
                     button.textContent = 'Voir plus';
                     button.disabled = false;