aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorjonathanraes <jonathanraes@users.noreply.github.com>2018-02-18 09:57:26 +0100
committerChocobozzz <me@florianbigard.com>2018-02-18 09:57:26 +0100
commitd5b53822ae7e1660cebe3a35be5ce76ea73dc1b9 (patch)
tree143c59398130bf8be2e974ca20eaff980b7242d2 /client
parent16f16570978bc57bbe14524e6d0cc27260191bfd (diff)
downloadPeerTube-d5b53822ae7e1660cebe3a35be5ce76ea73dc1b9.tar.gz
PeerTube-d5b53822ae7e1660cebe3a35be5ce76ea73dc1b9.tar.zst
PeerTube-d5b53822ae7e1660cebe3a35be5ce76ea73dc1b9.zip
Issue #168: youtube-like marking of comments (#297)
* youtube-like marking of comments uses GET parameters to mark comments similar to youtube * place link to comment in 'comment-date' * Use a routes to highight a comment
Diffstat (limited to 'client')
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.html3
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.scss7
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.model.ts2
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comments.component.ts26
-rw-r--r--client/src/app/videos/+video-watch/video-watch-routing.module.ts5
5 files changed, 40 insertions, 3 deletions
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 1d325aff9..ec9a236d3 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
@@ -2,9 +2,10 @@
2 <img [src]="getAvatarUrl(comment.account)" alt="Avatar" /> 2 <img [src]="getAvatarUrl(comment.account)" alt="Avatar" />
3 3
4 <div class="comment"> 4 <div class="comment">
5 <span class="marked-comment" *ngIf="comment.marked">Marked comment</span>
5 <div class="comment-account-date"> 6 <div class="comment-account-date">
6 <a target="_blank" [href]="comment.account.url" class="comment-account">{{ comment.by }}</a> 7 <a target="_blank" [href]="comment.account.url" class="comment-account">{{ comment.by }}</a>
7 <div class="comment-date">{{ comment.createdAt | myFromNow }}</div> 8 <a [routerLink]="['/videos/watch', video.uuid, 'comment', comment.id]" class="comment-date">{{ comment.createdAt | myFromNow }}</a>
8 </div> 9 </div>
9 <div class="comment-html" [innerHTML]="sanitizedCommentHTML"></div> 10 <div class="comment-html" [innerHTML]="sanitizedCommentHTML"></div>
10 11
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 8e53dbca8..b03bc73d0 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
@@ -32,6 +32,13 @@
32 } 32 }
33 } 33 }
34 34
35 .marked-comment {
36 background-color: #F5F5F5;
37 padding-left: 3px;
38 padding-right: 3px;
39 font-size: 12px;
40 }
41
35 .comment-html { 42 .comment-html {
36 a { 43 a {
37 @include disable-default-a-behaviour; 44 @include disable-default-a-behaviour;
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 4c5971f54..d7b03521a 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
@@ -13,8 +13,8 @@ export class VideoComment implements VideoCommentServerModel {
13 updatedAt: Date | string 13 updatedAt: Date | string
14 account: AccountInterface 14 account: AccountInterface
15 totalReplies: number 15 totalReplies: number
16
17 by: string 16 by: string
17 marked = false
18 18
19 constructor (hash: VideoCommentServerModel) { 19 constructor (hash: VideoCommentServerModel) {
20 this.id = hash.id 20 this.id = hash.id
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 7ca3bafb5..7970a5dcf 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
@@ -9,6 +9,7 @@ import { SortField } from '../../../shared/video/sort-field.type'
9import { VideoDetails } from '../../../shared/video/video-details.model' 9import { VideoDetails } from '../../../shared/video/video-details.model'
10import { VideoComment } from './video-comment.model' 10import { VideoComment } from './video-comment.model'
11import { VideoCommentService } from './video-comment.service' 11import { VideoCommentService } from './video-comment.service'
12import { ActivatedRoute } from '@angular/router'
12 13
13@Component({ 14@Component({
14 selector: 'my-video-comments', 15 selector: 'my-video-comments',
@@ -29,12 +30,14 @@ export class VideoCommentsComponent implements OnChanges {
29 inReplyToCommentId: number 30 inReplyToCommentId: number
30 threadComments: { [ id: number ]: VideoCommentThreadTree } = {} 31 threadComments: { [ id: number ]: VideoCommentThreadTree } = {}
31 threadLoading: { [ id: number ]: boolean } = {} 32 threadLoading: { [ id: number ]: boolean } = {}
33 markedCommentID: number
32 34
33 constructor ( 35 constructor (
34 private authService: AuthService, 36 private authService: AuthService,
35 private notificationsService: NotificationsService, 37 private notificationsService: NotificationsService,
36 private confirmService: ConfirmService, 38 private confirmService: ConfirmService,
37 private videoCommentService: VideoCommentService 39 private videoCommentService: VideoCommentService,
40 private activatedRoute: ActivatedRoute
38 ) {} 41 ) {}
39 42
40 ngOnChanges (changes: SimpleChanges) { 43 ngOnChanges (changes: SimpleChanges) {
@@ -63,6 +66,18 @@ export class VideoCommentsComponent implements OnChanges {
63 res => { 66 res => {
64 this.comments = this.comments.concat(res.comments) 67 this.comments = this.comments.concat(res.comments)
65 this.componentPagination.totalItems = res.totalComments 68 this.componentPagination.totalItems = res.totalComments
69
70 if (this.markedCommentID) {
71 // If there is a marked comment, retrieve it separately as it may not be on this page, filter to prevent duplicate
72 this.comments = this.comments.filter(value => value.id !== this.markedCommentID)
73 this.videoCommentService.getVideoThreadComments(this.video.id, this.markedCommentID).subscribe(
74 res => {
75 let comment = new VideoComment(res.comment)
76 comment.marked = true
77 this.comments.unshift(comment) // Insert marked comment at the beginning
78 }
79 )
80 }
66 }, 81 },
67 82
68 err => this.notificationsService.error('Error', err.message) 83 err => this.notificationsService.error('Error', err.message)
@@ -163,6 +178,15 @@ export class VideoCommentsComponent implements OnChanges {
163 this.componentPagination.currentPage = 1 178 this.componentPagination.currentPage = 1
164 this.componentPagination.totalItems = null 179 this.componentPagination.totalItems = null
165 180
181 // Find marked comment in params
182 this.activatedRoute.params.subscribe(
183 params => {
184 if (params['commentId']) {
185 this.markedCommentID = +params['commentId']
186 }
187 }
188 )
189
166 this.loadMoreComments() 190 this.loadMoreComments()
167 } 191 }
168 } 192 }
diff --git a/client/src/app/videos/+video-watch/video-watch-routing.module.ts b/client/src/app/videos/+video-watch/video-watch-routing.module.ts
index bdd4f945e..72f76ab46 100644
--- a/client/src/app/videos/+video-watch/video-watch-routing.module.ts
+++ b/client/src/app/videos/+video-watch/video-watch-routing.module.ts
@@ -10,6 +10,11 @@ const videoWatchRoutes: Routes = [
10 path: '', 10 path: '',
11 component: VideoWatchComponent, 11 component: VideoWatchComponent,
12 canActivate: [ MetaGuard ] 12 canActivate: [ MetaGuard ]
13 },
14 {
15 path: 'comment/:commentId',
16 component: VideoWatchComponent,
17 canActivate: [ MetaGuard ]
13 } 18 }
14] 19]
15 20