client/src/app/+video-channels/video-channels.component.html

   1 <div class="root" *ngIf="videoChannel">
   2   <div class="channel-info">
   3
   4     <ng-template #buttonsTemplate>
   5         <a *ngIf="isManageable() && !isInSmallView()" [routerLink]="[ '/my-library/video-channels/update', videoChannel.nameWithHost ]" class="peertube-button-link orange-button" i18n>
   6           Manage channel
   7         </a>
   8
   9         <my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
  10     </ng-template>
  11
  12     <ng-template #ownerTemplate>
  13       <div class="owner-block">
  14         <div class="avatar-row">
  15           <img class="channel-avatar" [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
  16
  17           <div class="actor-info">
  18             <h4>{{ videoChannel.ownerAccount.displayName }}</h4>
  19
  20             <div class="actor-handle">@{{ videoChannel.ownerBy }}</div>
  21           </div>
  22         </div>
  23
  24         <div class="owner-description">
  25           <div class="description-html" [innerHTML]="ownerDescriptionHTML"></div>
  26         </div>
  27
  28         <a class="view-account short" [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n>
  29           View account
  30         </a>
  31
  32         <a class="view-account complete" [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n>
  33           View owner account
  34         </a>
  35       </div>
  36     </ng-template>
  37
  38     <div class="channel-avatar-row">
  39       <img [src]="videoChannel.avatarUrl" alt="Avatar" />
  40
  41       <div>
  42         <div class="section-label" i18n>VIDEO CHANNEL</div>
  43
  44         <div class="actor-info">
  45           <div>
  46             <div class="actor-display-name">
  47               <h1>{{ videoChannel.displayName }}</h1>
  48             </div>
  49
  50             <div class="actor-handle">
  51               <span>@{{ videoChannel.nameWithHost }}</span>
  52               <button [cdkCopyToClipboard]="videoChannel.nameWithHostForced" (click)="activateCopiedMessage()"
  53                       class="btn btn-outline-secondary btn-sm copy-button" title="Copy channel handle" i18n-title
  54               >
  55                 <span class="glyphicon glyphicon-duplicate"></span>
  56               </button>
  57             </div>
  58
  59             <div class="actor-counters">
  60               <span i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</span>
  61
  62               <span class="videos-count" *ngIf="channelVideosCount !== undefined" i18n>
  63                 {channelVideosCount, plural, =1 {1 videos} other {{{ channelVideosCount }} videos}}
  64               </span>
  65             </div>
  66           </div>
  67
  68           <div class="channel-buttons right">
  69             <ng-template *ngTemplateOutlet="buttonsTemplate"></ng-template>
  70           </div>
  71         </div>
  72       </div>
  73     </div>
  74
  75     <div class="channel-description" [ngClass]="{ expanded: channelDescriptionExpanded }">
  76       <div class="description-html" [innerHTML]="channelDescriptionHTML"></div>
  77
  78       <div class="created-at" i18n>Channel created on {{ videoChannel.createdAt | date }}</div>
  79     </div>
  80
  81     <div *ngIf="!channelDescriptionExpanded" class="show-more" role="button"
  82       (click)="channelDescriptionExpanded = !channelDescriptionExpanded"
  83       title="Show the complete description" i18n-title i18n
  84     >
  85       Show more...
  86     </div>
  87
  88     <div class="channel-buttons bottom">
  89       <ng-template *ngTemplateOutlet="buttonsTemplate"></ng-template>
  90     </div>
  91
  92     <div class="owner-card">
  93       <div class="section-label" i18n>OWNER ACCOUNT</div>
  94
  95       <ng-template *ngTemplateOutlet="ownerTemplate"></ng-template>
  96     </div>
  97   </div>
  98
  99   <div class="bottom-owner">
 100     <div class="section-label" i18n>OWNER ACCOUNT</div>
 101
 102     <ng-template *ngTemplateOutlet="ownerTemplate"></ng-template>
 103   </div>
 104
 105   <div class="links">
 106     <ng-template #linkTemplate let-item="item">
 107       <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
 108     </ng-template>
 109
 110     <list-overflow [items]="links" [itemTemplate]="linkTemplate"></list-overflow>
 111   </div>
 112
 113   <router-outlet></router-outlet>
 114 </div>