Fix video comments display with deleted comments

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 @@
-<div *ngIf="isNotDeletedOrDeletedWithReplies()" class="root-comment">
+<div *ngIf="isCommentDisplayed()" class="root-comment">
   <div class="left">
     <a *ngIf="!comment.isDeleted" [href]="comment.account.url" target="_blank" rel="noopener noreferrer">
       <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 {
     if (!this.commentTree) {
       this.commentTree = {
         comment: this.comment,
+        hasDisplayedChildren: false,
         children: []
       }
 
@@ -70,6 +71,7 @@ export class VideoCommentComponent implements OnInit, OnChanges {
 
     this.commentTree.children.unshift({
       comment: createdComment,
+      hasDisplayedChildren: false,
       children: []
     })
 
@@ -133,8 +135,11 @@ export class VideoCommentComponent implements OnInit, OnChanges {
     ($event.target as HTMLImageElement).src = Account.GET_DEFAULT_AVATAR_URL()
   }
 
-  isNotDeletedOrDeletedWithReplies () {
-    return !this.comment.isDeleted || this.comment.isDeleted && this.comment.totalReplies !== 0
+  isCommentDisplayed () {
+    // Not deleted
+    return !this.comment.isDeleted ||
+      this.comment.totalReplies !== 0 || // Or root comment thread has replies
+      (this.commentTree?.hasDisplayedChildren) // Or this is a reply that have other replies
   }
 
   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 @@
 <div>
   <div class="title-block">
     <h2 class="title-page title-page-single">
-      <ng-container *ngIf="componentPagination.totalItems > 0; then hasComments; else noComments"></ng-container>
+      <ng-container *ngIf="totalNotDeletedComments > 0; then hasComments; else noComments"></ng-container>
       <ng-template #hasComments>
-        <ng-container i18n *ngIf="componentPagination.totalItems === 1; else manyComments">1 Comment</ng-container>
-        <ng-template i18n #manyComments>{{ componentPagination.totalItems }} Comments</ng-template>
+        <ng-container i18n *ngIf="totalNotDeletedComments === 1; else manyComments">1 Comment</ng-container>
+        <ng-template i18n #manyComments>{{ totalNotDeletedComments }} Comments</ng-template>
       </ng-template>
       <ng-template i18n #noComments>Comments</ng-template>
     </h2>
@@ -30,7 +30,7 @@
       [textValue]="commentThreadRedraftValue"
     ></my-video-comment-add>
 
-    <div *ngIf="componentPagination.totalItems === 0 && comments.length === 0" i18n>No comments.</div>
+    <div *ngIf="totalNotDeletedComments === 0 && comments.length === 0" i18n>No comments.</div>
 
     <div
       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 {
 
   comments: VideoComment[] = []
   highlightedThread: VideoComment
+
   sort = '-createdAt'
+
   componentPagination: ComponentPagination = {
     currentPage: 1,
     itemsPerPage: 10,
     totalItems: null
   }
+  totalNotDeletedComments: number
+
   inReplyToCommentId: number
   commentReplyRedraftValue: string
   commentThreadRedraftValue: string
+
   threadComments: { [ id: number ]: VideoCommentThreadTree } = {}
   threadLoading: { [ id: number ]: boolean } = {}
 
@@ -122,8 +127,8 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
     obs.subscribe(
       res => {
         this.comments = this.comments.concat(res.data)
-        // Client does not display removed comments
-        this.componentPagination.totalItems = res.total - this.comments.filter(c => c.isDeleted).length
+        this.componentPagination.totalItems = res.total
+        this.totalNotDeletedComments = res.totalNotDeletedComments
 
         this.onDataSubject.next(res.data)
         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 {
       this.inReplyToCommentId = undefined
       this.componentPagination.currentPage = 1
       this.componentPagination.totalItems = null
+      this.totalNotDeletedComments = null
 
       this.syndicationItems = this.videoCommentService.getVideoCommentsFeeds(this.video.uuid)
       this.loadMoreThreads()