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>

4 files changed, 30 insertions, 13 deletions

diff --git a/server/controllers/api/accounts.ts b/server/controllers/api/accounts.ts
index 46d89bafa..8d9f92d93 100644
--- a/server/controllers/api/accounts.ts
+++ b/server/controllers/api/accounts.ts
@@ -213,7 +213,7 @@ async function listAccountRatings (req: express.Request, res: express.Response)
     sort: req.query.sort,
     type: req.query.rating
   })
-  return res.json(getFormattedObjects(resultList.rows, resultList.count))
+  return res.json(getFormattedObjects(resultList.data, resultList.total))
 }
 
 async function listAccountFollowers (req: express.Request, res: express.Response) {
diff --git a/server/controllers/api/users/me.ts b/server/controllers/api/users/me.ts
index c2ad0b710..a1d621152 100644
--- a/server/controllers/api/users/me.ts
+++ b/server/controllers/api/users/me.ts
@@ -1,7 +1,9 @@
 import 'multer'
 import express from 'express'
 import { auditLoggerFactory, getAuditIdFromRes, UserAuditView } from '@server/helpers/audit-logger'
+import { getBiggestActorImage } from '@server/lib/actor-image'
 import { Hooks } from '@server/lib/plugins/hooks'
+import { pick } from '@shared/core-utils'
 import { ActorImageType, HttpStatusCode, UserUpdateMe, UserVideoQuota, UserVideoRate as FormattedUserVideoRate } from '@shared/models'
 import { AttributesOnly } from '@shared/typescript-utils'
 import { createReqFiles } from '../../../helpers/express-utils'
@@ -10,7 +12,7 @@ import { CONFIG } from '../../../initializers/config'
 import { MIMETYPES } from '../../../initializers/constants'
 import { sequelizeTypescript } from '../../../initializers/database'
 import { sendUpdateActor } from '../../../lib/activitypub/send'
-import { deleteLocalActorImageFile, updateLocalActorImageFile } from '../../../lib/local-actor'
+import { deleteLocalActorImageFile, updateLocalActorImageFiles } from '../../../lib/local-actor'
 import { getOriginalVideoFileTotalDailyFromUser, getOriginalVideoFileTotalFromUser, sendVerifyUserEmail } from '../../../lib/user'
 import {
   asyncMiddleware,
@@ -30,7 +32,6 @@ import { AccountVideoRateModel } from '../../../models/account/account-video-rat
 import { UserModel } from '../../../models/user/user'
 import { VideoModel } from '../../../models/video/video'
 import { VideoImportModel } from '../../../models/video/video-import'
-import { pick } from '@shared/core-utils'
 
 const auditLogger = auditLoggerFactory('users')
 
@@ -253,9 +254,17 @@ async function updateMyAvatar (req: express.Request, res: express.Response) {
 
   const userAccount = await AccountModel.load(user.Account.id)
 
-  const avatar = await updateLocalActorImageFile(userAccount, avatarPhysicalFile, ActorImageType.AVATAR)
+  const avatars = await updateLocalActorImageFiles(
+    userAccount,
+    avatarPhysicalFile,
+    ActorImageType.AVATAR
+  )
 
-  return res.json({ avatar: avatar.toFormattedJSON() })
+  return res.json({
+    // TODO: remove, deprecated in 4.2
+    avatar: getBiggestActorImage(avatars).toFormattedJSON(),
+    avatars: avatars.map(avatar => avatar.toFormattedJSON())
+  })
 }
 
 async function deleteMyAvatar (req: express.Request, res: express.Response) {
@@ -264,5 +273,5 @@ async function deleteMyAvatar (req: express.Request, res: express.Response) {
   const userAccount = await AccountModel.load(user.Account.id)
   await deleteLocalActorImageFile(userAccount, ActorImageType.AVATAR)
 
-  return res.status(HttpStatusCode.NO_CONTENT_204).end()
+  return res.json({ avatars: [] })
 }
diff --git a/server/controllers/api/users/my-notifications.ts b/server/controllers/api/users/my-notifications.ts
index d107a306e..58732158f 100644
--- a/server/controllers/api/users/my-notifications.ts
+++ b/server/controllers/api/users/my-notifications.ts
@@ -3,7 +3,6 @@ import express from 'express'
 import { UserNotificationModel } from '@server/models/user/user-notification'
 import { HttpStatusCode } from '../../../../shared/models/http/http-error-codes'
 import { UserNotificationSetting } from '../../../../shared/models/users'
-import { getFormattedObjects } from '../../../helpers/utils'
 import {
   asyncMiddleware,
   asyncRetryTransactionMiddleware,
@@ -20,6 +19,7 @@ import {
 } from '../../../middlewares/validators/user-notifications'
 import { UserNotificationSettingModel } from '../../../models/user/user-notification-setting'
 import { meRouter } from './me'
+import { getFormattedObjects } from '@server/helpers/utils'
 
 const myNotificationsRouter = express.Router()
 
diff --git a/server/controllers/api/video-channel.ts b/server/controllers/api/video-channel.ts
index e65550a22..2f869d9b3 100644
--- a/server/controllers/api/video-channel.ts
+++ b/server/controllers/api/video-channel.ts
@@ -1,5 +1,6 @@
 import express from 'express'
 import { pickCommonVideoQuery } from '@server/helpers/query'
+import { getBiggestActorImage } from '@server/lib/actor-image'
 import { Hooks } from '@server/lib/plugins/hooks'
 import { ActorFollowModel } from '@server/models/actor/actor-follow'
 import { getServerActor } from '@server/models/application/application'
@@ -16,7 +17,7 @@ import { MIMETYPES } from '../../initializers/constants'
 import { sequelizeTypescript } from '../../initializers/database'
 import { sendUpdateActor } from '../../lib/activitypub/send'
 import { JobQueue } from '../../lib/job-queue'
-import { deleteLocalActorImageFile, updateLocalActorImageFile } from '../../lib/local-actor'
+import { deleteLocalActorImageFile, updateLocalActorImageFiles } from '../../lib/local-actor'
 import { createLocalVideoChannel, federateAllVideosOfChannel } from '../../lib/video-channel'
 import {
   asyncMiddleware,
@@ -186,11 +187,15 @@ async function updateVideoChannelBanner (req: express.Request, res: express.Resp
   const videoChannel = res.locals.videoChannel
   const oldVideoChannelAuditKeys = new VideoChannelAuditView(videoChannel.toFormattedJSON())
 
-  const banner = await updateLocalActorImageFile(videoChannel, bannerPhysicalFile, ActorImageType.BANNER)
+  const banners = await updateLocalActorImageFiles(videoChannel, bannerPhysicalFile, ActorImageType.BANNER)
 
   auditLogger.update(getAuditIdFromRes(res), new VideoChannelAuditView(videoChannel.toFormattedJSON()), oldVideoChannelAuditKeys)
 
-  return res.json({ banner: banner.toFormattedJSON() })
+  return res.json({
+    // TODO: remove, deprecated in 4.2
+    banner: getBiggestActorImage(banners).toFormattedJSON(),
+    banners: banners.map(b => b.toFormattedJSON())
+  })
 }
 
 async function updateVideoChannelAvatar (req: express.Request, res: express.Response) {
@@ -198,11 +203,14 @@ async function updateVideoChannelAvatar (req: express.Request, res: express.Resp
   const videoChannel = res.locals.videoChannel
   const oldVideoChannelAuditKeys = new VideoChannelAuditView(videoChannel.toFormattedJSON())
 
-  const avatar = await updateLocalActorImageFile(videoChannel, avatarPhysicalFile, ActorImageType.AVATAR)
-
+  const avatars = await updateLocalActorImageFiles(videoChannel, avatarPhysicalFile, ActorImageType.AVATAR)
   auditLogger.update(getAuditIdFromRes(res), new VideoChannelAuditView(videoChannel.toFormattedJSON()), oldVideoChannelAuditKeys)
 
-  return res.json({ avatar: avatar.toFormattedJSON() })
+  return res.json({
+    // TODO: remove, deprecated in 4.2
+    avatar: getBiggestActorImage(avatars).toFormattedJSON(),
+    avatars: avatars.map(a => a.toFormattedJSON())
+  })
 }
 
 async function deleteVideoChannelAvatar (req: express.Request, res: express.Response) {