Square channel avatar consistency

14 files changed, 36 insertions, 103 deletions

diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
index f2f42459f..8804fa95c 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
@@ -17,10 +17,11 @@ input[type=text] {
 
 .video-channel {
   @include row-blocks;
+
   padding-bottom: 0;
 
   img {
-    @include avatar(80px);
+    @include channel-avatar(80px);
 
     margin-right: 10px;
   }
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
index 5ead45dd8..9fc8be86c 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
@@ -9,7 +9,7 @@ input[type=text] {
   @include row-blocks;
 
   img {
-    @include avatar(80px);
+    @include channel-avatar(80px);
 
     margin-right: 10px;
   }
diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss
index 64927fa4b..d25fdd31d 100644
--- a/client/src/app/+search/search.component.scss
+++ b/client/src/app/+search/search.component.scss
@@ -48,7 +48,7 @@
         $image-size: 130px;
         $margin-size: ($video-thumbnail-width - $image-size) / 2; // So we have the same width than the video miniature
 
-        @include avatar($image-size);
+        @include channel-avatar($image-size);
 
         margin: 0 ($margin-size + 10) 0 $margin-size;
       }
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss
index 555126cbc..a67605217 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -179,12 +179,6 @@ $video-info-margin-left: 44px;
           &:hover {
             opacity: 0.8;
           }
-
-          img {
-            @include avatar(18px);
-
-            margin: -2px 5px 0 0;
-          }
         }
 
         .video-info-channel-left {
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 {
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
index 7a6df7b64..e5b07896f 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
@@ -10,7 +10,7 @@
   <div class="video-bottom">
     <div class="video-miniature-information">
       <div class="d-inline-flex video-miniature-meta">
-        <a *ngIf="displayOptions.avatar" class="avatar" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
+        <a *ngIf="displayOptions.avatar" class="avatar" [ngClass]="{ channel: displayOwnerVideoChannel() }" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
           <img [src]="getAvatarUrl()" alt="" />
         </a>
 
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index 38cac5b6e..cd492e9ad 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -21,9 +21,13 @@ $more-margin-right: 15px;
       .avatar {
         margin: 10px 10px 0 0;
 
-        img {
+        img:not(.channel) {
           @include avatar(40px);
         }
+
+        img.channel {
+          @include channel-avatar(40px);
+        }
       }
 
       .video-miniature-name {
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
index cc5665ab1..f08be9c25 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -183,7 +183,7 @@ export class VideoMiniatureComponent implements OnInit {
   }
 
   getAvatarUrl () {
-    if (this.ownerDisplayTypeChosen === 'account') {
+    if (this.displayOwnerAccount()) {
       return this.video.accountAvatarUrl
     }
 
@@ -250,7 +250,8 @@ export class VideoMiniatureComponent implements OnInit {
       return
     }
 
-    // If the video channel name an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
+    // If the video channel name is an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
+    // Or is just a suffix of the account (default created channel)
     // -> Use the account name
     if (
       this.video.channel.name === `${this.video.account.name}_channel` ||
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 326d4677a..457a7151c 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -136,7 +136,7 @@ $play-overlay-width: 18px;
         align-items: center;
 
         img {
-          @include avatar(28px);
+          @include channel-avatar(28px);
 
           margin-right: 8px;
         }
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 82c60a59d..7b862a156 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -612,86 +612,6 @@
   }
 }
 
-@mixin sub-menu-with-actor {
-  position: initial;
-  z-index: unset;
-  height: max-content;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-
-  .actor {
-    display: flex;
-    margin-top: 20px;
-    margin-bottom: 20px;
-
-    img {
-      @include avatar(80px);
-
-      margin-right: 20px;
-    }
-
-    .actor-info {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      .actor-names {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-
-        .actor-display-name {
-          font-size: 23px;
-          font-weight: $font-bold;
-          margin-right: 7px;
-        }
-
-        .actor-name {
-          position: relative;
-          top: 3px;
-          font-size: 14px;
-          color: $grey-actor-name;
-        }
-      }
-
-      .actor-lower {
-        grid-area: lower;
-      }
-
-      .actor-followers {
-        font-size: 15px;
-      }
-
-      .actor-owner {
-        @include actor-owner;
-      }
-    }
-  }
-
-  .links {
-    margin-top: 0;
-    margin-bottom: 15px;
-
-    a {
-      margin-top: 0;
-      margin-bottom: 0;
-      text-transform: uppercase;
-      font-weight: 600;
-      font-size: 110%;
-
-      @media screen and (max-width: $mobile-view) {
-        font-size: 130%;
-      }
-    }
-
-    list-overflow {
-      display: inline-block;
-      width: max-content;
-    }
-  }
-}
-
 @mixin create-button {
   @include peertube-button-link;
   @include orange-button;