fix load more and improve vide page

js/main.js

@@ -65,58 +65,134 @@ document.addEventListener('DOMContentLoaded', function() {
     });
     
     // Gestion des clics sur les vidéos
-    const videoCards = document.querySelectorAll('.video-card');
-    
-    videoCards.forEach(card => {
-        card.addEventListener('click', function() {
-            const videoId = this.dataset.videoId;
-            if (videoId) {
-                window.location.href = 'video.php?id=' + videoId;
-            }
-        });
-    });
-    
-    // Lazy loading des images
-    if ('IntersectionObserver' in window) {
-        const imageObserver = new IntersectionObserver((entries, observer) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    const img = entry.target;
-                    const src = img.getAttribute('data-src');
-                    if (src) {
-                        img.src = src;
-                        img.removeAttribute('data-src');
-                    }
-                    observer.unobserve(img);
-                }
-            });
-        });
+    function initVideoCardClicks() {
+        const videoCards = document.querySelectorAll('.video-card');
         
-        document.querySelectorAll('img[data-src]').forEach(img => {
-            imageObserver.observe(img);
-        });
-    } else {
-        // Fallback pour les navigateurs qui ne supportent pas IntersectionObserver
-        document.querySelectorAll('img[data-src]').forEach(img => {
-            const src = img.getAttribute('data-src');
-            if (src) {
-                img.src = src;
-                img.removeAttribute('data-src');
+        videoCards.forEach(card => {
+            if (!card.hasAttribute('data-click-initialized')) {
+                card.setAttribute('data-click-initialized', 'true');
+                card.addEventListener('click', function() {
+                    const videoId = this.dataset.videoId;
+                    if (videoId) {
+                        window.location.href = 'video.php?id=' + videoId;
+                    }
+                });
             }
         });
     }
     
+    // Initialiser les clics sur les vidéos existantes
+    initVideoCardClicks();
+    
+    // Lazy loading des images
+    function initLazyLoading() {
+        if ('IntersectionObserver' in window) {
+            const imageObserver = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        const img = entry.target;
+                        const src = img.getAttribute('data-src');
+                        if (src) {
+                            img.src = src;
+                            img.removeAttribute('data-src');
+                        }
+                        observer.unobserve(img);
+                    }
+                });
+            });
+            
+            document.querySelectorAll('img[data-src]').forEach(img => {
+                imageObserver.observe(img);
+            });
+        } else {
+            // Fallback pour les navigateurs qui ne supportent pas IntersectionObserver
+            document.querySelectorAll('img[data-src]').forEach(img => {
+                const src = img.getAttribute('data-src');
+                if (src) {
+                    img.src = src;
+                    img.removeAttribute('data-src');
+                }
+            });
+        }
+    }
+    
+    // Initialiser le lazy loading
+    initLazyLoading();
+    
     // Gestion des boutons "Voir plus"
     const viewMoreButtons = document.querySelectorAll('.view-more');
     
     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 = '';
+        
+        if (sectionTitle.includes('dernières')) {
+            videoType = 'recent';
+        } else if (sectionTitle.includes('tendances')) {
+            videoType = 'trending';
+        } else if (sectionTitle.includes('indépendance')) {
+            videoType = 'independence';
+        }
+        
+        // Stocker le numéro de page actuel
+        button.dataset.page = '1';
+        
         button.addEventListener('click', function() {
-            // Dans un vrai projet, cela chargerait plus de contenu via AJAX
-            // Pour cet exemple, on simule juste un clic
-            button.innerText = 'Chargement...';
-            setTimeout(() => {
-                button.innerText = 'Voir plus';
-            }, 1000);
+            const page = parseInt(this.dataset.page);
+            
+            // Changer le texte du bouton pendant le chargement
+            button.textContent = 'Chargement...';
+            button.disabled = true;
+            
+            // Faire la requête AJAX
+            fetch(`ajax/load-more-videos.php?type=${videoType}&page=${page}`, {
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest'
+                }
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    // Ajouter les nouvelles vidéos à la grille
+                    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
+                    button.textContent = 'Voir plus';
+                    button.disabled = false;
+                    
+                    // Si plus de vidéos à charger, masquer le bouton
+                    if (!data.hasMore) {
+                        button.style.display = 'none';
+                    }
+                    
+                    // Initialiser les clics sur les nouvelles vidéos
+                    initVideoCardClicks();
+                    // Initialiser le lazy loading pour les nouvelles images
+                    initLazyLoading();
+                } else {
+                    // En cas d'erreur, afficher un message et réactiver le bouton
+                    console.error('Erreur lors du chargement des vidéos:', data.error);
+                    button.textContent = 'Voir plus';
+                    button.disabled = false;
+                }
+            })
+            .catch(error => {
+                console.error('Erreur lors de la requête AJAX:', error);
+                button.textContent = 'Voir plus';
+                button.disabled = false;
+            });
         });
     });
 });