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.html128
1 files changed, 96 insertions, 32 deletions
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index b3ea19768..f63110bf5 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -1,50 +1,114 @@
1<div *ngIf="videoChannel" class="row"> 1<div class="root" *ngIf="videoChannel">
2 <div class="sub-menu"> 2 <div class="channel-info">
3 3
4 <div class="actor"> 4 <ng-template #buttonsTemplate>
5 <img [src]="videoChannel.avatarUrl" alt="Avatar" /> 5 <a *ngIf="isManageable() && !isInSmallView()" [routerLink]="[ '/my-library/video-channels/update', videoChannel.nameWithHost ]" class="peertube-button-link orange-button" i18n>
6 Manage channel
7 </a>
8
9 <my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
10 </ng-template>
11
12 <ng-template #ownerTemplate>
13 <div class="owner-block">
14 <div class="avatar-row">
15 <img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
16
17 <div class="actor-info">
18 <h4>{{ videoChannel.ownerAccount.displayName }}</h4>
6 19
7 <div class="actor-info"> 20 <div class="actor-handle">@{{ videoChannel.ownerBy }}</div>
8 <div class="actor-names">
9 <div class="actor-display-name">{{ videoChannel.displayName }}</div>
10 <div class="actor-name">
11 <span>{{ videoChannel.nameWithHost }}</span>
12 <button [cdkCopyToClipboard]="videoChannel.nameWithHostForced" (click)="activateCopiedMessage()"
13 class="btn btn-outline-secondary btn-sm copy-button"
14 >
15 <span class="glyphicon glyphicon-duplicate"></span>
16 </button>
17 </div> 21 </div>
18 </div> 22 </div>
19 23
20 <div class="right-buttons"> 24 <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> 25 <div class="description-html" [innerHTML]="ownerDescriptionHTML"></div>
22 Manage channel
23 </a>
24 <my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
25 </div> 26 </div>
26 27
27 <div class="actor-lower"> 28 <a class="view-account short" [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n>
28 <div class="actor-followers" i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div> 29 View account
30 </a>
31
32 <a class="view-account complete" [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n>
33 View owner account
34 </a>
35 </div>
36 </ng-template>
37
38 <div class="channel-avatar-row">
39 <img [src]="videoChannel.avatarUrl" alt="Avatar" />
40
41 <div>
42 <div class="section-label" i18n>VIDEO CHANNEL</div>
43
44 <div class="actor-info">
45 <div>
46 <div class="actor-display-name">
47 <h1>{{ videoChannel.displayName }}</h1>
48 </div>
49
50 <div class="actor-handle">
51 <span>@{{ videoChannel.nameWithHost }}</span>
52 <button [cdkCopyToClipboard]="videoChannel.nameWithHostForced" (click)="activateCopiedMessage()"
53 class="btn btn-outline-secondary btn-sm copy-button" title="Copy channel handle" i18n-title
54 >
55 <span class="glyphicon glyphicon-duplicate"></span>
56 </button>
57 </div>
58
59 <div class="actor-counters">
60 <span i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</span>
61
62 <span class="videos-count" *ngIf="channelVideosCount !== undefined" i18n>
63 {channelVideosCount, plural, =1 {1 videos} other {{{ channelVideosCount }} videos}}
64 </span>
65 </div>
66 </div>
29 67
30 <a [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n-title title="Go the owner account page" class="actor-owner"> 68 <div class="channel-buttons right">
31 <span class="d-inline-flex"><span i18n class="d-none d-sm-block mr-1">Created by</span>{{ videoChannel.ownerBy }}</span> 69 <ng-template *ngTemplateOutlet="buttonsTemplate"></ng-template>
32 <img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" /> 70 </div>
33 </a>
34 </div> 71 </div>
35 </div> 72 </div>
36 </div> 73 </div>
37 74
38 <div class="links w-100"> 75 <div class="channel-description" [ngClass]="{ expanded: channelDescriptionExpanded }">
39 <ng-template #linkTemplate let-item="item"> 76 <div class="description-html" [innerHTML]="channelDescriptionHTML"></div>
40 <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a> 77
41 </ng-template> 78 <div class="created-at" i18n>Channel created on {{ videoChannel.createdAt | date }}</div>
79 </div>
42 80
43 <list-overflow [items]="links" [itemTemplate]="linkTemplate"></list-overflow> 81 <div *ngIf="!channelDescriptionExpanded" class="show-more" role="button"
82 (click)="channelDescriptionExpanded = !channelDescriptionExpanded"
83 title="Show the complete description" i18n-title i18n
84 >
85 Show more...
44 </div> 86 </div>
87
88 <div class="channel-buttons bottom">
89 <ng-template *ngTemplateOutlet="buttonsTemplate"></ng-template>
90 </div>
91
92 <div class="owner-card">
93 <div class="section-label" i18n>OWNER ACCOUNT</div>
94
95 <ng-template *ngTemplateOutlet="ownerTemplate"></ng-template>
96 </div>
97 </div>
98
99 <div class="bottom-owner">
100 <div class="section-label" i18n>OWNER ACCOUNT</div>
101
102 <ng-template *ngTemplateOutlet="ownerTemplate"></ng-template>
45 </div> 103 </div>
46 104
47 <div class="margin-content"> 105 <div class="links">
48 <router-outlet></router-outlet> 106 <ng-template #linkTemplate let-item="item">
107 <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
108 </ng-template>
109
110 <list-overflow [items]="links" [itemTemplate]="linkTemplate"></list-overflow>
49 </div> 111 </div>
112
113 <router-outlet></router-outlet>
50</div> 114</div>
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-13 22:05:22 +0000