X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fcomment%2Fvideo-comments.component.ts;h=910a1761c9e5af8d9d59d6b6779f20f0b6b8bafe;hb=25ae4f957252842d9e2e55960a3b6b87d22544b7;hp=2616820d2462df10f02c5379ae1f6b95e067d619;hpb=88108880bbdba473cfe36ecbebc1c3c4f972e102;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 2616820d2..910a1761c 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,17 +1,18 @@ -import { Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core' +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 { Subscription } from 'rxjs' -import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model' +import { Subject, Subscription } from 'rxjs' import { AuthService } from '../../../core/auth' import { ComponentPagination, hasMoreItems } from '../../../shared/rest/component-pagination.model' import { User } from '../../../shared/users' -import { VideoSortField } from '../../../shared/video/sort-field.type' +import { CommentSortField } from '../../../shared/video/sort-field.type' import { VideoDetails } from '../../../shared/video/video-details.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', @@ -23,9 +24,11 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { @Input() video: VideoDetails @Input() user: User + @Output() timestampClicked = new EventEmitter() + comments: VideoComment[] = [] highlightedThread: VideoComment - sort: VideoSortField = '-createdAt' + sort: CommentSortField = '-createdAt' componentPagination: ComponentPagination = { currentPage: 1, itemsPerPage: 10, @@ -37,6 +40,8 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { syndicationItems: Syndication[] = [] + onDataSubject = new Subject() + private sub: Subscription constructor ( @@ -45,7 +50,8 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { private confirmService: ConfirmService, private videoCommentService: VideoCommentService, private activatedRoute: ActivatedRoute, - private i18n: I18n + private i18n: I18n, + private hooks: HooksService ) {} ngOnInit () { @@ -73,8 +79,20 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { viewReplies (commentId: number, highlightThread = false) { this.threadLoading[commentId] = true - this.videoCommentService.getVideoThreadComments(this.video.id, commentId) - .subscribe( + 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[commentId] = res this.threadLoading[commentId] = false @@ -91,16 +109,32 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { ) } - 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.notifier.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) + this.hooks.runAction('action:video-watch.video-threads.loaded', 'video-watch', { data: this.componentPagination }) + }, + + err => this.notifier.error(err.message) + ) } onCommentThreadCreated (comment: VideoComment) { @@ -119,10 +153,24 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { 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.totalReplies !== 0) { - message += this.i18n(' {{totalReplies}} replies will be deleted too.', { totalReplies: commentToDelete.totalReplies }) + + 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')) @@ -131,21 +179,8 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { this.videoCommentService.deleteVideoComment(commentToDelete.videoId, commentToDelete.id) .subscribe( () => { - // Delete the comment in the tree - if (commentToDelete.inReplyToCommentId) { - const thread = this.threadComments[commentToDelete.threadId] - if (!thread) { - console.error(`Cannot find thread ${commentToDelete.threadId} of the comment to delete ${commentToDelete.id}`) - return - } - - this.deleteLocalCommentThread(thread, commentToDelete) - return - } - - // Delete the thread - this.comments = this.comments.filter(c => c.id !== commentToDelete.id) - this.componentPagination.totalItems-- + // Mark the comment as deleted + this.softDeleteComment(commentToDelete) if (this.highlightedThread.id === commentToDelete.id) this.highlightedThread = undefined }, @@ -158,23 +193,18 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { return this.authService.isLoggedIn() } - onNearOfBottom () { - this.componentPagination.currentPage++ - + onNearOfBottom () { if (hasMoreItems(this.componentPagination)) { - this.loadMoreComments() + this.componentPagination.currentPage++ + this.loadMoreThreads() } } - private deleteLocalCommentThread (parentComment: VideoCommentThreadTree, commentToDelete: VideoComment) { - for (const commentChild of parentComment.children) { - if (commentChild.comment.id === commentToDelete.id) { - parentComment.children = parentComment.children.filter(c => c.comment.id !== commentToDelete.id) - return - } - - this.deleteLocalCommentThread(commentChild, commentToDelete) - } + private softDeleteComment (comment: VideoComment) { + comment.isDeleted = true + comment.deletedAt = new Date() + comment.text = '' + comment.account = null } private resetVideo () { @@ -189,8 +219,7 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { this.componentPagination.totalItems = null this.syndicationItems = this.videoCommentService.getVideoCommentsFeeds(this.video.uuid) - - this.loadMoreComments() + this.loadMoreThreads() } }