Fix OnInit for subscribe button

Fixing regression introduced in a004ff172638083d69ed1028d18c9b6222d24da6
that initialized component for accounts with no channels before changing
the input a second time.

2 files changed, 24 insertions, 21 deletions

diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.html b/client/src/app/shared/user-subscription/subscribe-button.component.html
index 7d33b0621..2a4df29f7 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.html
@@ -1,31 +1,31 @@
 <div class="btn-group-subscribe btn-group"
-    [ngClass]="{'subscribe-button': !isAllChannelsSubscribed(), 'unsubscribe-button': isAllChannelsSubscribed(), 'big': isBigButton() }">
+    [ngClass]="{'subscribe-button': !isAllChannelsSubscribed, 'unsubscribe-button': isAllChannelsSubscribed, 'big': isBigButton }">
 
   <ng-template #userLoggedOut>
-    <span [ngClass]="{ 'extra-text': isAtLeastOneChannelSubscribed() }">
+    <span [ngClass]="{ 'extra-text': isAtLeastOneChannelSubscribed }">
       <ng-container *ngIf="account; then multiple; else single"></ng-container>
       <ng-template i18n #single>Subscribe</ng-template>
       <ng-template #multiple>
         <span i18n>Subscribe to all channels</span>
-        <span *ngIf="isAtLeastOneChannelSubscribed()">{{ subscribeStatus(true).length }}/{{ subscribed.size }}
+        <span *ngIf="isAtLeastOneChannelSubscribed">{{ subscribeStatus(true).length }}/{{ subscribed.size }}
           <ng-container i18n>channels subscribed</ng-container>
         </span>
       </ng-template>
     </span>
-    <span *ngIf="!isBigButton() && displayFollowers && videoChannels.length > 1 && videoChannel.followersCount !== 0" class="followers-count">
+    <span *ngIf="!isBigButton && displayFollowers && videoChannels.length > 1 && videoChannel.followersCount !== 0" class="followers-count">
       {{ videoChannels[0].followersCount | myNumberFormatter }}
     </span>
   </ng-template>
 
   <ng-template #userLoggedIn>
-    <button *ngIf="!isAllChannelsSubscribed()" type="button"
+    <button *ngIf="!isAllChannelsSubscribed" type="button"
             class="btn btn-sm" role="button"
             (click)="subscribe()">
       <ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template>
     </button>
 
     <button
-      *ngIf="isAllChannelsSubscribed()" type="button"
+      *ngIf="isAllChannelsSubscribed" type="button"
       class="btn btn-sm" role="button"
       (click)="unsubscribe()">
       <ng-container i18n>{account + "", select, undefined {Unsubscribe} other {Unsubscribe from all channels}}</ng-container>
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.ts b/client/src/app/shared/user-subscription/subscribe-button.component.ts
index 81a0df512..947f34c85 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.ts
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, Input, OnInit, OnChanges } from '@angular/core'
 import { Router } from '@angular/router'
 import { AuthService, Notifier } from '@app/core'
 import { UserSubscriptionService } from '@app/shared/user-subscription/user-subscription.service'
@@ -8,14 +8,13 @@ import { VideoService } from '@app/shared/video/video.service'
 import { FeedFormat } from '../../../../../shared/models/feeds'
 import { Account } from '@app/shared/account/account.model'
 import { concat, forkJoin, merge } from 'rxjs'
-import { toArray } from 'rxjs/operators'
 
 @Component({
   selector: 'my-subscribe-button',
   templateUrl: './subscribe-button.component.html',
   styleUrls: [ './subscribe-button.component.scss' ]
 })
-export class SubscribeButtonComponent implements OnInit {
+export class SubscribeButtonComponent implements OnInit, OnChanges {
   /**
    * SubscribeButtonComponent can be used with a single VideoChannel passed as [VideoChannel],
    * or with an account and a full list of that account's videoChannels. The latter is intended
@@ -70,10 +69,26 @@ export class SubscribeButtonComponent implements OnInit {
     return this.videoChannels[0]
   }
 
+  get isAllChannelsSubscribed () {
+    return this.subscribeStatus(true).length === this.videoChannels.length
+  }
+
+  get isAtLeastOneChannelSubscribed () {
+    return this.subscribeStatus(true).length > 0
+  }
+
+  get isBigButton () {
+    return this.isUserLoggedIn() && this.videoChannels.length > 1 && this.isAtLeastOneChannelSubscribed
+  }
+
   ngOnInit () {
     this.loadSubscribedStatus()
   }
 
+  ngOnChanges () {
+    this.ngOnInit()
+  }
+
   subscribe () {
     if (this.isUserLoggedIn()) {
       return this.localSubscribe()
@@ -146,18 +161,6 @@ export class SubscribeButtonComponent implements OnInit {
     return this.authService.isLoggedIn()
   }
 
-  isAllChannelsSubscribed () {
-    return !Array.from(this.subscribed.values()).includes(false)
-  }
-
-  isAtLeastOneChannelSubscribed () {
-    return this.subscribeStatus(true).length > 0
-  }
-
-  isBigButton () {
-    return this.isUserLoggedIn() && this.videoChannels.length > 1 && this.isAtLeastOneChannelSubscribed()
-  }
-
   gotoLogin () {
     this.router.navigate([ '/login' ])
   }