Make subscribe buttons observe subscription statuses to synchronise
[oweals/peertube.git] / client / src / app / +accounts / accounts.component.html
1 <div *ngIf="account" class="row">
2   <div class="sub-menu">
3
4     <div class="actor">
5       <img [src]="account.avatarUrl" alt="Avatar" />
6
7       <div class="actor-info">
8         <div class="actor-names">
9           <div class="actor-display-name">{{ account.displayName }}</div>
10           <div class="actor-name">{{ account.nameWithHost }}
11
12           <button ngxClipboard [cbContent]="account.nameWithHostForced" (click)="activateCopiedMessage()"
13                   class="btn btn-outline-secondary btn-sm copy-button"
14           >
15             <span class="glyphicon glyphicon-copy"></span>
16           </button>
17
18           </div>
19           <span *ngIf="user?.blocked" [ngbTooltip]="user.blockedReason" class="badge badge-danger" i18n>Banned</span>
20           <span *ngIf="account.mutedByUser" class="badge badge-danger" i18n>Muted</span>
21           <span *ngIf="account.mutedServerByUser" class="badge badge-danger" i18n>Instance muted</span>
22           <span *ngIf="account.mutedByInstance" class="badge badge-danger" i18n>Muted by your instance</span>
23           <span *ngIf="account.mutedServerByInstance" class="badge badge-danger" i18n>Instance muted by your instance</span>
24
25           <my-user-moderation-dropdown
26             buttonSize="small" [account]="account" [user]="user" placement="bottom-right auto"
27             (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()"
28           >
29           </my-user-moderation-dropdown>
30         </div>
31         <div class="actor-followers" i18n>{account.followersCount, plural, =1 {1 subscriber} other {{{ account.followersCount }} subscribers}}</div>
32       </div>
33
34       <my-subscribe-button *ngIf="videoChannels" [account]="account" [videoChannels]="videoChannels"></my-subscribe-button>
35     </div>
36
37     <div class="links">
38       <a i18n routerLink="video-channels" routerLinkActive="active" class="title-page">Video channels</a>
39
40       <a i18n routerLink="videos" routerLinkActive="active" class="title-page">Videos</a>
41
42       <a i18n routerLink="about" routerLinkActive="active" class="title-page">About</a>
43     </div>
44   </div>
45
46   <div class="margin-content">
47     <router-outlet></router-outlet>
48   </div>
49 </div>