Add manage buttons for own channels and account, video counts (#2421)

* Add manage buttons for own channels and account, video counts

* Change manage button color and introduce secondary color

3 files changed, 25 insertions, 1 deletions

diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index f4b944c59..8ab79526d 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -15,7 +15,10 @@
             </button>
           </div>
 
-          <my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
+          <div class="right-buttons">
+            <a *ngIf="isManageable" [routerLink]="[ '/my-account/video-channels/update', videoChannel.nameWithHost ]" class="btn btn-outline-tertiary mr-2" i18n>Manage</a>
+            <my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
+          </div>
         </div>
         <div i18n class="actor-followers">{{ videoChannel.followersCount }} subscribers</div>
 
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index d29575027..50b69e7ac 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -17,4 +17,20 @@
       margin-top: -2px;
     }
   }
+}
+
+.right-buttons {
+  display: flex;
+  height: max-content;
+  margin-left: auto;
+  margin-top: 20px;
+
+  a {
+    @include peertube-button-outline;
+    line-height: 1.8;
+  }
+
+  my-subscribe-button {
+    height: min-content;
+  }
 }
\ No newline at end of file
diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts
index 5ef46c58a..493a6d499 100644
--- a/client/src/app/+video-channels/video-channels.component.ts
+++ b/client/src/app/+video-channels/video-channels.component.ts
@@ -64,6 +64,11 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
     return this.authService.isLoggedIn()
   }
 
+  get isManageable () {
+    if (!this.isUserLoggedIn()) return false
+    return this.videoChannel.ownerAccount.userId === this.authService.getUser().id
+  }
+
   activateCopiedMessage () {
     this.notifier.success(this.i18n('Username copied'))
   }