8 files changed, 38 insertions, 216 deletions

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 79505c779..d79efbb49 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
@@ -4,10 +4,9 @@ import { Router } from '@angular/router'
 import { Notifier, User } from '@app/core'
 import { FormReactive, FormValidatorService, VideoCommentValidatorsService } from '@app/shared/shared-forms'
 import { Video } from '@app/shared/shared-main'
+import { VideoComment, VideoCommentService } from '@app/shared/shared-video-comment'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { VideoCommentCreate } from '@shared/models'
-import { VideoComment } from './video-comment.model'
-import { VideoCommentService } from './video-comment.service'
 
 @Component({
   selector: 'my-video-comment-add',
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-thread-tree.model.ts b/client/src/app/+videos/+video-watch/comment/video-comment-thread-tree.model.ts
deleted file mode 100644
index 7c2aaeadd..000000000
--- a/client/src/app/+videos/+video-watch/comment/video-comment-thread-tree.model.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { VideoCommentThreadTree as VideoCommentThreadTreeServerModel } from '@shared/models'
-import { VideoComment } from './video-comment.model'
-
-export class VideoCommentThreadTree implements VideoCommentThreadTreeServerModel {
-  comment: VideoComment
-  children: VideoCommentThreadTree[]
-}
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 002de57e4..f02ea549a 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
@@ -45,6 +45,7 @@
           <div *ngIf="isRemovableByUser()" (click)="onWantToDelete()" class="comment-action-delete" i18n>Delete</div>
 
           <my-user-moderation-dropdown
+            [prependActions]="prependModerationActions"
             buttonSize="small" [account]="commentAccount" [user]="commentUser" i18n-label label="Options" placement="bottom-left auto"
           ></my-user-moderation-dropdown>
         </div>
@@ -93,3 +94,7 @@
     </div>
   </div>
 </div>
+
+<ng-container *ngIf="prependModerationActions">
+  <my-comment-report #commentReportModal [comment]="comment"></my-comment-report>
+</ng-container>
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 27846c1ad..6744a0954 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,10 +1,12 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core'
+
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core'
 import { MarkdownService, Notifier, UserService } from '@app/core'
 import { AuthService } from '@app/core/auth'
-import { Account, Actor, Video } from '@app/shared/shared-main'
+import { Account, Actor, DropdownAction, Video } from '@app/shared/shared-main'
+import { CommentReportComponent } from '@app/shared/shared-moderation/report-modals/comment-report.component'
+import { VideoComment, VideoCommentThreadTree } from '@app/shared/shared-video-comment'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 import { User, UserRight } from '@shared/models'
-import { VideoCommentThreadTree } from './video-comment-thread-tree.model'
-import { VideoComment } from './video-comment.model'
 
 @Component({
   selector: 'my-video-comment',
@@ -12,6 +14,8 @@ import { VideoComment } from './video-comment.model'
   styleUrls: ['./video-comment.component.scss']
 })
 export class VideoCommentComponent implements OnInit, OnChanges {
+  @ViewChild('commentReportModal') commentReportModal: CommentReportComponent
+
   @Input() video: Video
   @Input() comment: VideoComment
   @Input() parentComments: VideoComment[] = []
@@ -26,6 +30,8 @@ export class VideoCommentComponent implements OnInit, OnChanges {
   @Output() resetReply = new EventEmitter()
   @Output() timestampClicked = new EventEmitter<number>()
 
+  prependModerationActions: DropdownAction<any>[]
+
   sanitizedCommentHTML = ''
   newParentComments: VideoComment[] = []
 
@@ -33,6 +39,7 @@ export class VideoCommentComponent implements OnInit, OnChanges {
   commentUser: User
 
   constructor (
+    private i18n: I18n,
     private markdownService: MarkdownService,
     private authService: AuthService,
     private userService: UserService,
@@ -127,5 +134,20 @@ export class VideoCommentComponent implements OnInit, OnChanges {
     } else {
       this.comment.account = null
     }
+
+    if (this.isUserLoggedIn() && this.authService.getUser().account.id !== this.comment.account.id) {
+      this.prependModerationActions = [
+        {
+          label: this.i18n('Report comment'),
+          handler: () => this.showReportModal()
+        }
+      ]
+    } else {
+      this.prependModerationActions = undefined
+    }
+  }
+
+  private showReportModal () {
+    this.commentReportModal.show()
   }
 }
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
deleted file mode 100644
index e85443196..000000000
--- a/client/src/app/+videos/+video-watch/comment/video-comment.model.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { getAbsoluteAPIUrl } from '@app/helpers'
-import { Actor } from '@app/shared/shared-main'
-import { Account as AccountInterface, VideoComment as VideoCommentServerModel } from '@shared/models'
-
-export class VideoComment implements VideoCommentServerModel {
-  id: number
-  url: string
-  text: string
-  threadId: number
-  inReplyToCommentId: number
-  videoId: number
-  createdAt: Date | string
-  updatedAt: Date | string
-  deletedAt: Date | string
-  isDeleted: boolean
-  account: AccountInterface
-  totalRepliesFromVideoAuthor: number
-  totalReplies: number
-  by: string
-  accountAvatarUrl: string
-
-  isLocal: boolean
-
-  constructor (hash: VideoCommentServerModel) {
-    this.id = hash.id
-    this.url = hash.url
-    this.text = hash.text
-    this.threadId = hash.threadId
-    this.inReplyToCommentId = hash.inReplyToCommentId
-    this.videoId = hash.videoId
-    this.createdAt = new Date(hash.createdAt.toString())
-    this.updatedAt = new Date(hash.updatedAt.toString())
-    this.deletedAt = hash.deletedAt ? new Date(hash.deletedAt.toString()) : null
-    this.isDeleted = hash.isDeleted
-    this.account = hash.account
-    this.totalRepliesFromVideoAuthor = hash.totalRepliesFromVideoAuthor
-    this.totalReplies = hash.totalReplies
-
-    if (this.account) {
-      this.by = Actor.CREATE_BY_STRING(this.account.name, this.account.host)
-      this.accountAvatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.account)
-
-      const absoluteAPIUrl = getAbsoluteAPIUrl()
-      const thisHost = new URL(absoluteAPIUrl).host
-      this.isLocal = this.account.host.trim() === thisHost
-    }
-  }
-}
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.service.ts b/client/src/app/+videos/+video-watch/comment/video-comment.service.ts
deleted file mode 100644
index a73fb9ca8..000000000
--- a/client/src/app/+videos/+video-watch/comment/video-comment.service.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import { Observable } from 'rxjs'
-import { catchError, map } from 'rxjs/operators'
-import { HttpClient, HttpParams } from '@angular/common/http'
-import { Injectable } from '@angular/core'
-import { ComponentPaginationLight, RestExtractor, RestService } from '@app/core'
-import { objectLineFeedToHtml } from '@app/helpers'
-import {
-  FeedFormat,
-  ResultList,
-  VideoComment as VideoCommentServerModel,
-  VideoCommentCreate,
-  VideoCommentThreadTree as VideoCommentThreadTreeServerModel
-} from '@shared/models'
-import { environment } from '../../../../environments/environment'
-import { VideoCommentThreadTree } from './video-comment-thread-tree.model'
-import { VideoComment } from './video-comment.model'
-
-@Injectable()
-export class VideoCommentService {
-  private static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/'
-  private static BASE_FEEDS_URL = environment.apiUrl + '/feeds/video-comments.'
-
-  constructor (
-    private authHttp: HttpClient,
-    private restExtractor: RestExtractor,
-    private restService: RestService
-  ) {}
-
-  addCommentThread (videoId: number | string, comment: VideoCommentCreate) {
-    const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comment-threads'
-    const normalizedComment = objectLineFeedToHtml(comment, 'text')
-
-    return this.authHttp.post<{ comment: VideoCommentServerModel }>(url, normalizedComment)
-               .pipe(
-                  map(data => this.extractVideoComment(data.comment)),
-                  catchError(err => this.restExtractor.handleError(err))
-               )
-  }
-
-  addCommentReply (videoId: number | string, inReplyToCommentId: number, comment: VideoCommentCreate) {
-    const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comments/' + inReplyToCommentId
-    const normalizedComment = objectLineFeedToHtml(comment, 'text')
-
-    return this.authHttp.post<{ comment: VideoCommentServerModel }>(url, normalizedComment)
-               .pipe(
-                 map(data => this.extractVideoComment(data.comment)),
-                 catchError(err => this.restExtractor.handleError(err))
-               )
-  }
-
-  getVideoCommentThreads (parameters: {
-    videoId: number | string,
-    componentPagination: ComponentPaginationLight,
-    sort: string
-  }): Observable<ResultList<VideoComment>> {
-    const { videoId, componentPagination, sort } = parameters
-
-    const pagination = this.restService.componentPaginationToRestPagination(componentPagination)
-
-    let params = new HttpParams()
-    params = this.restService.addRestGetParams(params, pagination, sort)
-
-    const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comment-threads'
-    return this.authHttp.get<ResultList<VideoComment>>(url, { params })
-               .pipe(
-                 map(result => this.extractVideoComments(result)),
-                 catchError(err => this.restExtractor.handleError(err))
-               )
-  }
-
-  getVideoThreadComments (parameters: {
-    videoId: number | string,
-    threadId: number
-  }): Observable<VideoCommentThreadTree> {
-    const { videoId, threadId } = parameters
-    const url = `${VideoCommentService.BASE_VIDEO_URL + videoId}/comment-threads/${threadId}`
-
-    return this.authHttp
-               .get<VideoCommentThreadTreeServerModel>(url)
-               .pipe(
-                 map(tree => this.extractVideoCommentTree(tree)),
-                 catchError(err => this.restExtractor.handleError(err))
-               )
-  }
-
-  deleteVideoComment (videoId: number | string, commentId: number) {
-    const url = `${VideoCommentService.BASE_VIDEO_URL + videoId}/comments/${commentId}`
-
-    return this.authHttp
-               .delete(url)
-               .pipe(
-                 map(this.restExtractor.extractDataBool),
-                 catchError(err => this.restExtractor.handleError(err))
-               )
-  }
-
-  getVideoCommentsFeeds (videoUUID?: string) {
-    const feeds = [
-      {
-        format: FeedFormat.RSS,
-        label: 'rss 2.0',
-        url: VideoCommentService.BASE_FEEDS_URL + FeedFormat.RSS.toLowerCase()
-      },
-      {
-        format: FeedFormat.ATOM,
-        label: 'atom 1.0',
-        url: VideoCommentService.BASE_FEEDS_URL + FeedFormat.ATOM.toLowerCase()
-      },
-      {
-        format: FeedFormat.JSON,
-        label: 'json 1.0',
-        url: VideoCommentService.BASE_FEEDS_URL + FeedFormat.JSON.toLowerCase()
-      }
-    ]
-
-    if (videoUUID !== undefined) {
-      for (const feed of feeds) {
-        feed.url += '?videoId=' + videoUUID
-      }
-    }
-
-    return feeds
-  }
-
-  private extractVideoComment (videoComment: VideoCommentServerModel) {
-    return new VideoComment(videoComment)
-  }
-
-  private extractVideoComments (result: ResultList<VideoCommentServerModel>) {
-    const videoCommentsJson = result.data
-    const totalComments = result.total
-    const comments: VideoComment[] = []
-
-    for (const videoCommentJson of videoCommentsJson) {
-      comments.push(new VideoComment(videoCommentJson))
-    }
-
-    return { data: comments, total: totalComments }
-  }
-
-  private extractVideoCommentTree (tree: VideoCommentThreadTreeServerModel) {
-    if (!tree) return tree as VideoCommentThreadTree
-
-    tree.comment = new VideoComment(tree.comment)
-    tree.children.forEach(c => this.extractVideoCommentTree(c))
-
-    return tree as VideoCommentThreadTree
-  }
-}
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 df0018ec6..66494a20a 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
@@ -4,10 +4,8 @@ import { ActivatedRoute } from '@angular/router'
 import { AuthService, ComponentPagination, ConfirmService, hasMoreItems, Notifier, User } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { Syndication, VideoDetails } from '@app/shared/shared-main'
+import { VideoComment, VideoCommentService, VideoCommentThreadTree } from '@app/shared/shared-video-comment'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { VideoCommentThreadTree } from './video-comment-thread-tree.model'
-import { VideoComment } from './video-comment.model'
-import { VideoCommentService } from './video-comment.service'
 
 @Component({
   selector: 'my-video-comments',
diff --git a/client/src/app/+videos/+video-watch/video-watch.module.ts b/client/src/app/+videos/+video-watch/video-watch.module.ts
index 421170d81..5821dc2b7 100644
--- a/client/src/app/+videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.module.ts
@@ -5,16 +5,17 @@ import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { SharedMainModule } from '@app/shared/shared-main'
 import { SharedModerationModule } from '@app/shared/shared-moderation'
 import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription'
+import { SharedVideoCommentModule } from '@app/shared/shared-video-comment'
 import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
 import { SharedVideoPlaylistModule } from '@app/shared/shared-video-playlist'
-import { RecommendationsModule } from './recommendations/recommendations.module'
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
+import { VideoCommentService } from '../../shared/shared-video-comment/video-comment.service'
 import { VideoCommentAddComponent } from './comment/video-comment-add.component'
 import { VideoCommentComponent } from './comment/video-comment.component'
-import { VideoCommentService } from './comment/video-comment.service'
 import { VideoCommentsComponent } from './comment/video-comments.component'
 import { VideoShareComponent } from './modal/video-share.component'
 import { VideoSupportComponent } from './modal/video-support.component'
+import { RecommendationsModule } from './recommendations/recommendations.module'
 import { TimestampRouteTransformerDirective } from './timestamp-route-transformer.directive'
 import { VideoDurationPipe } from './video-duration-formatter.pipe'
 import { VideoWatchPlaylistComponent } from './video-watch-playlist.component'
@@ -34,7 +35,8 @@ import { VideoWatchComponent } from './video-watch.component'
     SharedVideoPlaylistModule,
     SharedUserSubscriptionModule,
     SharedModerationModule,
-    SharedGlobalIconModule
+    SharedGlobalIconModule,
+    SharedVideoCommentModule
   ],
 
   declarations: [