aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/shared/video/sort-field.type.ts3
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.service.ts4
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comments.component.html10
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comments.component.scss6
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comments.component.ts11
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'
5 | 'views' | '-views' 5 | 'views' | '-views'
6 | 'likes' | '-likes' 6 | 'likes' | '-likes'
7 | 'trending' | '-trending' 7 | 'trending' | '-trending'
8
9export type CommentSortField = 'createdAt' | '-createdAt'
10 | '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 {
12import { environment } from '../../../../environments/environment' 12import { environment } from '../../../../environments/environment'
13import { RestExtractor, RestService } from '../../../shared/rest' 13import { RestExtractor, RestService } from '../../../shared/rest'
14import { ComponentPagination } from '../../../shared/rest/component-pagination.model' 14import { ComponentPagination } from '../../../shared/rest/component-pagination.model'
15import { VideoSortField } from '../../../shared/video/sort-field.type' 15import { CommentSortField } from '../../../shared/video/sort-field.type'
16import { VideoComment } from './video-comment.model' 16import { VideoComment } from './video-comment.model'
17 17
18@Injectable() 18@Injectable()
@@ -51,7 +51,7 @@ export class VideoCommentService {
51 getVideoCommentThreads (parameters: { 51 getVideoCommentThreads (parameters: {
52 videoId: number | string, 52 videoId: number | string,
53 componentPagination: ComponentPagination, 53 componentPagination: ComponentPagination,
54 sort: VideoSortField 54 sort: CommentSortField
55 }): Observable<ResultList<VideoComment>> { 55 }): Observable<ResultList<VideoComment>> {
56 const { videoId, componentPagination, sort } = parameters 56 const { videoId, componentPagination, sort } = parameters
57 57
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 @@
10 </div> 10 </div>
11 11
12 <my-feed [syndicationItems]="syndicationItems"></my-feed> 12 <my-feed [syndicationItems]="syndicationItems"></my-feed>
13
14 <div ngbDropdown class="d-inline-block ml-4">
15 <button class="btn btn-sm btn-outline-secondary" id="dropdownSortComments" ngbDropdownToggle i18n>
16 Sort by
17 </button>
18 <div ngbDropdownMenu aria-labelledby="dropdownSortComments">
19 <button (click)="handleSortChange('-createdAt')" ngbDropdownItem i18n>Most recent first (default)</button>
20 <button (click)="handleSortChange('-totalReplies')" ngbDropdownItem i18n>Most replies first</button>
21 </div>
22 </div>
13 </div> 23 </div>
14 24
15 <ng-template [ngIf]="video.commentsEnabled === true"> 25 <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 @@
23 margin-right: 0; 23 margin-right: 0;
24} 24}
25 25
26#dropdownSortComments {
27 font-weight: 600;
28 text-transform: uppercase;
29 border: none;
30}
31
26my-feed { 32my-feed {
27 display: inline-block; 33 display: inline-block;
28 margin-left: 5px; 34 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
6import { AuthService } from '../../../core/auth' 6import { AuthService } from '../../../core/auth'
7import { ComponentPagination, hasMoreItems } from '../../../shared/rest/component-pagination.model' 7import { ComponentPagination, hasMoreItems } from '../../../shared/rest/component-pagination.model'
8import { User } from '../../../shared/users' 8import { User } from '../../../shared/users'
9import { VideoSortField } from '../../../shared/video/sort-field.type' 9import { CommentSortField } from '../../../shared/video/sort-field.type'
10import { VideoDetails } from '../../../shared/video/video-details.model' 10import { VideoDetails } from '../../../shared/video/video-details.model'
11import { VideoComment } from './video-comment.model' 11import { VideoComment } from './video-comment.model'
12import { VideoCommentService } from './video-comment.service' 12import { VideoCommentService } from './video-comment.service'
@@ -28,7 +28,7 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
28 28
29 comments: VideoComment[] = [] 29 comments: VideoComment[] = []
30 highlightedThread: VideoComment 30 highlightedThread: VideoComment
31 sort: VideoSortField = '-createdAt' 31 sort: CommentSortField = '-createdAt'
32 componentPagination: ComponentPagination = { 32 componentPagination: ComponentPagination = {
33 currentPage: 1, 33 currentPage: 1,
34 itemsPerPage: 10, 34 itemsPerPage: 10,
@@ -152,6 +152,13 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
152 this.viewReplies(commentTree.comment.id) 152 this.viewReplies(commentTree.comment.id)
153 } 153 }
154 154
155 handleSortChange (sort: CommentSortField) {
156 if (this.sort === sort) return
157
158 this.sort = sort
159 this.resetVideo()
160 }
161
155 handleTimestampClicked (timestamp: number) { 162 handleTimestampClicked (timestamp: number) {
156 this.timestampClicked.emit(timestamp) 163 this.timestampClicked.emit(timestamp)
157 } 164 }