5 files changed, 107 insertions, 1 deletions

diff --git a/client/src/app/+videos/+video-watch/video-avatar-channel.component.html b/client/src/app/+videos/+video-watch/video-avatar-channel.component.html
new file mode 100644
index 000000000..5058f05dd
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/video-avatar-channel.component.html
@@ -0,0 +1,27 @@
+<div class="wrapper" [ngClass]="'avatar-' + size">
+  <ng-container *ngIf="!isChannelAvatarNull() && !genericChannel">
+    <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
+      <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
+    </a>
+
+    <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
+      <img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" />
+    </a>
+  </ng-container>
+
+  <ng-container *ngIf="!isChannelAvatarNull() && genericChannel">
+    <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
+      <img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" />
+    </a>
+
+    <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
+      <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
+    </a>
+  </ng-container>
+
+  <ng-container *ngIf="isChannelAvatarNull()">
+    <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
+      <img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" />
+    </a>
+  </ng-container>
+</div>
diff --git a/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss b/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
new file mode 100644
index 000000000..4998e85fa
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
@@ -0,0 +1,44 @@
+@import '_mixins';
+
+.wrapper {
+  $avatar-size: 35px;
+
+  width: $avatar-size;
+  height: $avatar-size;
+  position: relative;
+  margin-right: 5px;
+  margin-bottom: 5px;
+
+  &.avatar-sm {
+    width: 28px;
+    height: 28px;
+    margin-bottom: 3px;
+  }
+
+  a {
+    @include disable-outline;
+  }
+
+  a img {
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    top:50%;
+    left:50%;
+    transform: translate(-50%,-50%);
+    border-radius: 5px;
+
+    &:not(.channel-avatar) {
+      border-radius: 50%;
+    }
+  }
+
+  a:nth-of-type(2) img {
+    height: 60%;
+    width: 60%;
+    border: 2px solid pvar(--mainBackgroundColor);
+    transform: translateX(15%);
+    position: relative;
+    background-color: pvar(--mainBackgroundColor);
+  }
+}
diff --git a/client/src/app/+videos/+video-watch/video-avatar-channel.component.ts b/client/src/app/+videos/+video-watch/video-avatar-channel.component.ts
new file mode 100644
index 000000000..0b6e796df
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/video-avatar-channel.component.ts
@@ -0,0 +1,27 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { Video } from '@app/shared/shared-main/video'
+
+@Component({
+  selector: 'my-video-avatar-channel',
+  templateUrl: './video-avatar-channel.component.html',
+  styleUrls: [ './video-avatar-channel.component.scss' ]
+})
+export class VideoAvatarChannelComponent implements OnInit {
+  @Input() video: Video
+  @Input() byAccount: string
+
+  @Input() size: 'md' | 'sm' = 'md'
+  @Input() genericChannel: boolean
+
+  channelLinkTitle = ''
+  accountLinkTitle = ''
+
+  ngOnInit () {
+    this.channelLinkTitle = $localize`${this.video.account.name} (channel page)`
+    this.accountLinkTitle = $localize`${this.video.byAccount} (account page)`
+  }
+
+  isChannelAvatarNull () {
+    return this.video.channel.avatar === null
+  }
+}
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index 9656f08e9..7f3ceeebc 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -29,7 +29,12 @@ import { MetaService } from '@ngx-meta/core'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
 import { ServerConfig, ServerErrorCode, UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '@shared/models'
-import { cleanupVideoWatch, getStoredP2PEnabled, getStoredTheater, getStoredVideoWatchHistory } from '../../../assets/player/peertube-player-local-storage'
+import {
+  cleanupVideoWatch,
+  getStoredP2PEnabled,
+  getStoredTheater,
+  getStoredVideoWatchHistory
+} from '../../../assets/player/peertube-player-local-storage'
 import {
   CustomizationOptions,
   P2PMediaLoaderOptions,
diff --git a/client/src/app/+videos/+video-watch/video-watch.module.ts b/client/src/app/+videos/+video-watch/video-watch.module.ts
index d65cf8d68..3e9f3822e 100644
--- a/client/src/app/+videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.module.ts
@@ -16,6 +16,7 @@ import { VideoCommentComponent } from './comment/video-comment.component'
 import { VideoCommentsComponent } from './comment/video-comments.component'
 import { RecommendationsModule } from './recommendations/recommendations.module'
 import { TimestampRouteTransformerDirective } from './timestamp-route-transformer.directive'
+import { VideoAvatarChannelComponent } from './video-avatar-channel.component'
 import { VideoWatchPlaylistComponent } from './video-watch-playlist.component'
 import { VideoWatchRoutingModule } from './video-watch-routing.module'
 import { VideoWatchComponent } from './video-watch.component'
@@ -46,6 +47,8 @@ import { VideoWatchComponent } from './video-watch.component'
     VideoCommentAddComponent,
     VideoCommentComponent,
 
+    VideoAvatarChannelComponent,
+
     TimestampRouteTransformerDirective,
     TimestampRouteTransformerDirective
   ],