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

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