Square channel avatar consistency

5 files changed, 22 insertions, 9 deletions

diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.html b/client/src/app/shared/shared-main/account/actor-avatar-info.component.html
index 30584fd00..f3db55310 100644
--- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.html
+++ b/client/src/app/shared/shared-main/account/actor-avatar-info.component.html
@@ -1,7 +1,7 @@
 <ng-container *ngIf="actor">
   <div class="actor">
     <div class="d-flex">
-      <img [src]="actor.avatarUrl" alt="Avatar" />
+      <img [ngClass]="{ channel: isChannel() }" [src]="actor.avatarUrl" alt="Avatar" />
 
       <div class="actor-img-edit-container">
 
@@ -19,7 +19,6 @@
       </div>
     </div>
 
-
     <div class="actor-info">
       <div class="actor-info-names">
         <div class="actor-info-display-name">{{ actor.displayName }}</div>
diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss b/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss
index 57c298508..40ba4269b 100644
--- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss
+++ b/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss
@@ -5,9 +5,15 @@
   display: flex;
 
   img {
-    @include avatar(100px);
-
     margin-right: 15px;
+
+    &:not(.channel) {
+      @include avatar(100px);
+    }
+
+    &.channel {
+      @include channel-avatar(100px);
+    }
   }
 
   .actor-img-edit-container {
@@ -18,7 +24,7 @@
       @include peertube-button-file(21px);
       @include button-with-icon(19px);
       @include orange-button;
-    
+
       margin-top: 10px;
       margin-bottom: 5px;
       border-radius: 50%;
diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts b/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
index b459c591f..87e9e917c 100644
--- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
+++ b/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
@@ -70,4 +70,8 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges {
   hasAvatar () {
     return !!this.avatarUrl
   }
+
+  isChannel () {
+    return !!(this.actor as VideoChannel).ownerAccount
+  }
 }
diff --git a/client/src/app/shared/shared-main/account/video-avatar-channel.component.html b/client/src/app/shared/shared-main/account/video-avatar-channel.component.html
index 310cc926f..5058f05dd 100644
--- a/client/src/app/shared/shared-main/account/video-avatar-channel.component.html
+++ b/client/src/app/shared/shared-main/account/video-avatar-channel.component.html
@@ -1,8 +1,9 @@
 <div class="wrapper" [ngClass]="'avatar-' + size">
   <ng-container *ngIf="!isChannelAvatarNull() && !genericChannel">
     <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
-      <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" />
+      <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
     </a>
+
     <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
       <img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" />
     </a>
@@ -14,7 +15,7 @@
     </a>
 
     <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
-      <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" />
+      <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
     </a>
   </ng-container>
 
diff --git a/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss b/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss
index 37709fce6..ea7cb2cf7 100644
--- a/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss
+++ b/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss
@@ -25,8 +25,11 @@
     position: absolute;
     top:50%;
     left:50%;
-    border-radius: 50%;
-    transform: translate(-50%,-50%)
+    transform: translate(-50%,-50%);
+
+    &:not(.channel-avatar) {
+      border-radius: 50%;
+    }
   }
 
   a:nth-of-type(2) img {