aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+videos
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-02-19 09:50:13 +0100
committerChocobozzz <me@florianbigard.com>2021-02-19 10:06:52 +0100
commit9d6b9d10ef8cbef39e89bc709285abffb0d8caa1 (patch)
tree3425b22556e00d1b15de15c72b2802cfc9374473 /client/src/app/+videos
parentfae6e4da8f516a9d6c3bad9bf6f35811ccacbad8 (diff)
downloadPeerTube-9d6b9d10ef8cbef39e89bc709285abffb0d8caa1.tar.gz
PeerTube-9d6b9d10ef8cbef39e89bc709285abffb0d8caa1.tar.zst
PeerTube-9d6b9d10ef8cbef39e89bc709285abffb0d8caa1.zip
Fix video comments display with deleted comments
Diffstat (limited to 'client/src/app/+videos')
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment.component.html2
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment.component.ts9
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comments.component.html8
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comments.component.ts10
4 files changed, 20 insertions, 9 deletions
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.html b/client/src/app/+videos/+video-watch/comment/video-comment.component.html
index 8847753a5..ba41b6f48 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment.component.html
+++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.html
@@ -1,4 +1,4 @@
1<div *ngIf="isNotDeletedOrDeletedWithReplies()" class="root-comment"> 1<div *ngIf="isCommentDisplayed()" class="root-comment">
2 <div class="left"> 2 <div class="left">
3 <a *ngIf="!comment.isDeleted" [href]="comment.account.url" target="_blank" rel="noopener noreferrer"> 3 <a *ngIf="!comment.isDeleted" [href]="comment.account.url" target="_blank" rel="noopener noreferrer">
4 <img 4 <img
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.ts b/client/src/app/+videos/+video-watch/comment/video-comment.component.ts
index 0958b25c0..5c5d72b22 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment.component.ts
+++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.ts
@@ -62,6 +62,7 @@ export class VideoCommentComponent implements OnInit, OnChanges {
62 if (!this.commentTree) { 62 if (!this.commentTree) {
63 this.commentTree = { 63 this.commentTree = {
64 comment: this.comment, 64 comment: this.comment,
65 hasDisplayedChildren: false,
65 children: [] 66 children: []
66 } 67 }
67 68
@@ -70,6 +71,7 @@ export class VideoCommentComponent implements OnInit, OnChanges {
70 71
71 this.commentTree.children.unshift({ 72 this.commentTree.children.unshift({
72 comment: createdComment, 73 comment: createdComment,
74 hasDisplayedChildren: false,
73 children: [] 75 children: []
74 }) 76 })
75 77
@@ -133,8 +135,11 @@ export class VideoCommentComponent implements OnInit, OnChanges {
133 ($event.target as HTMLImageElement).src = Account.GET_DEFAULT_AVATAR_URL() 135 ($event.target as HTMLImageElement).src = Account.GET_DEFAULT_AVATAR_URL()
134 } 136 }
135 137
136 isNotDeletedOrDeletedWithReplies () { 138 isCommentDisplayed () {
137 return !this.comment.isDeleted || this.comment.isDeleted && this.comment.totalReplies !== 0 139 // Not deleted
140 return !this.comment.isDeleted ||
141 this.comment.totalReplies !== 0 || // Or root comment thread has replies
142 (this.commentTree?.hasDisplayedChildren) // Or this is a reply that have other replies
138 } 143 }
139 144
140 private getUserIfNeeded (account: Account) { 145 private getUserIfNeeded (account: Account) {
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
index f9ebfcc1f..4a6426d30 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comments.component.html
+++ b/client/src/app/+videos/+video-watch/comment/video-comments.component.html
@@ -1,10 +1,10 @@
1<div> 1<div>
2 <div class="title-block"> 2 <div class="title-block">
3 <h2 class="title-page title-page-single"> 3 <h2 class="title-page title-page-single">
4 <ng-container *ngIf="componentPagination.totalItems > 0; then hasComments; else noComments"></ng-container> 4 <ng-container *ngIf="totalNotDeletedComments > 0; then hasComments; else noComments"></ng-container>
5 <ng-template #hasComments> 5 <ng-template #hasComments>
6 <ng-container i18n *ngIf="componentPagination.totalItems === 1; else manyComments">1 Comment</ng-container> 6 <ng-container i18n *ngIf="totalNotDeletedComments === 1; else manyComments">1 Comment</ng-container>
7 <ng-template i18n #manyComments>{{ componentPagination.totalItems }} Comments</ng-template> 7 <ng-template i18n #manyComments>{{ totalNotDeletedComments }} Comments</ng-template>
8 </ng-template> 8 </ng-template>
9 <ng-template i18n #noComments>Comments</ng-template> 9 <ng-template i18n #noComments>Comments</ng-template>
10 </h2> 10 </h2>
@@ -30,7 +30,7 @@
30 [textValue]="commentThreadRedraftValue" 30 [textValue]="commentThreadRedraftValue"
31 ></my-video-comment-add> 31 ></my-video-comment-add>
32 32
33 <div *ngIf="componentPagination.totalItems === 0 && comments.length === 0" i18n>No comments.</div> 33 <div *ngIf="totalNotDeletedComments === 0 && comments.length === 0" i18n>No comments.</div>
34 34
35 <div 35 <div
36 class="comment-threads" 36 class="comment-threads"
diff --git a/client/src/app/+videos/+video-watch/comment/video-comments.component.ts b/client/src/app/+videos/+video-watch/comment/video-comments.component.ts
index f83a73ccd..d36dd9e34 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comments.component.ts
+++ b/client/src/app/+videos/+video-watch/comment/video-comments.component.ts
@@ -21,15 +21,20 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
21 21
22 comments: VideoComment[] = [] 22 comments: VideoComment[] = []
23 highlightedThread: VideoComment 23 highlightedThread: VideoComment
24
24 sort = '-createdAt' 25 sort = '-createdAt'
26
25 componentPagination: ComponentPagination = { 27 componentPagination: ComponentPagination = {
26 currentPage: 1, 28 currentPage: 1,
27 itemsPerPage: 10, 29 itemsPerPage: 10,
28 totalItems: null 30 totalItems: null
29 } 31 }
32 totalNotDeletedComments: number
33
30 inReplyToCommentId: number 34 inReplyToCommentId: number
31 commentReplyRedraftValue: string 35 commentReplyRedraftValue: string
32 commentThreadRedraftValue: string 36 commentThreadRedraftValue: string
37
33 threadComments: { [ id: number ]: VideoCommentThreadTree } = {} 38 threadComments: { [ id: number ]: VideoCommentThreadTree } = {}
34 threadLoading: { [ id: number ]: boolean } = {} 39 threadLoading: { [ id: number ]: boolean } = {}
35 40
@@ -122,8 +127,8 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
122 obs.subscribe( 127 obs.subscribe(
123 res => { 128 res => {
124 this.comments = this.comments.concat(res.data) 129 this.comments = this.comments.concat(res.data)
125 // Client does not display removed comments 130 this.componentPagination.totalItems = res.total
126 this.componentPagination.totalItems = res.total - this.comments.filter(c => c.isDeleted).length 131 this.totalNotDeletedComments = res.totalNotDeletedComments
127 132
128 this.onDataSubject.next(res.data) 133 this.onDataSubject.next(res.data)
129 this.hooks.runAction('action:video-watch.video-threads.loaded', 'video-watch', { data: this.componentPagination }) 134 this.hooks.runAction('action:video-watch.video-threads.loaded', 'video-watch', { data: this.componentPagination })
@@ -241,6 +246,7 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
241 this.inReplyToCommentId = undefined 246 this.inReplyToCommentId = undefined
242 this.componentPagination.currentPage = 1 247 this.componentPagination.currentPage = 1
243 this.componentPagination.totalItems = null 248 this.componentPagination.totalItems = null
249 this.totalNotDeletedComments = null
244 250
245 this.syndicationItems = this.videoCommentService.getVideoCommentsFeeds(this.video.uuid) 251 this.syndicationItems = this.videoCommentService.getVideoCommentsFeeds(this.video.uuid)
246 this.loadMoreThreads() 252 this.loadMoreThreads()