Add channel avatar to overviews

3 files changed, 24 insertions, 2 deletions

diff --git a/client/src/app/videos/video-list/video-overview.component.html b/client/src/app/videos/video-list/video-overview.component.html
index 9282dd59c..84a4c70ee 100644
--- a/client/src/app/videos/video-list/video-overview.component.html
+++ b/client/src/app/videos/video-list/video-overview.component.html
@@ -22,9 +22,13 @@
     </div>
   </div>
 
-  <div class="section" *ngFor="let object of overview.channels">
+  <div class="section channel" *ngFor="let object of overview.channels">
     <div class="section-title" i18n>
-      <a [routerLink]="[ '/video-channels', buildVideoChannelBy(object) ]">Channel {{ object.channel.displayName }}</a>
+      <a [routerLink]="[ '/video-channels', buildVideoChannelBy(object) ]">
+        <img [src]="buildVideoChannelAvatarUrl(object)" alt="Avatar" />
+
+        <div>{{ object.channel.displayName }}</div>
+      </a>
     </div>
 
     <div>
diff --git a/client/src/app/videos/video-list/video-overview.component.scss b/client/src/app/videos/video-list/video-overview.component.scss
index 8d66cf80a..73b6d2e53 100644
--- a/client/src/app/videos/video-list/video-overview.component.scss
+++ b/client/src/app/videos/video-list/video-overview.component.scss
@@ -19,4 +19,18 @@
 
     color: #000;
   }
+}
+
+.channel {
+  .section-title a {
+    display: flex;
+    width: fit-content;
+    align-items: center;
+
+    img {
+      @include avatar(30px);
+
+      margin-right: 10px;
+    }
+  }
 }
\ No newline at end of file
diff --git a/client/src/app/videos/video-list/video-overview.component.ts b/client/src/app/videos/video-list/video-overview.component.ts
index c758e115c..2c6054721 100644
--- a/client/src/app/videos/video-list/video-overview.component.ts
+++ b/client/src/app/videos/video-list/video-overview.component.ts
@@ -53,4 +53,8 @@ export class VideoOverviewComponent implements OnInit {
   buildVideoChannelBy (object: { videos: Video[] }) {
     return object.videos[0].byVideoChannel
   }
+
+  buildVideoChannelAvatarUrl (object: { videos: Video[] }) {
+    return object.videos[0].videoChannelAvatarUrl
+  }
 }