Fix avatar responsive

7 files changed, 31 insertions, 13 deletions

diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 1544ad034..8362e6b7e 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -2,7 +2,7 @@
   <div class="account-info">
 
     <div class="account-avatar-row">
-      <my-actor-avatar class="main-avatar" [account]="account" size="120"></my-actor-avatar>
+      <my-actor-avatar class="main-avatar" [account]="account"></my-actor-avatar>
 
       <div>
         <div class="section-label" i18n>ACCOUNT</div>
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index 09f81d2ce..212e2f867 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -23,7 +23,7 @@
         <div class="section-label" i18n>OWNER ACCOUNT</div>
 
         <div class="avatar-row">
-          <my-actor-avatar class="account-avatar" [account]="ownerAccount" [internalHref]="getAccountUrl()" size="48"></my-actor-avatar>
+          <my-actor-avatar class="account-avatar" [account]="ownerAccount" [internalHref]="getAccountUrl()"></my-actor-avatar>
 
           <div class="actor-info">
             <h4>
@@ -51,7 +51,7 @@
     </ng-template>
 
     <div class="channel-avatar-row">
-      <my-actor-avatar class="main-avatar" [channel]="videoChannel" size="120"></my-actor-avatar>
+      <my-actor-avatar class="main-avatar" [channel]="videoChannel"></my-actor-avatar>
 
       <div>
         <div class="section-label" i18n>VIDEO CHANNEL</div>
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 004ad7998..c00dacae5 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -124,6 +124,10 @@
       font-size: var(--myGreyOwnerFontSize);
       color: pvar(--greyForegroundColor);
     }
+
+    .account-avatar {
+      @include actor-avatar-size(48px);
+    }
   }
 
   .owner-description {
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
index b2e1ef46e..600984aa2 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
@@ -23,7 +23,7 @@ export class ActorAvatarComponent {
 
   @Input() previewImage: string
 
-  @Input() size: ActorAvatarSize = '32'
+  @Input() size: ActorAvatarSize
 
   // Use an external link
   @Input() href: string
@@ -50,13 +50,13 @@ export class ActorAvatarComponent {
   }
 
   get defaultAvatarUrl () {
-    if (this.account) return Account.GET_DEFAULT_AVATAR_URL(+this.size)
-    if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL(+this.size)
+    if (this.account) return Account.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
+    if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
   }
 
   get avatarUrl () {
-    if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account, +this.size)
-    if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel, +this.size)
+    if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account, this.getSizeNumber())
+    if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel, this.getSizeNumber())
 
     return ''
   }
@@ -88,6 +88,12 @@ export class ActorAvatarComponent {
     return !!this.account || !!this.channel
   }
 
+  private getSizeNumber () {
+    if (this.size) return +this.size
+
+    return undefined
+  }
+
   private getColorTheme () {
     const initialLowercase = this.initial.toLowerCase()
 
diff --git a/client/src/app/shared/shared-main/account/account.model.ts b/client/src/app/shared/shared-main/account/account.model.ts
index a26a9c11c..e34f6ef64 100644
--- a/client/src/app/shared/shared-main/account/account.model.ts
+++ b/client/src/app/shared/shared-main/account/account.model.ts
@@ -17,12 +17,12 @@ export class Account extends Actor implements ServerAccount {
 
   userId?: number
 
-  static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size: number) {
+  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_DEFAULT_AVATAR_URL (size: number) {
-    if (size <= 48) {
+  static GET_DEFAULT_AVATAR_URL (size?: number) {
+    if (size && size <= 48) {
       return `${window.location.origin}/client/assets/images/default-avatar-account-48x48.png`
     }
 
diff --git a/client/src/app/shared/shared-main/account/actor.model.ts b/client/src/app/shared/shared-main/account/actor.model.ts
index 977fdb7e5..8427c9902 100644
--- a/client/src/app/shared/shared-main/account/actor.model.ts
+++ b/client/src/app/shared/shared-main/account/actor.model.ts
@@ -20,8 +20,12 @@ export abstract class Actor implements ServerActor {
 
   isLocal: boolean
 
-  static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size: number) {
-    const avatar = actor.avatars.sort((a, b) => a.width - b.width).find(a => a.width >= size)
+  static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size?: number) {
+    const avatars = actor.avatars.sort((a, b) => a.width - b.width)
+
+    const avatar = size
+      ? avatars.find(a => a.width >= size)
+      : avatars[0]
 
     if (!avatar) return ''
     if (avatar.url) return avatar.url
diff --git a/client/src/sass/include/_account-channel-page.scss b/client/src/sass/include/_account-channel-page.scss
index 06384b98d..f05b8169e 100644
--- a/client/src/sass/include/_account-channel-page.scss
+++ b/client/src/sass/include/_account-channel-page.scss
@@ -70,6 +70,10 @@
     color: pvar(--mainColor);
   }
 
+  .main-avatar {
+    @include actor-avatar-size(120px);
+  }
+
   @media screen and (max-width: $mobile-view) {
     margin-bottom: 15px;