Square channel avatar consistency

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;
   }

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;
   }

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;
       }

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 {

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>

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 {

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
+  }
 }

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>
 

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 {

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>
 

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 {

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` ||

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;
         }

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;