-<div *ngIf="videoChannel" class="row">
- <div class="sub-menu">
+<div class="root" *ngIf="videoChannel">
+ <div class="banner" *ngIf="videoChannel.bannerUrl">
+ <img [src]="videoChannel.bannerUrl" alt="Channel banner">
+ </div>
+
+ <div class="channel-info">
+
+ <ng-template #buttonsTemplate>
+ <a *ngIf="isManageable()" [routerLink]="[ '/manage/update', videoChannel.nameWithHost ]" class="peertube-button-link orange-button" i18n>
+ Manage channel
+ </a>
+
+ <my-subscribe-button *ngIf="!isOwner()" #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
+
+ <button *ngIf="videoChannel.support" (click)="showSupportModal()" class="support-button peertube-button orange-button-inverted">
+ <my-global-icon iconName="support" aria-hidden="true"></my-global-icon>
+ <span class="icon-text" i18n>Support</span>
+ </button>
+ </ng-template>
+
+ <ng-template #ownerTemplate>
+ <div class="owner-block">
+ <div class="section-label" i18n>OWNER ACCOUNT</div>
+
+ <div class="avatar-row">
+ <my-actor-avatar class="account-avatar" [actor]="ownerAccount" actorType="account" [internalHref]="getAccountUrl()"></my-actor-avatar>
+
+ <div class="actor-info">
+ <h4>
+ <a [routerLink]="getAccountUrl()" title="View account" i18n-title>{{ ownerAccount.displayName }}</a>
+ </h4>
- <div class="actor">
- <img [src]="videoChannel.avatarUrl" alt="Avatar" />
+ <div class="actor-handle">@{{ videoChannel.ownerBy }}</div>
- <div class="actor-info">
- <div class="actor-names">
- <div class="actor-display-name">{{ videoChannel.displayName }}</div>
+ <my-account-block-badges [account]="ownerAccount"></my-account-block-badges>
+ </div>
</div>
- <div i18n class="actor-followers">{{ videoChannel.followersCount }} subscribers</div>
- <a [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n-title title="Go the owner account page" class="actor-owner">
- <span i18n>Created by {{ videoChannel.ownerBy }}</span>
- <img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
+ <div class="owner-description">
+ <div class="description-html" [innerHTML]="ownerDescriptionHTML"></div>
+ </div>
+
+ <a class="view-account short" [routerLink]="getAccountUrl()" i18n>
+ View account
+ </a>
+
+ <a class="view-account complete" [routerLink]="getAccountUrl()" i18n>
+ View owner account
</a>
</div>
+ </ng-template>
+
+ <div class="channel-avatar-row">
+ <my-actor-avatar class="main-avatar" [actor]="videoChannel" actorType="channel"></my-actor-avatar>
+
+ <div>
+ <div class="section-label" i18n>VIDEO CHANNEL</div>
+
+ <div class="actor-info">
+ <div>
+ <div class="actor-display-name">
+ <h1 i18n-title [title]="'Channel created on ' + (videoChannel.createdAt | date)">{{ videoChannel.displayName }}</h1>
+ </div>
+
+ <div class="actor-handle">
+ <span>@{{ videoChannel.nameWithHost }}</span>
+ <button [cdkCopyToClipboard]="videoChannel.nameWithHostForced" (click)="activateCopiedMessage()"
+ class="btn btn-outline-secondary btn-sm copy-button" title="Copy channel handle" i18n-title
+ >
+ <my-global-icon iconName="copy"></my-global-icon>
+ </button>
+ </div>
+
+ <div class="actor-counters">
+ <span i18n>{videoChannel.followersCount, plural, =0 {No subscribers} =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</span>
+
+ <span class="videos-count" *ngIf="channelVideosCount !== undefined" i18n>
+ {channelVideosCount, plural, =0 {No videos} =1 {1 video} other {{{ channelVideosCount }} videos}}
+ </span>
+ </div>
+ </div>
+
+ <div class="channel-buttons right">
+ <ng-template *ngTemplateOutlet="buttonsTemplate"></ng-template>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="channel-description" [ngClass]="{ expanded: channelDescriptionExpanded }">
+ <div class="description-html" [innerHTML]="channelDescriptionHTML"></div>
</div>
- <div class="links">
- <a i18n routerLink="videos" routerLinkActive="active" class="title-page">Videos</a>
+ <div *ngIf="hasShowMoreDescription()" class="show-more" role="button"
+ (click)="channelDescriptionExpanded = !channelDescriptionExpanded"
+ title="Show the complete description" i18n-title i18n
+ >
+ Show more...
+ </div>
- <a i18n routerLink="about" routerLinkActive="active" class="title-page">About</a>
+ <div class="channel-buttons bottom">
+ <ng-template *ngTemplateOutlet="buttonsTemplate"></ng-template>
+ </div>
+
+ <div class="owner-card">
+ <ng-template *ngTemplateOutlet="ownerTemplate"></ng-template>
</div>
</div>
- <div class="margin-content">
- <router-outlet></router-outlet>
+ <div class="bottom-owner">
+ <ng-template *ngTemplateOutlet="ownerTemplate"></ng-template>
</div>
+
+ <div class="links">
+ <ng-template #linkTemplate let-item="item">
+ <a [routerLink]="item.routerLink" routerLinkActive="active" class="sub-menu-entry">{{ item.label }}</a>
+ </ng-template>
+
+ <my-list-overflow [items]="links" [itemTemplate]="linkTemplate"></my-list-overflow>
+ </div>
+
+ <router-outlet></router-outlet>
</div>
+
+<my-support-modal #supportModal [videoChannel]="videoChannel"></my-support-modal>