X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fcomment%2Fvideo-comments.component.ts;h=2616820d2462df10f02c5379ae1f6b95e067d619;hb=43483d12963ed7a82adee2e35a7bcb7e55e54b3e;hp=7ca3bafb50815c1a5beeabf819902077ba60d5b4;hpb=0cd4344f3cf529b15308fcf3eb7d7eb07726df56;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 7ca3bafb5..2616820d2 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,31 @@ -import { Component, Input, OnChanges, SimpleChanges } from '@angular/core' -import { ConfirmService } from '@app/core' -import { NotificationsService } from 'angular2-notifications' -import { VideoComment as VideoCommentInterface, VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model' +import { Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, 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 { 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 { VideoSortField } 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' @Component({ selector: 'my-video-comments', templateUrl: './video-comments.component.html', styleUrls: ['./video-comments.component.scss'] }) -export class VideoCommentsComponent implements OnChanges { +export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { + @ViewChild('commentHighlightBlock') commentHighlightBlock: ElementRef @Input() video: VideoDetails @Input() user: User comments: VideoComment[] = [] - sort: SortField = '-createdAt' + highlightedThread: VideoComment + sort: VideoSortField = '-createdAt' componentPagination: ComponentPagination = { currentPage: 1, itemsPerPage: 10, @@ -30,30 +35,59 @@ export class VideoCommentsComponent implements OnChanges { threadComments: { [ id: number ]: VideoCommentThreadTree } = {} threadLoading: { [ id: number ]: boolean } = {} + syndicationItems: Syndication[] = [] + + private sub: Subscription + constructor ( private authService: AuthService, - private notificationsService: NotificationsService, + private notifier: Notifier, private confirmService: ConfirmService, - private videoCommentService: VideoCommentService + private videoCommentService: VideoCommentService, + private activatedRoute: ActivatedRoute, + private i18n: I18n ) {} + ngOnInit () { + // 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.loadVideoComments() + this.resetVideo() } } - viewReplies (comment: VideoCommentInterface) { - this.threadLoading[comment.id] = true + ngOnDestroy () { + if (this.sub) this.sub.unsubscribe() + } + + viewReplies (commentId: number, highlightThread = false) { + this.threadLoading[commentId] = true - this.videoCommentService.getVideoThreadComments(this.video.id, comment.id) + this.videoCommentService.getVideoThreadComments(this.video.id, commentId) .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) ) } @@ -65,7 +99,7 @@ export class VideoCommentsComponent implements OnChanges { this.componentPagination.totalItems = res.totalComments }, - err => this.notificationsService.error('Error', err.message) + err => this.notifier.error(err.message) ) } @@ -82,41 +116,42 @@ export class VideoCommentsComponent implements OnChanges { } onThreadCreated (commentTree: VideoCommentThreadTree) { - this.viewReplies(commentTree.comment) + this.viewReplies(commentTree.comment.id) } - onWantedToDelete (commentToDelete: VideoComment) { + async onWantedToDelete (commentToDelete: VideoComment) { let message = 'Do you really want to delete this comment?' - if (commentToDelete.totalReplies !== 0) message += `${commentToDelete.totalReplies} would be deleted too.` - - this.confirmService.confirm(message, 'Delete').subscribe( - res => { - if (res === false) return - - 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-- - }, - - err => this.notificationsService.error('Error', err.message) - ) - } - ) + if (commentToDelete.totalReplies !== 0) { + message += this.i18n(' {{totalReplies}} replies will be deleted too.', { totalReplies: commentToDelete.totalReplies }) + } + + const res = await this.confirmService.confirm(message, this.i18n('Delete')) + if (res === false) return + + 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-- + + if (this.highlightedThread.id === commentToDelete.id) this.highlightedThread = undefined + }, + + err => this.notifier.error(err.message) + ) } isUserLoggedIn () { @@ -126,22 +161,11 @@ export class VideoCommentsComponent implements OnChanges { onNearOfBottom () { this.componentPagination.currentPage++ - if (this.hasMoreComments()) { + if (hasMoreItems(this.componentPagination)) { this.loadMoreComments() } } - private hasMoreComments () { - // No results - if (this.componentPagination.totalItems === 0) return false - - // Not loaded yet - if (!this.componentPagination.totalItems) return true - - const maxPage = this.componentPagination.totalItems / this.componentPagination.itemsPerPage - return maxPage > this.componentPagination.currentPage - } - private deleteLocalCommentThread (parentComment: VideoCommentThreadTree, commentToDelete: VideoComment) { for (const commentChild of parentComment.children) { if (commentChild.comment.id === commentToDelete.id) { @@ -153,9 +177,10 @@ export class VideoCommentsComponent implements OnChanges { } } - private loadVideoComments () { + private resetVideo () { if (this.video.commentsEnabled === true) { // Reset all our fields + this.highlightedThread = null this.comments = [] this.threadComments = {} this.threadLoading = {} @@ -163,7 +188,16 @@ export class VideoCommentsComponent implements OnChanges { this.componentPagination.currentPage = 1 this.componentPagination.totalItems = null + this.syndicationItems = this.videoCommentService.getVideoCommentsFeeds(this.video.uuid) + this.loadMoreComments() } } + + private processHighlightedThread (highlightedThreadId: number) { + this.highlightedThread = this.comments.find(c => c.id === highlightedThreadId) + + const highlightThread = true + this.viewReplies(highlightedThreadId, highlightThread) + } }