Add user moderation dropdown to comments

3 files changed, 41 insertions, 4 deletions

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 e26100346..d5aacf107 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
@@ -36,6 +36,9 @@
         <div class="comment-actions">
           <div *ngIf="isUserLoggedIn()" (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div>
           <div *ngIf="isRemovableByUser()" (click)="onWantToDelete()" class="comment-action-delete" i18n>Delete</div>
+          <my-user-moderation-dropdown
+            buttonSize="small" [account]="commentAccount" [user]="commentUser" label="Options" placement="bottom-left auto"
+          ></my-user-moderation-dropdown>
         </div>
       </ng-container>
 
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 c70914f9b..cebb24c12 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
@@ -114,6 +114,7 @@
       margin-bottom: 10px;
       display: flex;
 
+      ::ng-deep .dropdown-toggle,
       .comment-action-reply,
       .comment-action-delete {
         color: $grey-foreground-color;
@@ -124,6 +125,12 @@
           color: var(--mainForegroundColor);
         }
       }
+
+      ::ng-deep .action-button {
+        background-color: transparent;
+        padding: 0;
+        font-weight: unset;
+      }
     }
   }
 
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 b2bf3ee1b..0d48f0a82 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,10 +1,14 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core'
-import { UserRight } from '../../../../../../shared/models/users'
+import { User, UserRight } from '../../../../../../shared/models/users'
 import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model'
-import { AuthService } from '../../../core/auth'
-import { Video } from '../../../shared/video/video.model'
+import { AuthService } from '@app/core/auth'
+import { AccountService } from '@app/shared/account/account.service'
+import { Video } from '@app/shared/video/video.model'
 import { VideoComment } from './video-comment.model'
 import { MarkdownService } from '@app/shared/renderer'
+import { Account } from '@app/shared/account/account.model'
+import { Notifier } from '@app/core'
+import { UserService } from '@app/shared'
 
 @Component({
   selector: 'my-video-comment',
@@ -28,9 +32,15 @@ export class VideoCommentComponent implements OnInit, OnChanges {
   sanitizedCommentHTML = ''
   newParentComments: VideoComment[] = []
 
+  commentAccount: Account
+  commentUser: User
+
   constructor (
     private markdownService: MarkdownService,
-    private authService: AuthService
+    private authService: AuthService,
+    private accountService: AccountService,
+    private userService: UserService,
+    private notifier: Notifier
   ) {}
 
   get user () {
@@ -90,9 +100,26 @@ export class VideoCommentComponent implements OnInit, OnChanges {
       )
   }
 
+  private getUserIfNeeded (account: Account) {
+    if (!account.userId) return
+    if (!this.authService.isLoggedIn()) return
+
+    const user = this.authService.getUser()
+    if (user.hasRight(UserRight.MANAGE_USERS)) {
+      this.userService.getUser(account.userId)
+          .subscribe(
+            user => this.commentUser = user,
+
+            err => this.notifier.error(err.message)
+          )
+    }
+  }
+
   private async init () {
     const html = await this.markdownService.textMarkdownToHTML(this.comment.text, true)
     this.sanitizedCommentHTML = await this.markdownService.processVideoTimestamps(html)
     this.newParentComments = this.parentComments.concat([ this.comment ])
+    this.commentAccount = new Account(this.comment.account)
+    this.getUserIfNeeded(this.commentAccount)
   }
 }