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

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 @@
   <img [src]="getAvatarUrl(comment.account)" alt="Avatar" />
 
   <div class="comment">
+    <span class="marked-comment" *ngIf="comment.marked">Marked comment</span>
     <div class="comment-account-date">
       <a target="_blank" [href]="comment.account.url" class="comment-account">{{ comment.by }}</a>
-      <div class="comment-date">{{ comment.createdAt | myFromNow }}</div>
+      <a [routerLink]="['/videos/watch', video.uuid, 'comment', comment.id]" class="comment-date">{{ comment.createdAt | myFromNow }}</a>
     </div>
     <div class="comment-html" [innerHTML]="sanitizedCommentHTML"></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 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 @@
       }
     }
 
+    .marked-comment {
+      background-color: #F5F5F5;
+      padding-left: 3px;
+      padding-right: 3px;
+      font-size: 12px;
+    }
+
     .comment-html {
       a {
         @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 {
   updatedAt: Date | string
   account: AccountInterface
   totalReplies: number
-
   by: string
+  marked = false
 
   constructor (hash: VideoCommentServerModel) {
     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'
 import { VideoDetails } from '../../../shared/video/video-details.model'
 import { VideoComment } from './video-comment.model'
 import { VideoCommentService } from './video-comment.service'
+import { ActivatedRoute } from '@angular/router'
 
 @Component({
   selector: 'my-video-comments',
@@ -29,12 +30,14 @@ export class VideoCommentsComponent implements OnChanges {
   inReplyToCommentId: number
   threadComments: { [ id: number ]: VideoCommentThreadTree } = {}
   threadLoading: { [ id: number ]: boolean } = {}
+  markedCommentID: number
 
   constructor (
     private authService: AuthService,
     private notificationsService: NotificationsService,
     private confirmService: ConfirmService,
-    private videoCommentService: VideoCommentService
+    private videoCommentService: VideoCommentService,
+    private activatedRoute: ActivatedRoute
   ) {}
 
   ngOnChanges (changes: SimpleChanges) {
@@ -63,6 +66,18 @@ export class VideoCommentsComponent implements OnChanges {
         res => {
           this.comments = this.comments.concat(res.comments)
           this.componentPagination.totalItems = res.totalComments
+
+          if (this.markedCommentID) {
+            // If there is a marked comment, retrieve it separately as it may not be on this page, filter to prevent duplicate
+            this.comments = this.comments.filter(value => value.id !== this.markedCommentID)
+            this.videoCommentService.getVideoThreadComments(this.video.id, this.markedCommentID).subscribe(
+              res => {
+                let comment = new VideoComment(res.comment)
+                comment.marked = true
+                this.comments.unshift(comment) // Insert marked comment at the beginning
+              }
+            )
+          }
         },
 
         err => this.notificationsService.error('Error', err.message)
@@ -163,6 +178,15 @@ export class VideoCommentsComponent implements OnChanges {
       this.componentPagination.currentPage = 1
       this.componentPagination.totalItems = null
 
+      // Find marked comment in params
+      this.activatedRoute.params.subscribe(
+        params => {
+          if (params['commentId']) {
+            this.markedCommentID = +params['commentId']
+          }
+        }
+      )
+
       this.loadMoreComments()
     }
   }
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 = [
     path: '',
     component: VideoWatchComponent,
     canActivate: [ MetaGuard ]
+  },
+  {
+    path: 'comment/:commentId',
+    component: VideoWatchComponent,
+    canActivate: [ MetaGuard ]
   }
 ]