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, 49 insertions, 24 deletions

diff --git a/server/models/video/sql/video/index.ts b/server/models/video/sql/video/index.ts
new file mode 100644
index 000000000..e9132d5e1
--- /dev/null
+++ b/server/models/video/sql/video/index.ts
@@ -0,0 +1,3 @@
+export * from './video-model-get-query-builder'
+export * from './videos-id-list-query-builder'
+export * from './videos-model-list-query-builder'
diff --git a/server/models/video/sql/shared/abstract-run-query.ts b/server/models/video/sql/video/shared/abstract-run-query.ts
index 8e7a7642d..8e7a7642d 100644
--- a/server/models/video/sql/shared/abstract-run-query.ts
+++ b/server/models/video/sql/video/shared/abstract-run-query.ts
diff --git a/server/models/video/sql/shared/abstract-video-query-builder.ts b/server/models/video/sql/video/shared/abstract-video-query-builder.ts
index a6afb04e4..490e5e6e0 100644
--- a/server/models/video/sql/shared/abstract-video-query-builder.ts
+++ b/server/models/video/sql/video/shared/abstract-video-query-builder.ts
@@ -1,5 +1,6 @@
 import { createSafeIn } from '@server/models/utils'
 import { MUserAccountId } from '@server/types/models'
+import { ActorImageType } from '@shared/models'
 import validator from 'validator'
 import { AbstractRunQuery } from './abstract-run-query'
 import { VideoTableAttributes } from './video-table-attributes'
@@ -42,8 +43,9 @@ export class AbstractVideoQueryBuilder extends AbstractRunQuery {
     )
 
     this.addJoin(
-      'LEFT OUTER JOIN "actorImage" AS "VideoChannel->Actor->Avatar" ' +
-        'ON "VideoChannel->Actor"."avatarId" = "VideoChannel->Actor->Avatar"."id"'
+      'LEFT OUTER JOIN "actorImage" AS "VideoChannel->Actor->Avatars" ' +
+        'ON "VideoChannel->Actor"."id" = "VideoChannel->Actor->Avatars"."actorId" ' +
+        `AND "VideoChannel->Actor->Avatars"."type" = ${ActorImageType.AVATAR}`
     )
 
     this.attributes = {
@@ -51,7 +53,7 @@ export class AbstractVideoQueryBuilder extends AbstractRunQuery {
 
       ...this.buildAttributesObject('VideoChannel', this.tables.getChannelAttributes()),
       ...this.buildActorInclude('VideoChannel->Actor'),
-      ...this.buildAvatarInclude('VideoChannel->Actor->Avatar'),
+      ...this.buildAvatarInclude('VideoChannel->Actor->Avatars'),
       ...this.buildServerInclude('VideoChannel->Actor->Server')
     }
   }
@@ -68,8 +70,9 @@ export class AbstractVideoQueryBuilder extends AbstractRunQuery {
     )
 
     this.addJoin(
-      'LEFT OUTER JOIN "actorImage" AS "VideoChannel->Account->Actor->Avatar" ' +
-        'ON "VideoChannel->Account->Actor"."avatarId" = "VideoChannel->Account->Actor->Avatar"."id"'
+      'LEFT OUTER JOIN "actorImage" AS "VideoChannel->Account->Actor->Avatars" ' +
+        'ON "VideoChannel->Account"."actorId"= "VideoChannel->Account->Actor->Avatars"."actorId" ' +
+        `AND "VideoChannel->Account->Actor->Avatars"."type" = ${ActorImageType.AVATAR}`
     )
 
     this.attributes = {
@@ -77,7 +80,7 @@ export class AbstractVideoQueryBuilder extends AbstractRunQuery {
 
       ...this.buildAttributesObject('VideoChannel->Account', this.tables.getAccountAttributes()),
       ...this.buildActorInclude('VideoChannel->Account->Actor'),
-      ...this.buildAvatarInclude('VideoChannel->Account->Actor->Avatar'),
+      ...this.buildAvatarInclude('VideoChannel->Account->Actor->Avatars'),
       ...this.buildServerInclude('VideoChannel->Account->Actor->Server')
     }
   }
diff --git a/server/models/video/sql/shared/video-file-query-builder.ts b/server/models/video/sql/video/shared/video-file-query-builder.ts
index 3eb3dc07d..3eb3dc07d 100644
--- a/server/models/video/sql/shared/video-file-query-builder.ts
+++ b/server/models/video/sql/video/shared/video-file-query-builder.ts
diff --git a/server/models/video/sql/shared/video-model-builder.ts b/server/models/video/sql/video/shared/video-model-builder.ts
index 7751d8e68..b1b47b721 100644
--- a/server/models/video/sql/shared/video-model-builder.ts
+++ b/server/models/video/sql/video/shared/video-model-builder.ts
@@ -9,15 +9,15 @@ import { ServerBlocklistModel } from '@server/models/server/server-blocklist'
 import { TrackerModel } from '@server/models/server/tracker'
 import { UserVideoHistoryModel } from '@server/models/user/user-video-history'
 import { VideoInclude } from '@shared/models'
-import { ScheduleVideoUpdateModel } from '../../schedule-video-update'
-import { TagModel } from '../../tag'
-import { ThumbnailModel } from '../../thumbnail'
-import { VideoModel } from '../../video'
-import { VideoBlacklistModel } from '../../video-blacklist'
-import { VideoChannelModel } from '../../video-channel'
-import { VideoFileModel } from '../../video-file'
-import { VideoLiveModel } from '../../video-live'
-import { VideoStreamingPlaylistModel } from '../../video-streaming-playlist'
+import { ScheduleVideoUpdateModel } from '../../../schedule-video-update'
+import { TagModel } from '../../../tag'
+import { ThumbnailModel } from '../../../thumbnail'
+import { VideoModel } from '../../../video'
+import { VideoBlacklistModel } from '../../../video-blacklist'
+import { VideoChannelModel } from '../../../video-channel'
+import { VideoFileModel } from '../../../video-file'
+import { VideoLiveModel } from '../../../video-live'
+import { VideoStreamingPlaylistModel } from '../../../video-streaming-playlist'
 import { VideoTableAttributes } from './video-table-attributes'
 
 type SQLRow = { [id: string]: string | number }
