Add ability to delete comments

8 files changed, 99 insertions, 16 deletions

diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index 0fefcee28..1df9d4006 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@@ -51,8 +51,6 @@
 
 .submit-container {
   text-align: right;
-  position: relative;
-  bottom: $button-height;
 
   .message-submit {
     display: inline-block;
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 e9c23929c..4f9597607 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
@@ -3,13 +3,14 @@
 
   <div class="comment">
     <div class="comment-account-date">
-      <div class="comment-account">{{ comment.by }}</div>
+      <a target="_blank" [href]="comment.account.url" class="comment-account">{{ comment.by }}</a>
       <div class="comment-date">{{ comment.createdAt | myFromNow }}</div>
     </div>
     <div>{{ comment.text }}</div>
 
     <div class="comment-actions">
       <div *ngIf="isUserLoggedIn()" (click)="onWantToReply()" class="comment-action-reply">Reply</div>
+      <div *ngIf="isRemovableByUser()" (click)="onWantToDelete()" class="comment-action-delete">Delete</div>
     </div>
 
     <my-video-comment-add
@@ -28,7 +29,8 @@
           [video]="video"
           [inReplyToCommentId]="inReplyToCommentId"
           [commentTree]="commentChild"
-          (wantedToReply)="onWantedToReply($event)"
+          (wantedToReply)="onWantToReply($event)"
+          (wantedToDelete)="onWantToDelete($event)"
           (resetReply)="onResetReply()"
         ></my-video-comment>
       </div>
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
index aae03ab6d..a22c5a9fd 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
@@ -20,6 +20,9 @@
       margin-bottom: 4px;
 
       .comment-account {
+        @include disable-default-a-behaviour;
+
+        color: #000;
         font-weight: $font-bold;
       }
 
@@ -31,10 +34,16 @@
 
     .comment-actions {
       margin: 10px 0;
+      display: flex;
 
-      .comment-action-reply {
+      .comment-action-reply, .comment-action-delete {
         color: #585858;
         cursor: pointer;
+        margin-right: 10px;
+
+        &:hover {
+          color: #000;
+        }
       }
     }
   }
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 b305c639a..9bc9c8844 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
@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { Account as AccountInterface } from '../../../../../../shared/models/actors'
+import { UserRight } from '../../../../../../shared/models/users'
 import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model'
 import { AuthService } from '../../../core/auth'
 import { Account } from '../../../shared/account/account.model'
@@ -17,7 +18,9 @@ export class VideoCommentComponent {
   @Input() commentTree: VideoCommentThreadTree
   @Input() inReplyToCommentId: number
 
+  @Output() wantedToDelete = new EventEmitter<VideoComment>()
   @Output() wantedToReply = new EventEmitter<VideoComment>()
+  @Output() threadCreated = new EventEmitter<VideoCommentThreadTree>()
   @Output() resetReply = new EventEmitter()
 
   constructor (private authService: AuthService) {}
@@ -32,6 +35,8 @@ export class VideoCommentComponent {
         comment: this.comment,
         children: []
       }
+
+      this.threadCreated.emit(this.commentTree)
     }
 
     this.commentTree.children.push({
@@ -41,17 +46,16 @@ export class VideoCommentComponent {
     this.resetReply.emit()
   }
 
-  onWantToReply () {
-    this.wantedToReply.emit(this.comment)
+  onWantToReply (comment?: VideoComment) {
+    this.wantedToReply.emit(comment || this.comment)
   }
 
-  isUserLoggedIn () {
-    return this.authService.isLoggedIn()
+  onWantToDelete (comment?: VideoComment) {
+    this.wantedToDelete.emit(comment || this.comment)
   }
 
-  // Event from child comment
-  onWantedToReply (comment: VideoComment) {
-    this.wantedToReply.emit(comment)
+  isUserLoggedIn () {
+    return this.authService.isLoggedIn()
   }
 
   onResetReply () {
@@ -61,4 +65,12 @@ export class VideoCommentComponent {
   getAvatarUrl (account: AccountInterface) {
     return Account.GET_ACCOUNT_AVATAR_URL(account)
   }
+
+  isRemovableByUser () {
+    return this.isUserLoggedIn() &&
+      (
+        this.user.account.id === this.comment.account.id ||
+        this.user.hasRight(UserRight.REMOVE_ANY_VIDEO_COMMENT)
+      )
+  }
 }
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.service.ts b/client/src/app/videos/+video-watch/comment/video-comment.service.ts
index 2fe6cc3e9..c42f55496 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.service.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment.service.ts
@@ -66,6 +66,15 @@ export class VideoCommentService {
       .catch((res) => this.restExtractor.handleError(res))
   }
 
+  deleteVideoComment (videoId: number | string, commentId: number) {
+    const url = `${VideoCommentService.BASE_VIDEO_URL + videoId}/comments/${commentId}`
+
+    return this.authHttp
+      .delete(url)
+      .map(this.restExtractor.extractDataBool)
+      .catch((res) => this.restExtractor.handleError(res))
+  }
+
   private extractVideoComment (videoComment: VideoCommentServerModel) {
     return new VideoComment(videoComment)
   }
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.html b/client/src/app/videos/+video-watch/comment/video-comments.component.html
index 4a4248073..80b200931 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.html
@@ -27,6 +27,8 @@
           [inReplyToCommentId]="inReplyToCommentId"
           [commentTree]="threadComments[comment.id]"
           (wantedToReply)="onWantedToReply($event)"
+          (wantedToDelete)="onWantedToDelete($event)"
+          (threadCreated)="onThreadCreated($event)"
           (resetReply)="onResetReply()"
         ></my-video-comment>
 
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.ts b/client/src/app/videos/+video-watch/comment/video-comments.component.ts
index 1230725c1..030dee9af 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core'
+import { ConfirmService } from '@app/core'
 import { NotificationsService } from 'angular2-notifications'
-import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model'
+import { VideoComment as VideoCommentInterface, VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model'
 import { AuthService } from '../../../core/auth'
 import { ComponentPagination } from '../../../shared/rest/component-pagination.model'
 import { User } from '../../../shared/users'
@@ -32,6 +33,7 @@ export class VideoCommentsComponent implements OnInit {
   constructor (
     private authService: AuthService,
     private notificationsService: NotificationsService,
+    private confirmService: ConfirmService,
     private videoCommentService: VideoCommentService
   ) {}
 
@@ -41,7 +43,7 @@ export class VideoCommentsComponent implements OnInit {
     }
   }
 
-  viewReplies (comment: VideoComment) {
+  viewReplies (comment: VideoCommentInterface) {
     this.threadLoading[comment.id] = true
 
     this.videoCommentService.getVideoThreadComments(this.video.id, comment.id)
@@ -79,6 +81,44 @@ export class VideoCommentsComponent implements OnInit {
     this.inReplyToCommentId = undefined
   }
 
+  onThreadCreated (commentTree: VideoCommentThreadTree) {
+    this.viewReplies(commentTree.comment)
+  }
+
+  onWantedToDelete (commentToDelete: VideoComment) {
+    let message = 'Do you really want to delete this comment?'
+    if (commentToDelete.totalReplies !== 0) message += `${commentToDelete.totalReplies} would be deleted too.`
+
+    this.confirmService.confirm(message, 'Delete').subscribe(
+      res => {
+        if (res === false) return
+
+        this.videoCommentService.deleteVideoComment(commentToDelete.videoId, commentToDelete.id)
+          .subscribe(
+            () => {
+              // Delete the comment in the tree
+              if (commentToDelete.inReplyToCommentId) {
+                const thread = this.threadComments[commentToDelete.threadId]
+                if (!thread) {
+                  console.error(`Cannot find thread ${commentToDelete.threadId} of the comment to delete ${commentToDelete.id}`)
+                  return
+                }
+
+                this.deleteLocalCommentThread(thread, commentToDelete)
+                return
+              }
+
+              // Delete the thread
+              this.comments = this.comments.filter(c => c.id !== commentToDelete.id)
+              this.componentPagination.totalItems--
+            },
+
+            err => this.notificationsService.error('Error', err.message)
+          )
+      }
+    )
+  }
+
   isUserLoggedIn () {
     return this.authService.isLoggedIn()
   }
@@ -91,7 +131,7 @@ export class VideoCommentsComponent implements OnInit {
     }
   }
 
-  protected hasMoreComments () {
+  private hasMoreComments () {
     // No results
     if (this.componentPagination.totalItems === 0) return false
 
@@ -101,4 +141,15 @@ export class VideoCommentsComponent implements OnInit {
     const maxPage = this.componentPagination.totalItems / this.componentPagination.itemsPerPage
     return maxPage > this.componentPagination.currentPage
   }
+
+  private deleteLocalCommentThread (parentComment: VideoCommentThreadTree, commentToDelete: VideoComment) {
+    for (const commentChild of parentComment.children) {
+      if (commentChild.comment.id === commentToDelete.id) {
+        parentComment.children = parentComment.children.filter(c => c.comment.id !== commentToDelete.id)
+        return
+      }
+
+      this.deleteLocalCommentThread(commentChild, commentToDelete)
+    }
+  }
 }
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index 0f44d3dd7..f1f194764 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -137,7 +137,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   blacklistVideo (event: Event) {
     event.preventDefault()
 
-    this.confirmService.confirm('Do you really want to blacklist this video ?', 'Blacklist').subscribe(
+    this.confirmService.confirm('Do you really want to blacklist this video?', 'Blacklist').subscribe(
       res => {
         if (res === false) return