From c2caa99b942dea7fa9d2856f53efd1316169658e Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Mon, 8 Jun 2020 08:52:06 +0200
Subject: Add channel/account avatars in miniature (#2838)

* add small avatar to miniature

* fix svg size for trending and search icons in plugins view

* parametrize avatar in miniature display options
---
 .../src/app/shared/channel/avatar.component.html   |  6 ++---
 .../src/app/shared/channel/avatar.component.scss   | 13 ++++++----
 client/src/app/shared/channel/avatar.component.ts  | 28 ++++++++++++++++++----
 3 files changed, 36 insertions(+), 11 deletions(-)

(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
index 362feacd7..062ef5bde 100644
--- a/client/src/app/shared/channel/avatar.component.html
+++ b/client/src/app/shared/channel/avatar.component.html
@@ -1,8 +1,8 @@
-<div class="wrapper">
-  <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" i18n-title title="Go the channel page">
+<div class="wrapper" [ngClass]="'avatar-' + size">
+  <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
     <img [src]="video.videoChannelAvatarUrl" alt="Channel avatar" />
   </a>
-  <a [routerLink]="[ '/accounts', video.byAccount ]" i18n-title title="Go to the account page">
+  <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
     <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
index 6629a4327..77b90c579 100644
--- a/client/src/app/shared/channel/avatar.component.scss
+++ b/client/src/app/shared/channel/avatar.component.scss
@@ -1,13 +1,18 @@
 @import '_mixins';
 
 .wrapper {
-  width: 35px;
-  height: 35px;
-  min-width: 35px;
-  min-height: 35px;
+  $avatar-size: 35px;
+
+  width: $avatar-size;
+  height: $avatar-size;
   position: relative;
   margin-right: 5px;
 
+  &.avatar-sm {
+    width: 28px;
+    height: 28px;
+  }
+
   a {
     @include disable-outline;
   }
diff --git a/client/src/app/shared/channel/avatar.component.ts b/client/src/app/shared/channel/avatar.component.ts
index 2201c04ca..2c8eeb4b2 100644
--- a/client/src/app/shared/channel/avatar.component.ts
+++ b/client/src/app/shared/channel/avatar.component.ts
@@ -1,11 +1,31 @@
-import { Component, Input } from '@angular/core'
-import { VideoDetails } from '../video/video-details.model'
+import { Component, Input, OnInit } from '@angular/core'
+import { Video } from '../video/video.model'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'avatar-channel',
   templateUrl: './avatar.component.html',
   styleUrls: [ './avatar.component.scss' ]
 })
-export class AvatarComponent {
-  @Input() video: VideoDetails
+export class AvatarComponent implements OnInit {
+  @Input() video: Video
+  @Input() size: 'md' | 'sm' = 'md'
+
+  channelLinkTitle = ''
+  accountLinkTitle = ''
+
+  constructor (
+    private i18n: I18n
+  ) {}
+
+  ngOnInit () {
+    this.channelLinkTitle = this.i18n(
+      'Go to the channel page of {{name}} ({{handle}})',
+      { name: this.video.channel.name, handle: this.video.byVideoChannel }
+    )
+    this.accountLinkTitle = this.i18n(
+      'Go to the account page of {{name}} ({{handle}})',
+      { name: this.video.account.name, handle: this.video.byAccount }
+    )
+  }
 }
-- 
cgit v1.2.3