diff --git a/css/styles.css b/css/styles.css index 13f5efd..261c0af 100644 --- a/css/styles.css +++ b/css/styles.css @@ -448,6 +448,9 @@ img { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + line-height: 1; + display: flex; + align-items: center; } .video-metadata { diff --git a/css/video-page.css b/css/video-page.css index 509a8f2..abb0416 100644 --- a/css/video-page.css +++ b/css/video-page.css @@ -145,6 +145,20 @@ border-bottom: 1px solid #eee; } +.channel-details { + display: flex; + flex-direction: column; + justify-content: center; +} + +.channel-avatar { + width: 48px; + height: 48px; + border-radius: 50%; + overflow: hidden; + flex-shrink: 0; +} + .channel-avatar img { width: 48px; height: 48px; @@ -152,6 +166,22 @@ object-fit: cover; } +.channel-avatar-placeholder { + width: 48px; + height: 48px; + border-radius: 50%; + background-color: #f5f5f5; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.channel-avatar-placeholder i { + font-size: 2rem; + color: #999; +} + .channel-name { font-size: 1rem; font-weight: 600; @@ -401,9 +431,24 @@ } .suggested-video-channel { - font-size: 12px; + font-size: 0.75rem; color: #666; - margin-bottom: 5px; + margin-bottom: 0.25rem; + display: flex; + align-items: center; + overflow: hidden; + line-height: 1; +} + +.suggested-video-channel .channel-name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 0.75rem; + font-weight: normal; + line-height: 1; + display: flex; + align-items: center; } .suggested-video-metadata { diff --git a/video.php b/video.php index 57ace80..cd302a0 100644 --- a/video.php +++ b/video.php @@ -37,8 +37,8 @@ if (empty($videoData) || isset($videoData['error'])) { // Récupérer l'image de la chaîne $channelAvatar = 'img/default-avatar.jpg'; - if (isset($videoData['channel']['avatar']) && isset($videoData['channel']['avatar']['path'])) { - $channelAvatar = PEERTUBE_URL . $videoData['channel']['avatar']['path']; + if (isset($videoData['channel']['avatars'][0]['path'])) { + $channelAvatar = PEERTUBE_URL . $videoData['channel']['avatars'][0]['path']; } // Récupérer les vidéos suggérées (de la même chaîne) @@ -53,6 +53,11 @@ if (empty($videoData) || isset($videoData['error'])) { foreach ($channelVideos['data'] as $suggVid) { // Ne pas inclure la vidéo courante dans les suggestions if ($suggVid['uuid'] !== $videoId) { + // Récupérer l'avatar de la chaîne + $suggAvatar = isset($suggVid['channel']['avatars'][0]['path']) + ? PEERTUBE_URL . $suggVid['channel']['avatars'][0]['path'] + : ''; + $suggestedVideos[] = [ 'id' => $suggVid['uuid'], 'title' => $suggVid['name'], @@ -60,7 +65,8 @@ if (empty($videoData) || isset($videoData['error'])) { 'views' => $suggVid['views'], 'date' => $suggVid['publishedAt'], 'duration' => $suggVid['duration'], - 'channel' => $suggVid['channel']['displayName'] + 'channel' => $suggVid['channel']['displayName'], + 'channelAvatar' => $suggAvatar ]; } } @@ -228,9 +234,15 @@ if (empty($videoData) || isset($videoData['error'])) {