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, 19 insertions, 13 deletions

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
     }
   })