client/src/app/videos/+video-watch/comment/video-comments.component.ts

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