2 files changed, 17 insertions, 9 deletions

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 c275258ef..8a49e3566 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -42,16 +42,17 @@
 
               <img [src]="video.videoChannelAvatarUrl" alt="Video channel avatar" />
             </a>
-            <!-- Here will be the subscribe button -->
+
+            <my-subscribe-button [videoChannel]="video.channel"></my-subscribe-button>
           </div>
 
           <div class="video-info-by">
-            <a [routerLink]="[ '/accounts', video.by ]" i18n-title title="Go to the account page">
-              <span i18n>By {{ video.by }}</span>
+            <a [routerLink]="[ '/accounts', video.byAccount ]" i18n-title title="Go to the account page">
+              <span i18n>By {{ video.byAccount }}</span>
               <img [src]="video.accountAvatarUrl" alt="Account avatar" />
             </a>
 
-            <my-help helpType="custom" i18n-customHtml customHtml="You can subscribe to this account via any ActivityPub-capable fediverse instance. For instance with Mastodon or Pleroma you can type in the search box <strong>@{{video.account.name}}@{{video.account.host}}</strong> and subscribe there. Subscription as a PeerTube user is being worked on in <a href='https://github.com/Chocobozzz/PeerTube/issues/470'>#470</a>."></my-help>
+            <my-help helpType="custom" i18n-customHtml customHtml="You can subscribe to this account via any ActivityPub-capable fediverse instance. For instance with Mastodon or Pleroma you can type in the search box <strong>@{{video.account.name}}@{{video.account.host}}</strong> and subscribe there."></my-help>
           </div>
         </div>
 
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 1354de32e..5bf2f485a 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -125,6 +125,14 @@
             margin: -2px 2px 0 5px;
           }
         }
+
+        my-subscribe-button {
+          /deep/ span[role=button] {
+            font-size: 13px !important;
+          }
+
+          margin-left: 5px;
+        }
       }
 
       .video-info-by {
@@ -369,7 +377,10 @@
 
       .video-miniature-information {
         flex-grow: 1;
-        margin-left: 10px;
+      }
+
+      .video-thumbnail {
+        margin-right: 10px
       }
     }
   }
@@ -502,10 +513,6 @@
   .other-videos {
     /deep/ .video-miniature  {
       flex-direction: column;
-
-      .video-miniature-information {
-        margin-left: 0 !important;
-      }
     }
   }