3 files changed, 51 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
+}