Fix video comments display with deleted comments

2 files changed, 17 insertions, 9 deletions

diff --git a/client/src/app/shared/shared-video-comment/video-comment-thread-tree.model.ts b/client/src/app/shared/shared-video-comment/video-comment-thread-tree.model.ts
index 7c2aaeadd..9956c88a6 100644
--- a/client/src/app/shared/shared-video-comment/video-comment-thread-tree.model.ts
+++ b/client/src/app/shared/shared-video-comment/video-comment-thread-tree.model.ts
@@ -3,5 +3,6 @@ import { VideoComment } from './video-comment.model'
 
 export class VideoCommentThreadTree implements VideoCommentThreadTreeServerModel {
   comment: VideoComment
+  hasDisplayedChildren: boolean
   children: VideoCommentThreadTree[]
 }
diff --git a/client/src/app/shared/shared-video-comment/video-comment.service.ts b/client/src/app/shared/shared-video-comment/video-comment.service.ts
index c107a33ab..0f09778df 100644
--- a/client/src/app/shared/shared-video-comment/video-comment.service.ts
+++ b/client/src/app/shared/shared-video-comment/video-comment.service.ts
@@ -8,6 +8,7 @@ import { objectLineFeedToHtml } from '@app/helpers'
 import {
   FeedFormat,
   ResultList,
+  ThreadsResultList,
   VideoComment as VideoCommentServerModel,
   VideoCommentAdmin,
   VideoCommentCreate,
@@ -76,7 +77,7 @@ export class VideoCommentService {
     videoId: number | string,
     componentPagination: ComponentPaginationLight,
     sort: string
-  }): Observable<ResultList<VideoComment>> {
+  }): Observable<ThreadsResultList<VideoComment>> {
     const { videoId, componentPagination, sort } = parameters
 
     const pagination = this.restService.componentPaginationToRestPagination(componentPagination)
@@ -85,7 +86,7 @@ export class VideoCommentService {
     params = this.restService.addRestGetParams(params, pagination, sort)
 
     const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comment-threads'
-    return this.authHttp.get<ResultList<VideoComment>>(url, { params })
+    return this.authHttp.get<ThreadsResultList<VideoComment>>(url, { params })
                .pipe(
                  map(result => this.extractVideoComments(result)),
                  catchError(err => this.restExtractor.handleError(err))
@@ -158,7 +159,7 @@ export class VideoCommentService {
     return new VideoComment(videoComment)
   }
 
-  private extractVideoComments (result: ResultList<VideoCommentServerModel>) {
+  private extractVideoComments (result: ThreadsResultList<VideoCommentServerModel>) {
     const videoCommentsJson = result.data
     const totalComments = result.total
     const comments: VideoComment[] = []
@@ -167,16 +168,22 @@ export class VideoCommentService {
       comments.push(new VideoComment(videoCommentJson))
     }
 
-    return { data: comments, total: totalComments }
+    return { data: comments, total: totalComments, totalNotDeletedComments: result.totalNotDeletedComments }
   }
 
-  private extractVideoCommentTree (tree: VideoCommentThreadTreeServerModel) {
-    if (!tree) return tree as VideoCommentThreadTree
+  private extractVideoCommentTree (serverTree: VideoCommentThreadTreeServerModel): VideoCommentThreadTree {
+    if (!serverTree) return null
 
-    tree.comment = new VideoComment(tree.comment)
-    tree.children.forEach(c => this.extractVideoCommentTree(c))
+    const tree = {
+      comment: new VideoComment(serverTree.comment),
+      children: serverTree.children.map(c => this.extractVideoCommentTree(c))
+    }
+
+    const hasDisplayedChildren = tree.children.length === 0
+      ? !tree.comment.isDeleted
+      : tree.children.some(c => c.hasDisplayedChildren)
 
-    return tree as VideoCommentThreadTree
+    return Object.assign(tree, { hasDisplayedChildren })
   }
 
   private buildParamsFromSearch (search: string, params: HttpParams) {