X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fcomment%2Fvideo-comments.component.ts;h=a87bc16d7347fabe08d04d0104dea6c321acad22;hb=34102d19a1b6964cd2ec747a934e2bff3962bcce;hp=4d801c97057b4a1e67a9055da9535e79aeb9e3d7;hpb=47564bbe2eeb2baae9b7e3f9b2b8d16522bc7e04;p=github%2FChocobozzz%2FPeerTube.git 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 4d801c970..a87bc16d7 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 @@ -1,26 +1,34 @@ -import { Component, Input, OnInit } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' -import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model' +import { Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core' +import { ActivatedRoute } from '@angular/router' +import { ConfirmService, Notifier } from '@app/core' +import { Subject, Subscription } from 'rxjs' import { AuthService } from '../../../core/auth' -import { ComponentPagination } from '../../../shared/rest/component-pagination.model' +import { ComponentPagination, hasMoreItems } from '../../../shared/rest/component-pagination.model' import { User } from '../../../shared/users' -import { SortField } from '../../../shared/video/sort-field.type' +import { CommentSortField } from '../../../shared/video/sort-field.type' import { VideoDetails } from '../../../shared/video/video-details.model' -import { Video } from '../../../shared/video/video.model' import { VideoComment } from './video-comment.model' import { VideoCommentService } from './video-comment.service' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { Syndication } from '@app/shared/video/syndication.model' +import { HooksService } from '@app/core/plugins/hooks.service' +import { VideoCommentThreadTree } from '@app/videos/+video-watch/comment/video-comment-thread-tree.model' @Component({ selector: 'my-video-comments', templateUrl: './video-comments.component.html', styleUrls: ['./video-comments.component.scss'] }) -export class VideoCommentsComponent implements OnInit { +export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { + @ViewChild('commentHighlightBlock') commentHighlightBlock: ElementRef @Input() video: VideoDetails @Input() user: User + @Output() timestampClicked = new EventEmitter() + comments: VideoComment[] = [] - sort: SortField = '-createdAt' + highlightedThread: VideoComment + sort: CommentSortField = '-createdAt' componentPagination: ComponentPagination = { currentPage: 1, itemsPerPage: 10, @@ -30,42 +38,102 @@ export class VideoCommentsComponent implements OnInit { threadComments: { [ id: number ]: VideoCommentThreadTree } = {} threadLoading: { [ id: number ]: boolean } = {} + syndicationItems: Syndication[] = [] + + onDataSubject = new Subject() + + private sub: Subscription + constructor ( private authService: AuthService, - private notificationsService: NotificationsService, - private videoCommentService: VideoCommentService + private notifier: Notifier, + private confirmService: ConfirmService, + private videoCommentService: VideoCommentService, + private activatedRoute: ActivatedRoute, + private i18n: I18n, + private hooks: HooksService ) {} ngOnInit () { - if (this.video.commentsEnabled === true) { - this.loadMoreComments() + // Find highlighted comment in params + this.sub = this.activatedRoute.params.subscribe( + params => { + if (params['threadId']) { + const highlightedThreadId = +params['threadId'] + this.processHighlightedThread(highlightedThreadId) + } + } + ) + } + + ngOnChanges (changes: SimpleChanges) { + if (changes['video']) { + this.resetVideo() } } - viewReplies (comment: VideoComment) { - this.threadLoading[comment.id] = true + ngOnDestroy () { + if (this.sub) this.sub.unsubscribe() + } - this.videoCommentService.getVideoThreadComments(this.video.id, comment.id) - .subscribe( + viewReplies (commentId: number, highlightThread = false) { + this.threadLoading[commentId] = true + + const params = { + videoId: this.video.id, + threadId: commentId + } + + const obs = this.hooks.wrapObsFun( + this.videoCommentService.getVideoThreadComments.bind(this.videoCommentService), + params, + 'video-watch', + 'filter:api.video-watch.video-thread-replies.list.params', + 'filter:api.video-watch.video-thread-replies.list.result' + ) + + obs.subscribe( res => { - this.threadComments[comment.id] = res - this.threadLoading[comment.id] = false + this.threadComments[commentId] = res + this.threadLoading[commentId] = false + + if (highlightThread) { + this.highlightedThread = new VideoComment(res.comment) + + // Scroll to the highlighted thread + setTimeout(() => this.commentHighlightBlock.nativeElement.scrollIntoView(), 0) + } }, - err => this.notificationsService.error('Error', err.message) + err => this.notifier.error(err.message) ) } - loadMoreComments () { - this.videoCommentService.getVideoCommentThreads(this.video.id, this.componentPagination, this.sort) - .subscribe( - res => { - this.comments = this.comments.concat(res.comments) - this.componentPagination.totalItems = res.totalComments - }, + loadMoreThreads () { + const params = { + videoId: this.video.id, + componentPagination: this.componentPagination, + sort: this.sort + } - err => this.notificationsService.error('Error', err.message) - ) + const obs = this.hooks.wrapObsFun( + this.videoCommentService.getVideoCommentThreads.bind(this.videoCommentService), + params, + 'video-watch', + 'filter:api.video-watch.video-threads.list.params', + 'filter:api.video-watch.video-threads.list.result' + ) + + obs.subscribe( + res => { + this.comments = this.comments.concat(res.data) + this.componentPagination.totalItems = res.total + + this.onDataSubject.next(res.data) + }, + + err => this.notifier.error(err.message) + ) } onCommentThreadCreated (comment: VideoComment) { @@ -80,26 +148,84 @@ export class VideoCommentsComponent implements OnInit { this.inReplyToCommentId = undefined } + onThreadCreated (commentTree: VideoCommentThreadTree) { + this.viewReplies(commentTree.comment.id) + } + + handleSortChange (sort: CommentSortField) { + if (this.sort === sort) return + + this.sort = sort + this.resetVideo() + } + + handleTimestampClicked (timestamp: number) { + this.timestampClicked.emit(timestamp) + } + + async onWantedToDelete (commentToDelete: VideoComment) { + let message = 'Do you really want to delete this comment?' + + if (commentToDelete.isLocal) { + message += this.i18n(' The deletion will be sent to remote instances, so they remove the comment too.') + } else { + message += this.i18n(' It is a remote comment, so the deletion will only be effective on your instance.') + } + + const res = await this.confirmService.confirm(message, this.i18n('Delete')) + if (res === false) return + + this.videoCommentService.deleteVideoComment(commentToDelete.videoId, commentToDelete.id) + .subscribe( + () => { + // Mark the comment as deleted + this.softDeleteComment(commentToDelete) + + if (this.highlightedThread.id === commentToDelete.id) this.highlightedThread = undefined + }, + + err => this.notifier.error(err.message) + ) + } + isUserLoggedIn () { return this.authService.isLoggedIn() } - onNearOfBottom () { - this.componentPagination.currentPage++ - - if (this.hasMoreComments()) { - this.loadMoreComments() + onNearOfBottom () { + if (hasMoreItems(this.componentPagination)) { + this.componentPagination.currentPage++ + this.loadMoreThreads() } } - protected hasMoreComments () { - // No results - if (this.componentPagination.totalItems === 0) return false + private softDeleteComment (comment: VideoComment) { + comment.isDeleted = true + comment.deletedAt = new Date() + comment.text = '' + comment.account = null + } + + private resetVideo () { + if (this.video.commentsEnabled === true) { + // Reset all our fields + this.highlightedThread = null + this.comments = [] + this.threadComments = {} + this.threadLoading = {} + this.inReplyToCommentId = undefined + this.componentPagination.currentPage = 1 + this.componentPagination.totalItems = null + + this.syndicationItems = this.videoCommentService.getVideoCommentsFeeds(this.video.uuid) + this.loadMoreThreads() + } + } - // Not loaded yet - if (!this.componentPagination.totalItems) return true + private processHighlightedThread (highlightedThreadId: number) { + this.highlightedThread = this.comments.find(c => c.id === highlightedThreadId) - const maxPage = this.componentPagination.totalItems / this.componentPagination.itemsPerPage - return maxPage > this.componentPagination.currentPage + const highlightThread = true + this.viewReplies(highlightedThreadId, highlightThread) } }