client/src/app/+videos/+video-watch/shared/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 { Notifier, User } from '@app/core'
  17 import { VIDEO_COMMENT_TEXT_VALIDATOR } from '@app/shared/form-validators/video-comment-validators'
  18 import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
  19 import { Video } from '@app/shared/shared-main'
  20 import { VideoComment, VideoCommentService } from '@app/shared/shared-video-comment'
  21 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
  22 import { VideoCommentCreate } from '@shared/models'
  23
  24 @Component({
  25   selector: 'my-video-comment-add',
  26   templateUrl: './video-comment-add.component.html',
  27   styleUrls: [ './video-comment-add.component.scss' ]
  28 })
  29 export class VideoCommentAddComponent extends FormReactive implements OnChanges, OnInit {
  30   @Input() user: User
  31   @Input() video: Video
  32   @Input() parentComment?: VideoComment
  33   @Input() parentComments?: VideoComment[]
  34   @Input() focusOnInit = false
  35   @Input() textValue?: string
  36
  37   @Output() commentCreated = new EventEmitter<VideoComment>()
  38   @Output() cancel = new EventEmitter()
  39
  40   @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal
  41   @ViewChild('emojiModal', { static: true }) emojiModal: NgbModal
  42   @ViewChild('textarea', { static: true }) textareaElement: ElementRef
  43
  44   addingComment = false
  45   addingCommentButtonValue: string
  46
  47   private emojiMarkupList: { emoji: string, name: string }[]
  48
  49   constructor (
  50     protected formReactiveService: FormReactiveService,
  51     private notifier: Notifier,
  52     private videoCommentService: VideoCommentService,
  53     private modalService: NgbModal,
  54     @Inject(LOCALE_ID) private localeId: string
  55   ) {
  56     super()
  57   }
  58
  59   ngOnInit () {
  60     this.buildForm({
  61       text: VIDEO_COMMENT_TEXT_VALIDATOR
  62     })
  63
  64     if (this.user) {
  65       if (!this.parentComment) {
  66         this.addingCommentButtonValue = $localize`Comment`
  67       } else {
  68         this.addingCommentButtonValue = $localize`Reply`
  69       }
  70
  71       this.initTextValue()
  72     }
  73   }
  74
  75   ngOnChanges (changes: SimpleChanges) {
  76     // Not initialized yet
  77     if (!this.form) return
  78
  79     if (changes.textValue?.currentValue && changes.textValue.currentValue !== changes.textValue.previousValue) {
  80       this.patchTextValue(changes.textValue.currentValue, true)
  81     }
  82   }
  83
  84   getEmojiMarkupList () {
  85     if (this.emojiMarkupList) return this.emojiMarkupList
  86
  87     const emojiMarkupObjectList = require('markdown-it-emoji/lib/data/light.json')
  88
  89     this.emojiMarkupList = []
  90     for (const name of Object.keys(emojiMarkupObjectList)) {
  91       const emoji = emojiMarkupObjectList[name]
  92       this.emojiMarkupList.push({ emoji, name })
  93     }
  94
  95     return this.emojiMarkupList
  96   }
  97
  98   onValidKey () {
  99     this.forceCheck()
 100     if (!this.form.valid) return
 101
 102     this.formValidated()
 103   }
 104
 105   openVisitorModal (event: any) {
 106     if (this.user === null) { // we only open it for visitors
 107       // fixing ng-bootstrap ModalService and the "Expression Changed After It Has Been Checked" Error
 108       event.srcElement.blur()
 109       event.preventDefault()
 110
 111       this.modalService.open(this.visitorModal)
 112     }
 113   }
 114
 115   openEmojiModal (event: any) {
 116     event.preventDefault()
 117     this.modalService.open(this.emojiModal, { backdrop: true, size: 'lg' })
 118   }
 119
 120   hideModals () {
 121     this.modalService.dismissAll()
 122   }
 123
 124   formValidated () {
 125     // If we validate very quickly the comment form, we might comment twice
 126     if (this.addingComment) return
 127
 128     this.addingComment = true
 129
 130     const commentCreate: VideoCommentCreate = this.form.value
 131     let obs: Observable<VideoComment>
 132
 133     if (this.parentComment) {
 134       obs = this.addCommentReply(commentCreate)
 135     } else {
 136       obs = this.addCommentThread(commentCreate)
 137     }
 138
 139     obs.subscribe({
 140       next: comment => {
 141         this.addingComment = false
 142         this.commentCreated.emit(comment)
 143         this.form.reset()
 144       },
 145
 146       error: err => {
 147         this.addingComment = false
 148
 149         this.notifier.error(err.message)
 150       }
 151     })
 152   }
 153
 154   isAddButtonDisplayed () {
 155     return this.form.value['text']
 156   }
 157
 158   getUri () {
 159     return window.location.href
 160   }
 161
 162   cancelCommentReply () {
 163     this.cancel.emit(null)
 164     this.form.value['text'] = this.textareaElement.nativeElement.value = ''
 165   }
 166
 167   isRTL () {
 168     return getLocaleDirection(this.localeId) === 'rtl'
 169   }
 170
 171   getAvatarActorType () {
 172     if (this.user) return 'account'
 173
 174     return 'unlogged'
 175   }
 176
 177   private addCommentReply (commentCreate: VideoCommentCreate) {
 178     return this.videoCommentService
 179       .addCommentReply(this.video.uuid, this.parentComment.id, commentCreate)
 180   }
 181
 182   private addCommentThread (commentCreate: VideoCommentCreate) {
 183     return this.videoCommentService
 184       .addCommentThread(this.video.uuid, 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 }