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>

1 files changed, 31 insertions, 28 deletions

diff --git a/server/models/account/account.ts b/server/models/account/account.ts
index 619a598dd..8a7dfba94 100644
--- a/server/models/account/account.ts
+++ b/server/models/account/account.ts
@@ -54,6 +54,7 @@ export type SummaryOptions = {
   whereActor?: WhereOptions
   whereServer?: WhereOptions
   withAccountBlockerIds?: number[]
+  forCount?: boolean
 }
 
 @DefaultScope(() => ({
@@ -73,22 +74,24 @@ export type SummaryOptions = {
       where: options.whereServer
     }
 
-    const queryInclude: Includeable[] = [
-      {
-        attributes: [ 'id', 'preferredUsername', 'url', 'serverId', 'avatarId' ],
-        model: ActorModel.unscoped(),
-        required: options.actorRequired ?? true,
-        where: options.whereActor,
-        include: [
-          serverInclude,
+    const actorInclude: Includeable = {
+      attributes: [ 'id', 'preferredUsername', 'url', 'serverId' ],
+      model: ActorModel.unscoped(),
+      required: options.actorRequired ?? true,
+      where: options.whereActor,
+      include: [ serverInclude ]
+    }
 
-          {
-            model: ActorImageModel.unscoped(),
-            as: 'Avatar',
-            required: false
-          }
-        ]
-      }
+    if (options.forCount !== true) {
+      actorInclude.include.push({
+        model: ActorImageModel,
+        as: 'Avatars',
+        required: false
+      })
+    }
+
+    const queryInclude: Includeable[] = [
+      actorInclude
     ]
 
     const query: FindOptions = {
@@ -349,13 +352,10 @@ export class AccountModel extends Model<Partial<AttributesOnly<AccountModel>>> {
       order: getSort(sort)
     }
 
-    return AccountModel.findAndCountAll(query)
-      .then(({ rows, count }) => {
-        return {
-          data: rows,
-          total: count
-        }
-      })
+    return Promise.all([
+      AccountModel.count(),
+      AccountModel.findAll(query)
+    ]).then(([ total, data ]) => ({ total, data }))
   }
 
   static loadAccountIdFromVideo (videoId: number): Promise<MAccount> {
@@ -407,16 +407,15 @@ export class AccountModel extends Model<Partial<AttributesOnly<AccountModel>>> {
   }
 
   toFormattedJSON (this: MAccountFormattable): Account {
-    const actor = this.Actor.toFormattedJSON()
-    const account = {
+    return {
+      ...this.Actor.toFormattedJSON(),
+
       id: this.id,
       displayName: this.getDisplayName(),
       description: this.description,
       updatedAt: this.updatedAt,
-      userId: this.userId ? this.userId : undefined
+      userId: this.userId ?? undefined
     }
-
-    return Object.assign(actor, account)
   }
 
   toFormattedSummaryJSON (this: MAccountSummaryFormattable): AccountSummary {
@@ -424,10 +423,14 @@ export class AccountModel extends Model<Partial<AttributesOnly<AccountModel>>> {
 
     return {
       id: this.id,
-      name: actor.name,
       displayName: this.getDisplayName(),
+
+      name: actor.name,
       url: actor.url,
       host: actor.host,
+      avatars: actor.avatars,
+
+      // TODO: remove, deprecated in 4.2
       avatar: actor.avatar
     }
   }