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, 96 insertions, 77 deletions

diff --git a/server/lib/activitypub/actors/image.ts b/server/lib/activitypub/actors/image.ts
index 443ad0a63..d17c2ef1a 100644
--- a/server/lib/activitypub/actors/image.ts
+++ b/server/lib/activitypub/actors/image.ts
@@ -12,53 +12,52 @@ type ImageInfo = {
   onDisk?: boolean
 }
 
-async function updateActorImageInstance (actor: MActorImages, type: ActorImageType, imageInfo: ImageInfo | null, t: Transaction) {
-  const oldImageModel = type === ActorImageType.AVATAR
-    ? actor.Avatar
-    : actor.Banner
+async function updateActorImages (actor: MActorImages, type: ActorImageType, imagesInfo: ImageInfo[], t: Transaction) {
+  const avatarsOrBanners = type === ActorImageType.AVATAR
+    ? actor.Avatars
+    : actor.Banners
 
-  if (oldImageModel) {
-    // Don't update the avatar if the file URL did not change
-    if (imageInfo?.fileUrl && oldImageModel.fileUrl === imageInfo.fileUrl) return actor
+  if (imagesInfo.length === 0) {
+    await deleteActorImages(actor, type, t)
+  }
+
+  for (const imageInfo of imagesInfo) {
+    const oldImageModel = (avatarsOrBanners || []).find(i => i.width === imageInfo.width)
 
-    try {
-      await oldImageModel.destroy({ transaction: t })
+    if (oldImageModel) {
+      // Don't update the avatar if the file URL did not change
+      if (imageInfo?.fileUrl && oldImageModel.fileUrl === imageInfo.fileUrl) {
+        continue
+      }
 
-      setActorImage(actor, type, null)
-    } catch (err) {
-      logger.error('Cannot remove old actor image of actor %s.', actor.url, { err })
+      await safeDeleteActorImage(actor, oldImageModel, type, t)
     }
-  }
 
-  if (imageInfo) {
     const imageModel = await ActorImageModel.create({
       filename: imageInfo.name,
       onDisk: imageInfo.onDisk ?? false,
       fileUrl: imageInfo.fileUrl,
       height: imageInfo.height,
       width: imageInfo.width,
-      type
+      type,
+      actorId: actor.id
     }, { transaction: t })
 
-    setActorImage(actor, type, imageModel)
+    addActorImage(actor, type, imageModel)
   }
 
   return actor
 }
 
-async function deleteActorImageInstance (actor: MActorImages, type: ActorImageType, t: Transaction) {
+async function deleteActorImages (actor: MActorImages, type: ActorImageType, t: Transaction) {
   try {
-    if (type === ActorImageType.AVATAR) {
-      await actor.Avatar.destroy({ transaction: t })
-
-      actor.avatarId = null
-      actor.Avatar = null
-    } else {
-      await actor.Banner.destroy({ transaction: t })
+    const association = buildAssociationName(type)
 
-      actor.bannerId = null
-      actor.Banner = null
+    for (const image of actor[association]) {
+      await image.destroy({ transaction: t })
     }
+
+    actor[association] = []
   } catch (err) {
     logger.error('Cannot remove old image of actor %s.', actor.url, { err })
   }
@@ -66,29 +65,37 @@ async function deleteActorImageInstance (actor: MActorImages, type: ActorImageTy
   return actor
 }
 
+async function safeDeleteActorImage (actor: MActorImages, toDelete: MActorImage, type: ActorImageType, t: Transaction) {
+  try {
+    await toDelete.destroy({ transaction: t })
+
+    const association = buildAssociationName(type)
+    actor[association] = actor[association].filter(image => image.id !== toDelete.id)
+  } catch (err) {
+    logger.error('Cannot remove old actor image of actor %s.', actor.url, { err })
+  }
+}
+
 // ---------------------------------------------------------------------------
 
 export {
   ImageInfo,
 
-  updateActorImageInstance,
-  deleteActorImageInstance
+  updateActorImages,
+  deleteActorImages
 }
 
 // ---------------------------------------------------------------------------
 
-function setActorImage (actorModel: MActorImages, type: ActorImageType, imageModel: MActorImage) {
-  const id = imageModel
-    ? imageModel.id
-    : null
-
-  if (type === ActorImageType.AVATAR) {
-    actorModel.avatarId = id
-    actorModel.Avatar = imageModel
-  } else {
-    actorModel.bannerId = id
-    actorModel.Banner = imageModel
-  }
+function addActorImage (actor: MActorImages, type: ActorImageType, imageModel: MActorImage) {
+  const association = buildAssociationName(type)
+  if (!actor[association]) actor[association] = []
+
+  actor[association].push(imageModel)
+}
 
-  return actorModel
+function buildAssociationName (type: ActorImageType) {
+  return type === ActorImageType.AVATAR
+    ? 'Avatars'
+    : 'Banners'
 }
diff --git a/server/lib/activitypub/actors/shared/creator.ts b/server/lib/activitypub/actors/shared/creator.ts
index 999aed97d..500bc9912 100644
--- a/server/lib/activitypub/actors/shared/creator.ts
+++ b/server/lib/activitypub/actors/shared/creator.ts
@@ -6,8 +6,8 @@ import { ServerModel } from '@server/models/server/server'
 import { VideoChannelModel } from '@server/models/video/video-channel'
 import { MAccount, MAccountDefault, MActor, MActorFullActor, MActorId, MActorImages, MChannel, MServer } from '@server/types/models'
 import { ActivityPubActor, ActorImageType } from '@shared/models'
-import { updateActorImageInstance } from '../image'
-import { getActorAttributesFromObject, getActorDisplayNameFromObject, getImageInfoFromObject } from './object-to-model-attributes'
+import { updateActorImages } from '../image'
+import { getActorAttributesFromObject, getActorDisplayNameFromObject, getImagesInfoFromObject } from './object-to-model-attributes'
 import { fetchActorFollowsCount } from './url-to-object'
 
 export class APActorCreator {
@@ -27,11 +27,11 @@ export class APActorCreator {
     return sequelizeTypescript.transaction(async t => {
       const server = await this.setServer(actorInstance, t)
 
-      await this.setImageIfNeeded(actorInstance, ActorImageType.AVATAR, t)
-      await this.setImageIfNeeded(actorInstance, ActorImageType.BANNER, t)
-
       const { actorCreated, created } = await this.saveActor(actorInstance, t)
 
+      await this.setImageIfNeeded(actorCreated, ActorImageType.AVATAR, t)
+      await this.setImageIfNeeded(actorCreated, ActorImageType.BANNER, t)
+
       await this.tryToFixActorUrlIfNeeded(actorCreated, actorInstance, created, t)
 
       if (actorCreated.type === 'Person' || actorCreated.type === 'Application') { // Account or PeerTube instance
@@ -71,10 +71,10 @@ export class APActorCreator {
   }
 
   private async setImageIfNeeded (actor: MActor, type: ActorImageType, t: Transaction) {
-    const imageInfo = getImageInfoFromObject(this.actorObject, type)
-    if (!imageInfo) return
+    const imagesInfo = getImagesInfoFromObject(this.actorObject, type)
+    if (imagesInfo.length === 0) return
 
-    return updateActorImageInstance(actor as MActorImages, type, imageInfo, t)
+    return updateActorImages(actor as MActorImages, type, imagesInfo, t)
   }
 
   private async saveActor (actor: MActor, t: Transaction) {
diff --git a/server/lib/activitypub/actors/shared/object-to-model-attributes.ts b/server/lib/activitypub/actors/shared/object-to-model-attributes.ts
index 23bc972e5..f6a78c457 100644
--- a/server/lib/activitypub/actors/shared/object-to-model-attributes.ts
+++ b/server/lib/activitypub/actors/shared/object-to-model-attributes.ts
@@ -4,7 +4,7 @@ import { ActorModel } from '@server/models/actor/actor'
 import { FilteredModelAttributes } from '@server/types'
 import { getLowercaseExtension } from '@shared/core-utils'
 import { buildUUID } from '@shared/extra-utils'
-import { ActivityPubActor, ActorImageType } from '@shared/models'
+import { ActivityIconObject, ActivityPubActor, ActorImageType } from '@shared/models'
 
 function getActorAttributesFromObject (
   actorObject: ActivityPubActor,
@@ -30,33 +30,36 @@ function getActorAttributesFromObject (
   }
 }
 
-function getImageInfoFromObject (actorObject: ActivityPubActor, type: ActorImageType) {
-  const mimetypes = MIMETYPES.IMAGE
-  const icon = type === ActorImageType.AVATAR
-    ? actorObject.icon
+function getImagesInfoFromObject (actorObject: ActivityPubActor, type: ActorImageType) {
+  const iconsOrImages = type === ActorImageType.AVATAR
+    ? actorObject.icons || actorObject.icon
     : actorObject.image
 
-  if (!icon || icon.type !== 'Image' || !isActivityPubUrlValid(icon.url)) return undefined
+  return normalizeIconOrImage(iconsOrImages).map(iconOrImage => {
+    const mimetypes = MIMETYPES.IMAGE
 
-  let extension: string
+    if (iconOrImage.type !== 'Image' || !isActivityPubUrlValid(iconOrImage.url)) return undefined
 
-  if (icon.mediaType) {
-    extension = mimetypes.MIMETYPE_EXT[icon.mediaType]
-  } else {
-    const tmp = getLowercaseExtension(icon.url)
+    let extension: string
 
-    if (mimetypes.EXT_MIMETYPE[tmp] !== undefined) extension = tmp
-  }
+    if (iconOrImage.mediaType) {
+      extension = mimetypes.MIMETYPE_EXT[iconOrImage.mediaType]
+    } else {
+      const tmp = getLowercaseExtension(iconOrImage.url)
 
-  if (!extension) return undefined
+      if (mimetypes.EXT_MIMETYPE[tmp] !== undefined) extension = tmp
+    }
 
-  return {
-    name: buildUUID() + extension,
-    fileUrl: icon.url,
-    height: icon.height,
-    width: icon.width,
-    type
-  }
+    if (!extension) return undefined
+
+    return {
+      name: buildUUID() + extension,
+      fileUrl: iconOrImage.url,
+      height: iconOrImage.height,
+      width: iconOrImage.width,
+      type
+    }
+  })
 }
 
 function getActorDisplayNameFromObject (actorObject: ActivityPubActor) {
@@ -65,6 +68,15 @@ function getActorDisplayNameFromObject (actorObject: ActivityPubActor) {
 
 export {
   getActorAttributesFromObject,
-  getImageInfoFromObject,
+  getImagesInfoFromObject,
   getActorDisplayNameFromObject
 }
+
+// ---------------------------------------------------------------------------
+
+function normalizeIconOrImage (icon: ActivityIconObject | ActivityIconObject[]): ActivityIconObject[] {
+  if (Array.isArray(icon)) return icon
+  if (icon) return [ icon ]
+
+  return []
+}
diff --git a/server/lib/activitypub/actors/updater.ts b/server/lib/activitypub/actors/updater.ts
index 042438d9c..fe94af9f1 100644
--- a/server/lib/activitypub/actors/updater.ts
+++ b/server/lib/activitypub/actors/updater.ts
@@ -5,9 +5,9 @@ import { VideoChannelModel } from '@server/models/video/video-channel'
 import { MAccount, MActor, MActorFull, MChannel } from '@server/types/models'
 import { ActivityPubActor, ActorImageType } from '@shared/models'
 import { getOrCreateAPOwner } from './get'
-import { updateActorImageInstance } from './image'
+import { updateActorImages } from './image'
 import { fetchActorFollowsCount } from './shared'
-import { getImageInfoFromObject } from './shared/object-to-model-attributes'
+import { getImagesInfoFromObject } from './shared/object-to-model-attributes'
 
 export class APActorUpdater {
 
@@ -29,8 +29,8 @@ export class APActorUpdater {
   }
 
   async update () {
-    const avatarInfo = getImageInfoFromObject(this.actorObject, ActorImageType.AVATAR)
-    const bannerInfo = getImageInfoFromObject(this.actorObject, ActorImageType.BANNER)
+    const avatarsInfo = getImagesInfoFromObject(this.actorObject, ActorImageType.AVATAR)
+    const bannersInfo = getImagesInfoFromObject(this.actorObject, ActorImageType.BANNER)
 
     try {
       await this.updateActorInstance(this.actor, this.actorObject)
@@ -47,8 +47,8 @@ export class APActorUpdater {
       }
 
       await runInReadCommittedTransaction(async t => {
-        await updateActorImageInstance(this.actor, ActorImageType.AVATAR, avatarInfo, t)
-        await updateActorImageInstance(this.actor, ActorImageType.BANNER, bannerInfo, t)
+        await updateActorImages(this.actor, ActorImageType.BANNER, bannersInfo, t)
+        await updateActorImages(this.actor, ActorImageType.AVATAR, avatarsInfo, t)
       })
 
       await runInReadCommittedTransaction(async t => {