Refactor my-subscribe-button to support full account subscription

4 files changed, 34 insertions, 5 deletions

diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index 4ebad514c..93f43a350 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -9,14 +9,18 @@
           <img [src]="videoChannel.avatarUrl" alt="Avatar" />
 
           <div>{{ videoChannel.displayName }}</div>
-          <div i18n class="followers">{{ videoChannel.followersCount }} subscribers</div>
+          <div class="followers">{{ videoChannel.followersCount }} 
+            <ng-container *ngIf="videoChannel.followersCount === 1; then single; else multiple"></ng-container>
+            <ng-template i18n #single>subscriber</ng-template>
+            <ng-template i18n #multiple>subscribers</ng-template>
+          </div>
         </a>
 
-        <my-subscribe-button [videoChannel]="videoChannel"></my-subscribe-button>
+        <my-subscribe-button [videoChannels]="[videoChannel]"></my-subscribe-button>
       </div>
 
       <div *ngIf="getVideosOf(videoChannel)" class="videos">
-        <div class="no-results" i18n *ngIf="getVideosOf(videoChannel).length === 0">This channel does not have videos.</div>
+        <div class="no-results my-5" i18n *ngIf="getVideosOf(videoChannel).length === 0">This channel doesn't have any videos.</div>
 
         <my-video-miniature
           *ngFor="let video of getVideosOf(videoChannel)"
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 70257162d..1b6eb480e 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -28,8 +28,15 @@
           >
           </my-user-moderation-dropdown>
         </div>
-        <div i18n class="actor-followers">{{ account.followersCount }} subscribers</div>
+        <div class="actor-followers">
+          {{ account.followersCount }} 
+          <ng-container *ngIf="account.followersCount === 1; then single; else multiple"></ng-container>
+          <ng-template i18n #single>subscriber</ng-template>
+          <ng-template i18n #multiple>subscribers</ng-template>
+        </div>
       </div>
+
+      <my-subscribe-button *ngIf="videoChannels" [account]="account" [videoChannels]="videoChannels"></my-subscribe-button>
     </div>
 
     <div class="links">
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 273e5c43a..ab3aece54 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -3,6 +3,16 @@
 
 .sub-menu {
   @include sub-menu-with-actor;
+
+  .actor {
+    width: 100%;
+  }
+}
+
+my-subscribe-button {
+  height: max-content;
+  margin-left: auto;
+  margin-top: 20px;
 }
 
 my-user-moderation-dropdown,
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts
index 3118d7562..e3a503f4c 100644
--- a/client/src/app/+accounts/accounts.component.ts
+++ b/client/src/app/+accounts/accounts.component.ts
@@ -8,6 +8,8 @@ import { Subscription } from 'rxjs'
 import { AuthService, Notifier, RedirectService } from '@app/core'
 import { User, UserRight } from '../../../../shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
+import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 
 @Component({
   templateUrl: './accounts.component.html',
@@ -16,6 +18,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 export class AccountsComponent implements OnInit, OnDestroy {
   account: Account
   user: User
+  videoChannels: VideoChannel[]
 
   private routeSub: Subscription
 
@@ -23,6 +26,7 @@ export class AccountsComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private userService: UserService,
     private accountService: AccountService,
+    private videoChannelService: VideoChannelService,
     private notifier: Notifier,
     private restExtractor: RestExtractor,
     private redirectService: RedirectService,
@@ -40,7 +44,11 @@ export class AccountsComponent implements OnInit, OnDestroy {
         catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 404 ]))
       )
       .subscribe(
-        account => this.account = account,
+        account => {
+          this.account = account
+          this.videoChannelService.listAccountVideoChannels(account)
+            .subscribe(videoChannels => this.videoChannels = videoChannels.data)
+        },
 
         err => this.notifier.error(err.message)
       )