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

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