ORGANISATION-KA-INTERNATIONALE/kaubuntu.re
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add channel avatar to video page

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2025-04-09 09:03:46 +04:00
parent 2b8d6d94f9
commit 2104269eaa
3 changed files with 83 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+3
View File
@@ -448,6 +448,9 @@ img {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: 1;
display: flex;
align-items: center;
} }
.video-metadata { .video-metadata {
css/video-page.css
+47 -2
View File
@@ -145,6 +145,20 @@
border-bottom: 1px solid #eee; 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 { .channel-avatar img {
width: 48px; width: 48px;
height: 48px; height: 48px;
@@ -152,6 +166,22 @@
object-fit: cover; 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 { .channel-name {
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
@@ -401,9 +431,24 @@
} }
.suggested-video-channel { .suggested-video-channel {
font-size: 12px; font-size: 0.75rem;
color: #666; 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 { .suggested-video-metadata {
video.php
+33 -7
View File
@@ -37,8 +37,8 @@ if (empty($videoData) || isset($videoData['error'])) {
// Récupérer l'image de la chaîne // Récupérer l'image de la chaîne
$channelAvatar = 'img/default-avatar.jpg'; $channelAvatar = 'img/default-avatar.jpg';
if (isset($videoData['channel']['avatar']) && isset($videoData['channel']['avatar']['path'])) { if (isset($videoData['channel']['avatars'][0]['path'])) {
$channelAvatar = PEERTUBE_URL . $videoData['channel']['avatar']['path']; $channelAvatar = PEERTUBE_URL . $videoData['channel']['avatars'][0]['path'];
} }
// Récupérer les vidéos suggérées (de la même chaîne) // 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) { foreach ($channelVideos['data'] as $suggVid) {
// Ne pas inclure la vidéo courante dans les suggestions // Ne pas inclure la vidéo courante dans les suggestions
if ($suggVid['uuid'] !== $videoId) { 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[] = [ $suggestedVideos[] = [
'id' => $suggVid['uuid'], 'id' => $suggVid['uuid'],
'title' => $suggVid['name'], 'title' => $suggVid['name'],
@@ -60,7 +65,8 @@ if (empty($videoData) || isset($videoData['error'])) {
'views' => $suggVid['views'], 'views' => $suggVid['views'],
'date' => $suggVid['publishedAt'], 'date' => $suggVid['publishedAt'],
'duration' => $suggVid['duration'], 'duration' => $suggVid['duration'],
'channel' => $suggVid['channel']['displayName'] 'channel' => $suggVid['channel']['displayName'],
'channelAvatar' => $suggAvatar
]; ];
} }
} }
@@ -228,9 +234,15 @@ if (empty($videoData) || isset($videoData['error'])) {
<div class="video-secondary-info"> <div class="video-secondary-info">
<div class="channel-info"> <div class="channel-info">
<div class="channel-avatar"> <?php if (strpos($channelAvatar, 'default-avatar') !== false || empty($channelAvatar)): ?>
<img src="<?php echo $channelAvatar; ?>" alt="<?php echo $video['channel']; ?>"> <div class="channel-avatar-placeholder">
</div> <i class="fas fa-user-circle"></i>
</div>
<?php else: ?>
<div class="channel-avatar">
<img src="<?php echo $channelAvatar; ?>" alt="<?php echo $video['channel']; ?>">
</div>
<?php endif; ?>
<div class="channel-details"> <div class="channel-details">
<h3 class="channel-name"><?php echo $video['channel']; ?></h3> <h3 class="channel-name"><?php echo $video['channel']; ?></h3>
</div> </div>
@@ -287,7 +299,21 @@ if (empty($videoData) || isset($videoData['error'])) {
<div class="suggested-video-info"> <div class="suggested-video-info">
<span class="suggested-video-duration"><?php echo formatDuration($suggestedVideo['duration']); ?></span> <span class="suggested-video-duration"><?php echo formatDuration($suggestedVideo['duration']); ?></span>
<h4 class="suggested-video-title"><?php echo $suggestedVideo['title']; ?></h4> <h4 class="suggested-video-title"><?php echo $suggestedVideo['title']; ?></h4>
<div class="suggested-video-channel"><?php echo $suggestedVideo['channel']; ?></div> <div class="suggested-video-channel">
<?php
// Vérifier si un avatar de chaîne est disponible pour la vidéo suggérée
$suggestedAvatar = isset($suggestedVideo['channelAvatar']) ? $suggestedVideo['channelAvatar'] : '';
if (empty($suggestedAvatar) || strpos($suggestedAvatar, 'default-avatar') !== false):
?>
<div class="channel-avatar-placeholder mini">
<i class="fas fa-user-circle"></i>
</div>
<?php else: ?>
<img src="<?php echo $suggestedAvatar; ?>" alt="<?php echo $suggestedVideo['channel']; ?>" class="channel-avatar mini">
<?php endif; ?>
<span class="channel-name"><?php echo $suggestedVideo['channel']; ?></span>
</div>
<div class="suggested-video-metadata"> <div class="suggested-video-metadata">
<span class="suggested-video-views"><?php echo formatViewCount($suggestedVideo['views']); ?> vues</span> <span class="suggested-video-views"><?php echo formatViewCount($suggestedVideo['views']); ?> vues</span>
<span class="suggested-video-date"><?php echo formatDate($suggestedVideo['date']); ?></span> <span class="suggested-video-date"><?php echo formatDate($suggestedVideo['date']); ?></span>