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

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 1d325aff9bf2fe4acc2dddb3ac91c8db0ed2f381..ec9a236d394f964a0f7b674d3e7d963df21f49bf 100644 (file)
--- 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 8e53dbca82fb918b3684dbfa9e47d7e12884836d..b03bc73d0b158c87f1122461b7c4fc25d4a8fea5 100644 (file)
--- 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 4c5971f54b2d5056034495fbaaebadbc7d62cb0d..d7b03521a60732a09baf8ff1e6371557707ab352 100644 (file)
--- 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 7ca3bafb50815c1a5beeabf819902077ba60d5b4..7970a5dcfd7f39a2c8bbd3094e5ba056e8ddc2ce 100644 (file)
--- 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 bdd4f945e86798baab1434bcc0b6b8aa6386ebe9..72f76ab468fc080bdc2b65c642547fd8e851fea7 100644 (file)
--- 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 ]
   }
 ]