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

   1 import { Observable } from 'rxjs'
   2 import { getLocaleDirection } from '@angular/common'
   3 import {
   4   Component,
   5   ElementRef,
   6   EventEmitter,
   7   Inject,
   8   Input,
   9   LOCALE_ID,
  10   OnChanges,
  11   OnInit,
  12   Output,
  13   SimpleChanges,
  14   ViewChild
  15 } from '@angular/core'
  16 import { Router } from '@angular/router'
  17 import { Notifier, User } from '@app/core'
  18 import { VIDEO_COMMENT_TEXT_VALIDATOR } from '@app/shared/form-validators/video-comment-validators'
  19 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
  20 import { Video } from '@app/shared/shared-main'
  21 import { VideoComment, VideoCommentService } from '@app/shared/shared-video-comment'
  22 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
  23 import { VideoCommentCreate } from '@shared/models'
  24
  25 @Component({
  26   selector: 'my-video-comment-add',
  27   templateUrl: './video-comment-add.component.html',
  28   styleUrls: ['./video-comment-add.component.scss']
  29 })
  30 export class VideoCommentAddComponent extends FormReactive implements OnChanges, OnInit {
  31   @Input() user: User
  32   @Input() video: Video
  33   @Input() parentComment?: VideoComment
  34   @Input() parentComments?: VideoComment[]
  35   @Input() focusOnInit = false
  36   @Input() textValue?: string
  37
  38   @Output() commentCreated = new EventEmitter<VideoComment>()
  39   @Output() cancel = new EventEmitter()
  40
  41   @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal
  42   @ViewChild('emojiModal', { static: true }) emojiModal: NgbModal
  43   @ViewChild('textarea', { static: true }) textareaElement: ElementRef
  44
  45   addingComment = false
  46   addingCommentButtonValue: string
  47
  48   constructor (
  49     protected formValidatorService: FormValidatorService,
  50     private notifier: Notifier,
  51     private videoCommentService: VideoCommentService,
  52     private modalService: NgbModal,
  53     private router: Router,
  54     @Inject(LOCALE_ID) private localeId: string
  55   ) {
  56     super()
  57   }
  58
  59   get emojiMarkupList () {
  60     const emojiMarkupObjectList = require('markdown-it-emoji/lib/data/light.json')
  61
  62     // Populate emoji-markup-list from object to array to avoid keys alphabetical order
  63     const emojiMarkupArrayList = []
  64     for (const emojiMarkupName in emojiMarkupObjectList) {
  65       if (emojiMarkupName) {
  66         const emoji = emojiMarkupObjectList[emojiMarkupName]
  67         emojiMarkupArrayList.push([emoji, emojiMarkupName])
  68       }
  69     }
  70
  71     return emojiMarkupArrayList
  72   }
  73
  74   ngOnInit () {
  75     this.buildForm({
  76       text: VIDEO_COMMENT_TEXT_VALIDATOR
  77     })
  78
  79     if (this.user) {
  80       if (!this.parentComment) {
  81         this.addingCommentButtonValue = $localize`Comment`
  82       } else {
  83         this.addingCommentButtonValue = $localize`Reply`
  84       }
  85
  86       this.initTextValue()
  87     }
  88   }
  89
  90   ngOnChanges (changes: SimpleChanges) {
  91     // Not initialized yet
  92     if (!this.form) return
  93
  94     if (changes.textValue && changes.textValue.currentValue && changes.textValue.currentValue !== changes.textValue.previousValue) {
  95       this.patchTextValue(changes.textValue.currentValue, true)
  96     }
  97   }
  98
  99   onValidKey () {
 100     this.check()
 101     if (!this.form.valid) return
 102
 103     this.formValidated()
 104   }
 105
 106   openVisitorModal (event: any) {
 107     if (this.user === null) { // we only open it for visitors
 108       // fixing ng-bootstrap ModalService and the "Expression Changed After It Has Been Checked" Error
 109       event.srcElement.blur()
 110       event.preventDefault()
 111
 112       this.modalService.open(this.visitorModal)
 113     }
 114   }
 115
 116   openEmojiModal (event: any) {
 117     event.preventDefault()
 118     this.modalService.open(this.emojiModal, { backdrop: true, size: 'lg' })
 119   }
 120
 121   hideModals () {
 122     this.modalService.dismissAll()
 123   }
 124
 125   formValidated () {
 126     // If we validate very quickly the comment form, we might comment twice
 127     if (this.addingComment) return
 128
 129     this.addingComment = true
 130
 131     const commentCreate: VideoCommentCreate = this.form.value
 132     let obs: Observable<VideoComment>
 133
 134     if (this.parentComment) {
 135       obs = this.addCommentReply(commentCreate)
 136     } else {
 137       obs = this.addCommentThread(commentCreate)
 138     }
 139
 140     obs.subscribe(
 141       comment => {
 142         this.addingComment = false
 143         this.commentCreated.emit(comment)
 144         this.form.reset()
 145       },
 146
 147       err => {
 148         this.addingComment = false
 149
 150         this.notifier.error(err.text)
 151       }
 152     )
 153   }
 154
 155   isAddButtonDisplayed () {
 156     return this.form.value['text']
 157   }
 158
 159   getUri () {
 160     return window.location.href
 161   }
 162
 163   gotoLogin () {
 164     this.hideModals()
 165     this.router.navigate([ '/login' ])
 166   }
 167
 168   cancelCommentReply () {
 169     this.cancel.emit(null)
 170     this.form.value['text'] = this.textareaElement.nativeElement.value = ''
 171   }
 172
 173   isRTL () {
 174     return getLocaleDirection(this.localeId) === 'rtl'
 175   }
 176
 177   private addCommentReply (commentCreate: VideoCommentCreate) {
 178     return this.videoCommentService
 179       .addCommentReply(this.video.id, this.parentComment.id, commentCreate)
 180   }
 181
 182   private addCommentThread (commentCreate: VideoCommentCreate) {
 183     return this.videoCommentService
 184       .addCommentThread(this.video.id, commentCreate)
 185   }
 186
 187   private initTextValue () {
 188     if (this.textValue) {
 189       this.patchTextValue(this.textValue, this.focusOnInit)
 190       return
 191     }
 192
 193     if (this.parentComment) {
 194       const mentions = this.parentComments
 195         .filter(c => c.account && c.account.id !== this.user.account.id) // Don't add mention of ourselves
 196         .map(c => '@' + c.by)
 197
 198       const mentionsSet = new Set(mentions)
 199       const mentionsText = Array.from(mentionsSet).join(' ') + ' '
 200
 201       this.patchTextValue(mentionsText, this.focusOnInit)
 202     }
 203   }
 204
 205   private patchTextValue (text: string, focus: boolean) {
 206     setTimeout(() => {
 207       if (focus) {
 208         this.textareaElement.nativeElement.focus()
 209       }
 210
 211       // Scroll to textarea
 212       this.textareaElement.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' })
 213
 214       // Use the native textarea autosize according to the text's break lines
 215       this.textareaElement.nativeElement.dispatchEvent(new Event('input'))
 216     })
 217
 218     this.form.patchValue({ text })
 219   }
 220 }