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