client/src/app/shared/shared-user-subscription/subscribe-button.component.html

   1 <div
   2   class="btn-group-subscribe btn-group"
   3   [ngClass]="{'subscribe-button': !isAllChannelsSubscribed, 'unsubscribe-button': isAllChannelsSubscribed, 'big': isBigButton }"
   4 >
   5
   6   <ng-template #userLoggedOut>
   7     <span [ngClass]="{ 'extra-text': isAtLeastOneChannelSubscribed }">
   8       <ng-container *ngIf="account; then multiple; else single"></ng-container>
   9       <ng-template i18n #single>Subscribe</ng-template>
  10       <ng-template #multiple>
  11         <span i18n>Subscribe to all channels</span>
  12         <span *ngIf="isAtLeastOneChannelSubscribed">{{ subscribeStatus(true).length }}/{{ subscribed.size }}
  13           <ng-container i18n>channels subscribed</ng-container>
  14         </span>
  15       </ng-template>
  16     </span>
  17     <span *ngIf="!isBigButton && displayFollowers && videoChannels.length > 1 && videoChannel.followersCount !== 0" class="followers-count">
  18       {{ videoChannels[0].followersCount | myNumberFormatter }}
  19     </span>
  20   </ng-template>
  21
  22   <ng-template #userLoggedIn>
  23     <button
  24       *ngIf="!isAllChannelsSubscribed" type="button"
  25       class="btn btn-sm" (click)="subscribe()"
  26     >
  27       <ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template>
  28     </button>
  29
  30     <button
  31       *ngIf="isAllChannelsSubscribed" type="button"
  32       class="btn btn-sm" role="button"
  33       (click)="unsubscribe()">
  34       <ng-container i18n>{account + "", select, undefined {Unsubscribe} other {Unsubscribe from all channels}}</ng-container>
  35     </button>
  36   </ng-template>
  37
  38   <ng-container
  39     *ngIf="isUserLoggedIn(); then userLoggedIn">
  40   </ng-container>
  41
  42   <div
  43     class="btn-group" ngbDropdown autoClose="outside" placement="bottom-right"
  44     role="group" aria-label="Multiple ways to subscribe to the current channel" i18n-aria-label
  45   >
  46     <button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle aria-label="Open subscription dropdown" i18n-aria-label>
  47       <ng-container
  48         *ngIf="!isUserLoggedIn(); then userLoggedOut">
  49       </ng-container>
  50     </button>
  51
  52     <div class="dropdown-menu" ngbDropdownMenu>
  53
  54       <h6 class="dropdown-header" i18n>Using an ActivityPub account</h6>
  55
  56       <button class="dropdown-item" (click)="subscribe()">
  57         <span *ngIf="!isUserLoggedIn()" i18n>Subscribe with an account on this instance</span>
  58         <span *ngIf="isUserLoggedIn()" i18n>Subscribe with your local account</span>
  59       </button>
  60
  61       <button class="dropdown-item dropdown-item-neutral" i18n>Subscribe with a Mastodon account:</button>
  62       <my-remote-subscribe [showHelp]="true" [uri]="uri"></my-remote-subscribe>
  63
  64       <div class="dropdown-divider"></div>
  65
  66       <h6 class="dropdown-header" i18n>Using a syndication feed</h6>
  67       <a [href]="rssUri" target="_blank" class="dropdown-item" i18n>Subscribe via RSS</a>
  68
  69     </div>
  70   </div>
  71 </div>