Move to sass module

[github/Chocobozzz/PeerTube.git] / client / src / app / +videos / +video-watch / comment / video-comment-add.component.ts

diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts
index c6e9c73b8f2357c1cbe357dfb05521e55e4c806e..78efe16843008bdf2d1c28c7f601a4b28b394d28 100644 (file)
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts
+++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts
@@ -1,13 +1,26 @@
 import { Observable } from 'rxjs'
-import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
+import { getLocaleDirection } from '@angular/common'
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Inject,
+  Input,
+  LOCALE_ID,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild
+} from '@angular/core'
 import { Router } from '@angular/router'
 import { Notifier, User } from '@app/core'
-import { FormReactive, FormValidatorService, VideoCommentValidatorsService } from '@app/shared/shared-forms'
+import { VIDEO_COMMENT_TEXT_VALIDATOR } from '@app/shared/form-validators/video-comment-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { Video } from '@app/shared/shared-main'
 import { VideoComment, VideoCommentService } from '@app/shared/shared-video-comment'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { VideoCommentCreate } from '@shared/models'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-video-comment-add',
@@ -17,16 +30,16 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 export class VideoCommentAddComponent extends FormReactive implements OnChanges, OnInit {
   @Input() user: User
   @Input() video: Video
-  @Input() parentComment: VideoComment
-  @Input() parentComments: VideoComment[]
+  @Input() parentComment?: VideoComment
+  @Input() parentComments?: VideoComment[]
   @Input() focusOnInit = false
   @Input() textValue?: string
-  @Input() commentThread?: boolean
 
   @Output() commentCreated = new EventEmitter<VideoComment>()
   @Output() cancel = new EventEmitter()
 
   @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal
+  @ViewChild('emojiModal', { static: true }) emojiModal: NgbModal
   @ViewChild('textarea', { static: true }) textareaElement: ElementRef
 
   addingComment = false
@@ -34,47 +47,50 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
 
   constructor (
     protected formValidatorService: FormValidatorService,
-    private videoCommentValidatorsService: VideoCommentValidatorsService,
     private notifier: Notifier,
     private videoCommentService: VideoCommentService,
     private modalService: NgbModal,
     private router: Router,
-    private i18n: I18n
+    @Inject(LOCALE_ID) private localeId: string
   ) {
     super()
   }
 
+  get emojiMarkupList () {
+    const emojiMarkupObjectList = require('markdown-it-emoji/lib/data/light.json')
+
+    // Populate emoji-markup-list from object to array to avoid keys alphabetical order
+    const emojiMarkupArrayList = []
+    for (const emojiMarkupName in emojiMarkupObjectList) {
+      if (emojiMarkupName) {
+        const emoji = emojiMarkupObjectList[emojiMarkupName]
+        emojiMarkupArrayList.push([emoji, emojiMarkupName])
+      }
+    }
+
+    return emojiMarkupArrayList
+  }
+
   ngOnInit () {
     this.buildForm({
-      text: this.videoCommentValidatorsService.VIDEO_COMMENT_TEXT
+      text: VIDEO_COMMENT_TEXT_VALIDATOR
     })
 
     if (this.user) {
-      if (this.commentThread) {
-        this.addingCommentButtonValue = this.i18n('Comment')
+      if (!this.parentComment) {
+        this.addingCommentButtonValue = $localize`Comment`
       } else {
-        this.addingCommentButtonValue = this.i18n('Reply')
-      }
-
-      if (this.textValue) {
-        this.patchTextValue(this.textValue, this.focusOnInit)
-        return
+        this.addingCommentButtonValue = $localize`Reply`
       }
 
-      if (this.parentComment) {
-        const mentions = this.parentComments
-          .filter(c => c.account && c.account.id !== this.user.account.id) // Don't add mention of ourselves
-          .map(c => '@' + c.by)
-
-        const mentionsSet = new Set(mentions)
-        const mentionsText = Array.from(mentionsSet).join(' ') + ' '
-
-        this.patchTextValue(mentionsText, this.focusOnInit)
-      }
+      this.initTextValue()
     }
   }
 
   ngOnChanges (changes: SimpleChanges) {
+    // Not initialized yet
+    if (!this.form) return
+
     if (changes.textValue && changes.textValue.currentValue && changes.textValue.currentValue !== changes.textValue.previousValue) {
       this.patchTextValue(changes.textValue.currentValue, true)
     }
@@ -97,7 +113,12 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
     }
   }
 
-  hideVisitorModal () {
+  openEmojiModal (event: any) {
+    event.preventDefault()
+    this.modalService.open(this.emojiModal, { backdrop: true, size: 'lg' })
+  }
+
+  hideModals () {
     this.modalService.dismissAll()
   }
 
@@ -139,13 +160,8 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
     return window.location.href
   }
 
-  getAvatarUrl () {
-    if (this.user) return this.user.accountAvatarUrl
-    return window.location.origin + '/client/assets/images/default-avatar.png'
-  }
-
   gotoLogin () {
-    this.hideVisitorModal()
+    this.hideModals()
     this.router.navigate([ '/login' ])
   }
 
@@ -154,6 +170,10 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
     this.form.value['text'] = this.textareaElement.nativeElement.value = ''
   }
 
+  isRTL () {
+    return getLocaleDirection(this.localeId) === 'rtl'
+  }
+
   private addCommentReply (commentCreate: VideoCommentCreate) {
     return this.videoCommentService
       .addCommentReply(this.video.id, this.parentComment.id, commentCreate)
@@ -164,13 +184,35 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
       .addCommentThread(this.video.id, commentCreate)
   }
 
+  private initTextValue () {
+    if (this.textValue) {
+      this.patchTextValue(this.textValue, this.focusOnInit)
+      return
+    }
+
+    if (this.parentComment) {
+      const mentions = this.parentComments
+        .filter(c => c.account && c.account.id !== this.user.account.id) // Don't add mention of ourselves
+        .map(c => '@' + c.by)
+
+      const mentionsSet = new Set(mentions)
+      const mentionsText = Array.from(mentionsSet).join(' ') + ' '
+
+      this.patchTextValue(mentionsText, this.focusOnInit)
+    }
+  }
+
   private patchTextValue (text: string, focus: boolean) {
     setTimeout(() => {
       if (focus) {
         this.textareaElement.nativeElement.focus()
       }
 
+      // Scroll to textarea
       this.textareaElement.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' })
+
+      // Use the native textarea autosize according to the text's break lines
+      this.textareaElement.nativeElement.dispatchEvent(new Event('input'))
     })
 
     this.form.patchValue({ text })