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>

2 files changed, 21 insertions, 15 deletions

diff --git a/client/src/app/shared/shared-main/account/account.model.ts b/client/src/app/shared/shared-main/account/account.model.ts
index 8b78d01a6..a26a9c11c 100644
--- a/client/src/app/shared/shared-main/account/account.model.ts
+++ b/client/src/app/shared/shared-main/account/account.model.ts
@@ -17,11 +17,15 @@ export class Account extends Actor implements ServerAccount {
 
   userId?: number
 
-  static GET_ACTOR_AVATAR_URL (actor: { avatar?: { url?: string, path: string } }) {
-    return Actor.GET_ACTOR_AVATAR_URL(actor)
+  static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size: number) {
+    return Actor.GET_ACTOR_AVATAR_URL(actor, size)
   }
 
-  static GET_DEFAULT_AVATAR_URL () {
+  static GET_DEFAULT_AVATAR_URL (size: number) {
+    if (size <= 48) {
+      return `${window.location.origin}/client/assets/images/default-avatar-account-48x48.png`
+    }
+
     return `${window.location.origin}/client/assets/images/default-avatar-account.png`
   }
 
@@ -42,12 +46,12 @@ export class Account extends Actor implements ServerAccount {
     this.mutedServerByInstance = false
   }
 
-  updateAvatar (newAvatar: ActorImage) {
-    this.avatar = newAvatar
+  updateAvatar (newAvatars: ActorImage[]) {
+    this.avatars = newAvatars
   }
 
   resetAvatar () {
-    this.avatar = null
+    this.avatars = []
   }
 
   updateBlockStatus (blockStatus: BlockStatus) {
diff --git a/client/src/app/shared/shared-main/account/actor.model.ts b/client/src/app/shared/shared-main/account/actor.model.ts
index 082f44fb9..a54f51aa4 100644
--- a/client/src/app/shared/shared-main/account/actor.model.ts
+++ b/client/src/app/shared/shared-main/account/actor.model.ts
@@ -13,20 +13,22 @@ export abstract class Actor implements ServerActor {
 
   createdAt: Date | string
 
-  avatar: ActorImage
+  // TODO: remove, deprecated in 4.2
+  avatar: never
+
+  avatars: ActorImage[]
 
   isLocal: boolean
 
-  static GET_ACTOR_AVATAR_URL (actor: { avatar?: { url?: string, path: string } }) {
-    if (actor?.avatar?.url) return actor.avatar.url
+  static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size: number) {
+    const avatar = actor.avatars.sort((a, b) => a.width - b.width).find(a => a.width >= size)
 
-    if (actor?.avatar) {
-      const absoluteAPIUrl = getAbsoluteAPIUrl()
+    if (!avatar) return ''
+    if (avatar.url) return avatar.url
 
-      return absoluteAPIUrl + actor.avatar.path
-    }
+    const absoluteAPIUrl = getAbsoluteAPIUrl()
 
-    return ''
+    return absoluteAPIUrl + avatar.path
   }
 
   static CREATE_BY_STRING (accountName: string, host: string, forceHostname = false) {
@@ -55,7 +57,7 @@ export abstract class Actor implements ServerActor {
 
     if (hash.createdAt) this.createdAt = new Date(hash.createdAt.toString())
 
-    this.avatar = hash.avatar
+    this.avatars = hash.avatars
     this.isLocal = Actor.IS_LOCAL(this.host)
   }
 }