dynamics video page

This commit is contained in:
2025-04-08 09:34:19 +04:00
parent 1d57a168ce
commit 2c8de68d20
+141 -129
View File
@@ -1,66 +1,92 @@
<?php <?php
// Dans un projet réel, on récupérerait l'ID de la vidéo et on ferait une requête à l'API PeerTube // Inclure la configuration
$videoId = isset($_GET['id']) ? intval($_GET['id']) : 1; require_once 'includes/config.php';
// Exemple de données vidéo // Récupérer l'ID de la vidéo depuis l'URL
$videos = [ $videoId = isset($_GET['id']) ? $_GET['id'] : '';
1 => [
'id' => 1,
'title' => 'L\'indépendance de La Réunion : KA UBUNTU À BAKOU',
'url' => 'https://peertube.example.com/embed/1',
'description' => 'Une introduction complète au monde de la culture libre et des logiciels open source. Découvrez les principes fondamentaux, les licences, et comment contribuer à des projets open source.',
'channel' => 'Tech Libre',
'channelId' => 1,
'views' => 15420,
'likes' => 1245,
'date' => '29 mars 2025',
'tags' => ['#Bakou', '#LaRéunion', '#Indépendance']
],
2 => [
'id' => 2,
'title' => '#1 Départementalisation de La Réunion (1946) : l\'heure du bilan ?',
'url' => 'https://peertube.example.com/embed/2',
'description' => 'Partez à la découverte des sentiers cachés de La Réunion. Cette vidéo vous guide à travers des paysages magnifiques et peu connus de l\'île.',
'channel' => 'Île Aventure',
'channelId' => 2,
'views' => 8745,
'likes' => 732,
'date' => '29 mars 2025',
'tags' => ['#LaRéunion', '#Histoire', '#Politique']
],
// Autres vidéos...
];
// Récupération de la vidéo // Vérifier si l'ID est valide
$video = isset($videos[$videoId]) ? $videos[$videoId] : $videos[1]; if (empty($videoId)) {
// Rediriger vers la page d'accueil si aucun ID n'est spécifié
// Vidéos suggérées (normalement récupérées par un algorithme de recommandation) header('Location: index.php');
function getSuggestedVideos($videos, $currentId) { exit;
$suggested = [];
foreach ($videos as $id => $video) {
if ($id != $currentId) {
$suggested[] = $video;
}
}
return $suggested;
} }
$suggestedVideos = getSuggestedVideos($videos, $videoId); // Récupérer les détails de la vidéo via l'API PeerTube
$videoData = callPeerTubeApi('videos/' . $videoId);
// Formatage des données // Vérifier si la vidéo existe
function formatViewCount($views) { if (empty($videoData) || isset($videoData['error'])) {
if ($views >= 1000000) { // Gérer l'erreur : vidéo non trouvée
return round($views / 1000000, 1) . 'M'; $videoNotFound = true;
} elseif ($views >= 1000) { } else {
return round($views / 1000, 1) . 'K'; // Formater les données de la vidéo
} else { $video = [
return $views; 'id' => $videoData['uuid'],
'title' => $videoData['name'],
'url' => PEERTUBE_URL . '/videos/embed/' . $videoData['uuid'],
'description' => $videoData['description'] ?? '',
'channel' => $videoData['channel']['displayName'],
'channelId' => $videoData['channel']['id'],
'channelHandle' => $videoData['channel']['name'],
'views' => $videoData['views'],
'likes' => $videoData['likes'],
'date' => $videoData['publishedAt'],
'tags' => $videoData['tags'] ?? []
];
// Récupérer l'image de la chaîne
$channelAvatar = 'img/default-avatar.jpg';
if (isset($videoData['channel']['avatar']) && isset($videoData['channel']['avatar']['path'])) {
$channelAvatar = PEERTUBE_URL . $videoData['channel']['avatar']['path'];
} }
}
function formatDate($dateString) { // Récupérer les vidéos suggérées (de la même chaîne)
$date = new DateTime($dateString); $channelVideos = callPeerTubeApi('video-channels/' . $video['channelHandle'] . '/videos', [
return $date->format('d/m/Y'); 'count' => 5,
'isLocal' => true
]);
$suggestedVideos = [];
if (!empty($channelVideos['data'])) {
foreach ($channelVideos['data'] as $suggVid) {
// Ne pas inclure la vidéo courante dans les suggestions
if ($suggVid['uuid'] !== $videoId) {
$suggestedVideos[] = [
'id' => $suggVid['uuid'],
'title' => $suggVid['name'],
'thumbnail' => PEERTUBE_URL . $suggVid['thumbnailPath'],
'views' => $suggVid['views'],
'date' => $suggVid['publishedAt'],
'duration' => $suggVid['duration'],
'channel' => $suggVid['channel']['displayName']
];
}
}
}
// Si pas assez de vidéos de la même chaîne, ajouter des vidéos tendances
if (count($suggestedVideos) < 5) {
$trendingVideos = getTrendingVideos(10);
foreach ($trendingVideos as $trendVid) {
if ($trendVid['id'] !== $videoId && count($suggestedVideos) < 5) {
// Vérifier que cette vidéo n'est pas déjà dans les suggestions
$found = false;
foreach ($suggestedVideos as $sv) {
if ($sv['id'] === $trendVid['id']) {
$found = true;
break;
}
}
if (!$found) {
$suggestedVideos[] = $trendVid;
}
}
}
}
} }
?> ?>
@@ -69,7 +95,7 @@ function formatDate($dateString) {
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $video['title']; ?> - Kaubuntu.re</title> <title><?php echo !empty($video['title']) ? $video['title'] . ' - ' : ''; ?>Kaubuntu.re</title>
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/video-page.css"> <link rel="stylesheet" href="css/video-page.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
@@ -155,25 +181,38 @@ function formatDate($dateString) {
</div> </div>
</div> </div>
<?php if (isset($videoNotFound)): ?>
<!-- Message d'erreur si la vidéo n'existe pas -->
<div class="error-message">
<i class="fas fa-exclamation-triangle"></i>
<h2>Vidéo non trouvée</h2>
<p>La vidéo que vous recherchez n'existe pas ou a été supprimée.</p>
<a href="index.php" class="btn-primary">Retour à l'accueil</a>
</div>
<?php else: ?>
<!-- Section vidéo --> <!-- Section vidéo -->
<div class="video-container"> <div class="video-page">
<div class="video-player-container">
<div class="video-player"> <div class="video-player">
<iframe src="<?php echo $video['url']; ?>" frameborder="0" allowfullscreen></iframe> <iframe src="<?php echo $video['url']; ?>" frameborder="0" allowfullscreen></iframe>
</div> </div>
</div>
<div class="video-details"> <div class="video-content">
<div class="video-primary-info">
<h1 class="video-title"><?php echo $video['title']; ?></h1> <h1 class="video-title"><?php echo $video['title']; ?></h1>
<div class="video-info"> <div class="video-info">
<div class="video-metadata"> <div class="video-metadata">
<span class="video-views"><?php echo number_format($video['views']); ?> vues</span> <span class="video-views"><?php echo formatViewCount($video['views']); ?> vues</span>
<span class="video-date"><?php echo $video['date']; ?></span> <span class="video-date"><?php echo formatDate($video['date']); ?></span>
</div> </div>
<div class="video-actions"> <div class="video-actions">
<button class="action-button"> <button class="action-button">
<i class="fas fa-thumbs-up"></i> <i class="fas fa-thumbs-up"></i>
<span><?php echo number_format($video['likes']); ?></span> <span><?php echo formatViewCount($video['likes']); ?></span>
</button> </button>
<button class="action-button"> <button class="action-button">
<i class="fas fa-share"></i> <i class="fas fa-share"></i>
@@ -185,10 +224,12 @@ function formatDate($dateString) {
</button> </button>
</div> </div>
</div> </div>
</div>
<div class="video-secondary-info">
<div class="channel-info"> <div class="channel-info">
<div class="channel-avatar"> <div class="channel-avatar">
<img src="img/channels/<?php echo $video['channelId']; ?>.jpg" alt="<?php echo $video['channel']; ?>"> <img src="<?php echo $channelAvatar; ?>" alt="<?php echo $video['channel']; ?>">
</div> </div>
<div class="channel-details"> <div class="channel-details">
<h3 class="channel-name"><?php echo $video['channel']; ?></h3> <h3 class="channel-name"><?php echo $video['channel']; ?></h3>
@@ -196,24 +237,54 @@ function formatDate($dateString) {
</div> </div>
<div class="video-description"> <div class="video-description">
<?php echo $video['description']; ?> <?php echo nl2br(htmlspecialchars($video['description'])); ?>
</div> </div>
<?php if (!empty($video['tags'])): ?>
<div class="video-tags"> <div class="video-tags">
<?php foreach ($video['tags'] as $tag): ?> <?php foreach ($video['tags'] as $tag): ?>
<a href="search.php?q=<?php echo urlencode($tag); ?>" class="tag"><?php echo $tag; ?></a> <a href="search.php?q=<?php echo urlencode($tag); ?>" class="tag">#<?php echo htmlspecialchars($tag); ?></a>
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>
<?php endif; ?>
</div> </div>
</div> </div>
<div class="video-suggestions">
<h3>Vidéos suggérées</h3>
<?php if (!empty($suggestedVideos)): ?>
<div class="suggestion-list">
<?php foreach ($suggestedVideos as $suggestedVideo): ?>
<a href="video.php?id=<?php echo $suggestedVideo['id']; ?>" class="suggested-video">
<div class="suggested-video-thumbnail">
<img src="<?php echo $suggestedVideo['thumbnail']; ?>" alt="<?php echo $suggestedVideo['title']; ?>">
<span class="suggested-video-duration"><?php echo formatDuration($suggestedVideo['duration']); ?></span>
</div>
<div class="suggested-video-info">
<h4 class="suggested-video-title"><?php echo $suggestedVideo['title']; ?></h4>
<div class="suggested-video-channel"><?php echo $suggestedVideo['channel']; ?></div>
<div class="suggested-video-metadata">
<span class="suggested-video-views"><?php echo formatViewCount($suggestedVideo['views']); ?> vues</span>
<span class="suggested-video-date"><?php echo formatDate($suggestedVideo['date']); ?></span>
</div>
</div>
</a>
<?php endforeach; ?>
</div>
<?php else: ?>
<p>Aucune vidéo suggérée disponible</p>
<?php endif; ?>
</div>
<?php if (ENABLE_COMMENTS): ?>
<!-- Section commentaires --> <!-- Section commentaires -->
<div class="comments-section"> <div class="comments-section">
<h2 class="section-title">Commentaires</h2> <h3>Commentaires</h3>
<div class="comment-form"> <div class="comment-form">
<div class="comment-avatar"> <div class="comment-avatar">
<img src="img/avatars/user.jpg" alt="Avatar"> <img src="img/default-avatar.jpg" alt="Avatar">
</div> </div>
<div class="comment-input"> <div class="comment-input">
<textarea placeholder="Ajouter un commentaire public..."></textarea> <textarea placeholder="Ajouter un commentaire public..."></textarea>
@@ -225,71 +296,12 @@ function formatDate($dateString) {
</div> </div>
<div class="comments-list"> <div class="comments-list">
<div class="comment"> <p class="no-comments">Les commentaires sont en cours de développement.</p>
<div class="comment-avatar">
<img src="img/avatars/user1.jpg" alt="Avatar">
</div>
<div class="comment-content">
<div class="comment-author">Marie Dupont</div>
<div class="comment-date">Il y a 2 jours</div>
<div class="comment-text">
Excellente vidéo ! J'ai beaucoup appris sur l'histoire de La Réunion. Merci pour ce contenu de qualité.
</div>
<div class="comment-actions">
<button><i class="fas fa-thumbs-up"></i> 15</button>
<button><i class="fas fa-thumbs-down"></i></button>
<button>Répondre</button>
</div> </div>
</div> </div>
<?php endif; ?>
</div> </div>
<?php endif; ?>
<div class="comment">
<div class="comment-avatar">
<img src="img/avatars/user2.jpg" alt="Avatar">
</div>
<div class="comment-content">
<div class="comment-author">Jean Martin</div>
<div class="comment-date">Il y a 5 jours</div>
<div class="comment-text">
Pourriez-vous faire une vidéo plus détaillée sur certains aspects abordés ici ? J'aimerais approfondir ce sujet.
</div>
<div class="comment-actions">
<button><i class="fas fa-thumbs-up"></i> 7</button>
<button><i class="fas fa-thumbs-down"></i></button>
<button>Répondre</button>
</div>
</div>
</div>
</div>
</div>
<!-- Section vidéos suggérées -->
<div class="suggested-videos">
<h2 class="section-title">Vidéos suggérées</h2>
<div class="video-grid">
<?php foreach ($suggestedVideos as $suggestedVideo): ?>
<div class="video-card" data-video-id="<?php echo $suggestedVideo['id']; ?>">
<div class="video-thumbnail">
<img src="img/video-thumbnails/recent-<?php echo $suggestedVideo['id']; ?>.jpg" alt="<?php echo $suggestedVideo['title']; ?>">
<div class="video-play-icon">
<i class="fas fa-play-circle"></i>
</div>
</div>
<div class="video-info">
<h3 class="video-title"><?php echo $suggestedVideo['title']; ?></h3>
<div class="video-metadata">
<span class="video-tag"><?php echo $suggestedVideo['tags'][0]; ?></span>
<div>
<span class="video-date"><?php echo $suggestedVideo['date']; ?></span>
<span class="video-views"><?php echo number_format($suggestedVideo['views']); ?> vues</span>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- Footer --> <!-- Footer -->
<div class="footer"> <div class="footer">
@@ -305,7 +317,7 @@ function formatDate($dateString) {
</div> </div>
<div class="footer-contact">CONTACT</div> <div class="footer-contact">CONTACT</div>
<div class="footer-email">zinfos@kaubuntu.com</div> <div class="footer-email"><?php echo CONTACT_EMAIL; ?></div>
</div> </div>
</div> </div>