Fix comment highlight
authorChocobozzz <me@florianbigard.com>
Wed, 21 Feb 2018 16:46:04 +0000 (17:46 +0100)
committerChocobozzz <me@florianbigard.com>
Wed, 21 Feb 2018 16:50:41 +0000 (17:50 +0100)
client/src/app/videos/+video-watch/comment/video-comment.component.html
client/src/app/videos/+video-watch/comment/video-comments.component.html
client/src/app/videos/+video-watch/comment/video-comments.component.ts

index e3049e15bc237890f41f57388f108d1fdd5504fe..831ea0521a94332c2a9903c5e95c736a4b05a8a2 100644 (file)
@@ -6,7 +6,7 @@
 
     <div class="comment-account-date">
       <a target="_blank" [href]="comment.account.url" class="comment-account">{{ comment.by }}</a>
-      <a [routerLink]="['/videos/watch', video.uuid, { 'commentId': comment.id }]" class="comment-date">{{ comment.createdAt | myFromNow }}</a>
+      <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]" class="comment-date">{{ comment.createdAt | myFromNow }}</a>
     </div>
     <div class="comment-html" [innerHTML]="sanitizedCommentHTML"></div>
 
index f95e2cbba7dc29e6ebabb6ab4b08527292c73028..6f3e571602ed7d860b392ba2660511f304a5cf9d 100644 (file)
       [autoLoading]="true"
       (nearOfBottom)="onNearOfBottom()"
     >
-      <div *ngIf="highlightedComment" id="highlighted-comment">
+      <div *ngIf="highlightedThread" id="highlighted-comment">
         <my-video-comment
-            [comment]="highlightedComment"
+            [comment]="highlightedThread"
             [video]="video"
             [inReplyToCommentId]="inReplyToCommentId"
-            [commentTree]="threadComments[highlightedComment.id]"
+            [commentTree]="threadComments[highlightedThread.id]"
             [highlightedComment]="true"
             (wantedToReply)="onWantedToReply($event)"
             (wantedToDelete)="onWantedToDelete($event)"
@@ -35,7 +35,7 @@
 
       <div *ngFor="let comment of comments">
         <my-video-comment
-          *ngIf="!highlightedComment || comment.id !== highlightedComment.id"
+          *ngIf="!highlightedThread || comment.id !== highlightedThread.id"
           [comment]="comment"
           [video]="video"
           [inReplyToCommentId]="inReplyToCommentId"
index aada9554d77d53830a6ca9699d1d360c1578d814..16f1a0643f0d5d12b2e0422ede7e96b24cfeb783 100644 (file)
@@ -22,7 +22,7 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
   @Input() user: User
 
   comments: VideoComment[] = []
-  highlightedComment: VideoComment
+  highlightedThread: VideoComment
   sort: SortField = '-createdAt'
   componentPagination: ComponentPagination = {
     currentPage: 1,
@@ -47,9 +47,9 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
     // Find highlighted comment in params
     this.sub = this.activatedRoute.params.subscribe(
       params => {
-        if (params['commentId']) {
-          const highlightedCommentId = +params['commentId']
-          this.processHighlightedComment(highlightedCommentId)
+        if (params['threadId']) {
+          const highlightedThreadId = +params['threadId']
+          this.processHighlightedThread(highlightedThreadId)
         }
       }
     )
@@ -65,7 +65,7 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
     if (this.sub) this.sub.unsubscribe()
   }
 
-  viewReplies (commentId: number, highlightComment = false) {
+  viewReplies (commentId: number, highlightThread = false) {
     this.threadLoading[commentId] = true
 
     this.videoCommentService.getVideoThreadComments(this.video.id, commentId)
@@ -74,7 +74,7 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
           this.threadComments[commentId] = res
           this.threadLoading[commentId] = false
 
-          if (highlightComment) this.highlightedComment = new VideoComment(res.comment)
+          if (highlightThread) this.highlightedThread = new VideoComment(res.comment)
         },
 
         err => this.notificationsService.error('Error', err.message)
@@ -180,7 +180,7 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
   private resetVideo () {
     if (this.video.commentsEnabled === true) {
       // Reset all our fields
-      this.highlightedComment = null
+      this.highlightedThread = null
       this.comments = []
       this.threadComments = {}
       this.threadLoading = {}
@@ -192,10 +192,10 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
-  private processHighlightedComment (highlightedCommentId: number) {
-    this.highlightedComment = this.comments.find(c => c.id === highlightedCommentId)
+  private processHighlightedThread (highlightedThreadId: number) {
+    this.highlightedThread = this.comments.find(c => c.id === highlightedThreadId)
 
-    const highlightComment = true
-    this.viewReplies(highlightedCommentId, highlightComment)
+    const highlightThread = true
+    this.viewReplies(highlightedThreadId, highlightThread)
   }
 }