diff options
Diffstat (limited to 'client/src/app/videos/+video-watch')
4 files changed, 27 insertions, 4 deletions
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 { | |||
12 | import { environment } from '../../../../environments/environment' | 12 | import { environment } from '../../../../environments/environment' |
13 | import { RestExtractor, RestService } from '../../../shared/rest' | 13 | import { RestExtractor, RestService } from '../../../shared/rest' |
14 | import { ComponentPagination } from '../../../shared/rest/component-pagination.model' | 14 | import { ComponentPagination } from '../../../shared/rest/component-pagination.model' |
15 | import { VideoSortField } from '../../../shared/video/sort-field.type' | 15 | import { CommentSortField } from '../../../shared/video/sort-field.type' |
16 | import { VideoComment } from './video-comment.model' | 16 | import { 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 | |||
26 | my-feed { | 32 | my-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 | |||
6 | import { AuthService } from '../../../core/auth' | 6 | import { AuthService } from '../../../core/auth' |
7 | import { ComponentPagination, hasMoreItems } from '../../../shared/rest/component-pagination.model' | 7 | import { ComponentPagination, hasMoreItems } from '../../../shared/rest/component-pagination.model' |
8 | import { User } from '../../../shared/users' | 8 | import { User } from '../../../shared/users' |
9 | import { VideoSortField } from '../../../shared/video/sort-field.type' | 9 | import { CommentSortField } from '../../../shared/video/sort-field.type' |
10 | import { VideoDetails } from '../../../shared/video/video-details.model' | 10 | import { VideoDetails } from '../../../shared/video/video-details.model' |
11 | import { VideoComment } from './video-comment.model' | 11 | import { VideoComment } from './video-comment.model' |
12 | import { VideoCommentService } from './video-comment.service' | 12 | import { 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 | } |