ORGANISATION-KA-INTERNATIONALE/kaubuntu.re
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve categories page

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2025-04-10 12:07:56 +04:00
parent 87d06ad174
commit 9e81f811be
3 changed files with 258 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files
categories.php
+152 -273
View File
@@ -1,209 +1,24 @@
<?php
// Inclure la configuration
require_once 'includes/config.php';
// Récupération de l'ID de catégorie
$categoryId = isset($_GET['id']) ? intval($_GET['id']) : null;
// Définition des catégories
$categories = [
1 => [
'id' => 1,
'name' => 'Technologie',
'description' => 'Vidéos sur la technologie, l\'informatique, et les innovations tech.',
'image' => 'img/categories/tech.jpg'
],
2 => [
'id' => 2,
'name' => 'Culture',
'description' => 'Culture locale et internationale, événements culturels, et arts.',
'image' => 'img/categories/culture.jpg'
],
3 => [
'id' => 3,
'name' => 'Éducation',
'description' => 'Tutoriels, cours, et vidéos éducatives pour apprendre de nouvelles compétences.',
'image' => 'img/categories/education.jpg'
],
4 => [
'id' => 4,
'name' => 'Divertissement',
'description' => 'Vidéos de divertissement, humour, jeux et loisirs.',
'image' => 'img/categories/entertainment.jpg'
],
5 => [
'id' => 5,
'name' => 'Cuisine',
'description' => 'Recettes, conseils culinaires, et découverte de la gastronomie locale et internationale.',
'image' => 'img/categories/cuisine.jpg'
],
6 => [
'id' => 6,
'name' => 'Voyage',
'description' => 'Découverte de destinations, conseils de voyage, et aventures autour du monde.',
'image' => 'img/categories/travel.jpg'
],
7 => [
'id' => 7,
'name' => 'Sport',
'description' => 'Événements sportifs, tutoriels d\'entraînement, et actualités sportives.',
'image' => 'img/categories/sport.jpg'
],
8 => [
'id' => 8,
'name' => 'Musique',
'description' => 'Clips musicaux, concerts, et actualités musicales locales et internationales.',
'image' => 'img/categories/music.jpg'
]
];
// Récupérer les catégories disponibles
$allCategories = PEERTUBE_CATEGORIES;
// Définition des vidéos (dans un vrai projet, ces données viendraient d'une API)
$videos = [
[
'id' => 1,
'title' => 'Introduction à la culture libre et aux logiciels open source',
'thumbnail' => 'img/video-thumbnails/featured-1.jpg',
'duration' => 1245,
'channel' => 'Tech Libre',
'views' => 15420,
'date' => '2023-11-15',
'category_id' => 1
],
[
'id' => 2,
'title' => 'La Réunion: Découverte des sentiers cachés',
'thumbnail' => 'img/video-thumbnails/featured-2.jpg',
'duration' => 843,
'channel' => 'Île Aventure',
'views' => 8745,
'date' => '2023-12-02',
'category_id' => 6
],
[
'id' => 3,
'title' => 'Comment installer Linux sur un ancien ordinateur',
'thumbnail' => 'img/video-thumbnails/featured-3.jpg',
'duration' => 723,
'channel' => 'Tech Libre',
'views' => 24680,
'date' => '2023-10-25',
'category_id' => 1
],
[
'id' => 4,
'title' => 'Festival Sakifo 2023 - Les meilleurs moments',
'thumbnail' => 'img/video-thumbnails/recent-1.jpg',
'duration' => 1832,
'channel' => 'Culture 974',
'views' => 3420,
'date' => '2023-12-15',
'category_id' => 2
],
[
'id' => 5,
'title' => 'Cuisine créole: Recette du rougail saucisse traditionnel',
'thumbnail' => 'img/video-thumbnails/recent-2.jpg',
'duration' => 685,
'channel' => 'Saveurs des Îles',
'views' => 7245,
'date' => '2023-12-10',
'category_id' => 5
],
[
'id' => 6,
'title' => 'Tutoriel: Créer votre première application web avec PHP',
'thumbnail' => 'img/video-thumbnails/recent-3.jpg',
'duration' => 1540,
'channel' => 'CodeMastery',
'views' => 2180,
'date' => '2023-12-08',
'category_id' => 3
],
[
'id' => 7,
'title' => 'Les plus belles plages de La Réunion en 2023',
'thumbnail' => 'img/video-thumbnails/recent-4.jpg',
'duration' => 925,
'channel' => 'Île Aventure',
'views' => 5690,
'date' => '2023-12-05',
'category_id' => 6
],
[
'id' => 8,
'title' => 'Débat: L\'avenir du numérique à La Réunion',
'thumbnail' => 'img/video-thumbnails/recent-5.jpg',
'duration' => 3245,
'channel' => 'Tech Libre',
'views' => 1250,
'date' => '2023-12-01',
'category_id' => 1
],
[
'id' => 9,
'title' => 'Concert live: Groupe Sakili au Téat Plein Air',
'thumbnail' => 'img/video-thumbnails/recent-6.jpg',
'duration' => 4512,
'channel' => 'Culture 974',
'views' => 4325,
'date' => '2023-11-28',
'category_id' => 8
]
];
// Récupérer les vidéos de la catégorie si un ID est fourni
if ($categoryId && isset($allCategories[$categoryId])) {
// Récupérer le nom de la catégorie
$categoryName = $allCategories[$categoryId];
// Filtrer les vidéos par catégorie si une catégorie est sélectionnée
if ($categoryId) {
$categoryVideos = array_filter($videos, function($video) use ($categoryId) {
return $video['category_id'] == $categoryId;
});
$category = isset($categories[$categoryId]) ? $categories[$categoryId] : null;
// Récupérer les vidéos de cette catégorie via l'API PeerTube
$videos = getVideosByCategory($categoryId, CATEGORY_VIDEOS_COUNT); // Récupérer le nombre défini dans la config
} else {
$categoryVideos = [];
$category = null;
}
// Fonctions utilitaires
function formatDuration($seconds) {
$hours = floor($seconds / 3600);
$minutes = floor(($seconds % 3600) / 60);
$remainingSeconds = $seconds % 60;
if ($hours > 0) {
return sprintf('%d:%02d:%02d', $hours, $minutes, $remainingSeconds);
} else {
return sprintf('%d:%02d', $minutes, $remainingSeconds);
}
}
function formatViewCount($views) {
if ($views >= 1000000) {
return round($views / 1000000, 1) . 'M';
} elseif ($views >= 1000) {
return round($views / 1000, 1) . 'K';
} else {
return $views;
}
}
function formatDate($dateString) {
$date = new DateTime($dateString);
$now = new DateTime();
$interval = $now->diff($date);
if ($interval->days == 0) {
return 'Aujourd\'hui';
} elseif ($interval->days == 1) {
return 'Hier';
} elseif ($interval->days < 7) {
return 'Il y a ' . $interval->days . ' jours';
} elseif ($interval->days < 30) {
$weeks = floor($interval->days / 7);
return 'Il y a ' . $weeks . ' semaine' . ($weeks > 1 ? 's' : '');
} elseif ($interval->days < 365) {
$months = floor($interval->days / 30);
return 'Il y a ' . $months . ' mois';
} else {
$years = floor($interval->days / 365);
return 'Il y a ' . $years . ' an' . ($years > 1 ? 's' : '');
}
// Si aucune catégorie valide n'est spécifiée, rediriger vers l'accueil
header('Location: index.php');
exit;
}
?>
@@ -212,9 +27,8 @@ function formatDate($dateString) {
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $category ? htmlspecialchars($category['name']) . ' - ' : 'Catégories - '; ?>Kaubuntu.re</title>
<title><?php echo htmlspecialchars($categoryName); ?> - Kaubuntu.re</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/categories.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- Favicons -->
@@ -226,94 +40,159 @@ function formatDate($dateString) {
<meta name="theme-color" content="#ffffff">
</head>
<body>
<div class="container">
<?php include 'includes/sidebar.php'; ?>
<!-- Contenu principal -->
<div class="main-content">
<?php include 'includes/header.php'; ?>
<main>
<?php if ($category): ?>
<!-- Affichage des vidéos d'une catégorie spécifique -->
<div class="category-header">
<div class="category-banner" style="background-image: url('<?php echo $category['image']; ?>')">
<div class="category-overlay">
<h1><?php echo $category['name']; ?></h1>
<!-- Section catégorie -->
<div class="video-section category-page" data-category-id="<?php echo $categoryId; ?>">
<div class="section-header">
<div class="section-logo">
<img src="img/logo.png" alt="Kaubuntu.re">
</div>
<h2 class="section-title">Catégorie : <?php echo htmlspecialchars($categoryName); ?></h2>
</div>
<?php if (empty($videos)): ?>
<div class="no-videos-message">
<i class="fas fa-video-slash"></i>
<h3>Aucune vidéo dans cette catégorie</h3>
<p>Il n'y a pas encore de vidéos dans la catégorie "<?php echo htmlspecialchars($categoryName); ?>".</p>
<a href="index.php" class="btn-primary">Retour à l'accueil</a>
</div>
<?php else: ?>
<div class="video-grid category-videos">
<?php foreach ($videos as $video): ?>
<div class="video-card" data-video-id="<?php echo $video['id']; ?>">
<div class="video-thumbnail">
<img src="<?php echo $video['thumbnail']; ?>" alt="<?php echo htmlspecialchars($video['title']); ?>">
<div class="video-play-icon">
<i class="fas fa-play-circle"></i>
</div>
<span class="video-duration"><?php echo formatDuration($video['duration']); ?></span>
</div>
<div class="category-description">
<p><?php echo $category['description']; ?></p>
<div class="video-info">
<h3 class="video-title"><?php echo htmlspecialchars($video['title']); ?></h3>
<div class="video-meta">
<div class="channel-info">
<?php if (strpos($video['channelAvatar'], 'default-avatar') !== false || empty($video['channelAvatar'])): ?>
<div class="channel-avatar-placeholder">
<i class="fas fa-user-circle"></i>
</div>
<?php else: ?>
<img src="<?php echo $video['channelAvatar']; ?>" alt="<?php echo htmlspecialchars($video['channel']); ?>" class="channel-avatar">
<?php endif; ?>
<span class="channel-name"><?php echo htmlspecialchars($video['channel']); ?></span>
</div>
<div class="video-stats">
<span class="video-views"><i class="fas fa-eye"></i> <?php echo formatViewCount($video['views']); ?> vues</span>
<span class="video-date"><i class="far fa-calendar-alt"></i> <?php echo formatDate($video['date']); ?></span>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<?php if (count($categoryVideos) > 0): ?>
<div class="category-videos">
<div class="video-grid">
<?php foreach ($categoryVideos as $video): ?>
<div class="video-card" data-video-id="<?php echo $video['id']; ?>">
<div class="video-thumbnail">
<img src="<?php echo $video['thumbnail']; ?>" alt="<?php echo $video['title']; ?>" data-src="<?php echo $video['thumbnail']; ?>">
<div class="video-duration"><?php echo formatDuration($video['duration']); ?></div>
</div>
<div class="video-info">
<h3 class="video-title"><?php echo $video['title']; ?></h3>
<div class="video-channel"><?php echo $video['channel']; ?></div>
<div class="video-metadata">
<span class="video-views"><?php echo formatViewCount($video['views']); ?> vues</span>
<span class="video-date"><?php echo formatDate($video['date']); ?></span>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php else: ?>
<div class="no-videos">
<p>Aucune vidéo trouvée dans cette catégorie.</p>
</div>
<?php endif; ?>
<?php else: ?>
<!-- Affichage de toutes les catégories -->
<section class="categories-showcase">
<h1>Catégories</h1>
<p class="section-description">Découvrez nos vidéos par catégories</p>
<div class="categories-grid">
<?php foreach ($categories as $category): ?>
<a href="categories.php?id=<?php echo $category['id']; ?>" class="category-card-large">
<img src="<?php echo $category['image']; ?>" alt="<?php echo $category['name']; ?>" data-src="<?php echo $category['image']; ?>">
<div class="category-overlay">
<div class="category-name-large"><?php echo $category['name']; ?></div>
<div class="category-description-short"><?php echo substr($category['description'], 0, 60); ?>...</div>
</div>
</a>
<?php endforeach; ?>
</div>
</section>
<?php if (count($videos) >= CATEGORY_VIDEOS_COUNT): ?>
<button class="view-more" data-page="1">Voir plus</button>
<?php endif; ?>
</main>
<?php include 'includes/footer.php'; ?>
<?php endif; ?>
</div>
</div>
<div class="mobile-menu-overlay" id="mobileMenuOverlay">
<?php include 'includes/mobile-menu.php'; ?>
</div>
<?php include 'includes/footer.php'; ?>
<?php include 'includes/mobile-menu.php'; ?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Gestion des clics sur les cartes vidéo
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;
}
});
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;
}
});
});
// Gestion du bouton "Voir plus"
const viewMoreBtn = document.querySelector('.view-more');
if (viewMoreBtn) {
viewMoreBtn.addEventListener('click', function() {
const page = 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
document.querySelectorAll('.video-card:not([data-click-initialized])').forEach(card => {
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);
});
});
}
});
</script>
</body>
</html>
css/styles.css
+68
View File
@@ -1605,3 +1605,71 @@ i.icon-x,
font-size: 16px;
}
}
/* Catégories */
.category-page {
width: 100%;
margin-bottom: 40px;
}
.category-videos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin-top: 20px;
}
.no-videos-message {
text-align: center;
padding: 50px 20px;
background-color: var(--card-bg);
border-radius: 8px;
box-shadow: var(--card-shadow);
margin-top: 30px;
}
.no-videos-message i {
font-size: 50px;
color: var(--primary-red);
margin-bottom: 20px;
opacity: 0.7;
}
.no-videos-message h3 {
font-size: 24px;
margin-bottom: 15px;
}
.no-videos-message p {
font-size: 16px;
color: #666;
margin-bottom: 25px;
}
.btn-primary {
display: inline-block;
padding: 10px 20px;
background-color: var(--primary-red);
color: #fff;
border-radius: 4px;
text-decoration: none;
font-weight: 500;
transition: background-color 0.3s, transform 0.3s;
}
.btn-primary:hover {
background-color: #d40000;
transform: translateY(-3px);
}
@media (max-width: 992px) {
.category-videos {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.category-videos {
grid-template-columns: 1fr;
}
}
includes/config.php
+37 -1
View File
@@ -112,9 +112,45 @@ function initCategories() {
// Récupérer la liste des catégories depuis l'API
$categories = callPeerTubeApi('videos/categories');
// Tableau de correspondance pour traduire les catégories en français
$translations = [
'Music' => 'Musique',
'Films' => 'Films',
'Vehicles' => 'Véhicules',
'Art' => 'Art',
'Sports' => 'Sports',
'Travels' => 'Voyages',
'Gaming' => 'Jeux vidéo',
'People' => 'Personnes',
'Comedy' => 'Humour',
'Entertainment' => 'Divertissement',
'News & Politics' => 'Actualités & Politique',
'How To' => 'Tutoriels',
'Education' => 'Éducation',
'Activism' => 'Activisme',
'Science & Technology' => 'Science & Technologie',
'Animals' => 'Animaux',
'Kids' => 'Enfants',
'Food' => 'Cuisine',
];
// Si une constante PRIORITY_CATEGORIES est définie, utiliser ces traductions
if (defined('PRIORITY_CATEGORIES')) {
$priorityCategories = PRIORITY_CATEGORIES;
foreach ($priorityCategories as $id => $name) {
// Trouver la clé anglaise correspondant à l'ID
$englishName = array_search($id, array_keys($categories));
if ($englishName !== false) {
$translations[$englishName] = $name;
}
}
}
$result = [];
foreach ($categories as $key => $name) {
$result[$key] = $name;
// Utiliser la traduction si disponible, sinon garder le nom original
$translatedName = isset($translations[$name]) ? $translations[$name] : $name;
$result[$key] = $translatedName;
}
return $result;