3 files changed, 17 insertions, 6 deletions

diff --git a/client/src/app/shared/users/user.service.ts b/client/src/app/shared/users/user.service.ts
index 051e0bfa4..e24d91df3 100644
--- a/client/src/app/shared/users/user.service.ts
+++ b/client/src/app/shared/users/user.service.ts
@@ -1,5 +1,5 @@
-import { from, Observable } from 'rxjs'
-import { catchError, concatMap, map, toArray } from 'rxjs/operators'
+import { from, Observable, of } from 'rxjs'
+import { catchError, concatMap, map, share, shareReplay, tap, toArray } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { ResultList, User, UserCreate, UserRole, UserUpdate, UserUpdateMe, UserVideoQuota } from '../../../../../shared'
@@ -17,6 +17,8 @@ export class UserService {
 
   private bytesPipe = new BytesPipe()
 
+  private userCache: { [ id: number ]: Observable<User> } = {}
+
   constructor (
     private authHttp: HttpClient,
     private restExtractor: RestExtractor,
@@ -194,6 +196,14 @@ export class UserService {
       )
   }
 
+  getUserWithCache (userId: number) {
+    if (!this.userCache[userId]) {
+      this.userCache[ userId ] = this.getUser(userId).pipe(shareReplay())
+    }
+
+    return this.userCache[userId]
+  }
+
   getUser (userId: number) {
     return this.authHttp.get<User>(UserService.BASE_USERS_URL + userId)
                .pipe(catchError(err => this.restExtractor.handleError(err)))
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 4753641bd..246a08435 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,8 +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"
+            buttonSize="small" [account]="commentAccount" [user]="commentUser" i18n-label label="Options" placement="bottom-left auto"
           ></my-user-moderation-dropdown>
         </div>
       </ng-container>
@@ -80,8 +81,8 @@
           ></my-video-comment>
         </div>
       </div>
-    </div>
 
-    <ng-content></ng-content>
+      <ng-content></ng-content>
+    </div>
   </div>
 </div>
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 8c376d654..0c18b6e5d 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
@@ -107,7 +107,7 @@ export class VideoCommentComponent implements OnInit, OnChanges {
 
     const user = this.authService.getUser()
     if (user.hasRight(UserRight.MANAGE_USERS)) {
-      this.userService.getUser(account.userId)
+      this.userService.getUserWithCache(account.userId)
           .subscribe(
             user => this.commentUser = user,