From dd4f25eea802fd88ea641d730432b56f562e0861 Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Sun, 15 Dec 2019 21:27:37 +0100
Subject: add channel avatar to watch view

---
 .../src/app/shared/channel/avatar.component.html   |  8 ++++++
 .../src/app/shared/channel/avatar.component.scss   | 32 ++++++++++++++++++++++
 client/src/app/shared/channel/avatar.component.ts  | 11 ++++++++
 3 files changed, 51 insertions(+)
 create mode 100644 client/src/app/shared/channel/avatar.component.html
 create mode 100644 client/src/app/shared/channel/avatar.component.scss
 create mode 100644 client/src/app/shared/channel/avatar.component.ts

(limited to 'client/src/app/shared/channel')

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
+}
-- 
cgit v1.2.3