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>

6 files changed, 54 insertions, 19 deletions

diff --git a/server/tests/api/videos/multiple-servers.ts b/server/tests/api/videos/multiple-servers.ts
index ecdd36613..5bbc60559 100644
--- a/server/tests/api/videos/multiple-servers.ts
+++ b/server/tests/api/videos/multiple-servers.ts
@@ -19,6 +19,8 @@ import {
   doubleFollow,
   PeerTubeServer,
   setAccessTokensToServers,
+  setDefaultAccountAvatar,
+  setDefaultChannelAvatar,
   waitJobs,
   webtorrentAdd
 } from '@shared/server-commands'
@@ -46,6 +48,9 @@ describe('Test multiple servers', function () {
         description: 'super channel'
       }
       await servers[0].channels.create({ attributes: videoChannel })
+      await setDefaultChannelAvatar(servers[0], videoChannel.name)
+      await setDefaultAccountAvatar(servers)
+
       const { data } = await servers[0].channels.list({ start: 0, count: 1 })
       videoChannelId = data[0].id
     }
@@ -207,7 +212,7 @@ describe('Test multiple servers', function () {
             },
             {
               resolution: 720,
-              size: 788000
+              size: 750000
             }
           ],
           thumbnailfile: 'thumbnail',
diff --git a/server/tests/api/videos/single-server.ts b/server/tests/api/videos/single-server.ts
index 28bf018c5..d37043aef 100644
--- a/server/tests/api/videos/single-server.ts
+++ b/server/tests/api/videos/single-server.ts
@@ -5,7 +5,14 @@ import * as chai from 'chai'
 import { checkVideoFilesWereRemoved, completeVideoCheck, testImage } from '@server/tests/shared'
 import { wait } from '@shared/core-utils'
 import { Video, VideoPrivacy } from '@shared/models'
-import { cleanupTests, createSingleServer, PeerTubeServer, setAccessTokensToServers } from '@shared/server-commands'
+import {
+  cleanupTests,
+  createSingleServer,
+  PeerTubeServer,
+  setAccessTokensToServers,
+  setDefaultAccountAvatar,
+  setDefaultChannelAvatar
+} from '@shared/server-commands'
 
 const expect = chai.expect
 
