aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2017-12-27 16:11:53 +0100
committerChocobozzz <me@florianbigard.com>2017-12-27 16:11:53 +0100
commit4635f59d7c3fea4b97029f10886c62fdf38b2084 (patch)
treed97357a00042bbfb33c4177ee24c01171d28dfce /client/src/app/videos
parentea44f375f5d3da06ca0aebfe871b9f924a26ec29 (diff)
downloadPeerTube-4635f59d7c3fea4b97029f10886c62fdf38b2084.tar.gz
PeerTube-4635f59d7c3fea4b97029f10886c62fdf38b2084.tar.zst
PeerTube-4635f59d7c3fea4b97029f10886c62fdf38b2084.zip
Add video comment components
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment-add.component.html15
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment-add.component.scss20
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment-add.component.ts84
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.html29
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.scss38
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.ts67
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.model.ts38
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.service.ts93
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comments.component.html31
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comments.component.scss14
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comments.component.ts79
-rw-r--r--client/src/app/videos/+video-watch/modal/video-download.component.html (renamed from client/src/app/videos/+video-watch/video-download.component.html)0
-rw-r--r--client/src/app/videos/+video-watch/modal/video-download.component.scss (renamed from client/src/app/videos/+video-watch/video-download.component.scss)4
-rw-r--r--client/src/app/videos/+video-watch/modal/video-download.component.ts (renamed from client/src/app/videos/+video-watch/video-download.component.ts)2
-rw-r--r--client/src/app/videos/+video-watch/modal/video-report.component.html (renamed from client/src/app/videos/+video-watch/video-report.component.html)0
-rw-r--r--client/src/app/videos/+video-watch/modal/video-report.component.scss (renamed from client/src/app/videos/+video-watch/video-report.component.scss)4
-rw-r--r--client/src/app/videos/+video-watch/modal/video-report.component.ts (renamed from client/src/app/videos/+video-watch/video-report.component.ts)4
-rw-r--r--client/src/app/videos/+video-watch/modal/video-share.component.html (renamed from client/src/app/videos/+video-watch/video-share.component.html)0
-rw-r--r--client/src/app/videos/+video-watch/modal/video-share.component.scss (renamed from client/src/app/videos/+video-watch/video-share.component.scss)0
-rw-r--r--client/src/app/videos/+video-watch/modal/video-share.component.ts (renamed from client/src/app/videos/+video-watch/video-share.component.ts)2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html7
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss4
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts10
-rw-r--r--client/src/app/videos/+video-watch/video-watch.module.ts18
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 @@
1<form novalidate [formGroup]="form" (ngSubmit)="formValidated()">
2 <div class="form-group">
3 <textarea placeholder="Add comment..." formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }">
4 </textarea>
5 <div *ngIf="formErrors.text" class="form-error">
6 {{ formErrors.text }}
7 </div>
8 </div>
9
10 <div class="submit-comment">
11 <button *ngIf="isAddButtonDisplayed()" [ngClass]="{ disabled: !form.valid }">
12 Post comment
13 </button>
14 </div>
15</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 @@
1@import '_variables';
2@import '_mixins';
3
4.form-group {
5 margin-bottom: 10px;
6}
7
8textarea {
9 @include peertube-textarea(100%, 150px);
10}
11
12.submit-comment {
13 display: flex;
14 justify-content: end;
15
16 button {
17 @include peertube-button;
18 @include orange-button
19 }
20}
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 @@
1import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
2import { FormBuilder, FormGroup } from '@angular/forms'
3import { NotificationsService } from 'angular2-notifications'
4import { Observable } from 'rxjs/Observable'
5import { VideoCommentCreate } from '../../../../../../shared/models/videos/video-comment.model'
6import { FormReactive } from '../../../shared'
7import { VIDEO_COMMENT_TEXT } from '../../../shared/forms/form-validators/video-comment'
8import { Video } from '../../../shared/video/video.model'
9import { VideoComment } from './video-comment.model'
10import { VideoCommentService } from './video-comment.service'
11
12@Component({
13 selector: 'my-video-comment-add',
14 templateUrl: './video-comment-add.component.html',
15 styleUrls: ['./video-comment-add.component.scss']
16})
17export class VideoCommentAddComponent extends FormReactive implements OnInit {
18 @Input() video: Video
19 @Input() parentComment: VideoComment
20
21 @Output() commentCreated = new EventEmitter<VideoCommentCreate>()
22
23 form: FormGroup
24 formErrors = {
25 'text': ''
26 }
27 validationMessages = {
28 'text': VIDEO_COMMENT_TEXT.MESSAGES
29 }
30
31 constructor (
32 private formBuilder: FormBuilder,
33 private notificationsService: NotificationsService,
34 private videoCommentService: VideoCommentService
35 ) {
36 super()
37 }
38
39 buildForm () {
40 this.form = this.formBuilder.group({
41 text: [ '', VIDEO_COMMENT_TEXT.VALIDATORS ]
42 })
43
44 this.form.valueChanges.subscribe(data => this.onValueChanged(data))
45 }
46
47 ngOnInit () {
48 this.buildForm()
49 }
50
51 formValidated () {
52 const commentCreate: VideoCommentCreate = this.form.value
53 let obs: Observable<any>
54
55 if (this.parentComment) {
56 obs = this.addCommentReply(commentCreate)
57 } else {
58 obs = this.addCommentThread(commentCreate)
59 }
60
61 obs.subscribe(
62 comment => {
63 this.commentCreated.emit(comment)
64 this.form.reset()
65 },
66
67 err => this.notificationsService.error('Error', err.text)
68 )
69}
70
71 isAddButtonDisplayed () {
72 return this.form.value['text']
73 }
74
75 private addCommentReply (commentCreate: VideoCommentCreate) {
76 return this.videoCommentService
77 .addCommentReply(this.video.id, this.parentComment.id, commentCreate)
78 }
79
80 private addCommentThread (commentCreate: VideoCommentCreate) {
81 return this.videoCommentService
82 .addCommentThread(this.video.id, commentCreate)
83 }
84}
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 @@
1<div class="comment">
2 <div class="comment-account-date">
3 <div class="comment-account">{{ comment.by }}</div>
4 <div class="comment-date">{{ comment.createdAt | myFromNow }}</div>
5 </div>
6 <div>{{ comment.text }}</div>
7
8 <div class="comment-actions">
9 <div *ngIf="isUserLoggedIn()" (click)="onWantToReply()" class="comment-action-reply">Reply</div>
10 </div>
11
12 <my-video-comment-add
13 *ngIf="isUserLoggedIn() && inReplyToCommentId === comment.id" [video]="video" [parentComment]="comment"
14 (commentCreated)="onCommentReplyCreated($event)"
15 ></my-video-comment-add>
16
17 <div *ngIf="commentTree" class="children">
18 <div *ngFor="let commentChild of commentTree.children">
19 <my-video-comment
20 [comment]="commentChild.comment"
21 [video]="video"
22 [inReplyToCommentId]="inReplyToCommentId"
23 [commentTree]="commentChild"
24 (wantedToReply)="onWantedToReply($event)"
25 (resetReply)="onResetReply()"
26 ></my-video-comment>
27 </div>
28 </div>
29</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 @@
1@import '_variables';
2@import '_mixins';
3
4.comment {
5 font-size: 15px;
6 margin-top: 30px;
7
8 .comment-account-date {
9 display: flex;
10 margin-bottom: 4px;
11
12 .comment-account {
13 font-weight: $font-bold;
14 }
15
16 .comment-date {
17 color: #585858;
18 margin-left: 10px;
19 }
20 }
21
22 .comment-actions {
23 margin: 10px 0;
24
25 .comment-action-reply {
26 color: #585858;
27 cursor: pointer;
28 }
29 }
30}
31
32.children {
33 margin-left: 20px;
34
35 .comment {
36 margin-top: 15px;
37 }
38}
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 @@
1import { Component, EventEmitter, Input, Output } from '@angular/core'
2import { NotificationsService } from 'angular2-notifications'
3import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model'
4import { AuthService } from '../../../core/auth'
5import { User } from '../../../shared/users'
6import { Video } from '../../../shared/video/video.model'
7import { VideoComment } from './video-comment.model'
8import { VideoCommentService } from './video-comment.service'
9
10@Component({
11 selector: 'my-video-comment',
12 templateUrl: './video-comment.component.html',
13 styleUrls: ['./video-comment.component.scss']
14})
15export class VideoCommentComponent {
16 @Input() video: Video
17 @Input() comment: VideoComment
18 @Input() commentTree: VideoCommentThreadTree
19 @Input() inReplyToCommentId: number
20
21 @Output() wantedToReply = new EventEmitter<VideoComment>()
22 @Output() resetReply = new EventEmitter()
23
24 constructor (private authService: AuthService,
25 private notificationsService: NotificationsService,
26 private videoCommentService: VideoCommentService) {
27 }
28
29 onCommentReplyCreated (comment: VideoComment) {
30 this.videoCommentService.addCommentReply(this.video.id, this.comment.id, comment)
31 .subscribe(
32 createdComment => {
33 if (!this.commentTree) {
34 this.commentTree = {
35 comment: this.comment,
36 children: []
37 }
38 }
39
40 this.commentTree.children.push({
41 comment: createdComment,
42 children: []
43 })
44 this.resetReply.emit()
45 },
46
47 err => this.notificationsService.error('Error', err.message)
48 )
49 }
50
51 onWantToReply () {
52 this.wantedToReply.emit(this.comment)
53 }
54
55 isUserLoggedIn () {
56 return this.authService.isLoggedIn()
57 }
58
59 // Event from child comment
60 onWantedToReply (comment: VideoComment) {
61 this.wantedToReply.emit(comment)
62 }
63
64 onResetReply () {
65 this.resetReply.emit()
66 }
67}
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 @@
1import { VideoComment as VideoCommentServerModel } from '../../../../../../shared/models/videos/video-comment.model'
2
3export class VideoComment implements VideoCommentServerModel {
4 id: number
5 url: string
6 text: string
7 threadId: number
8 inReplyToCommentId: number
9 videoId: number
10 createdAt: Date | string
11 updatedAt: Date | string
12 account: {
13 name: string
14 host: string
15 }
16 totalReplies: number
17
18 by: string
19
20 private static createByString (account: string, serverHost: string) {
21 return account + '@' + serverHost
22 }
23
24 constructor (hash: VideoCommentServerModel) {
25 this.id = hash.id
26 this.url = hash.url
27 this.text = hash.text
28 this.threadId = hash.threadId
29 this.inReplyToCommentId = hash.inReplyToCommentId
30 this.videoId = hash.videoId
31 this.createdAt = new Date(hash.createdAt.toString())
32 this.updatedAt = new Date(hash.updatedAt.toString())
33 this.account = hash.account
34 this.totalReplies = hash.totalReplies
35
36 this.by = VideoComment.createByString(this.account.name, this.account.host)
37 }
38}
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 @@
1import { HttpClient, HttpParams } from '@angular/common/http'
2import { Injectable } from '@angular/core'
3import 'rxjs/add/operator/catch'
4import 'rxjs/add/operator/map'
5import { Observable } from 'rxjs/Observable'
6import { ResultList } from '../../../../../../shared/models'
7import {
8 VideoComment as VideoCommentServerModel, VideoCommentCreate,
9 VideoCommentThreadTree
10} from '../../../../../../shared/models/videos/video-comment.model'
11import { environment } from '../../../../environments/environment'
12import { RestExtractor, RestService } from '../../../shared/rest'
13import { ComponentPagination } from '../../../shared/rest/component-pagination.model'
14import { SortField } from '../../../shared/video/sort-field.type'
15import { VideoComment } from './video-comment.model'
16
17@Injectable()
18export class VideoCommentService {
19 private static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/'
20
21 constructor (
22 private authHttp: HttpClient,
23 private restExtractor: RestExtractor,
24 private restService: RestService
25 ) {}
26
27 addCommentThread (videoId: number | string, comment: VideoCommentCreate) {
28 const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comment-threads'
29
30 return this.authHttp.post(url, comment)
31 .map(data => this.extractVideoComment(data['comment']))
32 .catch(this.restExtractor.handleError)
33 }
34
35 addCommentReply (videoId: number | string, inReplyToCommentId: number, comment: VideoCommentCreate) {
36 const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comments/' + inReplyToCommentId
37
38 return this.authHttp.post(url, comment)
39 .map(data => this.extractVideoComment(data['comment']))
40 .catch(this.restExtractor.handleError)
41 }
42
43 getVideoCommentThreads (
44 videoId: number | string,
45 componentPagination: ComponentPagination,
46 sort: SortField
47 ): Observable<{ comments: VideoComment[], totalComments: number}> {
48 const pagination = this.restService.componentPaginationToRestPagination(componentPagination)
49
50 let params = new HttpParams()
51 params = this.restService.addRestGetParams(params, pagination, sort)
52
53 const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comment-threads'
54 return this.authHttp
55 .get(url, { params })
56 .map(this.extractVideoComments)
57 .catch((res) => this.restExtractor.handleError(res))
58 }
59
60 getVideoThreadComments (videoId: number | string, threadId: number): Observable<VideoCommentThreadTree> {
61 const url = `${VideoCommentService.BASE_VIDEO_URL + videoId}/comment-threads/${threadId}`
62
63 return this.authHttp
64 .get(url)
65 .map(tree => this.extractVideoCommentTree(tree as VideoCommentThreadTree))
66 .catch((res) => this.restExtractor.handleError(res))
67 }
68
69 private extractVideoComment (videoComment: VideoCommentServerModel) {
70 return new VideoComment(videoComment)
71 }
72
73 private extractVideoComments (result: ResultList<VideoCommentServerModel>) {
74 const videoCommentsJson = result.data
75 const totalComments = result.total
76 const comments = []
77
78 for (const videoCommentJson of videoCommentsJson) {
79 comments.push(new VideoComment(videoCommentJson))
80 }
81
82 return { comments, totalComments }
83 }
84
85 private extractVideoCommentTree (tree: VideoCommentThreadTree) {
86 if (!tree) return tree
87
88 tree.comment = new VideoComment(tree.comment)
89 tree.children.forEach(c => this.extractVideoCommentTree(c))
90
91 return tree
92 }
93}
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 @@
1<div>
2 <div class="title-page title-page-single">
3 Comments
4 </div>
5
6 <my-video-comment-add
7 *ngIf="isUserLoggedIn()"
8 [video]="video"
9 (commentCreated)="onCommentThreadCreated($event)"
10 ></my-video-comment-add>
11
12 <div class="comment-threads">
13 <div *ngFor="let comment of comments">
14 <my-video-comment
15 [comment]="comment"
16 [video]="video"
17 [inReplyToCommentId]="inReplyToCommentId"
18 [commentTree]="threadComments[comment.id]"
19 (wantedToReply)="onWantedToReply($event)"
20 (resetReply)="onResetReply()"
21 ></my-video-comment>
22
23 <div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment)" class="view-replies">
24 View all {{ comment.totalReplies }} replies
25
26 <span *ngIf="!threadLoading[comment.id]" class="glyphicon glyphicon-menu-down"></span>
27 <my-loader class="comment-thread-loading" [loading]="threadLoading[comment.id]"></my-loader>
28 </div>
29 </div>
30 </div>
31</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 @@
1@import '_variables';
2@import '_mixins';
3
4.view-replies {
5 font-weight: $font-semibold;
6 font-size: 15px;
7 cursor: pointer;
8}
9
10.glyphicon, .comment-thread-loading {
11 margin-left: 5px;
12 display: inline-block;
13 font-size: 13px;
14}
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 @@
1import { Component, Input, OnInit } from '@angular/core'
2import { NotificationsService } from 'angular2-notifications'
3import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model'
4import { AuthService } from '../../../core/auth'
5import { ComponentPagination } from '../../../shared/rest/component-pagination.model'
6import { User } from '../../../shared/users'
7import { SortField } from '../../../shared/video/sort-field.type'
8import { Video } from '../../../shared/video/video.model'
9import { VideoComment } from './video-comment.model'
10import { VideoCommentService } from './video-comment.service'
11
12@Component({
13 selector: 'my-video-comments',
14 templateUrl: './video-comments.component.html',
15 styleUrls: ['./video-comments.component.scss']
16})
17export class VideoCommentsComponent implements OnInit {
18 @Input() video: Video
19 @Input() user: User
20
21 comments: VideoComment[] = []
22 sort: SortField = '-createdAt'
23 componentPagination: ComponentPagination = {
24 currentPage: 1,
25 itemsPerPage: 25,
26 totalItems: null
27 }
28 inReplyToCommentId: number
29 threadComments: { [ id: number ]: VideoCommentThreadTree } = {}
30 threadLoading: { [ id: number ]: boolean } = {}
31
32 constructor (
33 private authService: AuthService,
34 private notificationsService: NotificationsService,
35 private videoCommentService: VideoCommentService
36 ) {}
37
38 ngOnInit () {
39 this.videoCommentService.getVideoCommentThreads(this.video.id, this.componentPagination, this.sort)
40 .subscribe(
41 res => {
42 this.comments = res.comments
43 this.componentPagination.totalItems = res.totalComments
44 },
45
46 err => this.notificationsService.error('Error', err.message)
47 )
48 }
49
50 viewReplies (comment: VideoComment) {
51 this.threadLoading[comment.id] = true
52
53 this.videoCommentService.getVideoThreadComments(this.video.id, comment.id)
54 .subscribe(
55 res => {
56 this.threadComments[comment.id] = res
57 this.threadLoading[comment.id] = false
58 },
59
60 err => this.notificationsService.error('Error', err.message)
61 )
62 }
63
64 onCommentThreadCreated (comment: VideoComment) {
65 this.comments.unshift(comment)
66 }
67
68 onWantedToReply (comment: VideoComment) {
69 this.inReplyToCommentId = comment.id
70 }
71
72 onResetReply () {
73 this.inReplyToCommentId = undefined
74 }
75
76 isUserLoggedIn () {
77 return this.authService.isLoggedIn()
78 }
79}
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 @@
1@import '_variables'; 1@import 'variables';
2@import '_mixins'; 2@import 'mixins';
3 3
4.peertube-select-container { 4.peertube-select-container {
5 @include peertube-select-container(130px); 5 @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 @@
1import { Component, Input, OnInit, ViewChild } from '@angular/core' 1import { Component, Input, OnInit, ViewChild } from '@angular/core'
2import { ModalDirective } from 'ngx-bootstrap/modal' 2import { ModalDirective } from 'ngx-bootstrap/modal'
3import { VideoDetails } from '../../shared/video/video-details.model' 3import { VideoDetails } from '../../../shared/video/video-details.model'
4 4
5@Component({ 5@Component({
6 selector: 'my-video-download', 6 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 @@
1@import '_variables'; 1@import 'variables';
2@import '_mixins'; 2@import 'mixins';
3 3
4textarea { 4textarea {
5 @include peertube-textarea(100%, 60px); 5 @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'
2import { FormBuilder, FormGroup } from '@angular/forms' 2import { FormBuilder, FormGroup } from '@angular/forms'
3import { NotificationsService } from 'angular2-notifications' 3import { NotificationsService } from 'angular2-notifications'
4import { ModalDirective } from 'ngx-bootstrap/modal' 4import { ModalDirective } from 'ngx-bootstrap/modal'
5import { FormReactive, VIDEO_ABUSE_REASON, VideoAbuseService } from '../../shared' 5import { FormReactive, VIDEO_ABUSE_REASON, VideoAbuseService } from '../../../shared/index'
6import { VideoDetails } from '../../shared/video/video-details.model' 6import { VideoDetails } from '../../../shared/video/video-details.model'
7 7
8@Component({ 8@Component({
9 selector: 'my-video-report', 9 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'
3import { NotificationsService } from 'angular2-notifications' 3import { NotificationsService } from 'angular2-notifications'
4 4
5import { ModalDirective } from 'ngx-bootstrap/modal' 5import { ModalDirective } from 'ngx-bootstrap/modal'
6import { VideoDetails } from '../../shared/video/video-details.model' 6import { VideoDetails } from '../../../shared/video/video-details.model'
7 7
8@Component({ 8@Component({
9 selector: 'my-video-share', 9 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 @@
54 </a> 54 </a>
55 </li> 55 </li>
56 56
57 <li *ngIf="isVideoUpdatable()" role="menuitem">
58 <a class="dropdown-item" title="Update this video" href="#" [routerLink]="[ '/videos/edit', video.uuid ]">
59 <span class="icon icon-edit"></span> Update
60 </a>
61 </li>
62
57 <li *ngIf="isVideoRemovable()" role="menuitem"> 63 <li *ngIf="isVideoRemovable()" role="menuitem">
58 <a class="dropdown-item" title="Delete this video" href="#" (click)="removeVideo($event)"> 64 <a class="dropdown-item" title="Delete this video" href="#" (click)="removeVideo($event)">
59 <span class="icon icon-blacklist"></span> Delete 65 <span class="icon icon-blacklist"></span> Delete
@@ -149,6 +155,7 @@
149 </div> 155 </div>
150 </div> 156 </div>
151 157
158 <my-video-comments [video]="video" [user]="user"></my-video-comments>
152 </div> 159 </div>
153 160
154 <div class="other-videos"> 161 <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 @@
126 background-image: url('../../../assets/images/video/download-black.svg'); 126 background-image: url('../../../assets/images/video/download-black.svg');
127 } 127 }
128 128
129 &.icon-edit {
130 background-image: url('../../../assets/images/global/edit-black.svg');
131 }
132
129 &.icon-alert { 133 &.icon-alert {
130 background-image: url('../../../assets/images/video/alert.svg'); 134 background-image: url('../../../assets/images/video/alert.svg');
131 } 135 }
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'
14import { Video } from '../../shared/video/video.model' 14import { Video } from '../../shared/video/video.model'
15import { VideoService } from '../../shared/video/video.service' 15import { VideoService } from '../../shared/video/video.service'
16import { MarkdownService } from '../shared' 16import { MarkdownService } from '../shared'
17import { VideoDownloadComponent } from './video-download.component' 17import { VideoDownloadComponent } from './modal/video-download.component'
18import { VideoReportComponent } from './video-report.component' 18import { VideoReportComponent } from './modal/video-report.component'
19import { VideoShareComponent } from './video-share.component' 19import { VideoShareComponent } from './modal/video-share.component'
20 20
21@Component({ 21@Component({
22 selector: 'my-video-watch', 22 selector: 'my-video-watch',
@@ -208,6 +208,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
208 return this.authService.isLoggedIn() 208 return this.authService.isLoggedIn()
209 } 209 }
210 210
211 isVideoUpdatable () {
212 return this.video.isUpdatableBy(this.authService.getUser())
213 }
214
211 isVideoBlacklistable () { 215 isVideoBlacklistable () {
212 return this.video.isBlackistableBy(this.user) 216 return this.video.isBlackistableBy(this.user)
213 } 217 }
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'
3import { ClipboardModule } from 'ngx-clipboard' 3import { ClipboardModule } from 'ngx-clipboard'
4import { SharedModule } from '../../shared' 4import { SharedModule } from '../../shared'
5import { MarkdownService } from '../shared' 5import { MarkdownService } from '../shared'
6import { VideoDownloadComponent } from './video-download.component' 6import { VideoCommentAddComponent } from './comment/video-comment-add.component'
7import { VideoReportComponent } from './video-report.component' 7import { VideoCommentComponent } from './comment/video-comment.component'
8import { VideoShareComponent } from './video-share.component' 8import { VideoCommentService } from './comment/video-comment.service'
9import { VideoCommentsComponent } from './comment/video-comments.component'
10import { VideoDownloadComponent } from './modal/video-download.component'
11import { VideoReportComponent } from './modal/video-report.component'
12import { VideoShareComponent } from './modal/video-share.component'
9 13
10import { VideoWatchRoutingModule } from './video-watch-routing.module' 14import { VideoWatchRoutingModule } from './video-watch-routing.module'
11 15
@@ -24,7 +28,10 @@ import { VideoWatchComponent } from './video-watch.component'
24 28
25 VideoDownloadComponent, 29 VideoDownloadComponent,
26 VideoShareComponent, 30 VideoShareComponent,
27 VideoReportComponent 31 VideoReportComponent,
32 VideoCommentsComponent,
33 VideoCommentAddComponent,
34 VideoCommentComponent
28 ], 35 ],
29 36
30 exports: [ 37 exports: [
@@ -32,7 +39,8 @@ import { VideoWatchComponent } from './video-watch.component'
32 ], 39 ],
33 40
34 providers: [ 41 providers: [
35 MarkdownService 42 MarkdownService,
43 VideoCommentService
36 ] 44 ]
37}) 45})
38export class VideoWatchModule { } 46export class VideoWatchModule { }