Add avatar in comments

12 files changed, 113 insertions, 69 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 365fc8f6c..0eaa0d447 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
@@ -1,9 +1,13 @@
 <form novalidate [formGroup]="form" (ngSubmit)="formValidated()">
-  <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 }}
+  <div class="avatar-and-textarea">
+    <img [src]="getUserAvatarUrl()" alt="Avatar" />
+
+    <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 }}
+      </div>
     </div>
   </div>
 
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
index 9661062e8..37097da72 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
@@ -1,12 +1,25 @@
 @import '_variables';
 @import '_mixins';
 
-.form-group {
+.avatar-and-textarea {
+  display: flex;
   margin-bottom: 10px;
-}
 
-textarea {
-  @include peertube-textarea(100%, 150px);
+  img {
+    @include avatar(36px);
+
+    vertical-align: top;
+    margin-right: 20px;
+  }
+
+  .form-group {
+    flex-grow: 1;
+    margin: 0;
+
+    textarea {
+      @include peertube-textarea(100%, 60px);
+    }
+  }
 }
 
 .submit-comment {
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 a6525987e..27655eca7 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
@@ -5,6 +5,7 @@ import { Observable } from 'rxjs/Observable'
 import { VideoCommentCreate } 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'
 import { Video } from '../../../shared/video/video.model'
 import { VideoComment } from './video-comment.model'
 import { VideoCommentService } from './video-comment.service'
@@ -15,6 +16,7 @@ import { VideoCommentService } from './video-comment.service'
   styleUrls: ['./video-comment-add.component.scss']
 })
 export class VideoCommentAddComponent extends FormReactive implements OnInit {
+  @Input() user: User
   @Input() video: Video
   @Input() parentComment: VideoComment
   @Input() focusOnInit = false
@@ -79,6 +81,10 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
     return this.form.value['text']
   }
 
