Add author indicator to the comment replies loader

6 files changed, 30 insertions, 3 deletions

diff --git a/client/src/app/videos/+video-watch/comment/video-comment.model.ts b/client/src/app/videos/+video-watch/comment/video-comment.model.ts
index 719d1f04e..aaeb0ea9c 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.model.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment.model.ts
@@ -15,6 +15,7 @@ export class VideoComment implements VideoCommentServerModel {
   deletedAt: Date | string
   isDeleted: boolean
   account: AccountInterface
+  totalRepliesFromVideoAuthor: number
   totalReplies: number
   by: string
   accountAvatarUrl: string
@@ -33,6 +34,7 @@ export class VideoComment implements VideoCommentServerModel {
     this.deletedAt = hash.deletedAt ? new Date(hash.deletedAt.toString()) : null
     this.isDeleted = hash.isDeleted
     this.account = hash.account
+    this.totalRepliesFromVideoAuthor = hash.totalRepliesFromVideoAuthor
     this.totalReplies = hash.totalReplies
 
     if (this.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 e284eab0a..8f5c583d3 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
@@ -69,9 +69,19 @@
         ></my-video-comment>
 
         <div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment.id)" class="view-replies">
-          <ng-container i18n>View all {{ comment.totalReplies }} replies</ng-container>
-
           <span *ngIf="!threadLoading[comment.id]" class="glyphicon glyphicon-menu-down"></span>
+
+          <ng-container *ngIf="comment.totalRepliesFromVideoAuthor > 0; then hasAuthorComments; else noAuthorComments"></ng-container>
+          <ng-template #hasAuthorComments>
+            <ng-container *ngIf="comment.totalReplies !== comment.totalRepliesFromVideoAuthor; else onlyAuthorComments" i18n>
+              View {{ comment.totalReplies }} replies from {{ video?.account?.displayName || 'the author' }} and others
+            </ng-container>
+            <ng-template i18n #onlyAuthorComments>
+              View {{ comment.totalReplies }} replies from {{ video?.account?.displayName || 'the author' }}
+            </ng-template>
+          </ng-template>
+          <ng-template i18n #noAuthorComments>View {{ comment.totalReplies }} replies</ng-template>
+
           <my-small-loader class="comment-thread-loading" [loading]="threadLoading[comment.id]"></my-small-loader>
         </div>
       </div>
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.scss b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
index c02f6c21b..600bc1cee 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
@@ -14,7 +14,7 @@
 }
 
 .glyphicon, .comment-thread-loading {
-  margin-left: 5px;
+  margin-right: 5px;
   display: inline-block;
   font-size: 13px;
 }
diff --git a/server/models/video/video-comment.ts b/server/models/video/video-comment.ts
index 28f011b03..c2798e82a 100644
--- a/server/models/video/video-comment.ts
+++ b/server/models/video/video-comment.ts
@@ -56,6 +56,17 @@ enum ScopeNames {
               ')'
             ),
             'totalReplies'
+          ],
+          [
+            Sequelize.literal(
+              '(' +
+                'SELECT COUNT("replies"."id") ' +
+                'FROM "videoComment" AS "replies" ' +
+                'WHERE "replies"."originCommentId" = "VideoCommentModel"."id" ' +
+                'AND "accountId" = ' + userAccountId +
+              ')'
+            ),
+            'totalRepliesFromVideoAuthor'
           ]
         ]
       }
@@ -501,6 +512,7 @@ export class VideoCommentModel extends Model<VideoCommentModel> {
       updatedAt: this.updatedAt,
       deletedAt: this.deletedAt,
       isDeleted: this.isDeleted(),
+      totalRepliesFromVideoAuthor: this.get('totalRepliesFromVideoAuthor') || 0,
       totalReplies: this.get('totalReplies') || 0,
       account: this.Account ? this.Account.toFormattedJSON() : null
     } as VideoComment
diff --git a/shared/models/videos/video-comment.model.ts b/shared/models/videos/video-comment.model.ts
index 044962633..eec7dba1c 100644
--- a/shared/models/videos/video-comment.model.ts
+++ b/shared/models/videos/video-comment.model.ts
@@ -11,6 +11,7 @@ export interface VideoComment {
   updatedAt: Date | string
   deletedAt: Date | string
   isDeleted: boolean
+  totalRepliesFromVideoAuthor: number
   totalReplies: number
   account: Account
 }
diff --git a/support/doc/api/openapi.yaml b/support/doc/api/openapi.yaml
index 5c5845f2b..a193bebab 100644
--- a/support/doc/api/openapi.yaml
+++ b/support/doc/api/openapi.yaml
@@ -2257,6 +2257,8 @@ components:
           type: string
         updatedAt:
           type: string
+        totalRepliesFromVideoAuthor:
+          type: number
         totalReplies:
           type: number
         account: