diff --git a/css/video-page.css b/css/video-page.css index e7e9195..7c0048a 100644 --- a/css/video-page.css +++ b/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 { - 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; -} \ No newline at end of file +} diff --git a/includes/config.php b/includes/config.php index 81fca38..62e265c 100644 --- a/includes/config.php +++ b/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']; +} ?> \ No newline at end of file diff --git a/video.php b/video.php index ebbb810..8eaac99 100644 --- a/video.php +++ b/video.php @@ -272,11 +272,52 @@ if (empty($videoData) || isset($videoData['error'])) {
+ +
+
+ + <?php echo htmlspecialchars($comment['account']['displayName']); ?> + +
+ +
+ +
+
+
+ + +
+
+ + 0): ?> + + +
+
+ +
+ +

Les commentaires sont visibles mais l'ajout de commentaires et les threads de réponses sont désactivés sur cette page.

+

Pour ajouter des commentaires ou voir les réponses, veuillez vous rendre sur .

+
+
-

Les commentaires sont visibles mais l'ajout de commentaires est désactivé sur cette page.

-

Pour ajouter des commentaires, veuillez visiter la vidéo sur .

+

Aucun commentaire pour cette vidéo.

+

Pour ajouter des commentaires, veuillez vous rendre sur .

+