<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()">
- <span i18n>
- 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 *ngIf="!isBigButton && displayFollowers && videoChannels.length > 1 && videoChannel.followersCount !== 0" class="followers-count">
+ {{ videoChannels[0].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()" i18n>
- 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>
<h6 class="dropdown-header" i18n>Using an ActivityPub account</h6>
<button class="dropdown-item" (click)="subscribe()">
- <span *ngIf="!isUserLoggedIn()" i18n>Subscribe with an account on {{ videoChannel.host }}</span>
+ <span *ngIf="!isUserLoggedIn()" i18n>Subscribe with an account on this instance</span>
<span *ngIf="isUserLoggedIn()" i18n>Subscribe with your local account</span>
</button>
- <button class="dropdown-item" i18n>Subscribe with a Mastodon account:</button>
- <my-remote-subscribe showHelp="true" [uri]="channelUri"></my-remote-subscribe>
+ <button class="dropdown-item dropdown-item-neutral" i18n>Subscribe with a Mastodon account:</button>
+ <my-remote-subscribe [showHelp]="true" [uri]="uri"></my-remote-subscribe>
<div class="dropdown-divider"></div>