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>

31 files changed, 173 insertions, 51 deletions

diff --git a/server/tests/api/check-params/video-channels.ts b/server/tests/api/check-params/video-channels.ts
index 1e9732fe9..5c2650fac 100644
--- a/server/tests/api/check-params/video-channels.ts
+++ b/server/tests/api/check-params/video-channels.ts
@@ -228,7 +228,7 @@ describe('Test video channels API validator', function () {
     })
   })
 
-  describe('When updating video channel avatar/banner', function () {
+  describe('When updating video channel avatars/banners', function () {
     const types = [ 'avatar', 'banner' ]
     let path: string
 
diff --git a/server/tests/api/moderation/abuses.ts b/server/tests/api/moderation/abuses.ts
index 0c3bed3e7..7bf49c7ec 100644
--- a/server/tests/api/moderation/abuses.ts
+++ b/server/tests/api/moderation/abuses.ts
@@ -2,6 +2,7 @@
 
 import 'mocha'
 import * as chai from 'chai'
+import { AbuseMessage, AbusePredefinedReasonsString, AbuseState, AdminAbuse, UserAbuse } from '@shared/models'
 import {
   AbusesCommand,
   cleanupTests,
@@ -9,9 +10,10 @@ import {
   doubleFollow,
   PeerTubeServer,
   setAccessTokensToServers,
+  setDefaultAccountAvatar,
+  setDefaultChannelAvatar,
   waitJobs
 } from '@shared/server-commands'
-import { AbuseMessage, AbusePredefinedReasonsString, AbuseState, AdminAbuse, UserAbuse } from '@shared/models'
 
 const expect = chai.expect
 
@@ -27,8 +29,9 @@ describe('Test abuses', function () {
     // Run servers
     servers = await createMultipleServers(2)
 
-    // 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/moderation/blocklist.ts b/server/tests/api/moderation/blocklist.ts
index b45460bb4..e1344a245 100644
--- a/server/tests/api/moderation/blocklist.ts
+++ b/server/tests/api/moderation/blocklist.ts
@@ -2,6 +2,7 @@
 
 import 'mocha'
 import * as chai from 'chai'
+import { UserNotificationType } from '@shared/models'
 import {
   BlocklistCommand,
   cleanupTests,
@@ -10,9 +11,9 @@ import {
   doubleFollow,
   PeerTubeServer,
   setAccessTokensToServers,
+  setDefaultAccountAvatar,
   waitJobs
 } from '@shared/server-commands'
-import { UserNotificationType } from '@shared/models'
 
 const expect = chai.expect
 
@@ -79,6 +80,7 @@ describe('Test blocklist', function () {
 
     servers = await createMultipleServers(3)
     await setAccessTokensToServers(servers)
+    await setDefaultAccountAvatar(servers)
 
     command = servers[0].blocklist
     commentsCommand = servers.map(s => s.comments)
diff --git a/server/tests/api/moderation/video-blacklist.ts b/server/tests/api/moderation/video-blacklist.ts
index 3e7f2ba33..1790210ff 100644
--- a/server/tests/api/moderation/video-blacklist.ts
+++ b/server/tests/api/moderation/video-blacklist.ts
@@ -13,6 +13,7 @@ import {
   killallServers,
   PeerTubeServer,
   setAccessTokensToServers,
+  setDefaultChannelAvatar,
   waitJobs
 } from '@shared/server-commands'
 
@@ -42,6 +43,7 @@ describe('Test video blacklist', function () {
 
     // Server 1 and server 2 follow each other
     await doubleFollow(servers[0], servers[1])
+    await setDefaultChannelAvatar(servers[0])
 
     // Upload 2 videos on server 2
     await servers[1].videos.upload({ attributes: { name: 'My 1st video', description: 'A video on server 2' } })
diff --git a/server/tests/api/notifications/notifications-api.ts b/server/tests/api/notifications/notifications-api.ts
index ac08449f8..78864c8a0 100644
--- a/server/tests/api/notifications/notifications-api.ts
+++ b/server/tests/api/notifications/notifications-api.ts
@@ -38,6 +38,16 @@ describe('Test notifications API', function () {
     await waitJobs([ server ])
   })
 
+  describe('Notification list & count', function () {
+
+    it('Should correctly list notifications', async function () {
+      const { data, total } = await server.notifications.list({ token: userToken, start: 0, count: 2 })
+
+      expect(data).to.have.lengthOf(2)
+      expect(total).to.equal(10)
+    })
+  })
+
   describe('Mark as read', function () {
 
     it('Should mark as read some notifications', async function () {
diff --git a/server/tests/api/search/search-activitypub-video-channels.ts b/server/tests/api/search/search-activitypub-video-channels.ts
index 2e0abc6ba..5f5322d03 100644
--- a/server/tests/api/search/search-activitypub-video-channels.ts
+++ b/server/tests/api/search/search-activitypub-video-channels.ts
@@ -10,6 +10,8 @@ import {
   PeerTubeServer,
   SearchCommand,
   setAccessTokensToServers,
+  setDefaultAccountAvatar,
+  setDefaultVideoChannel,
   waitJobs
 } from '@shared/server-commands'
 
@@ -28,6 +30,8 @@ describe('Test ActivityPub video channels search', function () {
     servers = await createMultipleServers(2)
 
     await setAccessTokensToServers(servers)
+    await setDefaultVideoChannel(servers)
+    await setDefaultAccountAvatar(servers)
 
     {
       await servers[0].users.create({ username: 'user1_server1', password: 'password' })
diff --git a/server/tests/api/search/search-activitypub-video-playlists.ts b/server/tests/api/search/search-activitypub-video-playlists.ts
index d9243ac53..b9a424292 100644
--- a/server/tests/api/search/search-activitypub-video-playlists.ts
+++ b/server/tests/api/search/search-activitypub-video-playlists.ts
@@ -10,6 +10,7 @@ import {
   PeerTubeServer,
   SearchCommand,
   setAccessTokensToServers,
+  setDefaultAccountAvatar,
   setDefaultVideoChannel,
   waitJobs
 } from '@shared/server-commands'
@@ -31,6 +32,7 @@ describe('Test ActivityPub playlists search', function () {
 
     await setAccessTokensToServers(servers)
     await setDefaultVideoChannel(servers)
+    await setDefaultAccountAvatar(servers)
 
     {
       const video1 = (await servers[0].videos.quickUpload({ name: 'video 1' })).uuid
diff --git a/server/tests/api/search/search-activitypub-videos.ts b/server/tests/api/search/search-activitypub-videos.ts
index 60b95ae4c..20249b1f1 100644
--- a/server/tests/api/search/search-activitypub-videos.ts
+++ b/server/tests/api/search/search-activitypub-videos.ts
@@ -10,6 +10,8 @@ import {
   PeerTubeServer,
   SearchCommand,
   setAccessTokensToServers,
+  setDefaultAccountAvatar,
+  setDefaultVideoChannel,
   waitJobs
 } from '@shared/server-commands'
 
@@ -28,6 +30,8 @@ describe('Test ActivityPub videos search', function () {
     servers = await createMultipleServers(2)
 
     await setAccessTokensToServers(servers)
+    await setDefaultVideoChannel(servers)
+    await setDefaultAccountAvatar(servers)
 
     {
       const { uuid } = await servers[0].videos.upload({ attributes: { name: 'video 1 on server 1' } })
diff --git a/server/tests/api/search/search-channels.ts b/server/tests/api/search/search-channels.ts
index 8a92def61..0073c71e1 100644
--- a/server/tests/api/search/search-channels.ts
+++ b/server/tests/api/search/search-channels.ts
@@ -2,15 +2,17 @@
 
 import 'mocha'
 import * as chai from 'chai'
+import { VideoChannel } from '@shared/models'
 import {
   cleanupTests,
   createSingleServer,
   doubleFollow,
   PeerTubeServer,
   SearchCommand,
-  setAccessTokensToServers
+  setAccessTokensToServers,
+  setDefaultAccountAvatar,
+  setDefaultChannelAvatar
 } from '@shared/server-commands'
-import { VideoChannel } from '@shared/models'
 
 const expect = chai.expect
 
@@ -30,6 +32,8 @@ describe('Test channels search', function () {
     remoteServer = servers[1]
 
     await setAccessTokensToServers([ server, remoteServer ])
+    await setDefaultChannelAvatar(server)
+    await setDefaultAccountAvatar(server)
 
     {
       await server.users.create({ username: 'user1' })
diff --git a/server/tests/api/search/search-index.ts b/server/tests/api/search/search-index.ts
index f84d03345..ae933449f 100644
--- a/server/tests/api/search/search-index.ts
+++ b/server/tests/api/search/search-index.ts
@@ -14,7 +14,7 @@ import {
 
 const expect = chai.expect
 
-describe('Test videos search', function () {
+describe('Test index search', function () {
   const localVideoName = 'local video' + new Date().toISOString()
 
   let server: PeerTubeServer = null
@@ -134,12 +134,16 @@ describe('Test videos search', function () {
       expect(video.account.host).to.equal('framatube.org')
       expect(video.account.name).to.equal('framasoft')
       expect(video.account.url).to.equal('https://framatube.org/accounts/framasoft')
+      // TODO: remove, deprecated in 4.2
       expect(video.account.avatar).to.exist
+      expect(video.account.avatars.length).to.equal(1, 'Account should have one avatar image')
 
       expect(video.channel.host).to.equal('framatube.org')
       expect(video.channel.name).to.equal('joinpeertube')
       expect(video.channel.url).to.equal('https://framatube.org/video-channels/joinpeertube')
+      // TODO: remove, deprecated in 4.2
       expect(video.channel.avatar).to.exist
+      expect(video.channel.avatars.length).to.equal(1, 'Channel should have one avatar image')
     }
 
     const baseSearch: VideosSearchQuery = {
@@ -316,13 +320,17 @@ describe('Test videos search', function () {
       const videoChannel = body.data[0]
       expect(videoChannel.url).to.equal('https://framatube.org/video-channels/bf54d359-cfad-4935-9d45-9d6be93f63e8')
       expect(videoChannel.host).to.equal('framatube.org')
+      // TODO: remove, deprecated in 4.2
       expect(videoChannel.avatar).to.exist
+      expect(videoChannel.avatars.length).to.equal(1, 'Channel should have two avatar images')
       expect(videoChannel.displayName).to.exist
 
       expect(videoChannel.ownerAccount.url).to.equal('https://framatube.org/accounts/framasoft')
       expect(videoChannel.ownerAccount.name).to.equal('framasoft')
       expect(videoChannel.ownerAccount.host).to.equal('framatube.org')
+      // TODO: remove, deprecated in 4.2
       expect(videoChannel.ownerAccount.avatar).to.exist
+      expect(videoChannel.ownerAccount.avatars.length).to.equal(1, 'Account should have two avatar images')
     }
 
     it('Should make a simple search and not have results', async function () {
@@ -388,12 +396,16 @@ describe('Test videos search', function () {
       expect(videoPlaylist.ownerAccount.url).to.equal('https://peertube2.cpy.re/accounts/chocobozzz')
       expect(videoPlaylist.ownerAccount.name).to.equal('chocobozzz')
       expect(videoPlaylist.ownerAccount.host).to.equal('peertube2.cpy.re')
+      // TODO: remove, deprecated in 4.2
       expect(videoPlaylist.ownerAccount.avatar).to.exist
+      expect(videoPlaylist.ownerAccount.avatars.length).to.equal(1, 'Account should have two avatar images')
 
       expect(videoPlaylist.videoChannel.url).to.equal('https://peertube2.cpy.re/video-channels/chocobozzz_channel')
       expect(videoPlaylist.videoChannel.name).to.equal('chocobozzz_channel')
       expect(videoPlaylist.videoChannel.host).to.equal('peertube2.cpy.re')
+      // TODO: remove, deprecated in 4.2
       expect(videoPlaylist.videoChannel.avatar).to.exist
+      expect(videoPlaylist.videoChannel.avatars.length).to.equal(1, 'Channel should have two avatar images')
     }
 
     it('Should make a simple search and not have results', async function () {
diff --git a/server/tests/api/search/search-playlists.ts b/server/tests/api/search/search-playlists.ts
index 1e9c8d4bb..fcf2f2ee2 100644
--- a/server/tests/api/search/search-playlists.ts
+++ b/server/tests/api/search/search-playlists.ts
@@ -2,6 +2,7 @@
 
 import 'mocha'
 import * as chai from 'chai'
+import { VideoPlaylistPrivacy } from '@shared/models'
 import {
   cleanupTests,
   createSingleServer,
@@ -9,9 +10,10 @@ import {
   PeerTubeServer,
   SearchCommand,
   setAccessTokensToServers,
+  setDefaultAccountAvatar,
+  setDefaultChannelAvatar,
   setDefaultVideoChannel
 } from '@shared/server-commands'
-import { VideoPlaylistPrivacy } from '@shared/models'
 
 const expect = chai.expect
 
@@ -34,6 +36,8 @@ describe('Test playlists search', function () {
 
     await setAccessTokensToServers([ remoteServer, server ])
     await setDefaultVideoChannel([ remoteServer, server ])
+    await setDefaultChannelAvatar([ remoteServer, server ])
+    await setDefaultAccountAvatar([ remoteServer, server ])
 
     {
       const videoId = (await server.videos.upload()).uuid
diff --git a/server/tests/api/search/search-videos.ts b/server/tests/api/search/search-videos.ts
index c544705d3..ff4c3c161 100644
--- a/server/tests/api/search/search-videos.ts
+++ b/server/tests/api/search/search-videos.ts
@@ -2,6 +2,8 @@
 
 import 'mocha'
 import * as chai from 'chai'
+import { wait } from '@shared/core-utils'
+import { VideoPrivacy } from '@shared/models'
 import {
   cleanupTests,
   createSingleServer,
@@ -9,11 +11,11 @@ import {
   PeerTubeServer,
   SearchCommand,
   setAccessTokensToServers,
+  setDefaultAccountAvatar,
+  setDefaultChannelAvatar,
   setDefaultVideoChannel,
   stopFfmpeg
 } from '@shared/server-commands'
-import { VideoPrivacy } from '@shared/models'
-import { wait } from '@shared/core-utils'
 
 const expect = chai.expect
 
@@ -38,6 +40,8 @@ describe('Test videos search', function () {
 
     await setAccessTokensToServers([ server, remoteServer ])
     await setDefaultVideoChannel([ server, remoteServer ])
+    await setDefaultChannelAvatar(server)
+    await setDefaultAccountAvatar(servers)
 
     {
       const attributes1 = {
diff --git a/server/tests/api/server/homepage.ts b/server/tests/api/server/homepage.ts
index 552ee98cf..e7de6bfee 100644
--- a/server/tests/api/server/homepage.ts
+++ b/server/tests/api/server/homepage.ts
@@ -9,7 +9,9 @@ import {
   CustomPagesCommand,
   killallServers,
   PeerTubeServer,
-  setAccessTokensToServers
+  setAccessTokensToServers,
+  setDefaultAccountAvatar,
+  setDefaultChannelAvatar
 } from '../../../../shared/server-commands/index'
 
 const expect = chai.expect
@@ -29,6 +31,8 @@ describe('Test instance homepage actions', function () {
 
     server = await createSingleServer(1)
     await setAccessTokensToServers([ server ])
+    await setDefaultChannelAvatar(server)
+    await setDefaultAccountAvatar(server)
 
     command = server.customPage
   })
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)
+        }
       }
     })
 
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' }
diff --git a/server/tests/cli/prune-storage.ts b/server/tests/cli/prune-storage.ts
index a723ed8b4..3ca7c19ea 100644
--- a/server/tests/cli/prune-storage.ts
+++ b/server/tests/cli/prune-storage.ts
@@ -51,7 +51,7 @@ async function assertCountAreOkay (servers: PeerTubeServer[]) {
     expect(thumbnailsCount).to.equal(6)
 
     const avatarsCount = await countFiles(server, 'avatars')
-    expect(avatarsCount).to.equal(2)
+    expect(avatarsCount).to.equal(4)
 
     const hlsRootCount = await countFiles(server, 'streaming-playlists/hls')
     expect(hlsRootCount).to.equal(2)
@@ -87,23 +87,28 @@ describe('Test prune storage scripts', function () {
 
     await doubleFollow(servers[0], servers[1])
 
-    // Lazy load the remote avatar
+    // Lazy load the remote avatars
     {
       const account = await servers[0].accounts.get({ accountName: 'root@localhost:' + servers[1].port })
-      await makeGetRequest({
-        url: servers[0].url,
-        path: account.avatar.path,
-        expectedStatus: HttpStatusCode.OK_200
-      })
+
+      for (const avatar of account.avatars) {
+        await makeGetRequest({
+          url: servers[0].url,
+          path: avatar.path,
+          expectedStatus: HttpStatusCode.OK_200
+        })
+      }
     }
 
     {
       const account = await servers[1].accounts.get({ accountName: 'root@localhost:' + servers[0].port })
-      await makeGetRequest({
-        url: servers[1].url,
-        path: account.avatar.path,
-        expectedStatus: HttpStatusCode.OK_200
-      })
+      for (const avatar of account.avatars) {
+        await makeGetRequest({
+          url: servers[1].url,
+          path: avatar.path,
+          expectedStatus: HttpStatusCode.OK_200
+        })
+      }
     }
 
     await wait(1000)
diff --git a/server/tests/feeds/feeds.ts b/server/tests/feeds/feeds.ts
index 4dcd77cca..320dc3333 100644
--- a/server/tests/feeds/feeds.ts
+++ b/server/tests/feeds/feeds.ts
@@ -3,6 +3,7 @@
 import 'mocha'
 import * as chai from 'chai'
 import { XMLParser, XMLValidator } from 'fast-xml-parser'
+import { HttpStatusCode, VideoPrivacy } from '@shared/models'
 import {
   cleanupTests,
   createMultipleServers,
@@ -11,9 +12,9 @@ import {
   makeGetRequest,
   PeerTubeServer,
   setAccessTokensToServers,
+  setDefaultChannelAvatar,
   waitJobs
 } from '@shared/server-commands'
-import { HttpStatusCode, VideoPrivacy } from '@shared/models'
 
 chai.use(require('chai-xml'))
 chai.use(require('chai-json-schema'))
@@ -44,6 +45,7 @@ describe('Test syndication feeds', () => {
     })
 
     await setAccessTokensToServers([ ...servers, serverHLSOnly ])
+    await setDefaultChannelAvatar(servers[0])
     await doubleFollow(servers[0], servers[1])
 
     {
diff --git a/server/tests/fixtures/avatar-resized.gif b/server/tests/fixtures/avatar-resized-120x120.gif
index 81a82189e..81a82189e 100644
--- a/server/tests/fixtures/avatar-resized.gif
+++ b/server/tests/fixtures/avatar-resized-120x120.gif
diff --git a/server/tests/fixtures/avatar-resized.png b/server/tests/fixtures/avatar-resized-120x120.png
index 9d84151f8..9d84151f8 100644
--- a/server/tests/fixtures/avatar-resized.png
+++ b/server/tests/fixtures/avatar-resized-120x120.png
diff --git a/server/tests/fixtures/avatar-resized-48x48.gif b/server/tests/fixtures/avatar-resized-48x48.gif
new file mode 100644
index 000000000..5900ff12e
--- /dev/null
+++ b/server/tests/fixtures/avatar-resized-48x48.gif
diff --git a/server/tests/fixtures/avatar-resized-48x48.png b/server/tests/fixtures/avatar-resized-48x48.png
new file mode 100644
index 000000000..9e5f3b490
--- /dev/null
+++ b/server/tests/fixtures/avatar-resized-48x48.png
diff --git a/server/tests/fixtures/avatar2-resized.png b/server/tests/fixtures/avatar2-resized-120x120.png
index 44149facb..44149facb 100644
--- a/server/tests/fixtures/avatar2-resized.png
+++ b/server/tests/fixtures/avatar2-resized-120x120.png
diff --git a/server/tests/fixtures/avatar2-resized-48x48.png b/server/tests/fixtures/avatar2-resized-48x48.png
new file mode 100644
index 000000000..bb3939b1a
--- /dev/null
+++ b/server/tests/fixtures/avatar2-resized-48x48.png
diff --git a/server/tests/shared/notifications.ts b/server/tests/shared/notifications.ts
index cdc21fdc8..78d3787f0 100644
--- a/server/tests/shared/notifications.ts
+++ b/server/tests/shared/notifications.ts
@@ -10,7 +10,14 @@ import {
   UserNotificationSettingValue,
   UserNotificationType
 } from '@shared/models'
-import { createMultipleServers, doubleFollow, PeerTubeServer, setAccessTokensToServers } from '@shared/server-commands'
+import {
+  createMultipleServers,
+  doubleFollow,
+  PeerTubeServer,
+  setAccessTokensToServers,
+  setDefaultAccountAvatar,
+  setDefaultChannelAvatar
+} from '@shared/server-commands'
 import { MockSmtpServer } from './mock-servers'
 
 type CheckerBaseParams = {
@@ -646,6 +653,8 @@ async function prepareNotificationsTest (serversCount = 3, overrideConfigArg: an
   const servers = await createMultipleServers(serversCount, Object.assign(overrideConfig, overrideConfigArg))
 
   await setAccessTokensToServers(servers)
+  await setDefaultChannelAvatar(servers)
+  await setDefaultAccountAvatar(servers)
 
   if (serversCount > 1) {
     await doubleFollow(servers[0], servers[1])