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

   1 import { Observable } from 'rxjs'
   2 import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, 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 OnChanges, OnInit {
  17   @Input() user: User
  18   @Input() video: Video
  19   @Input() parentComment: VideoComment
  20   @Input() parentComments: VideoComment[]
  21   @Input() focusOnInit = false
  22   @Input() textValue?: string
  23
  24   @Output() commentCreated = new EventEmitter<VideoComment>()
  25   @Output() cancel = new EventEmitter()
  26
  27   @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal
  28   @ViewChild('textarea', { static: true }) textareaElement: ElementRef
  29
  30   addingComment = false
  31
  32   constructor (
  33     protected formValidatorService: FormValidatorService,
  34     private videoCommentValidatorsService: VideoCommentValidatorsService,
  35     private notifier: Notifier,
  36     private videoCommentService: VideoCommentService,
  37     private modalService: NgbModal,
  38     private router: Router
  39   ) {
  40     super()
  41   }
  42
  43   ngOnInit () {
  44     this.buildForm({
  45       text: this.videoCommentValidatorsService.VIDEO_COMMENT_TEXT
  46     })
  47
  48     if (this.user) {
  49       if (this.textValue) {
  50         this.patchTextValue(this.textValue, this.focusOnInit)
  51         return
  52       }
  53
  54       if (this.parentComment) {
  55         const mentions = this.parentComments
  56           .filter(c => c.account && c.account.id !== this.user.account.id) // Don't add mention of ourselves
  57           .map(c => '@' + c.by)
  58
  59         const mentionsSet = new Set(mentions)
  60         const mentionsText = Array.from(mentionsSet).join(' ') + ' '
  61
  62         this.patchTextValue(mentionsText, this.focusOnInit)
  63       }
  64     }
  65   }
  66
  67   ngOnChanges (changes: SimpleChanges) {
  68     if (changes.textValue && changes.textValue.currentValue && changes.textValue.currentValue !== changes.textValue.previousValue) {
  69       this.patchTextValue(changes.textValue.currentValue, true)
  70     }
  71   }
  72
  73   onValidKey () {
  74     this.check()
  75     if (!this.form.valid) return
  76
  77     this.formValidated()
  78   }
  79
  80   openVisitorModal (event: any) {
  81     if (this.user === null) { // we only open it for visitors
  82       // fixing ng-bootstrap ModalService and the "Expression Changed After It Has Been Checked" Error
  83       event.srcElement.blur()
  84       event.preventDefault()
  85
  86       this.modalService.open(this.visitorModal)
  87     }
  88   }
  89
  90   hideVisitorModal () {
  91     this.modalService.dismissAll()
  92   }
  93
  94   formValidated () {
  95     // If we validate very quickly the comment form, we might comment twice
  96     if (this.addingComment) return
  97
  98     this.addingComment = true
  99
 100     const commentCreate: VideoCommentCreate = this.form.value
 101     let obs: Observable<VideoComment>
 102
 103     if (this.parentComment) {
 104       obs = this.addCommentReply(commentCreate)
 105     } else {
 106       obs = this.addCommentThread(commentCreate)
 107     }
 108
 109     obs.subscribe(
 110       comment => {
 111         this.addingComment = false
 112         this.commentCreated.emit(comment)
 113         this.form.reset()
 114       },
 115
 116       err => {
 117         this.addingComment = false
 118
 119         this.notifier.error(err.text)
 120       }
 121     )
 122   }
 123
 124   isAddButtonDisplayed () {
 125     return this.form.value['text']
 126   }
 127
 128   getUri () {
 129     return window.location.href
 130   }
 131
 132   getAvatarUrl () {
 133     if (this.user) return this.user.accountAvatarUrl
 134     return window.location.origin + '/client/assets/images/default-avatar.png'
 135   }
 136
 137   gotoLogin () {
 138     this.hideVisitorModal()
 139     this.router.navigate([ '/login' ])
 140   }
 141
 142   cancelCommentReply () {
 143     this.cancel.emit(null)
 144     this.form.value['text'] = this.textareaElement.nativeElement.value = ''
 145   }
 146
 147   private addCommentReply (commentCreate: VideoCommentCreate) {
 148     return this.videoCommentService
 149       .addCommentReply(this.video.id, this.parentComment.id, commentCreate)
 150   }
 151
 152   private addCommentThread (commentCreate: VideoCommentCreate) {
 153     return this.videoCommentService
 154       .addCommentThread(this.video.id, commentCreate)
 155   }
 156
 157   private patchTextValue (text: string, focus: boolean) {
 158     setTimeout(() => {
 159       if (focus) {
 160         this.textareaElement.nativeElement.focus()
 161       }
 162
 163       this.textareaElement.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' })
 164     })
 165
 166     this.form.patchValue({ text })
 167   }
 168 }