basic project skeleton

js/main.js

@@ -0,0 +1,128 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Gestion du menu mobile
+    const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
+    const mobileMenuOverlay = document.getElementById('mobileMenuOverlay');
+    const mobileMenuClose = document.querySelector('.mobile-menu-close');
+    
+    if (mobileMenuToggle) {
+        mobileMenuToggle.addEventListener('click', function() {
+            mobileMenuOverlay.style.display = 'block';
+            document.body.style.overflow = 'hidden'; // Empêche le défilement de la page
+        });
+    }
+    
+    if (mobileMenuClose) {
+        mobileMenuClose.addEventListener('click', function() {
+            mobileMenuOverlay.style.display = 'none';
+            document.body.style.overflow = ''; // Réactive le défilement
+        });
+    }
+    
+    // Fermer le menu en cliquant en dehors
+    if (mobileMenuOverlay) {
+        mobileMenuOverlay.addEventListener('click', function(e) {
+            if (e.target === mobileMenuOverlay) {
+                mobileMenuOverlay.style.display = 'none';
+                document.body.style.overflow = '';
+            }
+        });
+    }
+    
+    // Gestion des 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);
+                }
+            });
+        });
+        
+        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');
+            }
+        });
+    }
+    
+    // Fonction pour formater le nombre de vues
+    function formatViewCount(views) {
+        if (views >= 1000000) {
+            return (views / 1000000).toFixed(1) + 'M';
+        } else if (views >= 1000) {
+            return (views / 1000).toFixed(1) + 'K';
+        } else {
+            return views.toString();
+        }
+    }
+    
+    // Fonction pour formater la durée des vidéos
+    function formatDuration(seconds) {
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        const remainingSeconds = seconds % 60;
+        
+        if (hours > 0) {
+            return `${hours}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
+        } else {
+            return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+        }
+    }
+    
+    // Fonction pour formater la date
+    function formatDate(dateString) {
+        const date = new Date(dateString);
+        const now = new Date();
+        const diffTime = Math.abs(now - date);
+        const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+        
+        if (diffDays < 1) {
+            return 'Aujourd\'hui';
+        } else if (diffDays === 1) {
+            return 'Hier';
+        } else if (diffDays < 7) {
+            return `Il y a ${diffDays} jours`;
+        } else if (diffDays < 30) {
+            const diffWeeks = Math.floor(diffDays / 7);
+            return `Il y a ${diffWeeks} semaine${diffWeeks > 1 ? 's' : ''}`;
+        } else if (diffDays < 365) {
+            const diffMonths = Math.floor(diffDays / 30);
+            return `Il y a ${diffMonths} mois`;
+        } else {
+            const diffYears = Math.floor(diffDays / 365);
+            return `Il y a ${diffYears} an${diffYears > 1 ? 's' : ''}`;
+        }
+    }
+    
+    // Exposer ces fonctions utilitaires globalement
+    window.videoUtils = {
+        formatViewCount,
+        formatDuration,
+        formatDate
+    };
+});