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

   1 import { Observable } from 'rxjs'
   2 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
   3 import { Router } from '@angular/router'
   4 import { Notifier, User } from '@app/core'
   5 import { FormReactive, FormValidatorService, VideoCommentValidatorsService } from '@app/shared/shared-forms'
   6 import { Video } from '@app/shared/shared-main'
   7 import { VideoComment, VideoCommentService } from '@app/shared/shared-video-comment'
   8 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
   9 import { VideoCommentCreate } from '@shared/models'
  10
  11 @Component({
  12   selector: 'my-video-comment-add',
  13   templateUrl: './video-comment-add.component.html',
  14   styleUrls: ['./video-comment-add.component.scss']
  15 })
  16 export class VideoCommentAddComponent extends FormReactive implements OnInit {
  17   @Input() user: User
  18   @Input() video: Video
  19   @Input() parentComment: VideoComment
  20   @Input() parentComments: VideoComment[]
  21   @Input() focusOnInit = false
  22
  23   @Output() commentCreated = new EventEmitter<VideoComment>()
  24   @Output() cancel = new EventEmitter()
  25
  26   @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal
  27   @ViewChild('textarea', { static: true }) textareaElement: ElementRef
  28
  29   addingComment = false
  30
  31   constructor (
  32     protected formValidatorService: FormValidatorService,
  33     private videoCommentValidatorsService: VideoCommentValidatorsService,
  34     private notifier: Notifier,
  35     private videoCommentService: VideoCommentService,
  36     private modalService: NgbModal,
  37     private router: Router
  38   ) {
  39     super()
  40   }
  41
  42   ngOnInit () {
  43     this.buildForm({
  44       text: this.videoCommentValidatorsService.VIDEO_COMMENT_TEXT
  45     })
  46
  47     if (this.user) {
  48       if (this.focusOnInit === true) {
  49         this.textareaElement.nativeElement.focus()
  50       }
  51
  52       if (this.parentComment) {
  53         const mentions = this.parentComments
  54           .filter(c => c.account && c.account.id !== this.user.account.id) // Don't add mention of ourselves
  55           .map(c => '@' + c.by)
  56
  57         const mentionsSet = new Set(mentions)
  58         const mentionsText = Array.from(mentionsSet).join(' ') + ' '
  59
  60         this.form.patchValue({ text: mentionsText })
  61       }
  62     }
  63   }
  64
  65   onValidKey () {
  66     this.check()
  67     if (!this.form.valid) return
  68
  69     this.formValidated()
  70   }
  71
  72   openVisitorModal (event: any) {
  73     if (this.user === null) { // we only open it for visitors
  74       // fixing ng-bootstrap ModalService and the "Expression Changed After It Has Been Checked" Error
  75       event.srcElement.blur()
  76       event.preventDefault()
  77
  78       this.modalService.open(this.visitorModal)
  79     }
  80   }
  81
  82   hideVisitorModal () {
  83     this.modalService.dismissAll()
  84   }
  85
  86   formValidated () {
  87     // If we validate very quickly the comment form, we might comment twice
  88     if (this.addingComment) return
  89
  90     this.addingComment = true
  91
  92     const commentCreate: VideoCommentCreate = this.form.value
  93     let obs: Observable<VideoComment>
  94
  95     if (this.parentComment) {
  96       obs = this.addCommentReply(commentCreate)
  97     } else {
  98       obs = this.addCommentThread(commentCreate)
  99     }
 100
 101     obs.subscribe(
 102       comment => {
 103         this.addingComment = false
 104         this.commentCreated.emit(comment)
 105         this.form.reset()
 106       },
 107
 108       err => {
 109         this.addingComment = false
 110
 111         this.notifier.error(err.text)
 112       }
 113     )
 114   }
 115
 116   isAddButtonDisplayed () {
 117     return this.form.value['text']
 118   }
 119
 120   getUri () {
 121     return window.location.href
 122   }
 123
 124   getAvatarUrl () {
 125     if (this.user) return this.user.accountAvatarUrl
 126     return window.location.origin + '/client/assets/images/default-avatar.png'
 127   }
 128
 129   gotoLogin () {
 130     this.hideVisitorModal()
 131     this.router.navigate([ '/login' ])
 132   }
 133
 134   cancelCommentReply () {
 135     this.cancel.emit(null)
 136     this.form.value['text'] = this.textareaElement.nativeElement.value = ''
 137   }
 138
 139   private addCommentReply (commentCreate: VideoCommentCreate) {
 140     return this.videoCommentService
 141       .addCommentReply(this.video.id, this.parentComment.id, commentCreate)
 142   }
 143
 144   private addCommentThread (commentCreate: VideoCommentCreate) {
 145     return this.videoCommentService
 146       .addCommentThread(this.video.id, commentCreate)
 147   }
 148 }