add comments
This commit is contained in:
+104
-25
@@ -121,6 +121,28 @@
|
|||||||
background-color: #f5f5f5;
|
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 {
|
.action-button i {
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
color: #444;
|
color: #444;
|
||||||
@@ -381,49 +403,106 @@
|
|||||||
.comment {
|
.comment {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1rem;
|
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 {
|
.comment-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-author {
|
.comment-header {
|
||||||
font-weight: 600;
|
display: flex;
|
||||||
margin-bottom: 0.25rem;
|
align-items: center;
|
||||||
}
|
gap: 0.5rem;
|
||||||
|
|
||||||
.comment-date {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: #666;
|
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.comment-author {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-date {
|
||||||
|
color: #666;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
.comment-text {
|
.comment-text {
|
||||||
font-size: 0.9375rem;
|
color: #333;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
white-space: pre-line;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-actions {
|
.comment-replies-toggle {
|
||||||
display: flex;
|
margin-top: 0.5rem;
|
||||||
gap: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-actions button {
|
.show-replies {
|
||||||
background: none;
|
display: inline-flex;
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #666;
|
|
||||||
padding: 0.25rem 0.5rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.375rem;
|
gap: 0.5rem;
|
||||||
|
color: var(--primary-red);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-actions button:hover {
|
.show-replies:hover {
|
||||||
background-color: #f5f5f5;
|
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 */
|
/* Vidéos suggérées */
|
||||||
@@ -836,4 +915,4 @@
|
|||||||
|
|
||||||
.logo img {
|
.logo img {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -390,4 +390,20 @@ function getDisplayCategories() {
|
|||||||
|
|
||||||
return $categories;
|
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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="comments-list">
|
<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">
|
<div class="no-comments">
|
||||||
<i class="fas fa-comments"></i>
|
<i class="fas fa-comments"></i>
|
||||||
<p>Les commentaires sont visibles mais l'ajout de commentaires est désactivé sur cette page.</p>
|
<p>Aucun commentaire pour cette vidéo.</p>
|
||||||
<p>Pour ajouter des commentaires, veuillez visiter la vidéo sur <?php echo PEERTUBE_DISPLAY_NAME; ?>.</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>
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user