aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+video-channels/video-channels.component.html
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/+video-channels/video-channels.component.html')
-rw-r--r--client/src/app/+video-channels/video-channels.component.html141
1 files changed, 107 insertions, 34 deletions
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index 4b0d12b6e..9308d5bb6 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -1,50 +1,123 @@
1<div *ngIf="videoChannel" class="row"> 1<div class="root" *ngIf="videoChannel">
2 <div class="sub-menu"> 2 <div class="banner" *ngIf="videoChannel.bannerUrl">
3 3 <img [src]="videoChannel.bannerUrl" alt="Channel banner">
4 <div class="actor"> 4 </div>
5 <img [src]="videoChannel.avatarUrl" alt="Avatar" /> 5
6 6 <div class="channel-info">
7 <div class="actor-info"> 7
8 <div class="actor-names"> 8 <ng-template #buttonsTemplate>
9 <div class="actor-display-name">{{ videoChannel.displayName }}</div> 9 <a *ngIf="isManageable()" [routerLink]="[ '/my-library/video-channels/update', videoChannel.nameWithHost ]" class="peertube-button-link orange-button" i18n>
10 <div class="actor-name"> 10 Manage channel
11 <span>{{ videoChannel.nameWithHost }}</span> 11 </a>
12 <button [cdkCopyToClipboard]="videoChannel.nameWithHostForced" (click)="activateCopiedMessage()" 12
13 class="btn btn-outline-secondary btn-sm copy-button" 13 <my-subscribe-button *ngIf="!isManageable()" #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
14 > 14
15 <span class="glyphicon glyphicon-copy"></span> 15 <button *ngIf="videoChannel.support" (click)="showSupportModal()" class="support-button peertube-button orange-button-inverted">
16 </button> 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-account-avatar [account]="videoChannel.ownerAccount" [internalHref]="getAccountUrl()" size="120"></my-account-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>
17 </div> 34 </div>
18 </div> 35 </div>
19 36
20 <div class="right-buttons"> 37 <div class="owner-description">
21 <a *ngIf="isChannelManageable && !isInSmallView" [routerLink]="[ '/my-library/video-channels/update', videoChannel.nameWithHost ]" class="btn btn-outline-tertiary mr-2" i18n> 38 <div class="description-html" [innerHTML]="ownerDescriptionHTML"></div>
22 Manage channel
23 </a>
24 <my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
25 </div> 39 </div>
26 40
27 <div class="actor-lower"> 41 <a class="view-account short" [routerLink]="getAccountUrl()" i18n>
28 <div class="actor-followers" i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div> 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 <img class="channel-avatar" [src]="videoChannel.avatarUrl" alt="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>
29 71
30 <a [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n-title title="Go the owner account page" class="actor-owner"> 72 <div class="actor-counters">
31 <span class="d-inline-flex"><span i18n class="d-none d-sm-block mr-1">Created by</span>{{ videoChannel.ownerBy }}</span> 73 <span i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</span>
32 <img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" /> 74
33 </a> 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>
34 </div> 84 </div>
35 </div> 85 </div>
36 </div> 86 </div>
37 87
38 <div class="links w-100"> 88 <div class="channel-description" [ngClass]="{ expanded: channelDescriptionExpanded }">
39 <ng-template #linkTemplate let-item="item"> 89 <div class="description-html" [innerHTML]="channelDescriptionHTML"></div>
40 <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a> 90 </div>
41 </ng-template> 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>
42 102
43 <list-overflow [items]="links" [itemTemplate]="linkTemplate"></list-overflow> 103 <div class="owner-card">
104 <ng-template *ngTemplateOutlet="ownerTemplate"></ng-template>
44 </div> 105 </div>
45 </div> 106 </div>
46 107
47 <div class="margin-content"> 108 <div class="bottom-owner">
48 <router-outlet></router-outlet> 109 <ng-template *ngTemplateOutlet="ownerTemplate"></ng-template>
49 </div> 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>
50</div> 121</div>
122
123<my-support-modal #supportModal [videoChannel]="videoChannel"></my-support-modal>
generated by cgit v1.2.3 (git 2.25.1) at 2024-09-08 21:40:58 +0000