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

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