Add mentions to comments

5 files changed, 21 insertions, 1 deletions

diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
index 0eaa0d447..41d00da08 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
@@ -4,6 +4,7 @@
 
     <div class="form-group">
       <textarea placeholder="Add comment..." formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }" #textarea>
+
       </textarea>
       <div *ngIf="formErrors.text" class="form-error">
         {{ formErrors.text }}
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 27655eca7..3e064efcb 100644
--- 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
@@ -2,7 +2,7 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild }
 import { FormBuilder, FormGroup } from '@angular/forms'
 import { NotificationsService } from 'angular2-notifications'
 import { Observable } from 'rxjs/Observable'
-import { VideoCommentCreate } from '../../../../../../shared/models/videos/video-comment.model'
+import { VideoCommentCreate, VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model'
 import { FormReactive } from '../../../shared'
 import { VIDEO_COMMENT_TEXT } from '../../../shared/forms/form-validators/video-comment'
 import { User } from '../../../shared/users'
@@ -19,6 +19,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
   @Input() user: User
   @Input() video: Video
   @Input() parentComment: VideoComment
+  @Input() parentComments: VideoComment[]
   @Input() focusOnInit = false
 
   @Output() commentCreated = new EventEmitter<VideoCommentCreate>()
@@ -55,6 +56,17 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
     if (this.focusOnInit === true) {
       this.textareaElement.nativeElement.focus()
     }
+
+    if (this.parentComment) {
+      const mentions = this.parentComments
+        .filter(c => c.account.id !== this.user.account.id)
+        .map(c => '@' + c.account.name)
+
+      const mentionsSet = new Set(mentions)
+      const mentionsText = Array.from(mentionsSet).join(' ') + ' '
+
+      this.form.patchValue({ text: mentionsText })
+    }
   }
 
   formValidated () {
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.html b/client/src/app/videos/+video-watch/comment/video-comment.component.html
index 8edd12124..1d325aff9 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.html
@@ -18,6 +18,7 @@
       [user]="user"
       [video]="video"
       [parentComment]="comment"
+      [parentComments]="newParentComments"
       [focusOnInit]="true"
       (commentCreated)="onCommentReplyCreated($event)"
     ></my-video-comment-add>
@@ -29,6 +30,7 @@
           [video]="video"
           [inReplyToCommentId]="inReplyToCommentId"
           [commentTree]="commentChild"
+          [parentComments]="newParentComments"
           (wantedToReply)="onWantToReply($event)"
           (wantedToDelete)="onWantToDelete($event)"
           (resetReply)="onResetReply()"
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.ts b/client/src/app/videos/+video-watch/comment/video-comment.component.ts
index 2ecc8a143..38e603d0d 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.ts
@@ -16,6 +16,7 @@ import { VideoComment } from './video-comment.model'
 export class VideoCommentComponent implements OnInit {
   @Input() video: Video
   @Input() comment: VideoComment
+  @Input() parentComments: VideoComment[] = []
   @Input() commentTree: VideoCommentThreadTree
   @Input() inReplyToCommentId: number
 
@@ -25,6 +26,7 @@ export class VideoCommentComponent implements OnInit {
   @Output() resetReply = new EventEmitter()
 
   sanitizedCommentHTML = ''
+  newParentComments = []
 
   constructor (private authService: AuthService) {}
 
@@ -36,6 +38,8 @@ export class VideoCommentComponent implements OnInit {
     this.sanitizedCommentHTML = sanitizeHtml(this.comment.text, {
       allowedTags: [ 'p', 'span' ]
     })
+
+    this.newParentComments = this.parentComments.concat([ this.comment ])
   }
 
   onCommentReplyCreated (createdComment: VideoComment) {
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.scss b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
index be122eb2c..19ab3b633 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
@@ -6,6 +6,7 @@
   font-size: 15px;
   cursor: pointer;
   margin-left: 56px;
+  margin-bottom: 10px;
 }
 
 .glyphicon, .comment-thread-loading {