add channel avatar to video page
This commit is contained in:
@@ -448,6 +448,9 @@ img {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.video-metadata {
|
||||
|
||||
+47
-2
@@ -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 {
|
||||
|
||||
@@ -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'])) {
|
||||
|
||||
<div class="video-secondary-info">
|
||||
<div class="channel-info">
|
||||
<div class="channel-avatar">
|
||||
<img src="<?php echo $channelAvatar; ?>" alt="<?php echo $video['channel']; ?>">
|
||||
</div>
|
||||
<?php if (strpos($channelAvatar, 'default-avatar') !== false || empty($channelAvatar)): ?>
|
||||
<div class="channel-avatar-placeholder">
|
||||
<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">
|
||||
<h3 class="channel-name"><?php echo $video['channel']; ?></h3>
|
||||
</div>
|
||||
@@ -287,7 +299,21 @@ if (empty($videoData) || isset($videoData['error'])) {
|
||||
<div class="suggested-video-info">
|
||||
<span class="suggested-video-duration"><?php echo formatDuration($suggestedVideo['duration']); ?></span>
|
||||
<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">
|
||||
<span class="suggested-video-views"><?php echo formatViewCount($suggestedVideo['views']); ?> vues</span>
|
||||
<span class="suggested-video-date"><?php echo formatDate($suggestedVideo['date']); ?></span>
|
||||
|
||||
Reference in New Issue
Block a user