2 files changed, 25 insertions, 19 deletions

diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
index ac2679b42..e22b0cfd0 100644
--- a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
+++ b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
@@ -12,7 +12,11 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
   nameWithHost: string
   nameWithHostForced: string
 
-  banner: ActorImage
+  // TODO: remove, deprecated in 4.2
+  banner: never
+
+  banners: ActorImage[]
+
   bannerUrl: string
 
   updatedAt: Date | string
@@ -24,23 +28,25 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
 
   viewsPerDay?: ViewsPerDate[]
 
-  static GET_ACTOR_AVATAR_URL (actor: { avatar?: { url?: string, path: string } }) {
-    return Actor.GET_ACTOR_AVATAR_URL(actor)
+  static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size: number) {
+    return Actor.GET_ACTOR_AVATAR_URL(actor, size)
   }
 
   static GET_ACTOR_BANNER_URL (channel: ServerVideoChannel) {
-    if (channel?.banner?.url) return channel.banner.url
-
-    if (channel?.banner) {
-      const absoluteAPIUrl = getAbsoluteAPIUrl()
+    if (!channel) return ''
 
-      return absoluteAPIUrl + channel.banner.path
-    }
+    const banner = channel.banners[0]
+    if (!banner) return ''
 
-    return ''
+    if (banner.url) return banner.url
+    return getAbsoluteAPIUrl() + banner.path
   }
 
-  static GET_DEFAULT_AVATAR_URL () {
+  static GET_DEFAULT_AVATAR_URL (size: number) {
+    if (size <= 48) {
+      return `${window.location.origin}/client/assets/images/default-avatar-video-channel-48x48.png`
+    }
+
     return `${window.location.origin}/client/assets/images/default-avatar-video-channel.png`
   }
 
@@ -51,7 +57,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
     this.description = hash.description
     this.support = hash.support
 
-    this.banner = hash.banner
+    this.banners = hash.banners
 
     this.isLocal = hash.isLocal
 
@@ -74,24 +80,24 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
     this.updateComputedAttributes()
   }
 
-  updateAvatar (newAvatar: ActorImage) {
-    this.avatar = newAvatar
+  updateAvatar (newAvatars: ActorImage[]) {
+    this.avatars = newAvatars
 
     this.updateComputedAttributes()
   }
 
   resetAvatar () {
-    this.updateAvatar(null)
+    this.updateAvatar([])
   }
 
-  updateBanner (newBanner: ActorImage) {
-    this.banner = newBanner
+  updateBanner (newBanners: ActorImage[]) {
+    this.banners = newBanners
 
     this.updateComputedAttributes()
   }
 
   resetBanner () {
-    this.updateBanner(null)
+    this.updateBanner([])
   }
 
   updateComputedAttributes () {
diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.service.ts b/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
index f37f13c51..480d250fb 100644
--- a/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
+++ b/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
@@ -80,7 +80,7 @@ export class VideoChannelService {
   changeVideoChannelImage (videoChannelName: string, avatarForm: FormData, type: 'avatar' | 'banner') {
     const url = VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelName + '/' + type + '/pick'
 
-    return this.authHttp.post<{ avatar?: ActorImage, banner?: ActorImage }>(url, avatarForm)
+    return this.authHttp.post<{ avatars?: ActorImage[], banners?: ActorImage[] }>(url, avatarForm)
                .pipe(catchError(err => this.restExtractor.handleError(err)))
   }