Add comment filtering by reply count

5 files changed, 30 insertions, 4 deletions

diff --git a/client/src/app/shared/video/sort-field.type.ts b/client/src/app/shared/video/sort-field.type.ts
index d1088d244..65b24d946 100644
--- a/client/src/app/shared/video/sort-field.type.ts
+++ b/client/src/app/shared/video/sort-field.type.ts
@@ -5,3 +5,6 @@ export type VideoSortField = 'name' | '-name'
                       | 'views' | '-views'
                       | 'likes' | '-likes'
                       | 'trending' | '-trending'
+
+export type CommentSortField = 'createdAt' | '-createdAt'
+                          | 'totalReplies' | '-totalReplies'
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.service.ts b/client/src/app/videos/+video-watch/comment/video-comment.service.ts
index 550d42fa8..72fbf5d25 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.service.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment.service.ts
@@ -12,7 +12,7 @@ import {
 import { environment } from '../../../../environments/environment'
 import { RestExtractor, RestService } from '../../../shared/rest'
 import { ComponentPagination } from '../../../shared/rest/component-pagination.model'
-import { VideoSortField } from '../../../shared/video/sort-field.type'
+import { CommentSortField } from '../../../shared/video/sort-field.type'
 import { VideoComment } from './video-comment.model'
 
 @Injectable()
@@ -51,7 +51,7 @@ export class VideoCommentService {
   getVideoCommentThreads (parameters: {
     videoId: number | string,
     componentPagination: ComponentPagination,
-    sort: VideoSortField
+    sort: CommentSortField
   }): Observable<ResultList<VideoComment>> {
     const { videoId, componentPagination, sort } = parameters
 
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 5fabb7dfe..e284eab0a 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
@@ -10,6 +10,16 @@
     </div>
 
     <my-feed [syndicationItems]="syndicationItems"></my-feed>
+
+    <div ngbDropdown class="d-inline-block ml-4">
+      <button class="btn btn-sm btn-outline-secondary" id="dropdownSortComments" ngbDropdownToggle i18n>
+        Sort by
+      </button>
+      <div ngbDropdownMenu aria-labelledby="dropdownSortComments">
+        <button (click)="handleSortChange('-createdAt')" ngbDropdownItem i18n>Most recent first (default)</button>
+        <button (click)="handleSortChange('-totalReplies')" ngbDropdownItem i18n>Most replies first</button>
+      </div>
+    </div>
   </div>
 
   <ng-template [ngIf]="video.commentsEnabled === true">
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 dde10b068..9e3682295 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
@@ -23,6 +23,12 @@
   margin-right: 0;
 }
 
+#dropdownSortComments {
+  font-weight: 600;
+  text-transform: uppercase;
+  border: none;
+}
+
 my-feed {
   display: inline-block;
   margin-left: 5px;
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 e81401553..974c61d6c 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
@@ -6,7 +6,7 @@ import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/v
 import { AuthService } from '../../../core/auth'
 import { ComponentPagination, hasMoreItems } from '../../../shared/rest/component-pagination.model'
 import { User } from '../../../shared/users'
-import { VideoSortField } from '../../../shared/video/sort-field.type'
+import { CommentSortField } from '../../../shared/video/sort-field.type'
 import { VideoDetails } from '../../../shared/video/video-details.model'
 import { VideoComment } from './video-comment.model'
 import { VideoCommentService } from './video-comment.service'
@@ -28,7 +28,7 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
 
   comments: VideoComment[] = []
   highlightedThread: VideoComment
-  sort: VideoSortField = '-createdAt'
+  sort: CommentSortField = '-createdAt'
   componentPagination: ComponentPagination = {
     currentPage: 1,
     itemsPerPage: 10,
@@ -152,6 +152,13 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
     this.viewReplies(commentTree.comment.id)
   }
 
+  handleSortChange (sort: CommentSortField) {
+    if (this.sort === sort) return
+
+    this.sort = sort
+    this.resetVideo()
+  }
+
   handleTimestampClicked (timestamp: number) {
     this.timestampClicked.emit(timestamp)
   }