625 lines
34 KiB
PHP
625 lines
34 KiB
PHP
<?php
|
|
// Inclure la configuration
|
|
require_once 'includes/config.php';
|
|
// Inclure le convertisseur Markdown
|
|
require_once 'includes/lib/markdown.php';
|
|
|
|
// Appliquer les en-têtes de sécurité
|
|
setSecurityHeaders();
|
|
|
|
// Récupérer l'ID de la vidéo depuis l'URL
|
|
$videoId = isset($_GET['id']) ? $_GET['id'] : '';
|
|
|
|
// Valider l'ID de la vidéo
|
|
$videoId = validateVideoId($videoId);
|
|
if ($videoId === false) {
|
|
// Rediriger vers la page d'accueil si l'ID est invalide
|
|
header('Location: index.php');
|
|
exit;
|
|
}
|
|
|
|
// 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'] ?? '',
|
|
'truncatedDescription' => $videoData['truncatedDescription'] ?? '',
|
|
'channel' => $videoData['channel']['displayName'],
|
|
'channelId' => $videoData['channel']['id'],
|
|
'channelHandle' => $videoData['channel']['name'],
|
|
'views' => $videoData['views'],
|
|
'likes' => $videoData['likes'],
|
|
'date' => $videoData['publishedAt'],
|
|
'tags' => $videoData['tags'] ?? [],
|
|
'licence' => $videoData['licence'] ?? null
|
|
];
|
|
|
|
// Récupérer l'image de la chaîne
|
|
$channelAvatar = 'img/default-avatar.jpg';
|
|
if (isset($videoData['channel']['avatars'][0]['path'])) {
|
|
$channelAvatar = PEERTUBE_URL . $videoData['channel']['avatars'][0]['path'];
|
|
}
|
|
|
|
// 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) {
|
|
// Récupérer l'avatar de la chaîne
|
|
$suggAvatar = isset($suggVid['channel']['avatars'][0]['path'])
|
|
? PEERTUBE_URL . $suggVid['channel']['avatars'][0]['path']
|
|
: '';
|
|
|
|
$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'],
|
|
'channelAvatar' => $suggAvatar
|
|
];
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><?php echo !empty($video['title']) ? htmlspecialchars($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">
|
|
|
|
<!-- 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">
|
|
|
|
<!-- Meta tags pour le partage sur les réseaux sociaux -->
|
|
<meta property="og:title" content="<?php echo !empty($video['title']) ? htmlspecialchars($video['title']) : 'Vidéo'; ?> - kaubuntu.re">
|
|
<meta property="og:description" content="<?php echo !empty($video['description']) ? htmlspecialchars(substr(strip_tags($video['description']), 0, 200)) . '...' : 'Regardez cette vidéo sur kaubuntu.re'; ?>">
|
|
<?php if (isset($videoData['thumbnailPath'])): ?>
|
|
<meta property="og:image" content="<?php echo PEERTUBE_URL . $videoData['thumbnailPath']; ?>">
|
|
<?php endif; ?>
|
|
<meta property="og:url" content="<?php echo (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; ?>">
|
|
<meta property="og:type" content="video.other">
|
|
<meta property="og:site_name" content="kaubuntu.re">
|
|
|
|
<!-- Meta tags pour Twitter -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="<?php echo !empty($video['title']) ? htmlspecialchars($video['title']) : 'Vidéo'; ?> - kaubuntu.re">
|
|
<meta name="twitter:description" content="<?php echo !empty($video['description']) ? htmlspecialchars(substr(strip_tags($video['description']), 0, 200)) . '...' : 'Regardez cette vidéo sur kaubuntu.re'; ?>">
|
|
<?php if (isset($videoData['thumbnailPath'])): ?>
|
|
<meta name="twitter:image" content="<?php echo PEERTUBE_URL . $videoData['thumbnailPath']; ?>">
|
|
<?php endif; ?>
|
|
</head>
|
|
<body>
|
|
<?php include 'includes/sidebar.php'; ?>
|
|
|
|
<!-- Contenu principal -->
|
|
<div class="main-content">
|
|
<?php include 'includes/header.php'; ?>
|
|
|
|
<?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 -->
|
|
<div class="video-page">
|
|
<div class="video-player-container">
|
|
<div class="video-player">
|
|
<iframe src="<?php echo htmlspecialchars($video['url']); ?>?warningTitle='0'" frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay; fullscreen" title="<?php echo htmlspecialchars($video['title']); ?>"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="video-content">
|
|
<div class="video-primary-info">
|
|
<h1 class="video-title"><?php echo htmlspecialchars($video['title']); ?></h1>
|
|
|
|
<div class="video-info">
|
|
<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 class="video-actions">
|
|
<button disabled class="action-button disabled-button" title="Fonctionnalité disponible uniquement sur <?php echo PEERTUBE_DISPLAY_NAME; ?>">
|
|
<i class="fas fa-thumbs-up"></i>
|
|
<span><?php echo formatViewCount($video['likes']); ?></span>
|
|
</button>
|
|
<button class="action-button" id="share-btn">
|
|
<i class="fas fa-share"></i>
|
|
<span>Partager</span>
|
|
</button>
|
|
<button class="action-button" id="download-btn">
|
|
<i class="fas fa-download"></i>
|
|
<span>Télécharger</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<?php if (!empty($video['licence'])): ?>
|
|
<div class="video-licence">
|
|
<h4 class="licence-title">Licence</h4>
|
|
<?php
|
|
$licenceLabels = [
|
|
1 => "CC BY (Attribution)",
|
|
2 => "CC BY-SA (Attribution - Partage dans les Mêmes Conditions)",
|
|
3 => "CC BY-ND (Attribution - Pas de Modification)",
|
|
4 => "CC BY-NC (Attribution - Pas d'Utilisation Commerciale)",
|
|
5 => "CC BY-NC-SA (Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions)",
|
|
6 => "CC BY-NC-ND (Attribution - Pas d'Utilisation Commerciale - Pas de Modification)",
|
|
7 => "CC0 (Domaine Public)"
|
|
];
|
|
|
|
$licenceUrls = [
|
|
1 => "https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by.png",
|
|
2 => "https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-sa.png",
|
|
3 => "https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nd.png",
|
|
4 => "https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nc.png",
|
|
5 => "https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nc-sa.png",
|
|
6 => "https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nc-nd.png",
|
|
7 => "https://mirrors.creativecommons.org/presskit/buttons/88x31/png/cc-zero.png"
|
|
];
|
|
|
|
$licenceInfoUrls = [
|
|
1 => "https://creativecommons.org/licenses/by/4.0/deed.fr",
|
|
2 => "https://creativecommons.org/licenses/by-sa/4.0/deed.fr",
|
|
3 => "https://creativecommons.org/licenses/by-nd/4.0/deed.fr",
|
|
4 => "https://creativecommons.org/licenses/by-nc/4.0/deed.fr",
|
|
5 => "https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr",
|
|
6 => "https://creativecommons.org/licenses/by-nc-nd/4.0/deed.fr",
|
|
7 => "https://creativecommons.org/publicdomain/zero/1.0/deed.fr"
|
|
];
|
|
|
|
$licenceId = $video['licence']['id'];
|
|
$licenceLabel = isset($licenceLabels[$licenceId]) ? $licenceLabels[$licenceId] : "Licence inconnue";
|
|
$licenceUrl = isset($licenceUrls[$licenceId]) ? $licenceUrls[$licenceId] : "";
|
|
$licenceInfoUrl = isset($licenceInfoUrls[$licenceId]) ? $licenceInfoUrls[$licenceId] : "";
|
|
?>
|
|
<div class="licence-info">
|
|
<?php if (!empty($licenceUrl) && !empty($licenceInfoUrl)): ?>
|
|
<a href="<?php echo $licenceInfoUrl; ?>" target="_blank" rel="noopener noreferrer" class="licence-link" title="En savoir plus sur cette licence">
|
|
<img src="<?php echo $licenceUrl; ?>" alt="<?php echo $licenceLabel; ?>" class="licence-logo">
|
|
<span class="licence-label"><?php echo $licenceLabel; ?></span>
|
|
</a>
|
|
<?php else: ?>
|
|
<?php if (!empty($licenceUrl)): ?>
|
|
<img src="<?php echo $licenceUrl; ?>" alt="<?php echo $licenceLabel; ?>" class="licence-logo">
|
|
<?php endif; ?>
|
|
<span class="licence-label"><?php echo $licenceLabel; ?></span>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<div class="video-secondary-info">
|
|
<div class="channel-info">
|
|
<?php
|
|
$channelUrl = PEERTUBE_URL . '/c/' . $video['channelHandle'];
|
|
?>
|
|
<?php if (strpos($channelAvatar, 'default-avatar') !== false || empty($channelAvatar)): ?>
|
|
<a href="<?php echo $channelUrl; ?>" target="_blank" rel="noopener noreferrer" class="channel-avatar-link">
|
|
<div class="channel-avatar-placeholder">
|
|
<i class="fas fa-user-circle"></i>
|
|
</div>
|
|
</a>
|
|
<?php else: ?>
|
|
<a href="<?php echo $channelUrl; ?>" target="_blank" rel="noopener noreferrer" class="channel-avatar-link">
|
|
<div class="channel-avatar">
|
|
<img src="<?php echo $channelAvatar; ?>" alt="<?php echo $video['channel']; ?>">
|
|
</div>
|
|
</a>
|
|
<?php endif; ?>
|
|
<div class="channel-details">
|
|
<a href="<?php echo $channelUrl; ?>" target="_blank" rel="noopener noreferrer" class="channel-name-link">
|
|
<h3 class="channel-name"><?php echo $video['channel']; ?></h3>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="video-description">
|
|
<?php
|
|
// Vérifier si on a une description tronquée et si la description complète est plus longue
|
|
$hasTruncatedDesc = !empty($video['truncatedDescription']) &&
|
|
strlen($video['truncatedDescription']) < strlen($video['description']);
|
|
|
|
if ($hasTruncatedDesc):
|
|
?>
|
|
<div class="truncated-description">
|
|
<?php echo markdown_to_html($video['truncatedDescription']); ?>
|
|
<button class="show-more-btn">
|
|
<span>Voir plus</span>
|
|
<i class="fas fa-chevron-down"></i>
|
|
</button>
|
|
</div>
|
|
<div class="full-description" style="display: none;">
|
|
<?php echo markdown_to_html($video['description']); ?>
|
|
<button class="show-less-btn">
|
|
<span>Voir moins</span>
|
|
<i class="fas fa-chevron-up"></i>
|
|
</button>
|
|
</div>
|
|
<?php else: ?>
|
|
<?php echo markdown_to_html($video['description']); ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<?php if (!empty($video['tags'])): ?>
|
|
<div class="video-tags">
|
|
<?php foreach ($video['tags'] as $tag): ?>
|
|
<a href="recherche.php?q=<?php echo urlencode('#' . $tag); ?>" class="tag">#<?php echo htmlspecialchars($tag); ?></a>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<!-- Commentaires -->
|
|
<div class="comments-section">
|
|
<div class="section-header">
|
|
<div class="section-title-wrapper">
|
|
<h2 class="section-title">Commentaires</h2>
|
|
</div>
|
|
<a href="<?php echo PEERTUBE_URL; ?>/videos/watch/<?php echo $videoData['uuid']; ?>" target="_blank" class="view-on-peertube">
|
|
<i class="fas fa-external-link-alt"></i> Voir sur <?php echo PEERTUBE_DISPLAY_NAME; ?>
|
|
</a>
|
|
</div>
|
|
<div class="comments-list">
|
|
<?php
|
|
$comments = getVideoComments($videoData['uuid']);
|
|
if (!empty($comments)):
|
|
foreach ($comments as $comment):
|
|
?>
|
|
<div class="comment">
|
|
<div class="comment-avatar">
|
|
<?php if (isset($comment['account']['avatar']) && !empty($comment['account']['avatar']['path'])): ?>
|
|
<img src="<?php echo PEERTUBE_URL . $comment['account']['avatar']['path']; ?>" alt="<?php echo htmlspecialchars($comment['account']['displayName']); ?>">
|
|
<?php else: ?>
|
|
<div class="channel-avatar-placeholder mini">
|
|
<i class="fas fa-user-circle"></i>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
<div class="comment-content">
|
|
<div class="comment-header">
|
|
<span class="comment-author"><?php echo htmlspecialchars($comment['account']['displayName']); ?></span>
|
|
<span class="comment-date"><?php echo formatDate($comment['createdAt']); ?></span>
|
|
</div>
|
|
<div class="comment-text"><?php echo nl2br(htmlspecialchars($comment['text'])); ?></div>
|
|
|
|
<?php if (isset($comment['totalReplies']) && $comment['totalReplies'] > 0): ?>
|
|
<div class="comment-replies-toggle">
|
|
<a href="<?php echo PEERTUBE_URL; ?>/videos/watch/<?php echo $videoData['uuid']; ?>" target="_blank" class="show-replies">
|
|
<i class="fas fa-reply"></i> Voir les <?php echo $comment['totalReplies']; ?> réponse<?php echo $comment['totalReplies'] > 1 ? 's' : ''; ?>
|
|
</a>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
<?php
|
|
endforeach;
|
|
?>
|
|
<div class="comments-info">
|
|
<i class="fas fa-info-circle"></i>
|
|
<p>Les commentaires sont visibles mais l'ajout de commentaires et les threads de réponses sont désactivés sur cette page.</p>
|
|
<p>Pour ajouter des commentaires ou voir les réponses, veuillez vous rendre sur <a href="<?php echo PEERTUBE_URL; ?>/videos/watch/<?php echo $videoData['uuid']; ?>" target="_blank" class="show-replies"> <?php echo PEERTUBE_DISPLAY_NAME; ?></a>.</p>
|
|
</div>
|
|
<?php else: ?>
|
|
<div class="no-comments">
|
|
<i class="fas fa-comments"></i>
|
|
<p>Aucun commentaire pour cette vidéo.</p>
|
|
<p>Pour ajouter des commentaires, veuillez vous rendre sur <a href="<?php echo PEERTUBE_URL; ?>/videos/watch/<?php echo $videoData['uuid']; ?>" target="_blank" class="show-replies"> <?php echo PEERTUBE_DISPLAY_NAME; ?></a>.</p>
|
|
</div>
|
|
<?php endif; ?>
|
|
</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']; ?>">
|
|
</div>
|
|
<div class="suggested-video-info">
|
|
<span class="suggested-video-duration"><?php echo formatDuration($suggestedVideo['duration']); ?></span>
|
|
<h4 class="suggested-video-title"><?php echo $suggestedVideo['title']; ?></h4>
|
|
<div class="suggested-video-channel">
|
|
<?php
|
|
// Vérifier si un avatar de chaîne est disponible pour la vidéo suggérée
|
|
$suggestedAvatar = isset($suggestedVideo['channelAvatar']) ? $suggestedVideo['channelAvatar'] : '';
|
|
|
|
if (empty($suggestedAvatar) || strpos($suggestedAvatar, 'default-avatar') !== false):
|
|
?>
|
|
<div class="channel-avatar-placeholder mini">
|
|
<i class="fas fa-user-circle"></i>
|
|
</div>
|
|
<?php else: ?>
|
|
<img src="<?php echo $suggestedAvatar; ?>" alt="<?php echo $suggestedVideo['channel']; ?>" class="channel-avatar mini">
|
|
<?php endif; ?>
|
|
<span class="channel-name"><?php echo $suggestedVideo['channel']; ?></span>
|
|
</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>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
<?php include 'includes/footer.php'; ?>
|
|
<?php include 'includes/mobile-menu.php'; ?>
|
|
|
|
<!-- Modal de téléchargement -->
|
|
<div id="download-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Télécharger la vidéo</h3>
|
|
<button class="modal-close"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Choisissez la résolution souhaitée :</p>
|
|
<div class="download-options">
|
|
<?php
|
|
$downloadOptions = getVideoDownloadOptions($videoData['uuid']);
|
|
if (!empty($downloadOptions)):
|
|
foreach ($downloadOptions as $option):
|
|
?>
|
|
<a href="<?php echo $option['url']; ?>" class="download-option" download>
|
|
<div class="download-resolution">
|
|
<i class="fas fa-film"></i>
|
|
<span><?php echo $option['resolution']; ?></span>
|
|
</div>
|
|
<div class="download-info">
|
|
<span class="download-size"><?php echo $option['size']; ?></span>
|
|
<i class="fas fa-download"></i>
|
|
</div>
|
|
</a>
|
|
<?php
|
|
endforeach;
|
|
else:
|
|
?>
|
|
<p class="no-download-options">Aucune option de téléchargement disponible pour cette vidéo.</p>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<p class="download-info-text">Le téléchargement démarrera automatiquement après avoir cliqué sur une résolution.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal de partage -->
|
|
<div id="share-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Partager la vidéo</h3>
|
|
<button class="modal-close"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="share-link-container">
|
|
<p>Lien de la vidéo :</p>
|
|
<div class="share-link-box">
|
|
<input type="text" id="share-link" value="<?php echo htmlspecialchars((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"); ?>" readonly>
|
|
<button id="copy-link-btn" class="copy-btn" title="Copier le lien">
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="share-platforms-title">Partager sur :</p>
|
|
<div class="share-platforms">
|
|
<a href="mailto:?subject=<?php echo urlencode(htmlspecialchars($video['title'])); ?>&body=<?php echo urlencode(htmlspecialchars($video['title']) . ' - ' . (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"); ?>" class="share-platform-btn" title="Partager par e-mail">
|
|
<i class="fas fa-envelope"></i>
|
|
<span>E-mail</span>
|
|
</a>
|
|
|
|
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"); ?>" target="_blank" class="share-platform-btn" title="Partager sur Facebook">
|
|
<i class="fab fa-facebook-f"></i>
|
|
<span>Facebook</span>
|
|
</a>
|
|
|
|
<a href="https://twitter.com/intent/tweet?text=<?php echo urlencode(htmlspecialchars($video['title'])); ?>&url=<?php echo urlencode((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"); ?>" target="_blank" class="share-platform-btn" title="Partager sur X/Twitter">
|
|
<i class="fab fa-x-twitter"></i>
|
|
<span>X</span>
|
|
</a>
|
|
|
|
<a href="https://wa.me/?text=<?php echo urlencode(htmlspecialchars($video['title']) . ' - ' . (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"); ?>" target="_blank" class="share-platform-btn" title="Partager sur WhatsApp">
|
|
<i class="fab fa-whatsapp"></i>
|
|
<span>WhatsApp</span>
|
|
</a>
|
|
|
|
<a href="https://www.linkedin.com/sharing/share-offsite/?url=<?php echo urlencode((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"); ?>" target="_blank" class="share-platform-btn" title="Partager sur LinkedIn">
|
|
<i class="fab fa-linkedin-in"></i>
|
|
<span>LinkedIn</span>
|
|
</a>
|
|
|
|
<a href="https://t.me/share/url?url=<?php echo urlencode((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"); ?>&text=<?php echo urlencode($video['title']); ?>" target="_blank" class="share-platform-btn" title="Partager sur Telegram">
|
|
<i class="fab fa-telegram-plane"></i>
|
|
<span>Telegram</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="share-embed">
|
|
<p>Intégrer la vidéo :</p>
|
|
<div class="share-link-box">
|
|
<input type="text" id="embed-code" value='<iframe width="560" height="315" src="<?php echo $video['url']; ?>" frameborder="0" allowfullscreen></iframe>' readonly>
|
|
<button id="copy-embed-btn" class="copy-btn" title="Copier le code d'intégration">
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
|
<script src="js/main.js"></script>
|
|
<script>
|
|
// Script pour la modal de téléchargement
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Gestion de la description tronquée
|
|
const showMoreBtn = document.querySelector('.show-more-btn');
|
|
const showLessBtn = document.querySelector('.show-less-btn');
|
|
|
|
if (showMoreBtn) {
|
|
showMoreBtn.addEventListener('click', function() {
|
|
document.querySelector('.truncated-description').style.display = 'none';
|
|
document.querySelector('.full-description').style.display = 'block';
|
|
});
|
|
}
|
|
|
|
if (showLessBtn) {
|
|
showLessBtn.addEventListener('click', function() {
|
|
document.querySelector('.full-description').style.display = 'none';
|
|
document.querySelector('.truncated-description').style.display = 'block';
|
|
});
|
|
}
|
|
|
|
const downloadModal = document.getElementById('download-modal');
|
|
const downloadBtn = document.getElementById('download-btn');
|
|
const downloadCloseBtn = downloadModal.querySelector('.modal-close');
|
|
|
|
// Ouvrir la modal
|
|
downloadBtn.addEventListener('click', function() {
|
|
downloadModal.classList.add('show');
|
|
document.body.style.overflow = 'hidden'; // Empêcher le défilement
|
|
});
|
|
|
|
// Fermer la modal
|
|
downloadCloseBtn.addEventListener('click', function() {
|
|
downloadModal.classList.remove('show');
|
|
document.body.style.overflow = ''; // Réactiver le défilement
|
|
});
|
|
|
|
// Fermer la modal si on clique en dehors
|
|
window.addEventListener('click', function(event) {
|
|
if (event.target === downloadModal) {
|
|
downloadModal.classList.remove('show');
|
|
document.body.style.overflow = '';
|
|
}
|
|
});
|
|
|
|
// Script pour la modal de partage
|
|
const shareModal = document.getElementById('share-modal');
|
|
const shareBtn = document.getElementById('share-btn');
|
|
const shareCloseBtn = shareModal.querySelector('.modal-close');
|
|
const copyLinkBtn = document.getElementById('copy-link-btn');
|
|
const copyEmbedBtn = document.getElementById('copy-embed-btn');
|
|
const shareLink = document.getElementById('share-link');
|
|
const embedCode = document.getElementById('embed-code');
|
|
|
|
// Ouvrir la modal de partage
|
|
shareBtn.addEventListener('click', function() {
|
|
shareModal.classList.add('show');
|
|
document.body.style.overflow = 'hidden';
|
|
});
|
|
|
|
// Fermer la modal de partage
|
|
shareCloseBtn.addEventListener('click', function() {
|
|
shareModal.classList.remove('show');
|
|
document.body.style.overflow = '';
|
|
});
|
|
|
|
// Fermer la modal si on clique en dehors
|
|
window.addEventListener('click', function(event) {
|
|
if (event.target === shareModal) {
|
|
shareModal.classList.remove('show');
|
|
document.body.style.overflow = '';
|
|
}
|
|
});
|
|
|
|
// Copier le lien
|
|
copyLinkBtn.addEventListener('click', function() {
|
|
shareLink.select();
|
|
document.execCommand('copy');
|
|
showCopySuccess(copyLinkBtn);
|
|
});
|
|
|
|
// Copier le code d'intégration
|
|
copyEmbedBtn.addEventListener('click', function() {
|
|
embedCode.select();
|
|
document.execCommand('copy');
|
|
showCopySuccess(copyEmbedBtn);
|
|
});
|
|
|
|
// Afficher un message de succès après la copie
|
|
function showCopySuccess(button) {
|
|
const originalIcon = button.innerHTML;
|
|
button.innerHTML = '<i class="fas fa-check"></i>';
|
|
button.classList.add('copied');
|
|
|
|
setTimeout(function() {
|
|
button.innerHTML = originalIcon;
|
|
button.classList.remove('copied');
|
|
}, 2000);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|