Make subscribe buttons observe subscription statuses to synchronise

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / user-subscription / subscribe-button.component.html

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 d32647b4288292a685bfd635261062454a633b20..275349b7f379263512e7635ed548d74b15cc8df1 100644 (file)
--- a/client/src/app/shared/user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.html
@@ -1,34 +1,48 @@
 <div class="btn-group-subscribe btn-group"
-    [ngClass]="{'subscribe-button': subscribed !== true, 'unsubscribe-button': subscribed === true}">
-  <button *ngIf="subscribed === false && isUserLoggedIn()" type="button"
-          class="btn btn-sm" role="button"
-          (click)="subscribe()" i18n>
-    <span>
-      Subscribe
+    [ngClass]="{'subscribe-button': !isAllChannelsSubscribed(), 'unsubscribe-button': isAllChannelsSubscribed(), 'big': isBigButton() }">
+
+  <ng-template #userLoggedOut>
+    <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}} 
+          <ng-container i18n>channels subscribed</ng-container>
+        </span>
+      </ng-template>
     </span>
     <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
       {{ videoChannel.followersCount | myNumberFormatter }}
     </span>
-  </button>
+  </ng-template>
+
+  <ng-template #userLoggedIn>
+    <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"
+      class="btn btn-sm" role="button"
+      (click)="unsubscribe()">
+      <ng-container i18n>{account + "", select, undefined {Unsubscribe} other {Unsubscribe from all channels}}</ng-container>
+    </button>
+  </ng-template>
 
-  <button
-    *ngIf="subscribed === true" type="button"
-    class="btn btn-sm" role="button"
-    (click)="unsubscribe()" i18n
-  >
-    Unsubscribe
-  </button>
+  <ng-container
+    *ngIf="isUserLoggedIn(); then userLoggedIn">
+  </ng-container>
 
   <div class="btn-group" ngbDropdown autoClose="outside"
        placement="bottom-right" role="group"
        aria-label="Multiple ways to subscribe to the current channel">
     <button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle>
-      <span *ngIf="!isUserLoggedIn()">
-        Subscribe
-      </span>
-      <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
-        {{ videoChannel.followersCount | myNumberFormatter }}
-      </span>
+      <ng-container
+        *ngIf="!isUserLoggedIn(); then userLoggedOut">
+      </ng-container>
     </button>
 
     <div class="dropdown-menu" ngbDropdownMenu>
@@ -46,7 +60,7 @@
       <div class="dropdown-divider"></div>
 
       <h6 class="dropdown-header" i18n>Using a syndication feed</h6>
-      <button (click)="rssOpen()" class="dropdown-item" i18n>Subscribe via RSS</button>
+      <a [href]="rssUri" target="_blank" class="dropdown-item" i18n>Subscribe via RSS</a>
 
     </div>
   </div>