Implement avatar miniatures (#4639)

* client: remove unused file

* refactor(client/my-actor-avatar): size from input

Read size from component input instead of scss, to make it possible to
use smaller avatar images when implemented.

* implement avatar miniatures

close #4560

* fix(test): max file size

* fix(search-index): normalize res acc to avatarMini

* refactor avatars to an array

* client/search: resize channel avatar to 120

* refactor(client/videos): remove unused function

* client(actor-avatar): set default size

* fix tests and avatars full result

When findOne is used only an array containting one avatar is returned.

* update migration version and version notations

* server/search: harmonize normalizing

* Cleanup avatar miniature PR

Co-authored-by: Chocobozzz <me@florianbigard.com>

9 files changed, 9 insertions, 32 deletions

diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.ts b/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
index 3d0e1bf2a..9de373cd3 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
@@ -2,7 +2,7 @@ import { catchError, switchMap, tap } from 'rxjs/operators'
 import { SelectChannelItem } from 'src/types/select-options-item.model'
 import { Directive, EventEmitter, OnInit } from '@angular/core'
 import { AuthService, CanComponentDeactivateResult, Notifier, ServerService } from '@app/core'
-import { listUserChannels } from '@app/helpers'
+import { listUserChannelsForSelect } from '@app/helpers'
 import { FormReactive } from '@app/shared/shared-forms'
 import { VideoCaptionEdit, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
@@ -38,7 +38,7 @@ export abstract class VideoSend extends FormReactive implements OnInit {
   ngOnInit () {
     this.buildForm({})
 
-    listUserChannels(this.authService)
+    listUserChannelsForSelect(this.authService)
       .subscribe(channels => {
         this.userVideoChannels = channels
         this.firstStepChannelId = this.userVideoChannels[0].id
diff --git a/client/src/app/+videos/+video-edit/video-update.resolver.ts b/client/src/app/+videos/+video-edit/video-update.resolver.ts
index 91e76b7fe..82dae5c1c 100644
--- a/client/src/app/+videos/+video-edit/video-update.resolver.ts
+++ b/client/src/app/+videos/+video-edit/video-update.resolver.ts
@@ -3,7 +3,7 @@ import { map, switchMap } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
 import { ActivatedRouteSnapshot, Resolve } from '@angular/router'
 import { AuthService } from '@app/core'
-import { listUserChannels } from '@app/helpers'
+import { listUserChannelsForSelect } from '@app/helpers'
 import { VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main'
 import { LiveVideoService } from '@app/shared/shared-video-live'
 
@@ -33,7 +33,7 @@ export class VideoUpdateResolver implements Resolve<any> {
         .loadCompleteDescription(video.descriptionPath)
         .pipe(map(description => Object.assign(video, { description }))),
 
-      listUserChannels(this.authService),
+      listUserChannelsForSelect(this.authService),
 
       this.videoCaptionService
         .listCaptions(video.id)
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
index d0e9bcd29..5014b9692 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="isCommentDisplayed()" class="root-comment" [ngClass]="{ 'is-child': isChild() }">
   <div class="left">
-    <my-actor-avatar *ngIf="!comment.isDeleted" [href]="comment.account.url" [account]="comment.account"></my-actor-avatar>
+    <my-actor-avatar *ngIf="!comment.isDeleted" [href]="comment.account.url" [account]="comment.account" [size]="isChild() ? '25' : '36'"></my-actor-avatar>
     <div class="vertical-border"></div>
   </div>
 
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
index 87e313d41..54f828014 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
@@ -25,10 +25,6 @@
   }
 }
 
-my-actor-avatar {
-  @include actor-avatar-size(36px);
-}
-
 .comment {
   flex-grow: 1;
   // Fix word-wrap with flex
@@ -160,11 +156,6 @@ my-video-comment-add {
 }
 
 .is-child {
-  // Reduce avatars size for replies
-  my-actor-avatar {
-    @include actor-avatar-size(25px);
-  }
-
   .left {
     @include margin-right(6px);
   }
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.html b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.html
index d433c7aba..a23152b67 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.html
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.html
@@ -2,19 +2,19 @@
   <my-actor-avatar
     *ngIf="showChannel"
     class="channel"
-    [class.main-avatar]="showChannel"
     [channel]="video.channel"
     [internalHref]="[ '/c', video.byVideoChannel ]"
     [title]="channelLinkTitle"
+    size="35"
   ></my-actor-avatar>
 
   <my-actor-avatar
     *ngIf="showAccount"
     class="account"
-    [class.main-avatar]="!showChannel"
     [class.second-avatar]="showChannel"
     [account]="video.account"
     [internalHref]="[ '/a', video.byAccount ]"
-    [title]="accountLinkTitle">
+    [title]="accountLinkTitle"
+    size="35">
   </my-actor-avatar>
 </div>
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.scss b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.scss
index 71c5e4b5a..80711ff32 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.scss
@@ -1,9 +1,5 @@
 @use '_mixins' as *;
 
-@mixin main {
-  @include actor-avatar-size(35px);
-}
-
 @mixin secondary {
   height: 60%;
   width: 60%;
@@ -14,16 +10,11 @@
 }
 
 .wrapper {
-  @include actor-avatar-size(35px);
   @include margin-right(5px);
 
   position: relative;
   margin-bottom: 5px;
 
-  .main-avatar {
-    @include main();
-  }
-
   .second-avatar {
     @include secondary();
   }
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.ts b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.ts
index 146c440b3..4bfc7bd9d 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.ts
@@ -20,8 +20,4 @@ export class VideoAvatarChannelComponent implements OnInit {
     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-list/overview/video-overview.component.html b/client/src/app/+videos/video-list/overview/video-overview.component.html
index 1a715560c..f250c2407 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.html
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.html
@@ -33,7 +33,7 @@
       <div class="section channel videos" *ngFor="let object of overview.channels">
         <div class="section-title">
           <a [routerLink]="[ '/c', buildVideoChannelBy(object) ]">
-            <my-actor-avatar [channel]="buildVideoChannel(object)"></my-actor-avatar>
+            <my-actor-avatar [channel]="buildVideoChannel(object)" size="28"></my-actor-avatar>
 
             <h2 class="section-title">{{ object.channel.displayName }}</h2>
           </a>
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.scss b/client/src/app/+videos/video-list/overview/video-overview.component.scss
index 2239d1913..8b2aa88f2 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.scss
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss
@@ -52,7 +52,6 @@
         align-items: center;
 
         my-actor-avatar {
-          @include actor-avatar-size(28px);
           @include margin-right(8px);
 
           font-size: initial;