1 import * as debug from 'debug'
2 import truncate from 'lodash-es/truncate'
3 import { SortMeta } from 'primeng/api'
4 import { buildVideoEmbed, buildVideoLink } from 'src/assets/player/utils'
5 import { environment } from 'src/environments/environment'
6 import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'
7 import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
8 import { ActivatedRoute, Params, Router } from '@angular/router'
9 import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable } from '@app/core'
10 import { Account, Actor, DropdownAction, Video, VideoService } from '@app/shared/shared-main'
11 import { AbuseService, BlocklistService, VideoBlockService } from '@app/shared/shared-moderation'
12 import { VideoCommentService } from '@app/shared/shared-video-comment'
13 import { I18n } from '@ngx-translate/i18n-polyfill'
14 import { Abuse, AbuseState } from '@shared/models'
15 import { ModerationCommentModalComponent } from './moderation-comment-modal.component'
17 const logger = debug('peertube:moderation:AbuseListComponent')
19 // Don't use an abuse model because we need external services to compute some properties
20 // And this model is only used in this component
21 export type ProcessedAbuse = Abuse & {
22 moderationCommentHtml?: string,
27 // override bare server-side definitions with rich client-side definitions
28 reporterAccount?: Account
29 flaggedAccount?: Account
31 truncatedCommentHtml?: string
34 video: Abuse['video'] & {
35 channel: Abuse['video']['channel'] & {
42 selector: 'my-abuse-list',
43 templateUrl: './abuse-list.component.html',
44 styleUrls: [ '../moderation.component.scss', './abuse-list.component.scss' ]
46 export class AbuseListComponent extends RestTable implements OnInit, AfterViewInit {
47 @ViewChild('moderationCommentModal', { static: true }) moderationCommentModal: ModerationCommentModalComponent
49 abuses: ProcessedAbuse[] = []
51 sort: SortMeta = { field: 'createdAt', order: 1 }
52 pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
54 abuseActions: DropdownAction<ProcessedAbuse>[][] = []
57 private notifier: Notifier,
58 private abuseService: AbuseService,
59 private blocklistService: BlocklistService,
60 private commentService: VideoCommentService,
61 private videoService: VideoService,
62 private videoBlocklistService: VideoBlockService,
63 private confirmService: ConfirmService,
65 private markdownRenderer: MarkdownService,
66 private sanitizer: DomSanitizer,
67 private route: ActivatedRoute,
68 private router: Router
73 this.buildInternalActions(),
75 this.buildFlaggedAccountActions(),
77 this.buildCommentActions(),
79 this.buildVideoActions(),
81 this.buildAccountActions()
88 this.route.queryParams
89 .subscribe(params => {
90 this.search = params.search || ''
92 logger('On URL change (search: %s).', this.search)
94 this.setTableFilter(this.search)
100 if (this.search) this.setTableFilter(this.search)
104 return 'AbuseListComponent'
107 openModerationCommentModal (abuse: Abuse) {
108 this.moderationCommentModal.openModal(abuse)
111 onModerationCommentUpdated () {
115 /* Table filter functions */
116 onAbuseSearch (event: Event) {
118 this.setQueryParams((event.target as HTMLInputElement).value)
121 setQueryParams (search: string) {
122 const queryParams: Params = {}
123 if (search) Object.assign(queryParams, { search })
125 this.router.navigate([ '/admin/moderation/abuses/list' ], { queryParams })
128 resetTableFilter () {
129 this.setTableFilter('')
130 this.setQueryParams('')
133 /* END Table filter functions */
135 isAbuseAccepted (abuse: Abuse) {
136 return abuse.state.id === AbuseState.ACCEPTED
139 isAbuseRejected (abuse: Abuse) {
140 return abuse.state.id === AbuseState.REJECTED
143 getVideoUrl (abuse: Abuse) {
144 return Video.buildClientUrl(abuse.video.uuid)
147 getCommentUrl (abuse: Abuse) {
148 return Video.buildClientUrl(abuse.comment.video.uuid) + ';threadId=' + abuse.comment.threadId
151 getAccountUrl (abuse: ProcessedAbuse) {
152 return '/accounts/' + abuse.flaggedAccount.nameWithHost
155 getVideoEmbed (abuse: Abuse) {
156 return buildVideoEmbed(
158 baseUrl: `${environment.embedUrl}/videos/embed/${abuse.video.uuid}`,
161 startTime: abuse.startAt,
162 stopTime: abuse.endAt
167 switchToDefaultAvatar ($event: Event) {
168 ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
171 async removeAbuse (abuse: Abuse) {
172 const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this abuse report?'), this.i18n('Delete'))
173 if (res === false) return
175 this.abuseService.removeAbuse(abuse).subscribe(
177 this.notifier.success(this.i18n('Abuse deleted.'))
181 err => this.notifier.error(err.message)
185 updateAbuseState (abuse: Abuse, state: AbuseState) {
186 this.abuseService.updateAbuse(abuse, { state })
188 () => this.loadData(),
190 err => this.notifier.error(err.message)
194 protected loadData () {
197 return this.abuseService.getAbuses({
198 pagination: this.pagination,
202 async resultList => {
203 this.totalRecords = resultList.total
207 for (const a of resultList.data) {
208 const abuse = a as ProcessedAbuse
210 abuse.reasonHtml = await this.toHtml(abuse.reason)
211 abuse.moderationCommentHtml = await this.toHtml(abuse.moderationComment)
214 abuse.embedHtml = this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(abuse))
216 if (abuse.video.channel?.ownerAccount) {
217 abuse.video.channel.ownerAccount = new Account(abuse.video.channel.ownerAccount)
222 if (abuse.comment.deleted) {
223 abuse.truncatedCommentHtml = abuse.commentHtml = this.i18n('Deleted comment')
225 const truncated = truncate(abuse.comment.text, { length: 100 })
226 abuse.truncatedCommentHtml = await this.markdownRenderer.textMarkdownToHTML(truncated, true)
227 abuse.commentHtml = await this.markdownRenderer.textMarkdownToHTML(abuse.comment.text, true)
231 if (abuse.reporterAccount) {
232 abuse.reporterAccount = new Account(abuse.reporterAccount)
235 if (abuse.flaggedAccount) {
236 abuse.flaggedAccount = new Account(abuse.flaggedAccount)
239 if (abuse.updatedAt === abuse.createdAt) delete abuse.updatedAt
241 this.abuses.push(abuse)
245 err => this.notifier.error(err.message)
249 private buildInternalActions (): DropdownAction<ProcessedAbuse>[] {
252 label: this.i18n('Internal actions'),
256 label: this.i18n('Delete report'),
257 handler: abuse => this.removeAbuse(abuse)
260 label: this.i18n('Add note'),
261 handler: abuse => this.openModerationCommentModal(abuse),
262 isDisplayed: abuse => !abuse.moderationComment
265 label: this.i18n('Update note'),
266 handler: abuse => this.openModerationCommentModal(abuse),
267 isDisplayed: abuse => !!abuse.moderationComment
270 label: this.i18n('Mark as accepted'),
271 handler: abuse => this.updateAbuseState(abuse, AbuseState.ACCEPTED),
272 isDisplayed: abuse => !this.isAbuseAccepted(abuse)
275 label: this.i18n('Mark as rejected'),
276 handler: abuse => this.updateAbuseState(abuse, AbuseState.REJECTED),
277 isDisplayed: abuse => !this.isAbuseRejected(abuse)
282 private buildFlaggedAccountActions (): DropdownAction<ProcessedAbuse>[] {
285 label: this.i18n('Actions for the flagged account'),
287 isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video
291 label: this.i18n('Mute account'),
292 isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video,
293 handler: abuse => this.muteAccountHelper(abuse.flaggedAccount)
297 label: this.i18n('Mute server account'),
298 isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video,
299 handler: abuse => this.muteServerHelper(abuse.flaggedAccount.host)
304 private buildAccountActions (): DropdownAction<ProcessedAbuse>[] {
307 label: this.i18n('Actions for the reporter'),
309 isDisplayed: abuse => !!abuse.reporterAccount
313 label: this.i18n('Mute reporter'),
314 isDisplayed: abuse => !!abuse.reporterAccount,
315 handler: abuse => this.muteAccountHelper(abuse.reporterAccount)
319 label: this.i18n('Mute server'),
320 isDisplayed: abuse => abuse.reporterAccount && !abuse.reporterAccount.userId,
321 handler: abuse => this.muteServerHelper(abuse.reporterAccount.host)
326 private buildVideoActions (): DropdownAction<ProcessedAbuse>[] {
329 label: this.i18n('Actions for the video'),
331 isDisplayed: abuse => abuse.video && !abuse.video.deleted
334 label: this.i18n('Block video'),
335 isDisplayed: abuse => abuse.video && !abuse.video.deleted && !abuse.video.blacklisted,
337 this.videoBlocklistService.blockVideo(abuse.video.id, undefined, true)
340 this.notifier.success(this.i18n('Video blocked.'))
342 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
345 err => this.notifier.error(err.message)
350 label: this.i18n('Unblock video'),
351 isDisplayed: abuse => abuse.video && !abuse.video.deleted && abuse.video.blacklisted,
353 this.videoBlocklistService.unblockVideo(abuse.video.id)
356 this.notifier.success(this.i18n('Video unblocked.'))
358 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
361 err => this.notifier.error(err.message)
366 label: this.i18n('Delete video'),
367 isDisplayed: abuse => abuse.video && !abuse.video.deleted,
368 handler: async abuse => {
369 const res = await this.confirmService.confirm(
370 this.i18n('Do you really want to delete this video?'),
373 if (res === false) return
375 this.videoService.removeVideo(abuse.video.id)
378 this.notifier.success(this.i18n('Video deleted.'))
380 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
383 err => this.notifier.error(err.message)
390 private buildCommentActions (): DropdownAction<ProcessedAbuse>[] {
393 label: this.i18n('Actions for the comment'),
395 isDisplayed: abuse => abuse.comment && !abuse.comment.deleted
399 label: this.i18n('Delete comment'),
400 isDisplayed: abuse => abuse.comment && !abuse.comment.deleted,
401 handler: async abuse => {
402 const res = await this.confirmService.confirm(
403 this.i18n('Do you really want to delete this comment?'),
406 if (res === false) return
408 this.commentService.deleteVideoComment(abuse.comment.video.id, abuse.comment.id)
411 this.notifier.success(this.i18n('Comment deleted.'))
413 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
416 err => this.notifier.error(err.message)
423 private muteAccountHelper (account: Account) {
424 this.blocklistService.blockAccountByInstance(account)
427 this.notifier.success(
428 this.i18n('Account {{nameWithHost}} muted by the instance.', { nameWithHost: account.nameWithHost })
431 account.mutedByInstance = true
434 err => this.notifier.error(err.message)
438 private muteServerHelper (host: string) {
439 this.blocklistService.blockServerByInstance(host)
442 this.notifier.success(
443 this.i18n('Server {{host}} muted by the instance.', { host: host })
447 err => this.notifier.error(err.message)
451 private toHtml (text: string) {
452 return this.markdownRenderer.textMarkdownToHTML(text)