]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/app/videos/+video-watch/comment/video-comments.component.ts
Fix sort inconsistency
[github/Chocobozzz/PeerTube.git] / client / src / app / videos / +video-watch / comment / video-comments.component.ts
CommitLineData
339632b4 1import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'
4cb6d457 2import { ConfirmService } from '@app/core'
4635f59d 3import { NotificationsService } from 'angular2-notifications'
4cb6d457 4import { VideoComment as VideoCommentInterface, VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model'
4635f59d
C
5import { AuthService } from '../../../core/auth'
6import { ComponentPagination } from '../../../shared/rest/component-pagination.model'
7import { User } from '../../../shared/users'
8import { SortField } from '../../../shared/video/sort-field.type'
47564bbe 9import { VideoDetails } from '../../../shared/video/video-details.model'
4635f59d
C
10import { VideoComment } from './video-comment.model'
11import { VideoCommentService } from './video-comment.service'
d5b53822 12import { ActivatedRoute } from '@angular/router'
4635f59d
C
13
14@Component({
15 selector: 'my-video-comments',
16 templateUrl: './video-comments.component.html',
17 styleUrls: ['./video-comments.component.scss']
18})
339632b4 19export class VideoCommentsComponent implements OnChanges {
47564bbe 20 @Input() video: VideoDetails
4635f59d
C
21 @Input() user: User
22
23 comments: VideoComment[] = []
24 sort: SortField = '-createdAt'
25 componentPagination: ComponentPagination = {
26 currentPage: 1,
7416fbf3 27 itemsPerPage: 10,
4635f59d
C
28 totalItems: null
29 }
30 inReplyToCommentId: number
31 threadComments: { [ id: number ]: VideoCommentThreadTree } = {}
32 threadLoading: { [ id: number ]: boolean } = {}
d5b53822 33 markedCommentID: number
4635f59d
C
34
35 constructor (
36 private authService: AuthService,
37 private notificationsService: NotificationsService,
4cb6d457 38 private confirmService: ConfirmService,
d5b53822 39 private videoCommentService: VideoCommentService,
40 private activatedRoute: ActivatedRoute
4635f59d
C
41 ) {}
42
339632b4
C
43 ngOnChanges (changes: SimpleChanges) {
44 if (changes['video']) {
45 this.loadVideoComments()
47564bbe 46 }
4635f59d
C
47 }
48
4cb6d457 49 viewReplies (comment: VideoCommentInterface) {
4635f59d
C
50 this.threadLoading[comment.id] = true
51
52 this.videoCommentService.getVideoThreadComments(this.video.id, comment.id)
53 .subscribe(
54 res => {
55 this.threadComments[comment.id] = res
56 this.threadLoading[comment.id] = false
57 },
58
59 err => this.notificationsService.error('Error', err.message)
60 )
61 }
62
7416fbf3
C
63 loadMoreComments () {
64 this.videoCommentService.getVideoCommentThreads(this.video.id, this.componentPagination, this.sort)
65 .subscribe(
66 res => {
67 this.comments = this.comments.concat(res.comments)
68 this.componentPagination.totalItems = res.totalComments
d5b53822 69
70 if (this.markedCommentID) {
71 // If there is a marked comment, retrieve it separately as it may not be on this page, filter to prevent duplicate
72 this.comments = this.comments.filter(value => value.id !== this.markedCommentID)
73 this.videoCommentService.getVideoThreadComments(this.video.id, this.markedCommentID).subscribe(
74 res => {
75 let comment = new VideoComment(res.comment)
76 comment.marked = true
77 this.comments.unshift(comment) // Insert marked comment at the beginning
78 }
79 )
80 }
7416fbf3
C
81 },
82
83 err => this.notificationsService.error('Error', err.message)
84 )
85 }
86
4635f59d
C
87 onCommentThreadCreated (comment: VideoComment) {
88 this.comments.unshift(comment)
89 }
90
91 onWantedToReply (comment: VideoComment) {
92 this.inReplyToCommentId = comment.id
93 }
94
95 onResetReply () {
96 this.inReplyToCommentId = undefined
97 }
98
4cb6d457
C
99 onThreadCreated (commentTree: VideoCommentThreadTree) {
100 this.viewReplies(commentTree.comment)
101 }
102
103 onWantedToDelete (commentToDelete: VideoComment) {
104 let message = 'Do you really want to delete this comment?'
105 if (commentToDelete.totalReplies !== 0) message += `${commentToDelete.totalReplies} would be deleted too.`
106
107 this.confirmService.confirm(message, 'Delete').subscribe(
108 res => {
109 if (res === false) return
110
111 this.videoCommentService.deleteVideoComment(commentToDelete.videoId, commentToDelete.id)
112 .subscribe(
113 () => {
114 // Delete the comment in the tree
115 if (commentToDelete.inReplyToCommentId) {
116 const thread = this.threadComments[commentToDelete.threadId]
117 if (!thread) {
118 console.error(`Cannot find thread ${commentToDelete.threadId} of the comment to delete ${commentToDelete.id}`)
119 return
120 }
121
122 this.deleteLocalCommentThread(thread, commentToDelete)
123 return
124 }
125
126 // Delete the thread
127 this.comments = this.comments.filter(c => c.id !== commentToDelete.id)
128 this.componentPagination.totalItems--
129 },
130
131 err => this.notificationsService.error('Error', err.message)
132 )
133 }
134 )
135 }
136
4635f59d
C
137 isUserLoggedIn () {
138 return this.authService.isLoggedIn()
139 }
7416fbf3
C
140
141 onNearOfBottom () {
142 this.componentPagination.currentPage++
143
144 if (this.hasMoreComments()) {
145 this.loadMoreComments()
146 }
147 }
148
4cb6d457 149 private hasMoreComments () {
7416fbf3
C
150 // No results
151 if (this.componentPagination.totalItems === 0) return false
152
153 // Not loaded yet
154 if (!this.componentPagination.totalItems) return true
155
156 const maxPage = this.componentPagination.totalItems / this.componentPagination.itemsPerPage
157 return maxPage > this.componentPagination.currentPage
158 }
4cb6d457
C
159
160 private deleteLocalCommentThread (parentComment: VideoCommentThreadTree, commentToDelete: VideoComment) {
161 for (const commentChild of parentComment.children) {
162 if (commentChild.comment.id === commentToDelete.id) {
163 parentComment.children = parentComment.children.filter(c => c.comment.id !== commentToDelete.id)
164 return
165 }
166
167 this.deleteLocalCommentThread(commentChild, commentToDelete)
168 }
169 }
339632b4
C
170
171 private loadVideoComments () {
172 if (this.video.commentsEnabled === true) {
173 // Reset all our fields
174 this.comments = []
175 this.threadComments = {}
176 this.threadLoading = {}
177 this.inReplyToCommentId = undefined
0cd4344f
C
178 this.componentPagination.currentPage = 1
179 this.componentPagination.totalItems = null
339632b4 180
d5b53822 181 // Find marked comment in params
182 this.activatedRoute.params.subscribe(
183 params => {
184 if (params['commentId']) {
185 this.markedCommentID = +params['commentId']
186 }
187 }
188 )
189
339632b4
C
190 this.loadMoreComments()
191 }
192 }
4635f59d 193}