diff --git a/css/styles.css b/css/styles.css index 6368c6c..13f5efd 100644 --- a/css/styles.css +++ b/css/styles.css @@ -415,6 +415,36 @@ img { font-size: 14px; color: #555; margin-bottom: 8px; + display: flex; + align-items: center; + overflow: hidden; +} + +.channel-avatar { + width: 24px; + height: 24px; + border-radius: 50%; + margin-right: 8px; + object-fit: cover; + flex-shrink: 0; + border: 1px solid #e5e5e5; +} + +.channel-avatar-placeholder { + width: 24px; + height: 24px; + border-radius: 50%; + margin-right: 8px; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + background-color: #e5e5e5; + color: #666; + font-size: 16px; +} + +.channel-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/includes/config.php b/includes/config.php index 911aa5a..7946bc5 100644 --- a/includes/config.php +++ b/includes/config.php @@ -274,6 +274,11 @@ function formatVideosData($videosData) { $thumbnail = isset($video['previewPath']) ? PEERTUBE_URL . $video['previewPath'] : 'img/default-thumbnail.jpg'; + + // Récupérer l'avatar de la chaîne + $channelAvatar = isset($video['channel']['avatars'][0]['path']) && isset($video['channel']['avatars'][0]['path']) + ? PEERTUBE_URL . $video['channel']['avatars'][0]['path'] + : 'img/default-avatar.png'; // Formater les données $videos[] = [ @@ -282,6 +287,7 @@ function formatVideosData($videosData) { 'thumbnail' => $thumbnail, 'duration' => $video['duration'], 'channel' => $video['channel']['displayName'], + 'channelAvatar' => $channelAvatar, 'views' => $video['views'], 'date' => $video['publishedAt'], 'aspectRatio' => $video['aspectRatio'], diff --git a/index.php b/index.php index 06a922c..8d2ccb5 100644 --- a/index.php +++ b/index.php @@ -218,7 +218,16 @@

-
+
+ +
+ +
+ + <?php echo $video['channel']; ?> + + +
vues @@ -264,7 +273,16 @@

-
+
+ +
+ +
+ + <?php echo $video['channel']; ?> + + +

-
+
+ +
+ +
+ + <?php echo $video['channel']; ?> + + +