@@ -34,6 +34,7 @@ export class VideoModelBuilder {
   private videoFileMemo: { [ id: number ]: VideoFileModel }
 
   private thumbnailsDone: Set<any>
+  private actorImagesDone: Set<any>
   private historyDone: Set<any>
   private blacklistDone: Set<any>
   private accountBlocklistDone: Set<any>
@@ -69,11 +70,21 @@ export class VideoModelBuilder {
     for (const row of rows) {
       this.buildVideoAndAccount(row)
 
-      const videoModel = this.videosMemo[row.id]
+      const videoModel = this.videosMemo[row.id as number]
 
       this.setUserHistory(row, videoModel)
       this.addThumbnail(row, videoModel)
 
+      const channelActor = videoModel.VideoChannel?.Actor
+      if (channelActor) {
+        this.addActorAvatar(row, 'VideoChannel.Actor', channelActor)
+      }
+
+      const accountActor = videoModel.VideoChannel?.Account?.Actor
+      if (accountActor) {
+        this.addActorAvatar(row, 'VideoChannel.Account.Actor', accountActor)
+      }
+
       if (!rowsWebTorrentFiles) {
         this.addWebTorrentFile(row, videoModel)
       }
@@ -113,6 +124,7 @@ export class VideoModelBuilder {
     this.videoFileMemo = {}
 
     this.thumbnailsDone = new Set()
+    this.actorImagesDone = new Set()
     this.historyDone = new Set()
     this.blacklistDone = new Set()
     this.liveDone = new Set()
@@ -195,13 +207,8 @@ export class VideoModelBuilder {
 
   private buildActor (row: SQLRow, prefix: string) {
     const actorPrefix = `${prefix}.Actor`
-    const avatarPrefix = `${actorPrefix}.Avatar`
     const serverPrefix = `${actorPrefix}.Server`
 
-    const avatarModel = row[`${avatarPrefix}.id`] !== null
-      ? new ActorImageModel(this.grab(row, this.tables.getAvatarAttributes(), avatarPrefix), this.buildOpts)
-      : null
-
     const serverModel = row[`${serverPrefix}.id`] !== null
       ? new ServerModel(this.grab(row, this.tables.getServerAttributes(), serverPrefix), this.buildOpts)
       : null
@@ -209,8 +216,8 @@ export class VideoModelBuilder {
     if (serverModel) serverModel.BlockedBy = []
 
     const actorModel = new ActorModel(this.grab(row, this.tables.getActorAttributes(), actorPrefix), this.buildOpts)
-    actorModel.Avatar = avatarModel
     actorModel.Server = serverModel
+    actorModel.Avatars = []
 
     return actorModel
   }
@@ -226,6 +233,18 @@ export class VideoModelBuilder {
     this.historyDone.add(id)
   }
 
+  private addActorAvatar (row: SQLRow, actorPrefix: string, actor: ActorModel) {
+    const avatarPrefix = `${actorPrefix}.Avatar`
+    const id = row[`${avatarPrefix}.id`]
+    if (!id || this.actorImagesDone.has(id)) return
+
+    const attributes = this.grab(row, this.tables.getAvatarAttributes(), avatarPrefix)
+    const avatarModel = new ActorImageModel(attributes, this.buildOpts)
+    actor.Avatars.push(avatarModel)
+
+    this.actorImagesDone.add(id)
+  }
+
   private addThumbnail (row: SQLRow, videoModel: VideoModel) {
     const id = row['Thumbnails.id']
     if (!id || this.thumbnailsDone.has(id)) return
diff --git a/server/models/video/sql/shared/video-table-attributes.ts b/server/models/video/sql/video/shared/video-table-attributes.ts
index 8a8d2073a..df2ed3fb0 100644
--- a/server/models/video/sql/shared/video-table-attributes.ts
+++ b/server/models/video/sql/video/shared/video-table-attributes.ts
@@ -186,8 +186,7 @@ export class VideoTableAttributes {
       'id',
       'preferredUsername',
       'url',
-      'serverId',
-      'avatarId'
+      'serverId'
     ]
 
     if (this.mode === 'get') {
@@ -212,6 +211,7 @@ export class VideoTableAttributes {
   getAvatarAttributes () {
     let attributeKeys = [
       'id',
+      'width',
       'filename',
       'type',
       'fileUrl',
diff --git a/server/models/video/sql/video-model-get-query-builder.ts b/server/models/video/sql/video/video-model-get-query-builder.ts
index a65c96097..a65c96097 100644
--- a/server/models/video/sql/video-model-get-query-builder.ts
+++ b/server/models/video/sql/video/video-model-get-query-builder.ts
diff --git a/server/models/video/sql/videos-id-list-query-builder.ts b/server/models/video/sql/video/videos-id-list-query-builder.ts
index 098e15359..098e15359 100644
--- a/server/models/video/sql/videos-id-list-query-builder.ts
+++ b/server/models/video/sql/video/videos-id-list-query-builder.ts
diff --git a/server/models/video/sql/videos-model-list-query-builder.ts b/server/models/video/sql/video/videos-model-list-query-builder.ts
index b15b29ec3..b15b29ec3 100644
--- a/server/models/video/sql/videos-model-list-query-builder.ts
+++ b/server/models/video/sql/video/videos-model-list-query-builder.ts