2025-04-08 06:37:14 +04:00
|
|
|
<?php
|
2025-04-08 09:34:19 +04:00
|
|
|
// Inclure la configuration
|
|
|
|
|
require_once 'includes/config.php';
|
2025-04-08 06:37:14 +04:00
|
|
|
|
2025-04-08 09:34:19 +04:00
|
|
|
// Récupérer l'ID de la vidéo depuis l'URL
|
|
|
|
|
$videoId = isset($_GET['id']) ? $_GET['id'] : '';
|
2025-04-08 06:37:14 +04:00
|
|
|
|
2025-04-08 09:34:19 +04:00
|
|
|
// Vérifier si l'ID est valide
|
|
|
|
|
if (empty($videoId)) {
|
|
|
|
|
// Rediriger vers la page d'accueil si aucun ID n'est spécifié
|
|
|
|
|
header('Location: index.php');
|
|
|
|
|
exit;
|
2025-04-08 06:51:33 +04:00
|
|
|
}
|
|
|
|
|
|
2025-04-08 09:34:19 +04:00
|
|
|
// Récupérer les détails de la vidéo via l'API PeerTube
|
|
|
|
|
$videoData = callPeerTubeApi('videos/' . $videoId);
|
|
|
|
|
|
|
|
|
|
// Vérifier si la vidéo existe
|
|
|
|
|
if (empty($videoData) || isset($videoData['error'])) {
|
|
|
|
|
// Gérer l'erreur : vidéo non trouvée
|
|
|
|
|
$videoNotFound = true;
|
|
|
|
|
} else {
|
|
|
|
|
// Formater les données de la vidéo
|
|
|
|
|
$video = [
|
|
|
|
|
'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'] ?? []
|
|
|
|
|
];
|
2025-04-08 06:51:33 +04:00
|
|
|
|
2025-04-08 09:34:19 +04:00
|
|
|
// 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'];
|
2025-04-08 06:37:14 +04:00
|
|
|
}
|
|
|
|
|
|
2025-04-08 09:34:19 +04:00
|
|
|
// Récupérer les vidéos suggérées (de la même chaîne)
|
|
|
|
|
$channelVideos = callPeerTubeApi('video-channels/' . $video['channelHandle'] . '/videos', [
|
|
|
|
|
'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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
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">
|
2025-04-08 09:34:19 +04:00
|
|
|
<title><?php echo !empty($video['title']) ? $video['title'] . ' - ' : ''; ?>Kaubuntu.re</title>
|
2025-04-08 06:37:14 +04:00
|
|
|
<link rel="stylesheet" href="css/styles.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">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2025-04-08 06:51:33 +04:00
|
|
|
<!-- Sidebar de navigation -->
|
|
|
|
|
<div class="sidebar">
|
|
|
|
|
<a href="index.php" class="logo">
|
|
|
|
|
<img src="img/logo.png" alt="Kaubuntu.re">
|
|
|
|
|
</a>
|
2025-04-08 06:37:14 +04:00
|
|
|
|
2025-04-08 06:51:33 +04:00
|
|
|
<nav class="sidebar-nav">
|
|
|
|
|
<a href="index.php" class="nav-item">
|
|
|
|
|
<i class="fas fa-home"></i> Accueil
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#" class="nav-item">
|
|
|
|
|
<i class="fas fa-broadcast-tower"></i> Direct
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<div class="nav-divider"></div>
|
|
|
|
|
|
|
|
|
|
<a href="#" class="nav-item">
|
|
|
|
|
<i class="fas fa-compass"></i> Explorer
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#" class="nav-item">
|
|
|
|
|
<i class="fas fa-globe"></i> Actualité
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#" class="nav-item">
|
|
|
|
|
<i class="fas fa-music"></i> Musique
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#" class="nav-item">
|
|
|
|
|
<i class="fas fa-monument"></i> Histoire
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#" class="nav-item">
|
|
|
|
|
<i class="fas fa-running"></i> Sport
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<div class="nav-divider"></div>
|
|
|
|
|
|
|
|
|
|
<div class="category-title">
|
|
|
|
|
<i class="fas fa-hashtag"></i> Hashtags
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<a href="#" class="tag-item">
|
|
|
|
|
<div class="tag-dot"></div> Interview
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#" class="tag-item">
|
|
|
|
|
<div class="tag-dot"></div> Conférence
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#" class="tag-item">
|
|
|
|
|
<div class="tag-dot"></div> Colonialisme
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#" class="tag-item">
|
|
|
|
|
<div class="tag-dot"></div> La Réunion
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#" class="tag-item">
|
|
|
|
|
<div class="tag-dot"></div> Afrique
|
|
|
|
|
</a>
|
|
|
|
|
</nav>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Contenu principal -->
|
|
|
|
|
<div class="main-content">
|
|
|
|
|
<!-- Header avec barre de recherche et icônes -->
|
|
|
|
|
<div class="header">
|
|
|
|
|
<div class="search-container">
|
|
|
|
|
<form action="search.php" method="get">
|
|
|
|
|
<input type="text" name="q" placeholder="Recherche">
|
|
|
|
|
<button type="submit"><i class="fas fa-search"></i></button>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="social-icons">
|
|
|
|
|
<a href="#" class="icon-button"><i class="fab fa-facebook"></i></a>
|
|
|
|
|
<a href="#" class="icon-button"><i class="fab fa-youtube"></i></a>
|
|
|
|
|
<a href="#" class="icon-button"><i class="fab fa-instagram"></i></a>
|
|
|
|
|
<a href="#" class="icon-button"><i class="fas fa-ellipsis-h"></i></a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="action-icons">
|
|
|
|
|
<a href="#" class="icon-button"><i class="fas fa-film"></i></a>
|
|
|
|
|
<button class="dark-mode-toggle"><i class="fas fa-moon"></i></button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2025-04-08 09:34:19 +04:00
|
|
|
<?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: ?>
|
2025-04-08 06:51:33 +04:00
|
|
|
<!-- Section vidéo -->
|
2025-04-08 09:34:19 +04:00
|
|
|
<div class="video-page">
|
|
|
|
|
<div class="video-player-container">
|
|
|
|
|
<div class="video-player">
|
|
|
|
|
<iframe src="<?php echo $video['url']; ?>" frameborder="0" allowfullscreen></iframe>
|
|
|
|
|
</div>
|
2025-04-08 06:37:14 +04:00
|
|
|
</div>
|
|
|
|
|
|
2025-04-08 09:34:19 +04:00
|
|
|
<div class="video-content">
|
|
|
|
|
<div class="video-primary-info">
|
|
|
|
|
<h1 class="video-title"><?php echo $video['title']; ?></h1>
|
2025-04-08 06:37:14 +04:00
|
|
|
|
2025-04-08 09:34:19 +04:00
|
|
|
<div class="video-info">
|
|
|
|
|
<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 class="video-actions">
|
|
|
|
|
<button class="action-button">
|
|
|
|
|
<i class="fas fa-thumbs-up"></i>
|
|
|
|
|
<span><?php echo formatViewCount($video['likes']); ?></span>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="action-button">
|
|
|
|
|
<i class="fas fa-share"></i>
|
|
|
|
|
<span>Partager</span>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="action-button">
|
|
|
|
|
<i class="fas fa-download"></i>
|
|
|
|
|
<span>Télécharger</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
2025-04-08 06:37:14 +04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2025-04-08 09:34:19 +04:00
|
|
|
<div class="video-secondary-info">
|
|
|
|
|
<div class="channel-info">
|
|
|
|
|
<div class="channel-avatar">
|
|
|
|
|
<img src="<?php echo $channelAvatar; ?>" alt="<?php echo $video['channel']; ?>">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="channel-details">
|
|
|
|
|
<h3 class="channel-name"><?php echo $video['channel']; ?></h3>
|
|
|
|
|
</div>
|
2025-04-08 06:37:14 +04:00
|
|
|
</div>
|
2025-04-08 09:34:19 +04:00
|
|
|
|
|
|
|
|
<div class="video-description">
|
|
|
|
|
<?php echo nl2br(htmlspecialchars($video['description'])); ?>
|
2025-04-08 06:37:14 +04:00
|
|
|
</div>
|
2025-04-08 09:34:19 +04:00
|
|
|
|
|
|
|
|
<?php if (!empty($video['tags'])): ?>
|
|
|
|
|
<div class="video-tags">
|
|
|
|
|
<?php foreach ($video['tags'] as $tag): ?>
|
|
|
|
|
<a href="search.php?q=<?php echo urlencode($tag); ?>" class="tag">#<?php echo htmlspecialchars($tag); ?></a>
|
|
|
|
|
<?php endforeach; ?>
|
|
|
|
|
</div>
|
|
|
|
|
<?php endif; ?>
|
2025-04-08 06:51:33 +04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2025-04-08 09:34:19 +04:00
|
|
|
<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; ?>
|
2025-04-08 06:37:14 +04:00
|
|
|
</div>
|
2025-04-08 09:34:19 +04:00
|
|
|
<?php else: ?>
|
|
|
|
|
<p>Aucune vidéo suggérée disponible</p>
|
|
|
|
|
<?php endif; ?>
|
2025-04-08 06:51:33 +04:00
|
|
|
</div>
|
|
|
|
|
|
2025-04-08 09:34:19 +04:00
|
|
|
<?php if (ENABLE_COMMENTS): ?>
|
|
|
|
|
<!-- Section commentaires -->
|
|
|
|
|
<div class="comments-section">
|
|
|
|
|
<h3>Commentaires</h3>
|
2025-04-08 06:51:33 +04:00
|
|
|
|
2025-04-08 09:34:19 +04:00
|
|
|
<div class="comment-form">
|
2025-04-08 06:51:33 +04:00
|
|
|
<div class="comment-avatar">
|
2025-04-08 09:34:19 +04:00
|
|
|
<img src="img/default-avatar.jpg" alt="Avatar">
|
2025-04-08 06:51:33 +04:00
|
|
|
</div>
|
2025-04-08 09:34:19 +04:00
|
|
|
<div class="comment-input">
|
|
|
|
|
<textarea placeholder="Ajouter un commentaire public..."></textarea>
|
|
|
|
|
<div class="comment-buttons">
|
|
|
|
|
<button class="comment-cancel">Annuler</button>
|
|
|
|
|
<button class="comment-submit">Commenter</button>
|
2025-04-08 06:37:14 +04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-04-08 09:34:19 +04:00
|
|
|
|
|
|
|
|
<div class="comments-list">
|
|
|
|
|
<p class="no-comments">Les commentaires sont en cours de développement.</p>
|
2025-04-08 06:37:14 +04:00
|
|
|
</div>
|
2025-04-08 06:51:33 +04:00
|
|
|
</div>
|
2025-04-08 09:34:19 +04:00
|
|
|
<?php endif; ?>
|
2025-04-08 06:51:33 +04:00
|
|
|
</div>
|
2025-04-08 09:34:19 +04:00
|
|
|
<?php endif; ?>
|
2025-04-08 06:37:14 +04:00
|
|
|
|
2025-04-08 06:51:33 +04:00
|
|
|
<!-- Footer -->
|
|
|
|
|
<div class="footer">
|
|
|
|
|
<div class="footer-logo">
|
|
|
|
|
<img src="img/logo.png" alt="Kaubuntu.re">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="footer-social">
|
|
|
|
|
<a href="#"><i class="fab fa-facebook"></i></a>
|
|
|
|
|
<a href="#"><i class="fab fa-youtube"></i></a>
|
|
|
|
|
<a href="#"><i class="fab fa-instagram"></i></a>
|
|
|
|
|
<a href="#"><i class="fab fa-tiktok"></i></a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="footer-contact">CONTACT</div>
|
2025-04-08 09:34:19 +04:00
|
|
|
<div class="footer-email"><?php echo CONTACT_EMAIL; ?></div>
|
2025-04-08 06:51:33 +04:00
|
|
|
</div>
|
2025-04-08 06:37:14 +04:00
|
|
|
</div>
|
|
|
|
|
|
2025-04-08 06:51:33 +04:00
|
|
|
<!-- Menu mobile (masqué par défaut) -->
|
|
|
|
|
<button class="mobile-menu-toggle">
|
|
|
|
|
<i class="fas fa-bars"></i>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<div class="mobile-menu">
|
|
|
|
|
<button class="mobile-menu-close">
|
|
|
|
|
<i class="fas fa-times"></i>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<div class="search-container">
|
|
|
|
|
<form action="search.php" method="get">
|
|
|
|
|
<input type="text" name="q" placeholder="Recherche">
|
|
|
|
|
<button type="submit"><i class="fas fa-search"></i></button>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<a href="index.php" class="nav-item">
|
|
|
|
|
<i class="fas fa-home"></i> Accueil
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#" class="nav-item">
|
|
|
|
|
<i class="fas fa-broadcast-tower"></i> Direct
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<div class="nav-divider"></div>
|
|
|
|
|
|
|
|
|
|
<a href="#" class="nav-item">
|
|
|
|
|
<i class="fas fa-compass"></i> Explorer
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#" class="nav-item">
|
|
|
|
|
<i class="fas fa-globe"></i> Actualité
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#" class="nav-item">
|
|
|
|
|
<i class="fas fa-music"></i> Musique
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#" class="nav-item">
|
|
|
|
|
<i class="fas fa-monument"></i> Histoire
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#" class="nav-item">
|
|
|
|
|
<i class="fas fa-running"></i> Sport
|
|
|
|
|
</a>
|
2025-04-08 06:37:14 +04:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
|
|
|
|
<script src="js/main.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
