diff options
Diffstat (limited to 'client/src/app/videos/+video-watch')
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 @@ | |||
1 | <form novalidate [formGroup]="form" (ngSubmit)="formValidated()"> | 1 | <form novalidate [formGroup]="form" (ngSubmit)="formValidated()"> |
2 | <div class="form-group"> | 2 | <div class="avatar-and-textarea"> |
3 | <textarea placeholder="Add comment..." formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }" #textarea> | 3 | <img [src]="getUserAvatarUrl()" alt="Avatar" /> |
4 | </textarea> | 4 | |
5 | <div *ngIf="formErrors.text" class="form-error"> | 5 | <div class="form-group"> |
6 | {{ formErrors.text }} | 6 | <textarea placeholder="Add comment..." formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }" #textarea> |
7 | </textarea> | ||
8 | <div *ngIf="formErrors.text" class="form-error"> | ||
9 | {{ formErrors.text }} | ||
10 | </div> | ||
7 | </div> | 11 | </div> |
8 | </div> | 12 | </div> |
9 | 13 | ||
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 @@ | |||
1 | @import '_variables'; | 1 | @import '_variables'; |
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | 3 | ||
4 | .form-group { | 4 | .avatar-and-textarea { |
5 | display: flex; | ||
5 | margin-bottom: 10px; | 6 | margin-bottom: 10px; |
6 | } | ||
7 | 7 | ||
8 | textarea { | 8 | img { |
9 | @include peertube-textarea(100%, 150px); | 9 | @include avatar(36px); |
10 | |||
11 | vertical-align: top; | ||
12 | margin-right: 20px; | ||
13 | } | ||
14 | |||
15 | .form-group { | ||
16 | flex-grow: 1; | ||
17 | margin: 0; | ||
18 | |||
19 | textarea { | ||
20 | @include peertube-textarea(100%, 60px); | ||
21 | } | ||
22 | } | ||
10 | } | 23 | } |
11 | 24 | ||
12 | .submit-comment { | 25 | .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' | |||
5 | import { VideoCommentCreate } from '../../../../../../shared/models/videos/video-comment.model' | 5 | import { VideoCommentCreate } from '../../../../../../shared/models/videos/video-comment.model' |
6 | import { FormReactive } from '../../../shared' | 6 | import { FormReactive } from '../../../shared' |
7 | import { VIDEO_COMMENT_TEXT } from '../../../shared/forms/form-validators/video-comment' | 7 | import { VIDEO_COMMENT_TEXT } from '../../../shared/forms/form-validators/video-comment' |
8 | import { User } from '../../../shared/users' | ||
8 | import { Video } from '../../../shared/video/video.model' | 9 | import { Video } from '../../../shared/video/video.model' |
9 | import { VideoComment } from './video-comment.model' | 10 | import { VideoComment } from './video-comment.model' |
10 | import { VideoCommentService } from './video-comment.service' | 11 | import { VideoCommentService } from './video-comment.service' |
@@ -15,6 +16,7 @@ import { VideoCommentService } from './video-comment.service' | |||
15 | styleUrls: ['./video-comment-add.component.scss'] | 16 | styleUrls: ['./video-comment-add.component.scss'] |
16 | }) | 17 | }) |
17 | export class VideoCommentAddComponent extends FormReactive implements OnInit { | 18 | export class VideoCommentAddComponent extends FormReactive implements OnInit { |
19 | @Input() user: User | ||
18 | @Input() video: Video | 20 | @Input() video: Video |
19 | @Input() parentComment: VideoComment | 21 | @Input() parentComment: VideoComment |
20 | @Input() focusOnInit = false | 22 | @Input() focusOnInit = false |
@@ -79,6 +81,10 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit { | |||
79 | return this.form.value['text'] | 81 | return this.form.value['text'] |
80 | } | 82 | } |
81 | 83 | ||
84 | getUserAvatarUrl () { | ||
85 | return this.user.getAvatarUrl() | ||
86 | } | ||
87 | |||
82 | private addCommentReply (commentCreate: VideoCommentCreate) { | 88 | private addCommentReply (commentCreate: VideoCommentCreate) { |
83 | return this.videoCommentService | 89 | return this.videoCommentService |
84 | .addCommentReply(this.video.id, this.parentComment.id, commentCreate) | 90 | .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 @@ | |||
1 | <div class="comment"> | 1 | <div class="root-comment"> |
2 | <div class="comment-account-date"> | 2 | <img [src]="getAvatarUrl(comment.account)" alt="Avatar" /> |
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 | 3 | ||
8 | <div class="comment-actions"> | 4 | <div class="comment"> |
9 | <div *ngIf="isUserLoggedIn()" (click)="onWantToReply()" class="comment-action-reply">Reply</div> | 5 | <div class="comment-account-date"> |
10 | </div> | 6 | <div class="comment-account">{{ comment.by }}</div> |
7 | <div class="comment-date">{{ comment.createdAt | myFromNow }}</div> | ||
8 | </div> | ||
9 | <div>{{ comment.text }}</div> | ||
10 | |||
11 | <div class="comment-actions"> | ||
12 | <div *ngIf="isUserLoggedIn()" (click)="onWantToReply()" class="comment-action-reply">Reply</div> | ||
13 | </div> | ||
11 | 14 | ||
12 | <my-video-comment-add | 15 | <my-video-comment-add |
13 | *ngIf="isUserLoggedIn() && inReplyToCommentId === comment.id" [video]="video" [parentComment]="comment" [focusOnInit]="true" | 16 | *ngIf="isUserLoggedIn() && inReplyToCommentId === comment.id" |
14 | (commentCreated)="onCommentReplyCreated($event)" | 17 | [user]="user" |
15 | ></my-video-comment-add> | 18 | [video]="video" |
19 | [parentComment]="comment" | ||
20 | [focusOnInit]="true" | ||
21 | (commentCreated)="onCommentReplyCreated($event)" | ||
22 | ></my-video-comment-add> | ||
16 | 23 | ||
17 | <div *ngIf="commentTree" class="children"> | 24 | <div *ngIf="commentTree" class="children"> |
18 | <div *ngFor="let commentChild of commentTree.children"> | 25 | <div *ngFor="let commentChild of commentTree.children"> |
19 | <my-video-comment | 26 | <my-video-comment |
20 | [comment]="commentChild.comment" | 27 | [comment]="commentChild.comment" |
21 | [video]="video" | 28 | [video]="video" |
22 | [inReplyToCommentId]="inReplyToCommentId" | 29 | [inReplyToCommentId]="inReplyToCommentId" |
23 | [commentTree]="commentChild" | 30 | [commentTree]="commentChild" |
24 | (wantedToReply)="onWantedToReply($event)" | 31 | (wantedToReply)="onWantedToReply($event)" |
25 | (resetReply)="onResetReply()" | 32 | (resetReply)="onResetReply()" |
26 | ></my-video-comment> | 33 | ></my-video-comment> |
34 | </div> | ||
27 | </div> | 35 | </div> |
28 | </div> | 36 | </div> |
29 | </div> | 37 | </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 @@ | |||
1 | @import '_variables'; | 1 | @import '_variables'; |
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | 3 | ||
4 | .comment { | 4 | .root-comment { |
5 | font-size: 15px; | 5 | font-size: 15px; |
6 | margin-top: 30px; | 6 | display: flex; |
7 | 7 | ||
8 | .comment-account-date { | 8 | img { |
9 | display: flex; | 9 | @include avatar(36px); |
10 | margin-bottom: 4px; | ||
11 | 10 | ||
12 | .comment-account { | 11 | margin-top: 5px; |
13 | font-weight: $font-bold; | 12 | margin-right: 20px; |
14 | } | ||
15 | |||
16 | .comment-date { | ||
17 | color: #585858; | ||
18 | margin-left: 10px; | ||
19 | } | ||
20 | } | 13 | } |
21 | 14 | ||
22 | .comment-actions { | 15 | .comment { |
23 | margin: 10px 0; | 16 | flex-grow: 1; |
17 | |||
18 | .comment-account-date { | ||
19 | display: flex; | ||
20 | margin-bottom: 4px; | ||
24 | 21 | ||
25 | .comment-action-reply { | 22 | .comment-account { |
26 | color: #585858; | 23 | font-weight: $font-bold; |
27 | cursor: pointer; | 24 | } |
25 | |||
26 | .comment-date { | ||
27 | color: #585858; | ||
28 | margin-left: 10px; | ||
29 | } | ||
28 | } | 30 | } |
29 | } | ||
30 | } | ||
31 | 31 | ||
32 | .children { | 32 | .comment-actions { |
33 | margin-left: 20px; | 33 | margin: 10px 0; |
34 | 34 | ||
35 | .comment { | 35 | .comment-action-reply { |
36 | margin-top: 15px; | 36 | color: #585858; |
37 | cursor: pointer; | ||
38 | } | ||
39 | } | ||
37 | } | 40 | } |
38 | } | 41 | } |
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 @@ | |||
1 | import { Component, EventEmitter, Input, Output } from '@angular/core' | 1 | import { Component, EventEmitter, Input, Output } from '@angular/core' |
2 | import { Account as AccountInterface } from '../../../../../../shared/models/actors' | ||
2 | import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model' | 3 | import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model' |
3 | import { AuthService } from '../../../core/auth' | 4 | import { AuthService } from '../../../core/auth' |
5 | import { Account } from '../../../shared/account/account.model' | ||
4 | import { Video } from '../../../shared/video/video.model' | 6 | import { Video } from '../../../shared/video/video.model' |
5 | import { VideoComment } from './video-comment.model' | 7 | import { VideoComment } from './video-comment.model' |
6 | 8 | ||
@@ -18,7 +20,10 @@ export class VideoCommentComponent { | |||
18 | @Output() wantedToReply = new EventEmitter<VideoComment>() | 20 | @Output() wantedToReply = new EventEmitter<VideoComment>() |
19 | @Output() resetReply = new EventEmitter() | 21 | @Output() resetReply = new EventEmitter() |
20 | 22 | ||
21 | constructor (private authService: AuthService) { | 23 | constructor (private authService: AuthService) {} |
24 | |||
25 | get user () { | ||
26 | return this.authService.getUser() | ||
22 | } | 27 | } |
23 | 28 | ||
24 | onCommentReplyCreated (createdComment: VideoComment) { | 29 | onCommentReplyCreated (createdComment: VideoComment) { |
@@ -52,4 +57,8 @@ export class VideoCommentComponent { | |||
52 | onResetReply () { | 57 | onResetReply () { |
53 | this.resetReply.emit() | 58 | this.resetReply.emit() |
54 | } | 59 | } |
60 | |||
61 | getAvatarUrl (account: AccountInterface) { | ||
62 | return Account.GET_ACCOUNT_AVATAR_URL(account) | ||
63 | } | ||
55 | } | 64 | } |
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 @@ | |||
1 | import { Account } from '../../../../../../shared/models/actors' | ||
1 | import { VideoComment as VideoCommentServerModel } from '../../../../../../shared/models/videos/video-comment.model' | 2 | import { VideoComment as VideoCommentServerModel } from '../../../../../../shared/models/videos/video-comment.model' |
2 | 3 | ||
3 | export class VideoComment implements VideoCommentServerModel { | 4 | export class VideoComment implements VideoCommentServerModel { |
@@ -9,10 +10,7 @@ export class VideoComment implements VideoCommentServerModel { | |||
9 | videoId: number | 10 | videoId: number |
10 | createdAt: Date | string | 11 | createdAt: Date | string |
11 | updatedAt: Date | string | 12 | updatedAt: Date | string |
12 | account: { | 13 | account: Account |
13 | name: string | ||
14 | host: string | ||
15 | } | ||
16 | totalReplies: number | 14 | totalReplies: number |
17 | 15 | ||
18 | by: string | 16 | 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 @@ | |||
7 | <my-video-comment-add | 7 | <my-video-comment-add |
8 | *ngIf="isUserLoggedIn()" | 8 | *ngIf="isUserLoggedIn()" |
9 | [video]="video" | 9 | [video]="video" |
10 | [user]="user" | ||
10 | (commentCreated)="onCommentThreadCreated($event)" | 11 | (commentCreated)="onCommentThreadCreated($event)" |
11 | ></my-video-comment-add> | 12 | ></my-video-comment-add> |
12 | 13 | ||
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 @@ | |||
5 | font-weight: $font-semibold; | 5 | font-weight: $font-semibold; |
6 | font-size: 15px; | 6 | font-size: 15px; |
7 | cursor: pointer; | 7 | cursor: pointer; |
8 | margin-left: 56px; | ||
8 | } | 9 | } |
9 | 10 | ||
10 | .glyphicon, .comment-thread-loading { | 11 | .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 | |||
6 | import { User } from '../../../shared/users' | 6 | import { User } from '../../../shared/users' |
7 | import { SortField } from '../../../shared/video/sort-field.type' | 7 | import { SortField } from '../../../shared/video/sort-field.type' |
8 | import { VideoDetails } from '../../../shared/video/video-details.model' | 8 | import { VideoDetails } from '../../../shared/video/video-details.model' |
9 | import { Video } from '../../../shared/video/video.model' | ||
10 | import { VideoComment } from './video-comment.model' | 9 | import { VideoComment } from './video-comment.model' |
11 | import { VideoCommentService } from './video-comment.service' | 10 | import { VideoCommentService } from './video-comment.service' |
12 | 11 | ||
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 @@ | |||
14 | 14 | ||
15 | <div class="video-info-actions"> | 15 | <div class="video-info-actions"> |
16 | <div | 16 | <div |
17 | *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()" | 17 | *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()" |
18 | class="action-button action-button-like"> | 18 | class="action-button action-button-like" |
19 | > | ||
19 | <span class="icon icon-like" title="Like this video" ></span> | 20 | <span class="icon icon-like" title="Like this video" ></span> |
20 | </div> | 21 | </div> |
21 | 22 | ||
22 | <div | 23 | <div |
23 | *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()" | 24 | *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()" |
24 | class="action-button action-button-dislike"> | 25 | class="action-button action-button-dislike" |
26 | > | ||
25 | <span class="icon icon-dislike" title="Dislike this video"></span> | 27 | <span class="icon icon-dislike" title="Dislike this video"></span> |
26 | </div> | 28 | </div> |
27 | 29 | ||
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 @@ | |||
176 | font-size: 13px; | 176 | font-size: 13px; |
177 | 177 | ||
178 | img { | 178 | img { |
179 | width: 16px; | 179 | @include avatar(18px); |
180 | height: 16px; | 180 | |
181 | margin-left: 3px; | 181 | margin-left: 7px; |
182 | } | 182 | } |
183 | } | 183 | } |
184 | 184 | ||