227 lines
10 KiB
PHP
227 lines
10 KiB
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
|
||
|
|
$videoId = isset($_GET['id']) ? intval($_GET['id']) : 1;
|
||
|
|
|
||
|
|
// Exemple de données vidéo
|
||
|
|
$videos = [
|
||
|
|
1 => [
|
||
|
|
'id' => 1,
|
||
|
|
'title' => 'Introduction à la culture libre et aux logiciels open source',
|
||
|
|
'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' => '2023-11-15',
|
||
|
|
'tags' => ['open source', 'logiciels libres', 'tech', 'formation']
|
||
|
|
],
|
||
|
|
2 => [
|
||
|
|
'id' => 2,
|
||
|
|
'title' => 'La Réunion: Découverte des sentiers cachés',
|
||
|
|
'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' => '2023-12-02',
|
||
|
|
'tags' => ['La Réunion', 'voyage', 'randonnée', 'nature']
|
||
|
|
],
|
||
|
|
// Autres vidéos...
|
||
|
|
];
|
||
|
|
|
||
|
|
// Récupération de la vidéo
|
||
|
|
$video = isset($videos[$videoId]) ? $videos[$videoId] : $videos[1];
|
||
|
|
|
||
|
|
// Formatage des données
|
||
|
|
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);
|
||
|
|
return $date->format('d/m/Y');
|
||
|
|
}
|
||
|
|
?>
|
||
|
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="fr">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title><?php echo $video['title']; ?> - Kaubuntu.re</title>
|
||
|
|
<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>
|
||
|
|
<div class="container">
|
||
|
|
<?php include 'includes/header.php'; ?>
|
||
|
|
|
||
|
|
<main class="video-page">
|
||
|
|
<div class="video-player-container">
|
||
|
|
<div class="video-player">
|
||
|
|
<iframe src="<?php echo $video['url']; ?>" frameborder="0" allowfullscreen></iframe>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="video-content">
|
||
|
|
<div class="video-primary-info">
|
||
|
|
<h1 class="video-title"><?php echo $video['title']; ?></h1>
|
||
|
|
|
||
|
|
<div class="video-stats">
|
||
|
|
<span class="video-views"><?php echo formatViewCount($video['views']); ?> vues</span>
|
||
|
|
<span class="video-date">Publié le <?php echo formatDate($video['date']); ?></span>
|
||
|
|
|
||
|
|
<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-bookmark"></i>
|
||
|
|
<span>Enregistrer</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="video-secondary-info">
|
||
|
|
<div class="channel-info">
|
||
|
|
<div class="channel-image">
|
||
|
|
<img src="img/channels/<?php echo $video['channelId']; ?>.jpg" alt="<?php echo $video['channel']; ?>">
|
||
|
|
</div>
|
||
|
|
<div class="channel-details">
|
||
|
|
<h3 class="channel-name"><?php echo $video['channel']; ?></h3>
|
||
|
|
<button class="subscribe-button">S'abonner</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="video-description">
|
||
|
|
<p><?php echo $video['description']; ?></p>
|
||
|
|
|
||
|
|
<div class="video-tags">
|
||
|
|
<?php foreach ($video['tags'] as $tag): ?>
|
||
|
|
<a href="search.php?q=<?php echo urlencode($tag); ?>" class="tag">#<?php echo $tag; ?></a>
|
||
|
|
<?php endforeach; ?>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="video-comments">
|
||
|
|
<h2>Commentaires</h2>
|
||
|
|
<div class="comment-form">
|
||
|
|
<textarea placeholder="Ajouter un commentaire..."></textarea>
|
||
|
|
<button class="comment-submit">Commenter</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="comments-list">
|
||
|
|
<!-- Les commentaires seraient chargés dynamiquement dans un vrai projet -->
|
||
|
|
<div class="comment">
|
||
|
|
<div class="comment-avatar">
|
||
|
|
<img src="img/avatars/user1.jpg" alt="Utilisateur">
|
||
|
|
</div>
|
||
|
|
<div class="comment-content">
|
||
|
|
<div class="comment-header">
|
||
|
|
<span class="comment-author">Marie Dupont</span>
|
||
|
|
<span class="comment-date">Il y a 2 jours</span>
|
||
|
|
</div>
|
||
|
|
<div class="comment-text">
|
||
|
|
<p>Excellente vidéo ! J'ai beaucoup appris sur ce sujet. Merci pour ce contenu de qualité.</p>
|
||
|
|
</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 class="comment">
|
||
|
|
<div class="comment-avatar">
|
||
|
|
<img src="img/avatars/user2.jpg" alt="Utilisateur">
|
||
|
|
</div>
|
||
|
|
<div class="comment-content">
|
||
|
|
<div class="comment-header">
|
||
|
|
<span class="comment-author">Jean Martin</span>
|
||
|
|
<span class="comment-date">Il y a 5 jours</span>
|
||
|
|
</div>
|
||
|
|
<div class="comment-text">
|
||
|
|
<p>Pourriez-vous faire une vidéo plus détaillée sur certains aspects abordés ici ? J'aimerais approfondir ce sujet.</p>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<aside class="related-videos">
|
||
|
|
<h2>Vidéos suggérées</h2>
|
||
|
|
<div class="related-videos-list">
|
||
|
|
<?php
|
||
|
|
// Dans un vrai projet, on récupérerait des vidéos similaires
|
||
|
|
foreach (array_slice($videos, 0, 5) as $relatedVideo):
|
||
|
|
if ($relatedVideo['id'] != $videoId):
|
||
|
|
?>
|
||
|
|
<div class="related-video-card" data-video-id="<?php echo $relatedVideo['id']; ?>">
|
||
|
|
<div class="related-video-thumbnail">
|
||
|
|
<img src="img/video-thumbnails/featured-<?php echo $relatedVideo['id']; ?>.jpg" alt="<?php echo $relatedVideo['title']; ?>">
|
||
|
|
</div>
|
||
|
|
<div class="related-video-info">
|
||
|
|
<h3 class="related-video-title"><?php echo $relatedVideo['title']; ?></h3>
|
||
|
|
<div class="related-video-channel"><?php echo $relatedVideo['channel']; ?></div>
|
||
|
|
<div class="related-video-metadata">
|
||
|
|
<span class="related-video-views"><?php echo formatViewCount($relatedVideo['views']); ?> vues</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<?php
|
||
|
|
endif;
|
||
|
|
endforeach;
|
||
|
|
?>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<?php include 'includes/footer.php'; ?>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mobile-menu-overlay" id="mobileMenuOverlay">
|
||
|
|
<?php include 'includes/mobile-menu.php'; ?>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<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 vidéos suggérées
|
||
|
|
const relatedVideoCards = document.querySelectorAll('.related-video-card');
|
||
|
|
|
||
|
|
relatedVideoCards.forEach(card => {
|
||
|
|
card.addEventListener('click', function() {
|
||
|
|
const videoId = this.dataset.videoId;
|
||
|
|
if (videoId) {
|
||
|
|
window.location.href = 'video.php?id=' + videoId;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|