aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-01-03 17:25:47 +0100
committerChocobozzz <me@florianbigard.com>2018-01-03 17:35:00 +0100
commitcf117aaafc1e9ae1ab4c388fc5d2e5ba9349efee (patch)
treeab51ac2f2c7ec8dfc7fcde99565a4430874da599 /client/src/app/videos
parent265ba139ebf56bbdc1c65f6ea4f367774c691fc0 (diff)
downloadPeerTube-cf117aaafc1e9ae1ab4c388fc5d2e5ba9349efee.tar.gz
PeerTube-cf117aaafc1e9ae1ab4c388fc5d2e5ba9349efee.tar.zst
PeerTube-cf117aaafc1e9ae1ab4c388fc5d2e5ba9349efee.zip
Add avatar in comments
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment-add.component.html14
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment-add.component.scss21
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment-add.component.ts6
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.html54
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.scss51
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.ts11
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.model.ts6
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comments.component.html1
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comments.component.scss1
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comments.component.ts1
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html10
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss6
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
8textarea { 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'
5import { VideoCommentCreate } from '../../../../../../shared/models/videos/video-comment.model' 5import { VideoCommentCreate } from '../../../../../../shared/models/videos/video-comment.model'
6import { FormReactive } from '../../../shared' 6import { FormReactive } from '../../../shared'
7import { VIDEO_COMMENT_TEXT } from '../../../shared/forms/form-validators/video-comment' 7import { VIDEO_COMMENT_TEXT } from '../../../shared/forms/form-validators/video-comment'
8import { User } from '../../../shared/users'
8import { Video } from '../../../shared/video/video.model' 9import { Video } from '../../../shared/video/video.model'
9import { VideoComment } from './video-comment.model' 10import { VideoComment } from './video-comment.model'
10import { VideoCommentService } from './video-comment.service' 11import { 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})
17export class VideoCommentAddComponent extends FormReactive implements OnInit { 18export 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 @@
1import { Component, EventEmitter, Input, Output } from '@angular/core' 1import { Component, EventEmitter, Input, Output } from '@angular/core'
2import { Account as AccountInterface } from '../../../../../../shared/models/actors'
2import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model' 3import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model'
3import { AuthService } from '../../../core/auth' 4import { AuthService } from '../../../core/auth'
5import { Account } from '../../../shared/account/account.model'
4import { Video } from '../../../shared/video/video.model' 6import { Video } from '../../../shared/video/video.model'
5import { VideoComment } from './video-comment.model' 7import { 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 @@
1import { Account } from '../../../../../../shared/models/actors'
1import { VideoComment as VideoCommentServerModel } from '../../../../../../shared/models/videos/video-comment.model' 2import { VideoComment as VideoCommentServerModel } from '../../../../../../shared/models/videos/video-comment.model'
2 3
3export class VideoComment implements VideoCommentServerModel { 4export 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
6import { User } from '../../../shared/users' 6import { User } from '../../../shared/users'
7import { SortField } from '../../../shared/video/sort-field.type' 7import { SortField } from '../../../shared/video/sort-field.type'
8import { VideoDetails } from '../../../shared/video/video-details.model' 8import { VideoDetails } from '../../../shared/video/video-details.model'
9import { Video } from '../../../shared/video/video.model'
10import { VideoComment } from './video-comment.model' 9import { VideoComment } from './video-comment.model'
11import { VideoCommentService } from './video-comment.service' 10import { 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