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>

7 files changed, 40 insertions, 6 deletions

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 = {