diff options
author | Chocobozzz <me@florianbigard.com> | 2020-06-23 14:49:20 +0200 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2020-06-23 16:00:49 +0200 |
commit | 1942f11d5ee6926ad93dc1b79fae18325ba5de18 (patch) | |
tree | 3f2a3cd9466a56c419d197ac832a3e9cbc86bec4 /client/src/app/+videos/+video-watch/comment/video-comments.component.html | |
parent | 67ed6552b831df66713bac9e672738796128d33f (diff) | |
download | PeerTube-1942f11d5ee6926ad93dc1b79fae18325ba5de18.tar.gz PeerTube-1942f11d5ee6926ad93dc1b79fae18325ba5de18.tar.zst PeerTube-1942f11d5ee6926ad93dc1b79fae18325ba5de18.zip |
Lazy load all routes
Diffstat (limited to 'client/src/app/+videos/+video-watch/comment/video-comments.component.html')
-rw-r--r-- | client/src/app/+videos/+video-watch/comment/video-comments.component.html | 98 |
1 files changed, 98 insertions, 0 deletions
diff --git a/client/src/app/+videos/+video-watch/comment/video-comments.component.html b/client/src/app/+videos/+video-watch/comment/video-comments.component.html new file mode 100644 index 000000000..dd1d43560 --- /dev/null +++ b/client/src/app/+videos/+video-watch/comment/video-comments.component.html | |||
@@ -0,0 +1,98 @@ | |||
1 | <div> | ||
2 | <div class="title-block"> | ||
3 | <h2 class="title-page title-page-single"> | ||
4 | <ng-container *ngIf="componentPagination.totalItems > 0; then hasComments; else noComments"></ng-container> | ||
5 | <ng-template #hasComments> | ||
6 | <ng-container i18n *ngIf="componentPagination.totalItems === 1; else manyComments">1 Comment</ng-container> | ||
7 | <ng-template i18n #manyComments>{{ componentPagination.totalItems }} Comments</ng-template> | ||
8 | </ng-template> | ||
9 | <ng-template i18n #noComments>Comments</ng-template> | ||
10 | </h2> | ||
11 | |||
12 | <my-feed [syndicationItems]="syndicationItems"></my-feed> | ||
13 | |||
14 | <div ngbDropdown class="d-inline-block ml-4"> | ||
15 | <button class="btn btn-sm btn-outline-secondary" id="dropdown-sort-comments" ngbDropdownToggle i18n> | ||
16 | SORT BY | ||
17 | </button> | ||
18 | <div ngbDropdownMenu aria-labelledby="dropdown-sort-comments"> | ||
19 | <button (click)="handleSortChange('-createdAt')" ngbDropdownItem i18n>Most recent first (default)</button> | ||
20 | <button (click)="handleSortChange('-totalReplies')" ngbDropdownItem i18n>Most replies first</button> | ||
21 | </div> | ||
22 | </div> | ||
23 | </div> | ||
24 | |||
25 | <ng-template [ngIf]="video.commentsEnabled === true"> | ||
26 | <my-video-comment-add | ||
27 | [video]="video" | ||
28 | [user]="user" | ||
29 | (commentCreated)="onCommentThreadCreated($event)" | ||
30 | ></my-video-comment-add> | ||
31 | |||
32 | <div *ngIf="componentPagination.totalItems === 0 && comments.length === 0" i18n>No comments.</div> | ||
33 | |||
34 | <div | ||
35 | class="comment-threads" | ||
36 | myInfiniteScroller | ||
37 | [autoInit]="true" | ||
38 | (nearOfBottom)="onNearOfBottom()" | ||
39 | [dataObservable]="onDataSubject.asObservable()" | ||
40 | > | ||
41 | <div> | ||
42 | <div class="anchor" #commentHighlightBlock id="highlighted-comment"></div> | ||
43 | <my-video-comment | ||
44 | *ngIf="highlightedThread" | ||
45 | [comment]="highlightedThread" | ||
46 | [video]="video" | ||
47 | [inReplyToCommentId]="inReplyToCommentId" | ||
48 | [commentTree]="threadComments[highlightedThread.id]" | ||
49 | [highlightedComment]="true" | ||
50 | [firstInThread]="true" | ||
51 | (wantedToReply)="onWantedToReply($event)" | ||
52 | (wantedToDelete)="onWantedToDelete($event)" | ||
53 | (threadCreated)="onThreadCreated($event)" | ||
54 | (resetReply)="onResetReply()" | ||
55 | (timestampClicked)="handleTimestampClicked($event)" | ||
56 | ></my-video-comment> | ||
57 | </div> | ||
58 | |||
59 | <div *ngFor="let comment of comments; index as i"> | ||
60 | <my-video-comment | ||
61 | *ngIf="!highlightedThread || comment.id !== highlightedThread.id" | ||
62 | [comment]="comment" | ||
63 | [video]="video" | ||
64 | [inReplyToCommentId]="inReplyToCommentId" | ||
65 | [commentTree]="threadComments[comment.id]" | ||
66 | [firstInThread]="i + 1 !== comments.length" | ||
67 | (wantedToReply)="onWantedToReply($event)" | ||
68 | (wantedToDelete)="onWantedToDelete($event)" | ||
69 | (threadCreated)="onThreadCreated($event)" | ||
70 | (resetReply)="onResetReply()" | ||
71 | (timestampClicked)="handleTimestampClicked($event)" | ||
72 | > | ||
73 | <div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment.id)" class="view-replies mb-2"> | ||
74 | <span class="glyphicon glyphicon-menu-down"></span> | ||
75 | |||
76 | <ng-container *ngIf="comment.totalRepliesFromVideoAuthor > 0; then hasAuthorComments; else noAuthorComments"></ng-container> | ||
77 | <ng-template #hasAuthorComments> | ||
78 | <ng-container *ngIf="comment.totalReplies !== comment.totalRepliesFromVideoAuthor; else onlyAuthorComments" i18n> | ||
79 | View {{ comment.totalReplies }} replies from {{ video?.account?.displayName || 'the author' }} and others | ||
80 | </ng-container> | ||
81 | <ng-template i18n #onlyAuthorComments> | ||
82 | View {{ comment.totalReplies }} replies from {{ video?.account?.displayName || 'the author' }} | ||
83 | </ng-template> | ||
84 | </ng-template> | ||
85 | <ng-template i18n #noAuthorComments>View {{ comment.totalReplies }} replies</ng-template> | ||
86 | |||
87 | <my-small-loader class="comment-thread-loading ml-1" [loading]="threadLoading[comment.id]"></my-small-loader> | ||
88 | </div> | ||
89 | </my-video-comment> | ||
90 | |||
91 | </div> | ||
92 | </div> | ||
93 | </ng-template> | ||
94 | |||
95 | <div *ngIf="video.commentsEnabled === false" i18n> | ||
96 | Comments are disabled. | ||
97 | </div> | ||
98 | </div> | ||