diff options
author | Chocobozzz <me@florianbigard.com> | 2021-06-29 17:18:30 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2021-06-29 17:18:39 +0200 |
commit | 911186dae411d78788ccede093c251303187589a (patch) | |
tree | 967a07cd985ae4e2ea5249855726455fe929471d /client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html | |
parent | b0c43e36dbdc2c964f6828a78b146faebfb75b21 (diff) | |
download | PeerTube-911186dae411d78788ccede093c251303187589a.tar.gz PeerTube-911186dae411d78788ccede093c251303187589a.tar.zst PeerTube-911186dae411d78788ccede093c251303187589a.zip |
Reorganize watch components
Diffstat (limited to 'client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html')
-rw-r--r-- | client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html new file mode 100644 index 000000000..d8b944b35 --- /dev/null +++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html | |||
@@ -0,0 +1,94 @@ | |||
1 | <div *ngIf="isCommentDisplayed()" class="root-comment" [ngClass]="{ 'is-child': isChild() }"> | ||
2 | <div class="left"> | ||
3 | <my-actor-avatar *ngIf="!comment.isDeleted" [href]="comment.account.url" [account]="comment.account"></my-actor-avatar> | ||
4 | <div class="vertical-border"></div> | ||
5 | </div> | ||
6 | |||
7 | <div class="right" [ngClass]="{ 'mb-3': firstInThread }"> | ||
8 | <div class="comment"> | ||
9 | <ng-container *ngIf="!comment.isDeleted"> | ||
10 | <div *ngIf="highlightedComment === true" class="highlighted-comment" i18n>Highlighted comment</div> | ||
11 | |||
12 | <div class="comment-account-date"> | ||
13 | <div class="comment-account"> | ||
14 | <a [routerLink]="[ '/a', comment.by ]"> | ||
15 | <span class="comment-account-name" [ngClass]="{ 'video-author': video.account.id === comment.account.id }"> | ||
16 | {{ comment.account.displayName }} | ||
17 | </span> | ||
18 | |||
19 | <span class="comment-account-fid ml-1">{{ comment.by }}</span> | ||
20 | </a> | ||
21 | </div> | ||
22 | |||
23 | <a [routerLink]="['/w', video.shortUUID, { 'threadId': comment.threadId }]" class="comment-date" [title]="comment.createdAt"> | ||
24 | {{ comment.createdAt | myFromNow }} | ||
25 | </a> | ||
26 | </div> | ||
27 | |||
28 | <div | ||
29 | class="comment-html" | ||
30 | [innerHTML]="sanitizedCommentHTML" | ||
31 | (timestampClicked)="handleTimestampClicked($event)" | ||
32 | timestampRouteTransformer | ||
33 | ></div> | ||
34 | |||
35 | <div class="comment-actions"> | ||
36 | <div tabindex=0 (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div> | ||
37 | |||
38 | <my-user-moderation-dropdown | ||
39 | [prependActions]="prependModerationActions" tabindex=0 [buttonStyled]="false" | ||
40 | buttonSize="small" [account]="commentAccount" [user]="commentUser" i18n-label label="Options" placement="bottom-left auto" | ||
41 | ></my-user-moderation-dropdown> | ||
42 | </div> | ||
43 | </ng-container> | ||
44 | |||
45 | <ng-container *ngIf="comment.isDeleted"> | ||
46 | <div class="comment-account-date"> | ||
47 | <span class="comment-account" i18n>Deleted</span> | ||
48 | <a [routerLink]="['/w', video.shortUUID, { 'threadId': comment.threadId }]" | ||
49 | class="comment-date">{{ comment.createdAt | myFromNow }}</a> | ||
50 | </div> | ||
51 | |||
52 | <div class="comment-html comment-html-deleted"> | ||
53 | <i i18n>This comment has been deleted</i> | ||
54 | </div> | ||
55 | </ng-container> | ||
56 | |||
57 | <my-video-comment-add | ||
58 | *ngIf="!comment.isDeleted && inReplyToCommentId === comment.id" | ||
59 | [user]="user" | ||
60 | [video]="video" | ||
61 | [parentComment]="comment" | ||
62 | [parentComments]="newParentComments" | ||
63 | [focusOnInit]="true" | ||
64 | (commentCreated)="onCommentReplyCreated($event)" | ||
65 | (cancel)="onResetReply()" | ||
66 | [textValue]="redraftValue" | ||
67 | ></my-video-comment-add> | ||
68 | |||
69 | <div *ngIf="commentTree"> | ||
70 | <div *ngFor="let commentChild of commentTree.children"> | ||
71 | <my-video-comment | ||
72 | [comment]="commentChild.comment" | ||
73 | [video]="video" | ||
74 | [inReplyToCommentId]="inReplyToCommentId" | ||
75 | [commentTree]="commentChild" | ||
76 | [parentComments]="newParentComments" | ||
77 | (wantedToReply)="onWantToReply($event)" | ||
78 | (wantedToDelete)="onWantToDelete($event)" | ||
79 | (wantedToRedraft)="onWantToRedraft($event)" | ||
80 | (resetReply)="onResetReply()" | ||
81 | (timestampClicked)="handleTimestampClicked($event)" | ||
82 | [redraftValue]="redraftValue" | ||
83 | ></my-video-comment> | ||
84 | </div> | ||
85 | </div> | ||
86 | |||
87 | <ng-content></ng-content> | ||
88 | </div> | ||
89 | </div> | ||
90 | </div> | ||
91 | |||
92 | <ng-container *ngIf="prependModerationActions"> | ||
93 | <my-comment-report #commentReportModal [comment]="comment"></my-comment-report> | ||
94 | </ng-container> | ||