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 { VIDEO_COMMENT_TEXT_VALIDATOR } from '@app/shared/form-validators/video-comment-validators'
   6 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
   7 import { Video } from '@app/shared/shared-main'
   8 import { VideoComment, VideoCommentService } from '@app/shared/shared-video-comment'
   9 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
  10 import { VideoCommentCreate } from '@shared/models'
  11
  12 @Component({
  13   selector: 'my-video-comment-add',
  14   templateUrl: './video-comment-add.component.html',
  15   styleUrls: ['./video-comment-add.component.scss']
  16 })
  17 export class VideoCommentAddComponent extends FormReactive implements OnChanges, OnInit {
  18   @Input() user: User
  19   @Input() video: Video
  20   @Input() parentComment?: VideoComment
  21   @Input() parentComments?: VideoComment[]
  22   @Input() focusOnInit = false
  23   @Input() textValue?: string
  24
  25   @Output() commentCreated = new EventEmitter<VideoComment>()
  26   @Output() cancel = new EventEmitter()
  27
  28   @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal
  29   @ViewChild('emojiModal', { static: true }) emojiModal: NgbModal
  30   @ViewChild('textarea', { static: true }) textareaElement: ElementRef
  31
  32   addingComment = false
  33   addingCommentButtonValue: string
  34
  35   constructor (
  36     protected formValidatorService: FormValidatorService,
  37     private notifier: Notifier,
  38     private videoCommentService: VideoCommentService,
  39     private modalService: NgbModal,
  40     private router: Router
  41   ) {
  42     super()
  43   }
  44
  45   get emojiMarkupList () {
  46     const emojiMarkup = require('markdown-it-emoji/lib/data/light.json')
  47
  48     return emojiMarkup
  49   }
  50
  51   ngOnInit () {
  52     this.buildForm({
  53       text: VIDEO_COMMENT_TEXT_VALIDATOR
  54     })
  55
  56     if (this.user) {
  57       if (!this.parentComment) {
  58         this.addingCommentButtonValue = $localize`Comment`
  59       } else {
  60         this.addingCommentButtonValue = $localize`Reply`
  61       }
  62
  63       this.initTextValue()
  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   openEmojiModal (event: any) {
  91     event.preventDefault()
  92     this.modalService.open(this.emojiModal, { backdrop: true })
  93   }
  94
  95   hideModals () {
  96     this.modalService.dismissAll()
  97   }
  98
  99   formValidated () {
 100     // If we validate very quickly the comment form, we might comment twice
 101     if (this.addingComment) return
 102
 103     this.addingComment = true
 104
 105     const commentCreate: VideoCommentCreate = this.form.value
 106     let obs: Observable<VideoComment>
 107
 108     if (this.parentComment) {
 109       obs = this.addCommentReply(commentCreate)
 110     } else {
 111       obs = this.addCommentThread(commentCreate)
 112     }
 113
 114     obs.subscribe(
 115       comment => {
 116         this.addingComment = false
 117         this.commentCreated.emit(comment)
 118         this.form.reset()
 119       },
 120
 121       err => {
 122         this.addingComment = false
 123
 124         this.notifier.error(err.text)
 125       }
 126     )
 127   }
 128
 129   isAddButtonDisplayed () {
 130     return this.form.value['text']
 131   }
 132
 133   getUri () {
 134     return window.location.href
 135   }
 136
 137   getAvatarUrl () {
 138     if (this.user) return this.user.accountAvatarUrl
 139     return window.location.origin + '/client/assets/images/default-avatar.png'
 140   }
 141
 142   gotoLogin () {
 143     this.hideModals()
 144     this.router.navigate([ '/login' ])
 145   }
 146
 147   cancelCommentReply () {
 148     this.cancel.emit(null)
 149     this.form.value['text'] = this.textareaElement.nativeElement.value = ''
 150   }
 151
 152   private addCommentReply (commentCreate: VideoCommentCreate) {
 153     return this.videoCommentService
 154       .addCommentReply(this.video.id, this.parentComment.id, commentCreate)
 155   }
 156
 157   private addCommentThread (commentCreate: VideoCommentCreate) {
 158     return this.videoCommentService
 159       .addCommentThread(this.video.id, commentCreate)
 160   }
 161
 162   private initTextValue () {
 163     if (this.textValue) {
 164       this.patchTextValue(this.textValue, this.focusOnInit)
 165       return
 166     }
 167
 168     if (this.parentComment) {
 169       const mentions = this.parentComments
 170         .filter(c => c.account && c.account.id !== this.user.account.id) // Don't add mention of ourselves
 171         .map(c => '@' + c.by)
 172
 173       const mentionsSet = new Set(mentions)
 174       const mentionsText = Array.from(mentionsSet).join(' ') + ' '
 175
 176       this.patchTextValue(mentionsText, this.focusOnInit)
 177     }
 178   }
 179
 180   private patchTextValue (text: string, focus: boolean) {
 181     setTimeout(() => {
 182       if (focus) {
 183         this.textareaElement.nativeElement.focus()
 184       }
 185
 186       // Scroll to textarea
 187       this.textareaElement.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' })
 188
 189       // Use the native textarea autosize according to the text's break lines
 190       this.textareaElement.nativeElement.dispatchEvent(new Event('input'))
 191     })
 192
 193     this.form.patchValue({ text })
 194   }
 195 }