add channel avatar to watch view

4 files changed, 54 insertions, 0 deletions

diff --git a/client/src/app/shared/channel/avatar.component.html b/client/src/app/shared/channel/avatar.component.html
new file mode 100644
index 000000000..362feacd7
--- /dev/null
+++ b/client/src/app/shared/channel/avatar.component.html
@@ -0,0 +1,8 @@
+<div class="wrapper">
+  <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" i18n-title title="Go the channel page">
+    <img [src]="video.videoChannelAvatarUrl" alt="Channel avatar" />
+  </a>
+  <a [routerLink]="[ '/accounts', video.byAccount ]" i18n-title title="Go to the account page">
+    <img [src]="video.accountAvatarUrl" alt="Account avatar" />
+  </a>
+</div>
diff --git a/client/src/app/shared/channel/avatar.component.scss b/client/src/app/shared/channel/avatar.component.scss
new file mode 100644
index 000000000..b778c9eb0
--- /dev/null
+++ b/client/src/app/shared/channel/avatar.component.scss
@@ -0,0 +1,32 @@
+@import '_mixins';
+
+.wrapper {
+  width: 35px;
+  height: 35px;
+  min-width: 35px;
+  min-height: 35px;
+  position: relative;
+  margin-right: 5px;
+
+  a {
+    @include disable-outline;
+  }
+
+  a img {
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    top:50%;
+    left:50%;
+    border-radius: 50%;
+    transform: translate(-50%,-50%)
+  }
+
+  a:nth-of-type(2) img {
+    height: 60%;
+    width: 60%;
+    border: 2px solid var(--mainBackgroundColor);
+    transform: translateX(15%);
+    position: relative;
+  }
+}
diff --git a/client/src/app/shared/channel/avatar.component.ts b/client/src/app/shared/channel/avatar.component.ts
new file mode 100644
index 000000000..2201c04ca
--- /dev/null
+++ b/client/src/app/shared/channel/avatar.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core'
+import { VideoDetails } from '../video/video-details.model'
+
+@Component({
+  selector: 'avatar-channel',
+  templateUrl: './avatar.component.html',
+  styleUrls: [ './avatar.component.scss' ]
+})
+export class AvatarComponent {
+  @Input() video: VideoDetails
+}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 29ddf7b81..a32520820 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -66,6 +66,7 @@ import { OverviewService } from '@app/shared/overview'
 import { UserBanModalComponent } from '@app/shared/moderation'
 import { UserModerationDropdownComponent } from '@app/shared/moderation/user-moderation-dropdown.component'
 import { BlocklistService } from '@app/shared/blocklist'
+import { AvatarComponent } from '@app/shared/channel/avatar.component'
 import { TopMenuDropdownComponent } from '@app/shared/menu/top-menu-dropdown.component'
 import { UserHistoryService } from '@app/shared/users/user-history.service'
 import { UserNotificationService } from '@app/shared/users/user-notification.service'
@@ -158,6 +159,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
     TimestampInputComponent,
     InputReadonlyCopyComponent,
 
+    AvatarComponent,
     SubscribeButtonComponent,
     RemoteSubscribeComponent,
     InstanceFeaturesTableComponent,
@@ -228,6 +230,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
     PeertubeCheckboxComponent,
     TimestampInputComponent,
 
+    AvatarComponent,
     SubscribeButtonComponent,
     RemoteSubscribeComponent,
     InstanceFeaturesTableComponent,