2025-04-08 06:37:14 +04:00
<! DOCTYPE html >
< html lang = " fr " >
< head >
< meta charset = " UTF-8 " >
< meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > Kaubuntu . re - Plateforme Multimédia </ title >
< link rel = " stylesheet " href = " css/styles.css " >
< link rel = " stylesheet " href = " https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css " >
2025-04-08 08:22:02 +04:00
< link rel = " stylesheet " href = " css/mastodon-timeline.min.css " >
2025-04-09 20:29:09 +04:00
<!-- Favicons -->
< link rel = " apple-touch-icon " sizes = " 180x180 " href = " img/apple-touch-icon.png " >
< link rel = " icon " type = " image/png " sizes = " 32x32 " href = " img/favicon-32x32.png " >
< link rel = " icon " type = " image/png " sizes = " 16x16 " href = " img/favicon-16x16.png " >
< link rel = " manifest " href = " site.webmanifest " >
< link rel = " icon " type = " image/x-icon " href = " img/favicon.ico " >
< meta name = " theme-color " content = " #ffffff " >
2025-04-08 06:37:14 +04:00
</ head >
< body >
2025-04-08 09:12:46 +04:00
< ? php
// Inclure la configuration
require_once 'includes/config.php' ;
?>
2025-04-09 16:04:50 +04:00
<?php include 'includes/sidebar.php'; ?>
2025-04-08 06:51:33 +04:00
<!-- Contenu principal -->
<div class="main-content">
2025-04-09 16:04:50 +04:00
<?php include 'includes/header.php'; ?>
2025-04-08 08:22:02 +04:00
<!-- Hero and Mastodon container -->
<div class="hero-mastodon-wrapper">
<!-- Hero Banner -->
<div class="hero">
2025-04-10 10:33:19 +04:00
<?php
// Vérifier s'il y a un direct en cours
$liveStream = getLiveStream();
if ($liveStream) {
// Afficher le direct en cours
?>
<div class="live-badge">
<i class="fas fa-circle"></i> DIRECT
2025-04-08 08:22:02 +04:00
</div>
2025-04-10 10:33:19 +04:00
<div class="hero-video-container">
<iframe
src="<?php echo PEERTUBE_URL; ?>/videos/embed/<?php echo $liveStream['id']; ?>?autoplay=1&muted=1"
frameborder="0"
allowfullscreen="allowfullscreen"
allow="autoplay; fullscreen"
title="<?php echo htmlspecialchars($liveStream['title']); ?>">
</iframe>
</div>
<div class="hero-video-info">
<h2><?php echo htmlspecialchars($liveStream['title']); ?></h2>
<div class="hero-channel-info">
<?php if (strpos($liveStream['channelAvatar'], 'default-avatar.png') !== false || empty($liveStream['channelAvatar'])): ?>
<div class="channel-avatar-placeholder">
<i class="fas fa-user-circle"></i>
</div>
<?php else: ?>
<img src="<?php echo $liveStream['channelAvatar']; ?>" alt="<?php echo $liveStream['channel']; ?>" class="channel-avatar">
<?php endif; ?>
<span class="channel-name"><?php echo $liveStream['channel']; ?></span>
</div>
</div>
<?php
} else {
// Aucun direct en cours
?>
<div class="hero-no-live">
<i class="fas fa-tv"></i>
<h2>Aucun direct en cours</h2>
<p>Revenez plus tard pour découvrir nos prochaines diffusions en direct.</p>
</div>
<?php
}
?>
2025-04-08 08:22:02 +04:00
</div>
<div id="mt-container" class="mt-container">
2025-04-08 08:36:27 +04:00
<div class="mt-header">
<h2 class="mt-title">Fil d'actualités <i class="fab fa-mastodon"></i></h2>
</div>
2025-04-08 08:22:02 +04:00
<div class="mt-body" role="feed">
<div class="mt-loading-spinner"></div>
2025-04-08 06:51:33 +04:00
</div>
</div>
</div>
2025-04-08 08:22:02 +04:00
2025-04-08 06:51:33 +04:00
<!-- Hashtags en ligne -->
<div class="tags-section">
2025-04-10 13:53:33 +04:00
<?php
if (defined('POPULAR_TAGS') && !empty(POPULAR_TAGS)):
foreach (POPULAR_TAGS as $tag):
$encodedTag = urlencode('#' . $tag);
?>
<a href="recherche.php?q=<?php echo $encodedTag; ?>" class="tag">#<?php echo htmlspecialchars($tag); ?></a>
<?php
endforeach;
endif;
?>
2025-04-08 06:51:33 +04:00
</div>
<!-- Section Shorts -->
<div class="video-section">
<div class="section-header">
<div class="section-logo">
<img src="img/logo.png" alt="Kaubuntu.re">
</div>
<h2 class="section-title">Shorts</h2>
</div>
<div class="carousel">
<div class="carousel-container">
<?php
2025-04-08 09:12:46 +04:00
// Récupérer les shorts depuis l'API PeerTube
$shorts = getShorts();
2025-04-08 06:51:33 +04:00
2025-04-08 09:12:46 +04:00
// Traiter le cas où aucun short n'est trouvé
if (empty($shorts)) {
echo '<div class="no-results">Aucun short disponible pour le moment</div>';
} else {
foreach ($shorts as $video):
2025-04-08 06:51:33 +04:00
?>
<div class="carousel-item">
<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']; ?>">
<div class="video-play-icon">
<i class="fas fa-play-circle"></i>
</div>
</div>
</div>
</div>
2025-04-08 09:12:46 +04:00
<?php
endforeach;
}
?>
2025-04-08 06:51:33 +04:00
</div>
2025-04-08 09:12:46 +04:00
<?php if (!empty($shorts) && count($shorts) > 1): ?>
2025-04-08 06:51:33 +04:00
<div class="carousel-controls">
2025-04-08 09:12:46 +04:00
<?php for ($i = 0; $i < count($shorts); $i++): ?>
<div class="carousel-dot <?php echo $i === 0 ? 'active' : ''; ?>"></div>
<?php endfor; ?>
2025-04-08 06:51:33 +04:00
</div>
2025-04-08 09:12:46 +04:00
<?php endif; ?>
2025-04-08 06:51:33 +04:00
</div>
</div>
<!-- Section Dernières vidéos -->
<div class="video-section">
<div class="section-header">
<div class="section-logo">
<img src="img/logo.png" alt="Kaubuntu.re">
</div>
<h2 class="section-title">Dernières vidéos</h2>
</div>
<div class="video-grid">
<?php
2025-04-08 09:12:46 +04:00
// Récupérer les vidéos récentes depuis l'API PeerTube
$recentVideos = getRecentVideos();
2025-04-08 06:51:33 +04:00
2025-04-08 09:12:46 +04:00
// Traiter le cas où aucune vidéo n'est trouvée
if (empty($recentVideos)) {
echo '<div class="no-results">Aucune vidéo disponible pour le moment</div>';
} else {
foreach ($recentVideos as $video):
2025-04-08 06:51:33 +04:00
?>
<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']; ?>">
<div class="video-play-icon">
<i class="fas fa-play-circle"></i>
</div>
2025-04-08 09:12:46 +04:00
<div class="video-duration"><?php echo formatDuration($video['duration']); ?></div>
2025-04-08 06:51:33 +04:00
</div>
<div class="video-info">
<h3 class="video-title"><?php echo $video['title']; ?></h3>
2025-04-09 08:40:03 +04:00
<div class="video-channel">
<?php if (strpos($video['channelAvatar'], 'default-avatar.png') !== 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 $video['channel']; ?>" class="channel-avatar">
<?php endif; ?>
<span class="channel-name"><?php echo $video['channel']; ?></span>
</div>
2025-04-08 06:51:33 +04:00
<div class="video-metadata">
2025-04-08 10:49:46 +04:00
<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>
2025-04-08 06:51:33 +04:00
</div>
</div>
</div>
2025-04-08 09:12:46 +04:00
<?php
endforeach;
}
?>
2025-04-08 06:51:33 +04:00
</div>
<button class="view-more">Voir plus</button>
</div>
<!-- Section Tendances -->
<div class="video-section">
<div class="section-header">
<div class="section-logo">
<img src="img/logo.png" alt="Kaubuntu.re">
</div>
<h2 class="section-title">Tendances</h2>
</div>
<div class="video-grid">
<?php
2025-04-08 09:12:46 +04:00
// Récupérer les vidéos tendances depuis l'API PeerTube
$trendingVideos = getTrendingVideos();
2025-04-08 06:51:33 +04:00
2025-04-08 09:12:46 +04:00
// Traiter le cas où aucune vidéo n'est trouvée
if (empty($trendingVideos)) {
echo '<div class="no-results">Aucune vidéo disponible pour le moment</div>';
} else {
foreach ($trendingVideos as $video):
2025-04-08 06:51:33 +04:00
?>
<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']; ?>">
<div class="video-play-icon">
<i class="fas fa-play-circle"></i>
</div>
2025-04-08 09:12:46 +04:00
<div class="video-duration"><?php echo formatDuration($video['duration']); ?></div>
2025-04-08 06:51:33 +04:00
</div>
<div class="video-info">
<h3 class="video-title"><?php echo $video['title']; ?></h3>
2025-04-09 08:40:03 +04:00
<div class="video-channel">
<?php if (strpos($video['channelAvatar'], 'default-avatar.png') !== 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 $video['channel']; ?>" class="channel-avatar">
<?php endif; ?>
<span class="channel-name"><?php echo $video['channel']; ?></span>
</div>
2025-04-08 06:51:33 +04:00
<div class="video-metadata">
2025-04-08 10:49:46 +04:00
<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>
2025-04-08 06:51:33 +04:00
</div>
2025-04-08 06:37:14 +04:00
</div>
</div>
2025-04-08 09:12:46 +04:00
<?php
endforeach;
}
?>
2025-04-08 06:51:33 +04:00
</div>
<button class="view-more">Voir plus</button>
</div>
2025-04-08 15:36:33 +04:00
<!-- Sections par catégorie -->
<?php
// Récupérer les catégories avec leurs vidéos
$displayCategories = getDisplayCategories();
// Afficher chaque catégorie qui a des vidéos
foreach ($displayCategories as $category):
if (!empty($category['videos'])):
?>
<!-- Section Catégorie: <?php echo $category['name']; ?> -->
2025-04-08 16:33:56 +04:00
<div class="video-section" data-category-id="<?php echo $category['id']; ?>">
2025-04-08 15:36:33 +04:00
<div class="section-header">
<div class="section-logo">
<img src="img/logo.png" alt="Kaubuntu.re">
</div>
<h2 class="section-title"><?php echo $category['name']; ?></h2>
</div>
<div class="video-grid">
<?php foreach ($category['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 $video['title']; ?>">
<div class="video-play-icon">
<i class="fas fa-play-circle"></i>
</div>
<div class="video-duration"><?php echo formatDuration($video['duration']); ?></div>
</div>
<div class="video-info">
<h3 class="video-title"><?php echo $video['title']; ?></h3>
2025-04-09 08:40:03 +04:00
<div class="video-channel">
<?php if (strpos($video['channelAvatar'], 'default-avatar.png') !== 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 $video['channel']; ?>" class="channel-avatar">
<?php endif; ?>
<span class="channel-name"><?php echo $video['channel']; ?></span>
</div>
2025-04-08 15:36:33 +04:00
<div class="video-metadata">
<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>
<?php endforeach; ?>
</div>
<button class="view-more">Voir plus</button>
</div>
<?php
endif;
endforeach;
?>
2025-04-10 14:39:27 +04:00
<!-- Section Flexbox pour Informations et Tendances Hashtags -->
<div class="info-tags-container">
<?php if (defined('MOVEMENT_DESCRIPTION') && !empty(MOVEMENT_DESCRIPTION)): ?>
<!-- Section Informations -->
<div class="info-section">
<h2 class="info-header"><?php echo MOVEMENT_DESCRIPTION; ?></h2>
<figure class="movement-figure">
<img src="img/movement_presentation.png" alt="Les 5 objectifs de Ka-Ubuntu" class="info-image">
<figcaption class="movement-caption">
Nos 5 points de lutte. 1. Activer la conscience politique et historique de notre peuple 2. Défendre le droit à I'autodétermination des peuples africains et afro-descendants 3. Arracher I'indépendance de notre pays La Réunion 4. Établir une unité politique, économique et culturelle de l'Afrique 5. Construire une solidarité entre les peuples opprimés
</figcaption>
</figure>
2025-04-08 06:51:33 +04:00
</div>
2025-04-10 14:39:27 +04:00
<?php endif; ?>
2025-04-08 06:51:33 +04:00
2025-04-10 14:39:27 +04:00
<!-- Section Tendances Hashtags -->
<div class="tags-section-container">
<h2 class="section-title centered">Tendances</h2>
<div class="tags-section">
<?php
if (defined('POPULAR_TAGS') && !empty(POPULAR_TAGS)):
foreach (POPULAR_TAGS as $tag):
$encodedTag = urlencode('#' . $tag);
?>
<a href="recherche.php?q=<?php echo $encodedTag; ?>" class="tag">#<?php echo htmlspecialchars($tag); ?></a>
<?php
endforeach;
endif;
?>
</div>
</div>
2025-04-08 06:51:33 +04:00
</div>
2025-04-08 06:37:14 +04:00
</div>
2025-04-09 17:07:10 +04:00
<?php include 'includes/footer.php'; ?>
2025-04-09 16:17:12 +04:00
<?php include 'includes/mobile-menu.php'; ?>
2025-04-08 06:37:14 +04:00
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="js/main.js"></script>
2025-04-08 08:22:02 +04:00
<script src="js/mastodon-timeline.umd.js"></script>
2025-04-08 17:14:34 +04:00
<script src="js/mastodon-config.php"></script>
2025-04-08 06:37:14 +04:00
</body>
</html>