1 <div class=
"root" *
ngIf=
"videoChannel">
2 <div class=
"channel-info">
4 <ng-template #buttonsTemplate
>
5 <a *
ngIf=
"isManageable()" [routerLink]=
"[ '/my-library/video-channels/update', videoChannel.nameWithHost ]" class=
"peertube-button-link orange-button" i18n
>
9 <my-subscribe-button *
ngIf=
"!isManageable()" #subscribeButton [videoChannels]=
"[videoChannel]"></my-subscribe-button>
11 <button *
ngIf=
"videoChannel.support" (click)=
"showSupportModal()" class=
"support-button peertube-button orange-button-inverted">
12 <my-global-icon iconName=
"support" aria-hidden=
"true"></my-global-icon>
13 <span class=
"icon-text" i18n
>Support
</span>
17 <ng-template #ownerTemplate
>
18 <div class=
"owner-block">
19 <div class=
"avatar-row">
20 <img class=
"account-avatar" [src]=
"videoChannel.ownerAvatarUrl" alt=
"Owner account avatar" />
22 <div class=
"actor-info">
23 <h4>{{ videoChannel.ownerAccount.displayName }}
</h4>
25 <div class=
"actor-handle">@{{ videoChannel.ownerBy }}
</div>
29 <div class=
"owner-description">
30 <div class=
"description-html" [innerHTML]=
"ownerDescriptionHTML"></div>
33 <a class=
"view-account short" [routerLink]=
"[ '/accounts', videoChannel.ownerBy ]" i18n
>
37 <a class=
"view-account complete" [routerLink]=
"[ '/accounts', videoChannel.ownerBy ]" i18n
>
43 <div class=
"channel-avatar-row">
44 <img class=
"channel-avatar" [src]=
"videoChannel.avatarUrl" alt=
"Avatar" />
47 <div class=
"section-label" i18n
>VIDEO CHANNEL
</div>
49 <div class=
"actor-info">
51 <div class=
"actor-display-name">
52 <h1>{{ videoChannel.displayName }}
</h1>
55 <div class=
"actor-handle">
56 <span>@{{ videoChannel.nameWithHost }}
</span>
57 <button [cdkCopyToClipboard]=
"videoChannel.nameWithHostForced" (click)=
"activateCopiedMessage()"
58 class=
"btn btn-outline-secondary btn-sm copy-button" title=
"Copy channel handle" i18n-title
60 <span class=
"glyphicon glyphicon-duplicate"></span>
64 <div class=
"actor-counters">
65 <span i18n
>{videoChannel.followersCount, plural, =
1 {
1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}
</span>
67 <span class=
"videos-count" *
ngIf=
"channelVideosCount !== undefined" i18n
>
68 {channelVideosCount, plural, =
1 {
1 videos} other {{{ channelVideosCount }} videos}}
73 <div class=
"channel-buttons right">
74 <ng-template *
ngTemplateOutlet=
"buttonsTemplate"></ng-template>
80 <div class=
"channel-description" [ngClass]=
"{ expanded: channelDescriptionExpanded }">
81 <div class=
"description-html" [innerHTML]=
"channelDescriptionHTML"></div>
83 <div class=
"created-at" i18n
>Channel created on {{ videoChannel.createdAt | date }}
</div>
86 <div *
ngIf=
"!channelDescriptionExpanded" class=
"show-more" role=
"button"
87 (click)=
"channelDescriptionExpanded = !channelDescriptionExpanded"
88 title=
"Show the complete description" i18n-title i18n
93 <div class=
"channel-buttons bottom">
94 <ng-template *
ngTemplateOutlet=
"buttonsTemplate"></ng-template>
97 <div class=
"owner-card">
98 <div class=
"section-label" i18n
>OWNER ACCOUNT
</div>
100 <ng-template *
ngTemplateOutlet=
"ownerTemplate"></ng-template>
104 <div class=
"bottom-owner">
105 <div class=
"section-label" i18n
>OWNER ACCOUNT
</div>
107 <ng-template *
ngTemplateOutlet=
"ownerTemplate"></ng-template>
111 <ng-template #linkTemplate
let-item=
"item">
112 <a [routerLink]=
"item.routerLink" routerLinkActive=
"active" class=
"title-page">{{ item.label }}
</a>
115 <list-overflow [items]=
"links" [itemTemplate]=
"linkTemplate"></list-overflow>
118 <router-outlet></router-outlet>
121 <my-support-modal #supportModal [videoChannel]=
"videoChannel"></my-support-modal>