add comments
This commit is contained in:
+104
-25
@@ -121,6 +121,28 @@
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.disabled-button {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.disabled-button:hover {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.disabled-button::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 4px;
|
||||
border: 1px dashed #999;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.action-button i {
|
||||
font-size: 1.25rem;
|
||||
color: #444;
|
||||
@@ -381,49 +403,106 @@
|
||||
.comment {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.comment:last-of-type {
|
||||
border-bottom: none;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.comment-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.comment-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.comment-date {
|
||||
font-size: 0.75rem;
|
||||
color: #666;
|
||||
.comment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.comment-date {
|
||||
color: #666;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
font-size: 0.9375rem;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
white-space: pre-line;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.comment-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
.comment-replies-toggle {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-actions button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
.show-replies {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
gap: 0.5rem;
|
||||
color: var(--primary-red);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.comment-actions button:hover {
|
||||
background-color: #f5f5f5;
|
||||
.show-replies:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.show-replies i {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.comments-info {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
color: #666;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.comments-info i {
|
||||
font-size: 1.5rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.comments-info p {
|
||||
margin: 0;
|
||||
font-size: 0.9375rem;
|
||||
max-width: 500px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.comments-info p:last-child {
|
||||
color: #999;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Vidéos suggérées */
|
||||
@@ -836,4 +915,4 @@
|
||||
|
||||
.logo img {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -390,4 +390,20 @@ function getDisplayCategories() {
|
||||
|
||||
return $categories;
|
||||
}
|
||||
|
||||
/**
|
||||
* Récupère les commentaires d'une vidéo
|
||||
* @param string $videoId ID de la vidéo
|
||||
* @return array Tableau des commentaires
|
||||
*/
|
||||
function getVideoComments($videoId) {
|
||||
$endpoint = "videos/{$videoId}/comment-threads";
|
||||
$response = callPeerTubeApi($endpoint);
|
||||
|
||||
if (!$response || !isset($response['data'])) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return $response['data'];
|
||||
}
|
||||
?>
|
||||
@@ -272,11 +272,52 @@ if (empty($videoData) || isset($videoData['error'])) {
|
||||
</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>Les commentaires sont visibles mais l'ajout de commentaires est désactivé sur cette page.</p>
|
||||
<p>Pour ajouter des commentaires, veuillez visiter la vidéo sur <?php echo PEERTUBE_DISPLAY_NAME; ?>.</p>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user