aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/user-subscription/subscribe-button.component.html
blob: 275349b7f379263512e7635ed548d74b15cc8df1 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<div class="btn-group-subscribe btn-group"
    [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>
  </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>

  <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>
      <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 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>

      <div class="dropdown-divider"></div>

      <h6 class="dropdown-header" i18n>Using a syndication feed</h6>
      <a [href]="rssUri" target="_blank" class="dropdown-item" i18n>Subscribe via RSS</a>

    </div>
  </div>
</div>