diff options
author | Chocobozzz <me@florianbigard.com> | 2017-12-29 09:29:32 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2017-12-29 09:29:32 +0100 |
commit | 7416fbf3359fc0b890cba3dae9661fe450604b21 (patch) | |
tree | 9403dc7c9103326649adabfcf9abfae5d0d68692 /client/src/app/videos/+video-watch/comment/video-comments.component.ts | |
parent | 80f8e364e1df4005e95c9e207d38d758794e37f6 (diff) | |
download | PeerTube-7416fbf3359fc0b890cba3dae9661fe450604b21.tar.gz PeerTube-7416fbf3359fc0b890cba3dae9661fe450604b21.tar.zst PeerTube-7416fbf3359fc0b890cba3dae9661fe450604b21.zip |
Add infinite scroll to comments
Diffstat (limited to 'client/src/app/videos/+video-watch/comment/video-comments.component.ts')
-rw-r--r-- | client/src/app/videos/+video-watch/comment/video-comments.component.ts | 43 |
1 files changed, 33 insertions, 10 deletions
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 32e0f2fbd..f4dda9089 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 | |||
@@ -22,7 +22,7 @@ export class VideoCommentsComponent implements OnInit { | |||
22 | sort: SortField = '-createdAt' | 22 | sort: SortField = '-createdAt' |
23 | componentPagination: ComponentPagination = { | 23 | componentPagination: ComponentPagination = { |
24 | currentPage: 1, | 24 | currentPage: 1, |
25 | itemsPerPage: 25, | 25 | itemsPerPage: 10, |
26 | totalItems: null | 26 | totalItems: null |
27 | } | 27 | } |
28 | inReplyToCommentId: number | 28 | inReplyToCommentId: number |
@@ -36,15 +36,7 @@ export class VideoCommentsComponent implements OnInit { | |||
36 | ) {} | 36 | ) {} |
37 | 37 | ||
38 | ngOnInit () { | 38 | ngOnInit () { |
39 | this.videoCommentService.getVideoCommentThreads(this.video.id, this.componentPagination, this.sort) | 39 | this.loadMoreComments() |
40 | .subscribe( | ||
41 | res => { | ||
42 | this.comments = res.comments | ||
43 | this.componentPagination.totalItems = res.totalComments | ||
44 | }, | ||
45 | |||
46 | err => this.notificationsService.error('Error', err.message) | ||
47 | ) | ||
48 | } | 40 | } |
49 | 41 | ||
50 | viewReplies (comment: VideoComment) { | 42 | viewReplies (comment: VideoComment) { |
@@ -61,6 +53,18 @@ export class VideoCommentsComponent implements OnInit { | |||
61 | ) | 53 | ) |
62 | } | 54 | } |
63 | 55 | ||
56 | loadMoreComments () { | ||
57 | this.videoCommentService.getVideoCommentThreads(this.video.id, this.componentPagination, this.sort) | ||
58 | .subscribe( | ||
59 | res => { | ||
60 | this.comments = this.comments.concat(res.comments) | ||
61 | this.componentPagination.totalItems = res.totalComments | ||
62 | }, | ||
63 | |||
64 | err => this.notificationsService.error('Error', err.message) | ||
65 | ) | ||
66 | } | ||
67 | |||
64 | onCommentThreadCreated (comment: VideoComment) { | 68 | onCommentThreadCreated (comment: VideoComment) { |
65 | this.comments.unshift(comment) | 69 | this.comments.unshift(comment) |
66 | } | 70 | } |
@@ -76,4 +80,23 @@ export class VideoCommentsComponent implements OnInit { | |||
76 | isUserLoggedIn () { | 80 | isUserLoggedIn () { |
77 | return this.authService.isLoggedIn() | 81 | return this.authService.isLoggedIn() |
78 | } | 82 | } |
83 | |||
84 | onNearOfBottom () { | ||
85 | this.componentPagination.currentPage++ | ||
86 | |||
87 | if (this.hasMoreComments()) { | ||
88 | this.loadMoreComments() | ||
89 | } | ||
90 | } | ||
91 | |||
92 | protected hasMoreComments () { | ||
93 | // No results | ||
94 | if (this.componentPagination.totalItems === 0) return false | ||
95 | |||
96 | // Not loaded yet | ||
97 | if (!this.componentPagination.totalItems) return true | ||
98 | |||
99 | const maxPage = this.componentPagination.totalItems / this.componentPagination.itemsPerPage | ||
100 | return maxPage > this.componentPagination.currentPage | ||
101 | } | ||
79 | } | 102 | } |