+  getUserAvatarUrl () {
+    return this.user.getAvatarUrl()
+  }
+
   private addCommentReply (commentCreate: VideoCommentCreate) {
     return this.videoCommentService
       .addCommentReply(this.video.id, this.parentComment.id, commentCreate)
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 ffaf722cd..e9c23929c 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
@@ -1,29 +1,37 @@
-<div class="comment">
-  <div class="comment-account-date">
-    <div class="comment-account">{{ comment.by }}</div>
-    <div class="comment-date">{{ comment.createdAt | myFromNow }}</div>
-  </div>
-  <div>{{ comment.text }}</div>
+<div class="root-comment">
+  <img [src]="getAvatarUrl(comment.account)" alt="Avatar" />
 
-  <div class="comment-actions">
-    <div *ngIf="isUserLoggedIn()" (click)="onWantToReply()" class="comment-action-reply">Reply</div>
-  </div>
+  <div class="comment">
+    <div class="comment-account-date">
+      <div class="comment-account">{{ comment.by }}</div>
+      <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>
 
-  <my-video-comment-add
-    *ngIf="isUserLoggedIn() && inReplyToCommentId === comment.id" [video]="video" [parentComment]="comment" [focusOnInit]="true"
-    (commentCreated)="onCommentReplyCreated($event)"
-  ></my-video-comment-add>
+    <my-video-comment-add
+      *ngIf="isUserLoggedIn() && inReplyToCommentId === comment.id"
+      [user]="user"
+      [video]="video"
+      [parentComment]="comment"
+      [focusOnInit]="true"
+      (commentCreated)="onCommentReplyCreated($event)"
+    ></my-video-comment-add>
 
-  <div *ngIf="commentTree" class="children">
-    <div *ngFor="let commentChild of commentTree.children">
-      <my-video-comment
-        [comment]="commentChild.comment"
-        [video]="video"
-        [inReplyToCommentId]="inReplyToCommentId"
-        [commentTree]="commentChild"
-        (wantedToReply)="onWantedToReply($event)"
-        (resetReply)="onResetReply()"
-      ></my-video-comment>
+    <div *ngIf="commentTree" class="children">
+      <div *ngFor="let commentChild of commentTree.children">
+        <my-video-comment
+          [comment]="commentChild.comment"
+          [video]="video"
+          [inReplyToCommentId]="inReplyToCommentId"
+          [commentTree]="commentChild"
+          (wantedToReply)="onWantedToReply($event)"
+          (resetReply)="onResetReply()"
+        ></my-video-comment>
+      </div>
     </div>
   </div>
 </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 7e1a32f48..aae03ab6d 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
@@ -1,38 +1,41 @@
 @import '_variables';
 @import '_mixins';
 
-.comment {
+.root-comment {
   font-size: 15px;
-  margin-top: 30px;
+  display: flex;
 
-  .comment-account-date {
-    display: flex;
-    margin-bottom: 4px;
+  img {
+    @include avatar(36px);
 
-    .comment-account {
-      font-weight: $font-bold;
-    }
-
-    .comment-date {
-      color: #585858;
-      margin-left: 10px;
-    }
+    margin-top: 5px;
+    margin-right: 20px;
   }
 
-  .comment-actions {
-    margin: 10px 0;
+  .comment {
+    flex-grow: 1;
+
+    .comment-account-date {
+      display: flex;
+      margin-bottom: 4px;
 
-    .comment-action-reply {
-      color: #585858;
-      cursor: pointer;
+      .comment-account {
+        font-weight: $font-bold;
+      }
+
+      .comment-date {
+        color: #585858;
+        margin-left: 10px;
+      }
     }
-  }
-}
 
-.children {
-  margin-left: 20px;
+    .comment-actions {
+      margin: 10px 0;
 
-  .comment {
-    margin-top: 15px;
+      .comment-action-reply {
+        color: #585858;
+        cursor: pointer;
+      }
+    }
   }
 }
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 5af6e3335..b305c639a 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,6 +1,8 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { Account as AccountInterface } from '../../../../../../shared/models/actors'
 import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model'
 import { AuthService } from '../../../core/auth'
+import { Account } from '../../../shared/account/account.model'
 import { Video } from '../../../shared/video/video.model'
 import { VideoComment } from './video-comment.model'
 
@@ -18,7 +20,10 @@ export class VideoCommentComponent {
   @Output() wantedToReply = new EventEmitter<VideoComment>()
   @Output() resetReply = new EventEmitter()
 
-  constructor (private authService: AuthService) {
+  constructor (private authService: AuthService) {}
+
+  get user () {
+    return this.authService.getUser()
   }
 
   onCommentReplyCreated (createdComment: VideoComment) {
@@ -52,4 +57,8 @@ export class VideoCommentComponent {
   onResetReply () {
     this.resetReply.emit()
   }
+
+  getAvatarUrl (account: AccountInterface) {
+    return Account.GET_ACCOUNT_AVATAR_URL(account)
+  }
 }
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.model.ts b/client/src/app/videos/+video-watch/comment/video-comment.model.ts
index df7d5244c..abecae303 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.model.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment.model.ts
@@ -1,3 +1,4 @@
+import { Account } from '../../../../../../shared/models/actors'
 import { VideoComment as VideoCommentServerModel } from '../../../../../../shared/models/videos/video-comment.model'
 
 export class VideoComment implements VideoCommentServerModel {
@@ -9,10 +10,7 @@ export class VideoComment implements VideoCommentServerModel {
   videoId: number
   createdAt: Date | string
   updatedAt: Date | string
-  account: {
-    name: string
-    host: string
-  }
+  account: Account
   totalReplies: number
 
   by: string
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 078900e06..4a4248073 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
@@ -7,6 +7,7 @@
     <my-video-comment-add
       *ngIf="isUserLoggedIn()"
       [video]="video"
+      [user]="user"
       (commentCreated)="onCommentThreadCreated($event)"
     ></my-video-comment-add>
 
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 2f6e4663b..be122eb2c 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
@@ -5,6 +5,7 @@
   font-weight: $font-semibold;
   font-size: 15px;
   cursor: pointer;
+  margin-left: 56px;
 }
 
 .glyphicon, .comment-thread-loading {
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 4d801c970..1230725c1 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
@@ -6,7 +6,6 @@ import { ComponentPagination } from '../../../shared/rest/component-pagination.m
 import { User } from '../../../shared/users'
 import { SortField } from '../../../shared/video/sort-field.type'
 import { VideoDetails } from '../../../shared/video/video-details.model'
-import { Video } from '../../../shared/video/video.model'
 import { VideoComment } from './video-comment.model'
 import { VideoCommentService } from './video-comment.service'
 
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 48d1bb474..514a86e28 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -14,14 +14,16 @@
 
         <div class="video-info-actions">
           <div
-              *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
-              class="action-button action-button-like">
+            *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
+            class="action-button action-button-like"
+          >
             <span class="icon icon-like" title="Like this video" ></span>
           </div>
 
           <div
-              *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
-              class="action-button action-button-dislike">
+            *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
+            class="action-button action-button-dislike"
+          >
             <span class="icon icon-dislike" title="Dislike this video"></span>
           </div>
 
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index c101aa04e..7ebdfc0c4 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -176,9 +176,9 @@
       font-size: 13px;
 
       img {
-        width: 16px;
-        height: 16px;
-        margin-left: 3px;
+        @include avatar(18px);
+
+        margin-left: 7px;
       }
     }