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

   1 import { Component, Input, OnInit } from '@angular/core'
   2 import { NotificationsService } from 'angular2-notifications'
   3 import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model'
   4 import { AuthService } from '../../../core/auth'
   5 import { ComponentPagination } from '../../../shared/rest/component-pagination.model'
   6 import { User } from '../../../shared/users'
   7 import { SortField } from '../../../shared/video/sort-field.type'
   8 import { VideoDetails } from '../../../shared/video/video-details.model'
   9 import { VideoComment } from './video-comment.model'
  10 import { VideoCommentService } from './video-comment.service'
  11
  12 @Component({
  13   selector: 'my-video-comments',
  14   templateUrl: './video-comments.component.html',
  15   styleUrls: ['./video-comments.component.scss']
  16 })
  17 export class VideoCommentsComponent implements OnInit {
  18   @Input() video: VideoDetails
  19   @Input() user: User
  20
  21   comments: VideoComment[] = []
  22   sort: SortField = '-createdAt'
  23   componentPagination: ComponentPagination = {
  24     currentPage: 1,
  25     itemsPerPage: 10,
  26     totalItems: null
  27   }
  28   inReplyToCommentId: number
  29   threadComments: { [ id: number ]: VideoCommentThreadTree } = {}
  30   threadLoading: { [ id: number ]: boolean } = {}
  31
  32   constructor (
  33     private authService: AuthService,
  34     private notificationsService: NotificationsService,
  35     private videoCommentService: VideoCommentService
  36   ) {}
  37
  38   ngOnInit () {
  39     if (this.video.commentsEnabled === true) {
  40       this.loadMoreComments()
  41     }
  42   }
  43
  44   viewReplies (comment: VideoComment) {
  45     this.threadLoading[comment.id] = true
  46
  47     this.videoCommentService.getVideoThreadComments(this.video.id, comment.id)
  48       .subscribe(
  49         res => {
  50           this.threadComments[comment.id] = res
  51           this.threadLoading[comment.id] = false
  52         },
  53
  54         err => this.notificationsService.error('Error', err.message)
  55       )
  56   }
  57
  58   loadMoreComments () {
  59     this.videoCommentService.getVideoCommentThreads(this.video.id, this.componentPagination, this.sort)
  60       .subscribe(
  61         res => {
  62           this.comments = this.comments.concat(res.comments)
  63           this.componentPagination.totalItems = res.totalComments
  64         },
  65
  66         err => this.notificationsService.error('Error', err.message)
  67       )
  68   }
  69
  70   onCommentThreadCreated (comment: VideoComment) {
  71     this.comments.unshift(comment)
  72   }
  73
  74   onWantedToReply (comment: VideoComment) {
  75     this.inReplyToCommentId = comment.id
  76   }
  77
  78   onResetReply () {
  79     this.inReplyToCommentId = undefined
  80   }
  81
  82   isUserLoggedIn () {
  83     return this.authService.isLoggedIn()
  84   }
  85
  86   onNearOfBottom () {
  87     this.componentPagination.currentPage++
  88
  89     if (this.hasMoreComments()) {
  90       this.loadMoreComments()
  91     }
  92   }
  93
  94   protected hasMoreComments () {
  95     // No results
  96     if (this.componentPagination.totalItems === 0) return false
  97
  98     // Not loaded yet
  99     if (!this.componentPagination.totalItems) return true
 100
 101     const maxPage = this.componentPagination.totalItems / this.componentPagination.itemsPerPage
 102     return maxPage > this.componentPagination.currentPage
 103   }
 104 }