Add author indicator to the comment replies loader

3 files changed, 15 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;
 }