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

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