Add video comment components

24 files changed, 547 insertions, 16 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
new file mode 100644
index 000000000..792053614
--- /dev/null
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
@@ -0,0 +1,15 @@
+<form novalidate [formGroup]="form" (ngSubmit)="formValidated()">
+  <div class="form-group">
+    <textarea placeholder="Add comment..." formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }">
+    </textarea>
+    <div *ngIf="formErrors.text" class="form-error">
+      {{ formErrors.text }}
+    </div>
+  </div>
+
+  <div class="submit-comment">
+    <button *ngIf="isAddButtonDisplayed()" [ngClass]="{ disabled: !form.valid }">
+      Post comment
+    </button>
+  </div>
+</form>
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
new file mode 100644
index 000000000..9661062e8
--- /dev/null
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
@@ -0,0 +1,20 @@
+@import '_variables';
+@import '_mixins';
+
+.form-group {
+  margin-bottom: 10px;
+}
+
+textarea {
+  @include peertube-textarea(100%, 150px);
+}
+
+.submit-comment {
+  display: flex;
+  justify-content: end;
+
+  button {
+    @include peertube-button;
+    @include orange-button
+  }
+}
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
new file mode 100644
index 000000000..5ad83fc47
--- /dev/null
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
@@ -0,0 +1,84 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+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 { FormReactive } from '../../../shared'
+import { VIDEO_COMMENT_TEXT } from '../../../shared/forms/form-validators/video-comment'
+import { Video } from '../../../shared/video/video.model'
+import { VideoComment } from './video-comment.model'
+import { VideoCommentService } from './video-comment.service'
+
+@Component({
+  selector: 'my-video-comment-add',
+  templateUrl: './video-comment-add.component.html',
+  styleUrls: ['./video-comment-add.component.scss']
+})
+export class VideoCommentAddComponent extends FormReactive implements OnInit {
+  @Input() video: Video
+  @Input() parentComment: VideoComment
+
+  @Output() commentCreated = new EventEmitter<VideoCommentCreate>()
+
+  form: FormGroup
+  formErrors = {
+    'text': ''
+  }
+  validationMessages = {
+    'text': VIDEO_COMMENT_TEXT.MESSAGES
+  }
+
+  constructor (
+    private formBuilder: FormBuilder,
+    private notificationsService: NotificationsService,
+    private videoCommentService: VideoCommentService
+  ) {
+    super()
+  }
+
+  buildForm () {
+    this.form = this.formBuilder.group({
+      text: [ '', VIDEO_COMMENT_TEXT.VALIDATORS ]
+    })
+
+    this.form.valueChanges.subscribe(data => this.onValueChanged(data))
+  }
+
+  ngOnInit () {
+    this.buildForm()
+  }
+
+  formValidated () {
+    const commentCreate: VideoCommentCreate = this.form.value
+    let obs: Observable<any>
+
+    if (this.parentComment) {
+      obs = this.addCommentReply(commentCreate)
+    } else {
+      obs = this.addCommentThread(commentCreate)
+    }
+
+    obs.subscribe(
+      comment => {
+        this.commentCreated.emit(comment)
+        this.form.reset()
+      },
+
+      err => this.notificationsService.error('Error', err.text)
+    )
+}
+
+  isAddButtonDisplayed () {
+    return this.form.value['text']
+  }
+
+  private addCommentReply (commentCreate: VideoCommentCreate) {
+    return this.videoCommentService
+      .addCommentReply(this.video.id, this.parentComment.id, commentCreate)
+  }
+
+  private addCommentThread (commentCreate: VideoCommentCreate) {
+    return this.videoCommentService
+      .addCommentThread(this.video.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
new file mode 100644
index 000000000..9608a1033
--- /dev/null
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.html
@@ -0,0 +1,29 @@
+<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"
+    (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>
+  </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
new file mode 100644
index 000000000..7e1a32f48
--- /dev/null
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
@@ -0,0 +1,38 @@
+@import '_variables';
+@import '_mixins';
+
+.comment {
+  font-size: 15px;
+  margin-top: 30px;
+
+  .comment-account-date {
+    display: flex;
+    margin-bottom: 4px;
+
+    .comment-account {
+      font-weight: $font-bold;
+    }
+
+    .comment-date {
+      color: #585858;
+      margin-left: 10px;
+    }
+  }
+
+  .comment-actions {
+    margin: 10px 0;
+
+    .comment-action-reply {
+      color: #585858;
+      cursor: pointer;
+    }
+  }
+}
+
+.children {
+  margin-left: 20px;
+
+  .comment {
+    margin-top: 15px;
+  }
+}
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
new file mode 100644
index 000000000..b8e2acd52
--- /dev/null
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.ts
@@ -0,0 +1,67 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { NotificationsService } from 'angular2-notifications'
+import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model'
+import { AuthService } from '../../../core/auth'
+import { User } from '../../../shared/users'
+import { Video } from '../../../shared/video/video.model'
+import { VideoComment } from './video-comment.model'
+import { VideoCommentService } from './video-comment.service'
+
+@Component({
+  selector: 'my-video-comment',
+  templateUrl: './video-comment.component.html',
+  styleUrls: ['./video-comment.component.scss']
+})
+export class VideoCommentComponent {
+  @Input() video: Video
+  @Input() comment: VideoComment
+  @Input() commentTree: VideoCommentThreadTree
+  @Input() inReplyToCommentId: number
+
+  @Output() wantedToReply = new EventEmitter<VideoComment>()
+  @Output() resetReply = new EventEmitter()
+
+  constructor (private authService: AuthService,
+               private notificationsService: NotificationsService,
+               private videoCommentService: VideoCommentService) {
+  }
+
+  onCommentReplyCreated (comment: VideoComment) {
+    this.videoCommentService.addCommentReply(this.video.id, this.comment.id, comment)
+      .subscribe(
+        createdComment => {
+          if (!this.commentTree) {
+            this.commentTree = {
+              comment: this.comment,
+              children: []
+            }
+          }
+
+          this.commentTree.children.push({
+            comment: createdComment,
+            children: []
+          })
+          this.resetReply.emit()
+        },
+
+        err => this.notificationsService.error('Error', err.message)
+      )
+  }
+
+  onWantToReply () {
+    this.wantedToReply.emit(this.comment)
+  }
+
+  isUserLoggedIn () {
+    return this.authService.isLoggedIn()
+  }
+
+  // Event from child comment
+  onWantedToReply (comment: VideoComment) {
+    this.wantedToReply.emit(comment)
+  }
+
+  onResetReply () {
+    this.resetReply.emit()
+  }
+}
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
new file mode 100644
index 000000000..df7d5244c
--- /dev/null
+++ b/client/src/app/videos/+video-watch/comment/video-comment.model.ts
@@ -0,0 +1,38 @@
+import { VideoComment as VideoCommentServerModel } from '../../../../../../shared/models/videos/video-comment.model'
+
+export class VideoComment implements VideoCommentServerModel {
+  id: number
+  url: string
+  text: string
+  threadId: number
+  inReplyToCommentId: number
+  videoId: number
+  createdAt: Date | string
+  updatedAt: Date | string
+  account: {
+    name: string
+    host: string
+  }
+  totalReplies: number
+
+  by: string
+
+  private static createByString (account: string, serverHost: string) {
+    return account + '@' + serverHost
+  }
+
+  constructor (hash: VideoCommentServerModel) {
+    this.id = hash.id
+    this.url = hash.url
+    this.text = hash.text
+    this.threadId = hash.threadId
+    this.inReplyToCommentId = hash.inReplyToCommentId
+    this.videoId = hash.videoId
+    this.createdAt = new Date(hash.createdAt.toString())
+    this.updatedAt = new Date(hash.updatedAt.toString())
+    this.account = hash.account
+    this.totalReplies = hash.totalReplies
+
+    this.by = VideoComment.createByString(this.account.name, this.account.host)
+  }
+}
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
new file mode 100644
index 000000000..2fe6cc3e9
--- /dev/null
+++ b/client/src/app/videos/+video-watch/comment/video-comment.service.ts
@@ -0,0 +1,93 @@
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import 'rxjs/add/operator/catch'
+import 'rxjs/add/operator/map'
+import { Observable } from 'rxjs/Observable'
+import { ResultList } from '../../../../../../shared/models'
+import {
+  VideoComment as VideoCommentServerModel, VideoCommentCreate,
+  VideoCommentThreadTree
+} from '../../../../../../shared/models/videos/video-comment.model'
+import { environment } from '../../../../environments/environment'
+import { RestExtractor, RestService } from '../../../shared/rest'
+import { ComponentPagination } from '../../../shared/rest/component-pagination.model'
+import { SortField } from '../../../shared/video/sort-field.type'
+import { VideoComment } from './video-comment.model'
+
+@Injectable()
+export class VideoCommentService {
+  private static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor,
+    private restService: RestService
+  ) {}
+
+  addCommentThread (videoId: number | string, comment: VideoCommentCreate) {
+    const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comment-threads'
+
+    return this.authHttp.post(url, comment)
+      .map(data => this.extractVideoComment(data['comment']))
+      .catch(this.restExtractor.handleError)
+  }
+
+  addCommentReply (videoId: number | string, inReplyToCommentId: number, comment: VideoCommentCreate) {
+    const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comments/' + inReplyToCommentId
+
+    return this.authHttp.post(url, comment)
+      .map(data => this.extractVideoComment(data['comment']))
+      .catch(this.restExtractor.handleError)
+  }
+
+  getVideoCommentThreads (
+    videoId: number | string,
+    componentPagination: ComponentPagination,
+    sort: SortField
+  ): Observable<{ comments: VideoComment[], totalComments: number}> {
+    const pagination = this.restService.componentPaginationToRestPagination(componentPagination)
+
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+
+    const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comment-threads'
+    return this.authHttp
+      .get(url, { params })
+      .map(this.extractVideoComments)
+      .catch((res) => this.restExtractor.handleError(res))
+  }
+
+  getVideoThreadComments (videoId: number | string, threadId: number): Observable<VideoCommentThreadTree> {
+    const url = `${VideoCommentService.BASE_VIDEO_URL + videoId}/comment-threads/${threadId}`
+
+    return this.authHttp
+      .get(url)
+      .map(tree => this.extractVideoCommentTree(tree as VideoCommentThreadTree))
+      .catch((res) => this.restExtractor.handleError(res))
+  }
+
+  private extractVideoComment (videoComment: VideoCommentServerModel) {
+    return new VideoComment(videoComment)
+  }
+
+  private extractVideoComments (result: ResultList<VideoCommentServerModel>) {
+    const videoCommentsJson = result.data
+    const totalComments = result.total
+    const comments = []
+
+    for (const videoCommentJson of videoCommentsJson) {
+      comments.push(new VideoComment(videoCommentJson))
+    }
+
+    return { comments, totalComments }
+  }
+
+  private extractVideoCommentTree (tree: VideoCommentThreadTree) {
+    if (!tree) return tree
+
+    tree.comment = new VideoComment(tree.comment)
+    tree.children.forEach(c => this.extractVideoCommentTree(c))
+
+    return tree
+  }
+}
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
new file mode 100644
index 000000000..9d7581269
--- /dev/null
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.html
@@ -0,0 +1,31 @@
+<div>
+  <div class="title-page title-page-single">
+    Comments
+  </div>
+
+  <my-video-comment-add
+    *ngIf="isUserLoggedIn()"
+    [video]="video"
+    (commentCreated)="onCommentThreadCreated($event)"
+  ></my-video-comment-add>
+
+  <div class="comment-threads">
+    <div *ngFor="let comment of comments">
+      <my-video-comment
+        [comment]="comment"
+        [video]="video"
+        [inReplyToCommentId]="inReplyToCommentId"
+        [commentTree]="threadComments[comment.id]"
+        (wantedToReply)="onWantedToReply($event)"
+        (resetReply)="onResetReply()"
+      ></my-video-comment>
+
+      <div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment)" class="view-replies">
+        View all {{ comment.totalReplies }} replies
+
+        <span *ngIf="!threadLoading[comment.id]" class="glyphicon glyphicon-menu-down"></span>
+        <my-loader class="comment-thread-loading" [loading]="threadLoading[comment.id]"></my-loader>
+      </div>
+    </div>
+  </div>
+</div>
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
new file mode 100644
index 000000000..2f6e4663b
--- /dev/null
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
@@ -0,0 +1,14 @@
+@import '_variables';
+@import '_mixins';
+
+.view-replies {
+  font-weight: $font-semibold;
+  font-size: 15px;
+  cursor: pointer;
+}
+
+.glyphicon, .comment-thread-loading {
+  margin-left: 5px;
+  display: inline-block;
+  font-size: 13px;
+}
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
new file mode 100644
index 000000000..32e0f2fbd
--- /dev/null
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.ts
@@ -0,0 +1,79 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { NotificationsService } from 'angular2-notifications'
+import { 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'
+import { SortField } from '../../../shared/video/sort-field.type'
+import { Video } from '../../../shared/video/video.model'
+import { VideoComment } from './video-comment.model'
+import { VideoCommentService } from './video-comment.service'
+
+@Component({
+  selector: 'my-video-comments',
+  templateUrl: './video-comments.component.html',
+  styleUrls: ['./video-comments.component.scss']
+})
+export class VideoCommentsComponent implements OnInit {
+  @Input() video: Video
+  @Input() user: User
+
+  comments: VideoComment[] = []
+  sort: SortField = '-createdAt'
+  componentPagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 25,
+    totalItems: null
+  }
+  inReplyToCommentId: number
+  threadComments: { [ id: number ]: VideoCommentThreadTree } = {}
+  threadLoading: { [ id: number ]: boolean } = {}
+
+  constructor (
+    private authService: AuthService,
+    private notificationsService: NotificationsService,
+    private videoCommentService: VideoCommentService
+  ) {}
+
+  ngOnInit () {
+    this.videoCommentService.getVideoCommentThreads(this.video.id, this.componentPagination, this.sort)
+      .subscribe(
+        res => {
+          this.comments = res.comments
+          this.componentPagination.totalItems = res.totalComments
+        },
+
+        err => this.notificationsService.error('Error', err.message)
+      )
+  }
+
+  viewReplies (comment: VideoComment) {
+    this.threadLoading[comment.id] = true
+
+    this.videoCommentService.getVideoThreadComments(this.video.id, comment.id)
+      .subscribe(
+        res => {
+          this.threadComments[comment.id] = res
+          this.threadLoading[comment.id] = false
+        },
+
+        err => this.notificationsService.error('Error', err.message)
+      )
+  }
+
+  onCommentThreadCreated (comment: VideoComment) {
+    this.comments.unshift(comment)
+  }
+
+  onWantedToReply (comment: VideoComment) {
+    this.inReplyToCommentId = comment.id
+  }
+
+  onResetReply () {
+    this.inReplyToCommentId = undefined
+  }
+
+  isUserLoggedIn () {
+    return this.authService.isLoggedIn()
+  }
+}
diff --git a/client/src/app/videos/+video-watch/video-download.component.html b/client/src/app/videos/+video-watch/modal/video-download.component.html
index f8f17a471..f8f17a471 100644
--- a/client/src/app/videos/+video-watch/video-download.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-download.component.html
diff --git a/client/src/app/videos/+video-watch/video-download.component.scss b/client/src/app/videos/+video-watch/modal/video-download.component.scss
index 5fca82135..6325f67a3 100644
--- a/client/src/app/videos/+video-watch/video-download.component.scss
+++ b/client/src/app/videos/+video-watch/modal/video-download.component.scss
@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@import 'variables';
+@import 'mixins';
 
 .peertube-select-container {
   @include peertube-select-container(130px);
diff --git a/client/src/app/videos/+video-watch/video-download.component.ts b/client/src/app/videos/+video-watch/modal/video-download.component.ts
index 44ece986c..1a73ea6df 100644
--- a/client/src/app/videos/+video-watch/video-download.component.ts
+++ b/client/src/app/videos/+video-watch/modal/video-download.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core'
 import { ModalDirective } from 'ngx-bootstrap/modal'
-import { VideoDetails } from '../../shared/video/video-details.model'
+import { VideoDetails } from '../../../shared/video/video-details.model'
 
 @Component({
   selector: 'my-video-download',
diff --git a/client/src/app/videos/+video-watch/video-report.component.html b/client/src/app/videos/+video-watch/modal/video-report.component.html
index a9a7beb48..a9a7beb48 100644
--- a/client/src/app/videos/+video-watch/video-report.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-report.component.html
diff --git a/client/src/app/videos/+video-watch/video-report.component.scss b/client/src/app/videos/+video-watch/modal/video-report.component.scss
index 09d273b35..84562f15c 100644
--- a/client/src/app/videos/+video-watch/video-report.component.scss
+++ b/client/src/app/videos/+video-watch/modal/video-report.component.scss
@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@import 'variables';
+@import 'mixins';
 
 textarea {
   @include peertube-textarea(100%, 60px);
diff --git a/client/src/app/videos/+video-watch/video-report.component.ts b/client/src/app/videos/+video-watch/modal/video-report.component.ts
index ece14754a..050e827e7 100644
--- a/client/src/app/videos/+video-watch/video-report.component.ts
+++ b/client/src/app/videos/+video-watch/modal/video-report.component.ts
@@ -2,8 +2,8 @@ import { Component, Input, OnInit, ViewChild } from '@angular/core'
 import { FormBuilder, FormGroup } from '@angular/forms'
 import { NotificationsService } from 'angular2-notifications'
 import { ModalDirective } from 'ngx-bootstrap/modal'
-import { FormReactive, VIDEO_ABUSE_REASON, VideoAbuseService } from '../../shared'
-import { VideoDetails } from '../../shared/video/video-details.model'
+import { FormReactive, VIDEO_ABUSE_REASON, VideoAbuseService } from '../../../shared/index'
+import { VideoDetails } from '../../../shared/video/video-details.model'
 
 @Component({
   selector: 'my-video-report',
diff --git a/client/src/app/videos/+video-watch/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html
index 85cf10a6c..85cf10a6c 100644
--- a/client/src/app/videos/+video-watch/video-share.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.html
diff --git a/client/src/app/videos/+video-watch/video-share.component.scss b/client/src/app/videos/+video-watch/modal/video-share.component.scss
index 184e09027..184e09027 100644
--- a/client/src/app/videos/+video-watch/video-share.component.scss
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.scss
diff --git a/client/src/app/videos/+video-watch/video-share.component.ts b/client/src/app/videos/+video-watch/modal/video-share.component.ts
index 0664c28be..678cccfb5 100644
--- a/client/src/app/videos/+video-watch/video-share.component.ts
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.ts
@@ -3,7 +3,7 @@ import { Component, Input, ViewChild } from '@angular/core'
 import { NotificationsService } from 'angular2-notifications'
 
 import { ModalDirective } from 'ngx-bootstrap/modal'
-import { VideoDetails } from '../../shared/video/video-details.model'
+import { VideoDetails } from '../../../shared/video/video-details.model'
 
 @Component({
   selector: 'my-video-share',
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 860edecd2..48d1bb474 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -54,6 +54,12 @@
                 </a>
               </li>
 
+              <li *ngIf="isVideoUpdatable()" role="menuitem">
+                <a class="dropdown-item" title="Update this video" href="#" [routerLink]="[ '/videos/edit', video.uuid ]">
+                  <span class="icon icon-edit"></span> Update
+                </a>
+              </li>
+
               <li *ngIf="isVideoRemovable()" role="menuitem">
                 <a class="dropdown-item" title="Delete this video" href="#" (click)="removeVideo($event)">
                   <span class="icon icon-blacklist"></span> Delete
@@ -149,6 +155,7 @@
         </div>
       </div>
 
+      <my-video-comments [video]="video" [user]="user"></my-video-comments>
     </div>
 
     <div class="other-videos">
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 b37fa3d61..c101aa04e 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -126,6 +126,10 @@
                 background-image: url('../../../assets/images/video/download-black.svg');
               }
 
+              &.icon-edit {
+                background-image: url('../../../assets/images/global/edit-black.svg');
+              }
+
               &.icon-alert {
                 background-image: url('../../../assets/images/video/alert.svg');
               }
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 c388b138b..4afd6160c 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -14,9 +14,9 @@ import { VideoDetails } from '../../shared/video/video-details.model'
 import { Video } from '../../shared/video/video.model'
 import { VideoService } from '../../shared/video/video.service'
 import { MarkdownService } from '../shared'
-import { VideoDownloadComponent } from './video-download.component'
-import { VideoReportComponent } from './video-report.component'
-import { VideoShareComponent } from './video-share.component'
+import { VideoDownloadComponent } from './modal/video-download.component'
+import { VideoReportComponent } from './modal/video-report.component'
+import { VideoShareComponent } from './modal/video-share.component'
 
 @Component({
   selector: 'my-video-watch',
@@ -208,6 +208,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return this.authService.isLoggedIn()
   }
 
+  isVideoUpdatable () {
+    return this.video.isUpdatableBy(this.authService.getUser())
+  }
+
   isVideoBlacklistable () {
     return this.video.isBlackistableBy(this.user)
   }
diff --git a/client/src/app/videos/+video-watch/video-watch.module.ts b/client/src/app/videos/+video-watch/video-watch.module.ts
index e77883472..085a9ec5a 100644
--- a/client/src/app/videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/videos/+video-watch/video-watch.module.ts
@@ -3,9 +3,13 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip'
 import { ClipboardModule } from 'ngx-clipboard'
 import { SharedModule } from '../../shared'
 import { MarkdownService } from '../shared'
-import { VideoDownloadComponent } from './video-download.component'
-import { VideoReportComponent } from './video-report.component'
-import { VideoShareComponent } from './video-share.component'
+import { VideoCommentAddComponent } from './comment/video-comment-add.component'
+import { VideoCommentComponent } from './comment/video-comment.component'
+import { VideoCommentService } from './comment/video-comment.service'
+import { VideoCommentsComponent } from './comment/video-comments.component'
+import { VideoDownloadComponent } from './modal/video-download.component'
+import { VideoReportComponent } from './modal/video-report.component'
+import { VideoShareComponent } from './modal/video-share.component'
 
 import { VideoWatchRoutingModule } from './video-watch-routing.module'
 
@@ -24,7 +28,10 @@ import { VideoWatchComponent } from './video-watch.component'
 
     VideoDownloadComponent,
     VideoShareComponent,
-    VideoReportComponent
+    VideoReportComponent,
+    VideoCommentsComponent,
+    VideoCommentAddComponent,
+    VideoCommentComponent
   ],
 
   exports: [
@@ -32,7 +39,8 @@ import { VideoWatchComponent } from './video-watch.component'
   ],
 
   providers: [
-    MarkdownService
+    MarkdownService,
+    VideoCommentService
   ]
 })
 export class VideoWatchModule { }