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>

3 files changed, 23 insertions, 7 deletions

diff --git a/server/tests/api/users/user-subscriptions.ts b/server/tests/api/users/user-subscriptions.ts
index 57cca6ad4..9553a69bb 100644
--- a/server/tests/api/users/user-subscriptions.ts
+++ b/server/tests/api/users/user-subscriptions.ts
@@ -9,6 +9,8 @@ import {
   doubleFollow,
   PeerTubeServer,
   setAccessTokensToServers,
+  setDefaultAccountAvatar,
+  setDefaultChannelAvatar,
   SubscriptionsCommand,
   waitJobs
 } from '@shared/server-commands'
@@ -29,6 +31,8 @@ describe('Test users subscriptions', function () {
 
     // Get the access tokens
     await setAccessTokensToServers(servers)
+    await setDefaultChannelAvatar(servers)
+    await setDefaultAccountAvatar(servers)
 
     // Server 1 and server 2 follow each other
     await doubleFollow(servers[0], servers[1])
diff --git a/server/tests/api/users/users-multiple-servers.ts b/server/tests/api/users/users-multiple-servers.ts
index 5b2bbc520..3e8b932c0 100644
--- a/server/tests/api/users/users-multiple-servers.ts
+++ b/server/tests/api/users/users-multiple-servers.ts
@@ -16,6 +16,7 @@ import {
   doubleFollow,
   PeerTubeServer,
   setAccessTokensToServers,
+  setDefaultChannelAvatar,
   waitJobs
 } from '@shared/server-commands'
 
@@ -29,7 +30,7 @@ describe('Test users with multiple servers', function () {
 
   let videoUUID: string
   let userAccessToken: string
-  let userAvatarFilename: string
+  let userAvatarFilenames: string[]
 
   before(async function () {
     this.timeout(120_000)
@@ -38,6 +39,7 @@ describe('Test users with multiple servers', function () {
 
     // Get the access tokens
     await setAccessTokensToServers(servers)
+    await setDefaultChannelAvatar(servers)
 
     // Server 1 and server 2 follow each other
     await doubleFollow(servers[0], servers[1])
@@ -97,9 +99,11 @@ describe('Test users with multiple servers', function () {
     await servers[0].users.updateMyAvatar({ fixture })
 
     user = await servers[0].users.getMyInfo()
-    userAvatarFilename = user.account.avatar.path
+    userAvatarFilenames = user.account.avatars.map(({ path }) => path)
 
-    await testImage(servers[0].url, 'avatar2-resized', userAvatarFilename, '.png')
+    for (const avatar of user.account.avatars) {
+      await testImage(servers[0].url, `avatar2-resized-${avatar.width}x${avatar.width}`, avatar.path, '.png')
+    }
 
     await waitJobs(servers)
   })
@@ -129,7 +133,9 @@ describe('Test users with multiple servers', function () {
         expect(account.userId).to.be.undefined
       }
 
-      await testImage(server.url, 'avatar2-resized', account.avatar.path, '.png')
+      for (const avatar of account.avatars) {
+        await testImage(server.url, `avatar2-resized-${avatar.width}x${avatar.width}`, avatar.path, '.png')
+      }
     }
   })
 
@@ -193,7 +199,9 @@ describe('Test users with multiple servers', function () {
 
   it('Should not have actor files', async () => {
     for (const server of servers) {
-      await checkActorFilesWereRemoved(userAvatarFilename, server.internalServerNumber)
+      for (const userAvatarFilename of userAvatarFilenames) {
+        await checkActorFilesWereRemoved(userAvatarFilename, server.internalServerNumber)
+      }
     }
   })
 
diff --git a/server/tests/api/users/users.ts b/server/tests/api/users/users.ts
index 7023b3f08..a47713bf0 100644
--- a/server/tests/api/users/users.ts
+++ b/server/tests/api/users/users.ts
@@ -604,7 +604,9 @@ describe('Test users', function () {
       await server.users.updateMyAvatar({ token: userToken, fixture })
 
       const user = await server.users.getMyInfo({ token: userToken })
-      await testImage(server.url, 'avatar-resized', user.account.avatar.path, '.gif')
+      for (const avatar of user.account.avatars) {
+        await testImage(server.url, `avatar-resized-${avatar.width}x${avatar.width}`, avatar.path, '.gif')
+      }
     })
 
     it('Should be able to update my avatar with a gif, and then a png', async function () {
@@ -614,7 +616,9 @@ describe('Test users', function () {
         await server.users.updateMyAvatar({ token: userToken, fixture })
 
         const user = await server.users.getMyInfo({ token: userToken })
-        await testImage(server.url, 'avatar-resized', user.account.avatar.path, extension)
+        for (const avatar of user.account.avatars) {
+          await testImage(server.url, `avatar-resized-${avatar.width}x${avatar.width}`, avatar.path, extension)
+        }
       }
     })