@@ -90,6 +97,8 @@ describe('Test a single server', function () {
       server = await createSingleServer(1)
 
       await setAccessTokensToServers([ server ])
+      await setDefaultChannelAvatar(server)
+      await setDefaultAccountAvatar(server)
     })
 
     it('Should list video categories', async function () {
diff --git a/server/tests/api/videos/video-channels.ts b/server/tests/api/videos/video-channels.ts
index d435f3682..0f8227fd3 100644
--- a/server/tests/api/videos/video-channels.ts
+++ b/server/tests/api/videos/video-channels.ts
@@ -6,13 +6,14 @@ import { basename } from 'path'
 import { ACTOR_IMAGES_SIZE } from '@server/initializers/constants'
 import { testFileExistsOrNot, testImage } from '@server/tests/shared'
 import { wait } from '@shared/core-utils'
-import { User, VideoChannel } from '@shared/models'
+import { ActorImageType, User, VideoChannel } from '@shared/models'
 import {
   cleanupTests,
   createMultipleServers,
   doubleFollow,
   PeerTubeServer,
   setAccessTokensToServers,
+  setDefaultAccountAvatar,
   setDefaultVideoChannel,
   waitJobs
 } from '@shared/server-commands'
@@ -44,6 +45,7 @@ describe('Test video channels', function () {
 
     await setAccessTokensToServers(servers)
     await setDefaultVideoChannel(servers)
+    await setDefaultAccountAvatar(servers)
 
     await doubleFollow(servers[0], servers[1])
   })
@@ -281,14 +283,19 @@ describe('Test video channels', function () {
 
     for (const server of servers) {
       const videoChannel = await findChannel(server, secondVideoChannelId)
+      const expectedSizes = ACTOR_IMAGES_SIZE[ActorImageType.AVATAR]
 
-      avatarPaths[server.port] = videoChannel.avatar.path
-      await testImage(server.url, 'avatar-resized', avatarPaths[server.port], '.png')
-      await testFileExistsOrNot(server, 'avatars', basename(avatarPaths[server.port]), true)
+      expect(videoChannel.avatars.length).to.equal(expectedSizes.length, 'Expected avatars to be generated in all sizes')
 
-      const row = await server.sql.getActorImage(basename(avatarPaths[server.port]))
-      expect(row.height).to.equal(ACTOR_IMAGES_SIZE.AVATARS.height)
-      expect(row.width).to.equal(ACTOR_IMAGES_SIZE.AVATARS.width)
+      for (const avatar of videoChannel.avatars) {
+        avatarPaths[server.port] = avatar.path
+        await testImage(server.url, `avatar-resized-${avatar.width}x${avatar.width}`, avatarPaths[server.port], '.png')
+        await testFileExistsOrNot(server, 'avatars', basename(avatarPaths[server.port]), true)
+
+        const row = await server.sql.getActorImage(basename(avatarPaths[server.port]))
+
+        expect(expectedSizes.some(({ height, width }) => row.height === height && row.width === width)).to.equal(true)
+      }
     }
   })
 
@@ -308,19 +315,18 @@ describe('Test video channels', function () {
     for (const server of servers) {
       const videoChannel = await server.channels.get({ channelName: 'second_video_channel@' + servers[0].host })
 
-      bannerPaths[server.port] = videoChannel.banner.path
+      bannerPaths[server.port] = videoChannel.banners[0].path
       await testImage(server.url, 'banner-resized', bannerPaths[server.port])
       await testFileExistsOrNot(server, 'avatars', basename(bannerPaths[server.port]), true)
 
       const row = await server.sql.getActorImage(basename(bannerPaths[server.port]))
-      expect(row.height).to.equal(ACTOR_IMAGES_SIZE.BANNERS.height)
-      expect(row.width).to.equal(ACTOR_IMAGES_SIZE.BANNERS.width)
+      expect(row.height).to.equal(ACTOR_IMAGES_SIZE[ActorImageType.BANNER][0].height)
+      expect(row.width).to.equal(ACTOR_IMAGES_SIZE[ActorImageType.BANNER][0].width)
     }
   })
 
   it('Should delete the video channel avatar', async function () {
     this.timeout(15000)
-
     await servers[0].channels.deleteImage({ channelName: 'second_video_channel', type: 'avatar' })
 
     await waitJobs(servers)
@@ -329,7 +335,7 @@ describe('Test video channels', function () {
       const videoChannel = await findChannel(server, secondVideoChannelId)
       await testFileExistsOrNot(server, 'avatars', basename(avatarPaths[server.port]), false)
 
-      expect(videoChannel.avatar).to.be.null
+      expect(videoChannel.avatars).to.be.empty
     }
   })
 
@@ -344,7 +350,7 @@ describe('Test video channels', function () {
       const videoChannel = await findChannel(server, secondVideoChannelId)
       await testFileExistsOrNot(server, 'avatars', basename(bannerPaths[server.port]), false)
 
-      expect(videoChannel.banner).to.be.null
+      expect(videoChannel.banners).to.be.empty
     }
   })
 
diff --git a/server/tests/api/videos/video-comments.ts b/server/tests/api/videos/video-comments.ts
index 2ae523970..1488ce2b5 100644
--- a/server/tests/api/videos/video-comments.ts
+++ b/server/tests/api/videos/video-comments.ts
@@ -3,7 +3,15 @@
 import 'mocha'
 import * as chai from 'chai'
 import { dateIsValid, testImage } from '@server/tests/shared'
-import { cleanupTests, CommentsCommand, createSingleServer, PeerTubeServer, setAccessTokensToServers } from '@shared/server-commands'
+import {
+  cleanupTests,
+  CommentsCommand,
+  createSingleServer,
+  PeerTubeServer,
+  setAccessTokensToServers,
+  setDefaultAccountAvatar,
+  setDefaultChannelAvatar
+} from '@shared/server-commands'
 
 const expect = chai.expect
 
@@ -29,7 +37,8 @@ describe('Test video comments', function () {
     videoUUID = uuid
     videoId = id
 
-    await server.users.updateMyAvatar({ fixture: 'avatar.png' })
+    await setDefaultChannelAvatar(server)
+    await setDefaultAccountAvatar(server)
 
     userAccessTokenServer1 = await server.users.generateUserAndToken('user1')
 
@@ -81,7 +90,9 @@ describe('Test video comments', function () {
       expect(comment.account.name).to.equal('root')
       expect(comment.account.host).to.equal('localhost:' + server.port)
 
-      await testImage(server.url, 'avatar-resized', comment.account.avatar.path, '.png')
+      for (const avatar of comment.account.avatars) {
+        await testImage(server.url, `avatar-resized-${avatar.width}x${avatar.width}`, avatar.path, '.png')
+      }
 
       expect(comment.totalReplies).to.equal(0)
       expect(comment.totalRepliesFromVideoAuthor).to.equal(0)
diff --git a/server/tests/api/videos/video-playlists.ts b/server/tests/api/videos/video-playlists.ts
index 34327334f..1e8dbef02 100644
--- a/server/tests/api/videos/video-playlists.ts
+++ b/server/tests/api/videos/video-playlists.ts
@@ -20,6 +20,7 @@ import {
   PeerTubeServer,
   PlaylistsCommand,
   setAccessTokensToServers,
+  setDefaultAccountAvatar,
   setDefaultVideoChannel,
   waitJobs
 } from '@shared/server-commands'
@@ -79,6 +80,7 @@ describe('Test video playlists', function () {
     // Get the access tokens
     await setAccessTokensToServers(servers)
     await setDefaultVideoChannel(servers)
+    await setDefaultAccountAvatar(servers)
 
     // Server 1 and server 2 follow each other
     await doubleFollow(servers[0], servers[1])
diff --git a/server/tests/api/videos/videos-common-filters.ts b/server/tests/api/videos/videos-common-filters.ts
index 0254662c5..317de90a9 100644
--- a/server/tests/api/videos/videos-common-filters.ts
+++ b/server/tests/api/videos/videos-common-filters.ts
@@ -3,6 +3,7 @@
 import 'mocha'
 import { expect } from 'chai'
 import { pick } from '@shared/core-utils'
+import { HttpStatusCode, UserRole, Video, VideoDetails, VideoInclude, VideoPrivacy } from '@shared/models'
 import {
   cleanupTests,
   createMultipleServers,
@@ -10,10 +11,10 @@ import {
   makeGetRequest,
   PeerTubeServer,
   setAccessTokensToServers,
+  setDefaultAccountAvatar,
   setDefaultVideoChannel,
   waitJobs
 } from '@shared/server-commands'
-import { HttpStatusCode, UserRole, Video, VideoDetails, VideoInclude, VideoPrivacy } from '@shared/models'
 
 describe('Test videos filter', function () {
   let servers: PeerTubeServer[]
@@ -29,6 +30,7 @@ describe('Test videos filter', function () {
 
     await setAccessTokensToServers(servers)
     await setDefaultVideoChannel(servers)
+    await setDefaultAccountAvatar(servers)
 
     for (const server of servers) {
       const moderator = { username: 'moderator', password: 'my super password' }