1 <div class=
"root" *
ngIf=
"videoChannel">
2 <div class=
"banner" *
ngIf=
"videoChannel.bannerUrl">
3 <img [src]=
"videoChannel.bannerUrl" alt=
"Channel banner">
6 <div class=
"channel-info">
8 <ng-template #buttonsTemplate
>
9 <a *
ngIf=
"isManageable()" [routerLink]=
"[ '/my-library/video-channels/update', videoChannel.nameWithHost ]" class=
"peertube-button-link orange-button" i18n
>
13 <my-subscribe-button *
ngIf=
"!isManageable()" #subscribeButton [videoChannels]=
"[videoChannel]"></my-subscribe-button>
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>
21 <ng-template #ownerTemplate
>
22 <div class=
"owner-block">
23 <div class=
"section-label" i18n
>OWNER ACCOUNT
</div>
25 <div class=
"avatar-row">
26 <my-actor-avatar class=
"account-avatar" [account]=
"videoChannel.ownerAccount" [internalHref]=
"getAccountUrl()"></my-actor-avatar>
28 <div class=
"actor-info">
30 <a [routerLink]=
"getAccountUrl()" title=
"View account" i18n-title
>{{ videoChannel.ownerAccount.displayName }}
</a>
33 <div class=
"actor-handle">@{{ videoChannel.ownerBy }}
</div>
37 <div class=
"owner-description">
38 <div class=
"description-html" [innerHTML]=
"ownerDescriptionHTML"></div>
41 <a class=
"view-account short" [routerLink]=
"getAccountUrl()" i18n
>
45 <a class=
"view-account complete" [routerLink]=
"getAccountUrl()" i18n
>
51 <div class=
"channel-avatar-row">
52 <my-actor-avatar class=
"main-avatar" [channel]=
"videoChannel"></my-actor-avatar>
55 <div class=
"section-label" i18n
>VIDEO CHANNEL
</div>
57 <div class=
"actor-info">
59 <div class=
"actor-display-name">
60 <h1 i18n-title [title]=
"'Channel created on ' + (videoChannel.createdAt | date)">{{ videoChannel.displayName }}
</h1>
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
68 <span class=
"glyphicon glyphicon-duplicate"></span>
72 <div class=
"actor-counters">
73 <span i18n
>{videoChannel.followersCount, plural, =
1 {
1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}
</span>
75 <span class=
"videos-count" *
ngIf=
"channelVideosCount !== undefined" i18n
>
76 {channelVideosCount, plural, =
1 {
1 videos} other {{{ channelVideosCount }} videos}}
81 <div class=
"channel-buttons right">
82 <ng-template *
ngTemplateOutlet=
"buttonsTemplate"></ng-template>
88 <div class=
"channel-description" [ngClass]=
"{ expanded: channelDescriptionExpanded }">
89 <div class=
"description-html" [innerHTML]=
"channelDescriptionHTML"></div>
92 <div *
ngIf=
"hasShowMoreDescription()" class=
"show-more" role=
"button"
93 (click)=
"channelDescriptionExpanded = !channelDescriptionExpanded"
94 title=
"Show the complete description" i18n-title i18n
99 <div class=
"channel-buttons bottom">
100 <ng-template *
ngTemplateOutlet=
"buttonsTemplate"></ng-template>
103 <div class=
"owner-card">
104 <ng-template *
ngTemplateOutlet=
"ownerTemplate"></ng-template>
108 <div class=
"bottom-owner">
109 <ng-template *
ngTemplateOutlet=
"ownerTemplate"></ng-template>
113 <ng-template #linkTemplate
let-item=
"item">
114 <a [routerLink]=
"item.routerLink" routerLinkActive=
"active" class=
"title-page">{{ item.label }}
</a>
117 <list-overflow [items]=
"links" [itemTemplate]=
"linkTemplate"></list-overflow>
120 <router-outlet></router-outlet>
123 <my-support-modal #supportModal [videoChannel]=
"videoChannel"></my-support-modal>