diff options
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 | 261 |
1 files changed, 0 insertions, 261 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 deleted file mode 100644 index 2c39e63fb..000000000 --- a/client/src/app/+videos/+video-watch/comment/video-comments.component.ts +++ /dev/null | |||
@@ -1,261 +0,0 @@ | |||
1 | import { Subject, Subscription } from 'rxjs' | ||
2 | import { Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core' | ||
3 | import { ActivatedRoute } from '@angular/router' | ||
4 | import { AuthService, ComponentPagination, ConfirmService, hasMoreItems, Notifier, User } from '@app/core' | ||
5 | import { HooksService } from '@app/core/plugins/hooks.service' | ||
6 | import { Syndication, VideoDetails } from '@app/shared/shared-main' | ||
7 | import { VideoComment, VideoCommentService, VideoCommentThreadTree } from '@app/shared/shared-video-comment' | ||
8 | |||
9 | @Component({ | ||
10 | selector: 'my-video-comments', | ||
11 | templateUrl: './video-comments.component.html', | ||
12 | styleUrls: ['./video-comments.component.scss'] | ||
13 | }) | ||
14 | export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { | ||
15 | @ViewChild('commentHighlightBlock') commentHighlightBlock: ElementRef | ||
16 | @Input() video: VideoDetails | ||
17 | @Input() user: User | ||
18 | |||
19 | @Output() timestampClicked = new EventEmitter<number>() | ||
20 | |||
21 | comments: VideoComment[] = [] | ||
22 | highlightedThread: VideoComment | ||
23 | |||
24 | sort = '-createdAt' | ||
25 | |||
26 | componentPagination: ComponentPagination = { | ||
27 | currentPage: 1, | ||
28 | itemsPerPage: 10, | ||
29 | totalItems: null | ||
30 | } | ||
31 | totalNotDeletedComments: number | ||
32 | |||
33 | inReplyToCommentId: number | ||
34 | commentReplyRedraftValue: string | ||
35 | commentThreadRedraftValue: string | ||
36 | |||
37 | threadComments: { [ id: number ]: VideoCommentThreadTree } = {} | ||
38 | threadLoading: { [ id: number ]: boolean } = {} | ||
39 | |||
40 | syndicationItems: Syndication[] = [] | ||
41 | |||
42 | onDataSubject = new Subject<any[]>() | ||
43 | |||
44 | private sub: Subscription | ||
45 | |||
46 | constructor ( | ||
47 | private authService: AuthService, | ||
48 | private notifier: Notifier, | ||
49 | private confirmService: ConfirmService, | ||
50 | private videoCommentService: VideoCommentService, | ||
51 | private activatedRoute: ActivatedRoute, | ||
52 | private hooks: HooksService | ||
53 | ) {} | ||
54 | |||
55 | ngOnInit () { | ||
56 | // Find highlighted comment in params | ||
57 | this.sub = this.activatedRoute.params.subscribe( | ||
58 | params => { | ||
59 | if (params['threadId']) { | ||
60 | const highlightedThreadId = +params['threadId'] | ||
61 | this.processHighlightedThread(highlightedThreadId) | ||
62 | } | ||
63 | } | ||
64 | ) | ||
65 | } | ||
66 | |||
67 | ngOnChanges (changes: SimpleChanges) { | ||
68 | if (changes['video']) { | ||
69 | this.resetVideo() | ||
70 | } | ||
71 | } | ||
72 | |||
73 | ngOnDestroy () { | ||
74 | if (this.sub) this.sub.unsubscribe() | ||
75 | } | ||
76 | |||
77 | viewReplies (commentId: number, highlightThread = false) { | ||
78 | this.threadLoading[commentId] = true | ||
79 | |||
80 | const params = { | ||
81 | videoId: this.video.id, | ||
82 | threadId: commentId | ||
83 | } | ||
84 | |||
85 | const obs = this.hooks.wrapObsFun( | ||
86 | this.videoCommentService.getVideoThreadComments.bind(this.videoCommentService), | ||
87 | params, | ||
88 | 'video-watch', | ||
89 | 'filter:api.video-watch.video-thread-replies.list.params', | ||
90 | 'filter:api.video-watch.video-thread-replies.list.result' | ||
91 | ) | ||
92 | |||
93 | obs.subscribe( | ||
94 | res => { | ||
95 | this.threadComments[commentId] = res | ||
96 | this.threadLoading[commentId] = false | ||
97 | this.hooks.runAction('action:video-watch.video-thread-replies.loaded', 'video-watch', { data: res }) | ||
98 | |||
99 | if (highlightThread) { | ||
100 | this.highlightedThread = new VideoComment(res.comment) | ||
101 | |||
102 | // Scroll to the highlighted thread | ||
103 | setTimeout(() => this.commentHighlightBlock.nativeElement.scrollIntoView(), 0) | ||
104 | } | ||
105 | }, | ||
106 | |||
107 | err => this.notifier.error(err.message) | ||
108 | ) | ||
109 | } | ||
110 | |||
111 | loadMoreThreads () { | ||
112 | const params = { | ||
113 | videoId: this.video.id, | ||
114 | componentPagination: this.componentPagination, | ||
115 | sort: this.sort | ||
116 | } | ||
117 | |||
118 | const obs = this.hooks.wrapObsFun( | ||
119 | this.videoCommentService.getVideoCommentThreads.bind(this.videoCommentService), | ||
120 | params, | ||
121 | 'video-watch', | ||
122 | 'filter:api.video-watch.video-threads.list.params', | ||
123 | 'filter:api.video-watch.video-threads.list.result' | ||
124 | ) | ||
125 | |||
126 | obs.subscribe( | ||
127 | res => { | ||
128 | this.comments = this.comments.concat(res.data) | ||
129 | this.componentPagination.totalItems = res.total | ||
130 | this.totalNotDeletedComments = res.totalNotDeletedComments | ||
131 | |||
132 | this.onDataSubject.next(res.data) | ||
133 | this.hooks.runAction('action:video-watch.video-threads.loaded', 'video-watch', { data: this.componentPagination }) | ||
134 | }, | ||
135 | |||
136 | err => this.notifier.error(err.message) | ||
137 | ) | ||
138 | } | ||
139 | |||
140 | onCommentThreadCreated (comment: VideoComment) { | ||
141 | this.comments.unshift(comment) | ||
142 | this.commentThreadRedraftValue = undefined | ||
143 | } | ||
144 | |||
145 | onWantedToReply (comment: VideoComment) { | ||
146 | this.inReplyToCommentId = comment.id | ||
147 | } | ||
148 | |||
149 | onResetReply () { | ||
150 | this.inReplyToCommentId = undefined | ||
151 | this.commentReplyRedraftValue = undefined | ||
152 | } | ||
153 | |||
154 | onThreadCreated (commentTree: VideoCommentThreadTree) { | ||
155 | this.viewReplies(commentTree.comment.id) | ||
156 | } | ||
157 | |||
158 | handleSortChange (sort: string) { | ||
159 | if (this.sort === sort) return | ||
160 | |||
161 | this.sort = sort | ||
162 | this.resetVideo() | ||
163 | } | ||
164 | |||
165 | handleTimestampClicked (timestamp: number) { | ||
166 | this.timestampClicked.emit(timestamp) | ||
167 | } | ||
168 | |||
169 | async onWantedToDelete ( | ||
170 | commentToDelete: VideoComment, | ||
171 | title = $localize`Delete`, | ||
172 | message = $localize`Do you really want to delete this comment?` | ||
173 | ): Promise<boolean> { | ||
174 | if (commentToDelete.isLocal || this.video.isLocal) { | ||
175 | message += $localize` The deletion will be sent to remote instances so they can reflect the change.` | ||
176 | } else { | ||
177 | message += $localize` It is a remote comment, so the deletion will only be effective on your instance.` | ||
178 | } | ||
179 | |||
180 | const res = await this.confirmService.confirm(message, title) | ||
181 | if (res === false) return false | ||
182 | |||
183 | this.videoCommentService.deleteVideoComment(commentToDelete.videoId, commentToDelete.id) | ||
184 | .subscribe( | ||
185 | () => { | ||
186 | if (this.highlightedThread?.id === commentToDelete.id) { | ||
187 | commentToDelete = this.comments.find(c => c.id === commentToDelete.id) | ||
188 | |||
189 | this.highlightedThread = undefined | ||
190 | } | ||
191 | |||
192 | // Mark the comment as deleted | ||
193 | this.softDeleteComment(commentToDelete) | ||
194 | }, | ||
195 | |||
196 | err => this.notifier.error(err.message) | ||
197 | ) | ||
198 | |||
199 | return true | ||
200 | } | ||
201 | |||
202 | async onWantedToRedraft (commentToRedraft: VideoComment) { | ||
203 | const confirm = await this.onWantedToDelete(commentToRedraft, $localize`Delete and re-draft`, $localize`Do you really want to delete and re-draft this comment?`) | ||
204 | |||
205 | if (confirm) { | ||
206 | this.inReplyToCommentId = commentToRedraft.inReplyToCommentId | ||
207 | |||
208 | // Restore line feed for editing | ||
209 | const commentToRedraftText = commentToRedraft.text.replace(/<br.?\/?>/g, '\r\n') | ||
210 | |||
211 | if (commentToRedraft.threadId === commentToRedraft.id) { | ||
212 | this.commentThreadRedraftValue = commentToRedraftText | ||
213 | } else { | ||
214 | this.commentReplyRedraftValue = commentToRedraftText | ||
215 | } | ||
216 | |||
217 | } | ||
218 | } | ||
219 | |||
220 | isUserLoggedIn () { | ||
221 | return this.authService.isLoggedIn() | ||
222 | } | ||
223 | |||
224 | onNearOfBottom () { | ||
225 | if (hasMoreItems(this.componentPagination)) { | ||
226 | this.componentPagination.currentPage++ | ||
227 | this.loadMoreThreads() | ||
228 | } | ||
229 | } | ||
230 | |||
231 | private softDeleteComment (comment: VideoComment) { | ||
232 | comment.isDeleted = true | ||
233 | comment.deletedAt = new Date() | ||
234 | comment.text = '' | ||
235 | comment.account = null | ||
236 | } | ||
237 | |||
238 | private resetVideo () { | ||
239 | if (this.video.commentsEnabled === true) { | ||
240 | // Reset all our fields | ||
241 | this.highlightedThread = null | ||
242 | this.comments = [] | ||
243 | this.threadComments = {} | ||
244 | this.threadLoading = {} | ||
245 | this.inReplyToCommentId = undefined | ||
246 | this.componentPagination.currentPage = 1 | ||
247 | this.componentPagination.totalItems = null | ||
248 | this.totalNotDeletedComments = null | ||
249 | |||
250 | this.syndicationItems = this.videoCommentService.getVideoCommentsFeeds(this.video) | ||
251 | this.loadMoreThreads() | ||
252 | } | ||
253 | } | ||
254 | |||
255 | private processHighlightedThread (highlightedThreadId: number) { | ||
256 | this.highlightedThread = this.comments.find(c => c.id === highlightedThreadId) | ||
257 | |||
258 | const highlightThread = true | ||
259 | this.viewReplies(highlightedThreadId, highlightThread) | ||
260 | } | ||
261 | } | ||