aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2017-12-29 09:29:32 +0100
committerChocobozzz <me@florianbigard.com>2017-12-29 09:29:32 +0100
commit7416fbf3359fc0b890cba3dae9661fe450604b21 (patch)
tree9403dc7c9103326649adabfcf9abfae5d0d68692
parent80f8e364e1df4005e95c9e207d38d758794e37f6 (diff)
downloadPeerTube-7416fbf3359fc0b890cba3dae9661fe450604b21.tar.gz
PeerTube-7416fbf3359fc0b890cba3dae9661fe450604b21.tar.zst
PeerTube-7416fbf3359fc0b890cba3dae9661fe450604b21.zip
Add infinite scroll to comments
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comments.component.html8
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comments.component.ts43
2 files changed, 40 insertions, 11 deletions
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 9d7581269..5c6908150 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
@@ -9,7 +9,13 @@
9 (commentCreated)="onCommentThreadCreated($event)" 9 (commentCreated)="onCommentThreadCreated($event)"
10 ></my-video-comment-add> 10 ></my-video-comment-add>
11 11
12 <div class="comment-threads"> 12 <div
13 class="comment-threads"
14 infiniteScroll
15 [infiniteScrollUpDistance]="1.5"
16 [infiniteScrollDistance]="0.5"
17 (scrolled)="onNearOfBottom()"
18 >
13 <div *ngFor="let comment of comments"> 19 <div *ngFor="let comment of comments">
14 <my-video-comment 20 <my-video-comment
15 [comment]="comment" 21 [comment]="comment"
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}