add comments

css/video-page.css

@@ -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 {
+.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;
 }
 
+.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 {
+.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;
-    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 */

includes/config.php

@@ -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'];
+}
 ?> 

video.php

@@ -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>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>
+                        <?php endif; ?>
                     </div>
                 </div>
             </div>