add channel avatar to watch view

6 files changed, 88 insertions, 47 deletions

diff --git a/client/src/app/shared/channel/avatar.component.html b/client/src/app/shared/channel/avatar.component.html
new file mode 100644
index 000000000..362feacd7
--- /dev/null
+++ b/client/src/app/shared/channel/avatar.component.html
@@ -0,0 +1,8 @@
+<div class="wrapper">
+  <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" i18n-title title="Go the channel page">
+    <img [src]="video.videoChannelAvatarUrl" alt="Channel avatar" />
+  </a>
+  <a [routerLink]="[ '/accounts', video.byAccount ]" i18n-title title="Go to the account page">
+    <img [src]="video.accountAvatarUrl" alt="Account avatar" />
+  </a>
+</div>
diff --git a/client/src/app/shared/channel/avatar.component.scss b/client/src/app/shared/channel/avatar.component.scss
new file mode 100644
index 000000000..b778c9eb0
--- /dev/null
+++ b/client/src/app/shared/channel/avatar.component.scss
@@ -0,0 +1,32 @@
+@import '_mixins';
+
+.wrapper {
+  width: 35px;
+  height: 35px;
+  min-width: 35px;
+  min-height: 35px;
+  position: relative;
+  margin-right: 5px;
+
+  a {
+    @include disable-outline;
+  }
+
+  a img {
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    top:50%;
+    left:50%;
+    border-radius: 50%;
+    transform: translate(-50%,-50%)
+  }
+
+  a:nth-of-type(2) img {
+    height: 60%;
+    width: 60%;
+    border: 2px solid var(--mainBackgroundColor);
+    transform: translateX(15%);
+    position: relative;
+  }
+}
diff --git a/client/src/app/shared/channel/avatar.component.ts b/client/src/app/shared/channel/avatar.component.ts
new file mode 100644
index 000000000..2201c04ca
--- /dev/null
+++ b/client/src/app/shared/channel/avatar.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core'
+import { VideoDetails } from '../video/video-details.model'
+
+@Component({
+  selector: 'avatar-channel',
+  templateUrl: './avatar.component.html',
+  styleUrls: [ './avatar.component.scss' ]
+})
+export class AvatarComponent {
+  @Input() video: VideoDetails
+}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 29ddf7b81..a32520820 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -66,6 +66,7 @@ import { OverviewService } from '@app/shared/overview'
 import { UserBanModalComponent } from '@app/shared/moderation'
 import { UserModerationDropdownComponent } from '@app/shared/moderation/user-moderation-dropdown.component'
 import { BlocklistService } from '@app/shared/blocklist'
+import { AvatarComponent } from '@app/shared/channel/avatar.component'
 import { TopMenuDropdownComponent } from '@app/shared/menu/top-menu-dropdown.component'
 import { UserHistoryService } from '@app/shared/users/user-history.service'
 import { UserNotificationService } from '@app/shared/users/user-notification.service'
@@ -158,6 +159,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
     TimestampInputComponent,
     InputReadonlyCopyComponent,
 
+    AvatarComponent,
     SubscribeButtonComponent,
     RemoteSubscribeComponent,
     InstanceFeaturesTableComponent,
@@ -228,6 +230,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
     PeertubeCheckboxComponent,
     TimestampInputComponent,
 
+    AvatarComponent,
     SubscribeButtonComponent,
     RemoteSubscribeComponent,
     InstanceFeaturesTableComponent,
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index c4a293d0c..9e653ea78 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -136,26 +136,26 @@
           </div>
 
 
-          <div class="pt-3 border-top video-info-channel">
-            <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" i18n-title title="Go the channel page">
-              <img [src]="video.videoChannelAvatarUrl" alt="Video channel avatar" />
-              {{ video.channel.displayName }}
-            </a>
+          <div class="pt-3 border-top video-info-channel d-flex">
+            <div class="video-info-channel-left d-flex">
+              <avatar-channel [video]="video"></avatar-channel>
+              <div class="video-info-channel-left-links ml-1">
+                <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" i18n-title title="Go the channel page">
+                  {{ video.channel.displayName }}
+                </a>
+                <a [routerLink]="[ '/accounts', video.byAccount ]" i18n-title title="Go to the account page">
+                  <span i18n>By {{ video.byAccount }}</span>
+                </a>
+              </div>
+            </div>
 
             <my-subscribe-button #subscribeButton [videoChannel]="video.channel" size="small"></my-subscribe-button>
           </div>
-
-          <div class="video-info-by">
-            <a [routerLink]="[ '/accounts', video.byAccount ]" i18n-title title="Go to the account page">
-              <img [src]="video.accountAvatarUrl" alt="Account avatar" />
-              <span i18n>By {{ video.byAccount }}</span>
-            </a>
-          </div>
         </div>
 
       </div>
 
-      <div class="video-info-description ml-4">
+      <div class="video-info-description">
         <div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div>
 
         <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
@@ -170,7 +170,7 @@
         </div>
       </div>
 
-      <div class="video-attributes mb-3 ml-4">
+      <div class="video-attributes mb-3">
         <div class="video-attribute">
           <span i18n class="video-attribute-label">Privacy</span>
           <span class="video-attribute-value">{{ video.privacy.label }}</span>
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 314f9849d..15335b0b3 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -3,8 +3,8 @@
 @import '_bootstrap-variables';
 @import '_miniature';
 
-$other-videos-width: 260px;
 $player-factor: 1.7; // 16/9
+$video-info-margin-left: 44px;
 
 @function getPlayerHeight($width){
   @return calc(#{$width} / #{$player-factor})
@@ -180,40 +180,24 @@ $player-factor: 1.7; // 16/9
           }
         }
 
-        my-subscribe-button {
-          margin-left: 5px;
-        }
-      }
+        .video-info-channel-left {
+          flex-grow: 1;
 
-      .video-info-by {
-
-        a {
-          @include disable-default-a-behaviour;
-
-          display: inline;
-          align-items: center;
-          font-size: 13px;
-          color: var(--mainForegroundColor);
-
-          span:hover {
-            opacity: 0.8;
-          }
+          .video-info-channel-left-links {
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            line-height: 1.3;
 
-          span {
-            margin-left: 2px;
-          }
-
-          img {
-            @include avatar(18px);
-
-            margin: -2px 5px 0 0;
+            a:nth-of-type(2) {
+              font-weight: 500;
+              font-size: 90%;
+            }
           }
         }
 
-        my-help {
-          position: relative;
-          top: 1px;
-          margin-left: 2px;
+        my-subscribe-button {
+          margin-left: 5px;
         }
       }
 
@@ -330,6 +314,7 @@ $player-factor: 1.7; // 16/9
 
     .video-info-description {
       margin: 20px 0;
+      margin-left: $video-info-margin-left;
       font-size: 15px;
 
       .video-info-description-html {
@@ -357,6 +342,10 @@ $player-factor: 1.7; // 16/9
       }
     }
 
+    .video-attributes {
+      margin-left: $video-info-margin-left;
+    }
+
     .video-attributes .video-attribute {
       font-size: 13px;
       display: block;
@@ -391,11 +380,9 @@ $player-factor: 1.7; // 16/9
 
   ::ng-deep .other-videos {
     padding-left: 15px;
-    flex-basis: $other-videos-width;
-    min-width: $other-videos-width;
 
     .title-page {
-      margin-top: 0 !important;
+      margin: 0 !important;
     }
 
     .video-miniature {