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, AbuseMessageModalComponent } from '@app/shared/shared-moderation'
12 import { VideoCommentService } from '@app/shared/shared-video-comment'
13 import { I18n } from '@ngx-translate/i18n-polyfill'
14 import { AdminAbuse, 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 = AdminAbuse & {
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: AdminAbuse['video'] & {
35 channel: AdminAbuse['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
48 @ViewChild('abuseMessagesModal', { static: true }) abuseMessagesModal: AbuseMessageModalComponent
50 abuses: ProcessedAbuse[] = []
52 sort: SortMeta = { field: 'createdAt', order: 1 }
53 pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
55 abuseActions: DropdownAction<ProcessedAbuse>[][] = []
58 private notifier: Notifier,
59 private abuseService: AbuseService,
60 private blocklistService: BlocklistService,
61 private commentService: VideoCommentService,
62 private videoService: VideoService,
63 private videoBlocklistService: VideoBlockService,
64 private confirmService: ConfirmService,
66 private markdownRenderer: MarkdownService,
67 private sanitizer: DomSanitizer,
68 private route: ActivatedRoute,
69 private router: Router
74 this.buildInternalActions(),
76 this.buildFlaggedAccountActions(),
78 this.buildCommentActions(),
80 this.buildVideoActions(),
82 this.buildAccountActions()
89 this.route.queryParams
90 .subscribe(params => {
91 this.search = params.search || ''
93 logger('On URL change (search: %s).', this.search)
95 this.setTableFilter(this.search)
101 if (this.search) this.setTableFilter(this.search)
105 return 'AbuseListComponent'
108 openModerationCommentModal (abuse: AdminAbuse) {
109 this.moderationCommentModal.openModal(abuse)
112 onModerationCommentUpdated () {
116 /* Table filter functions */
117 onAbuseSearch (event: Event) {
119 this.setQueryParams((event.target as HTMLInputElement).value)
122 setQueryParams (search: string) {
123 const queryParams: Params = {}
124 if (search) Object.assign(queryParams, { search })
126 this.router.navigate([ '/admin/moderation/abuses/list' ], { queryParams })
129 resetTableFilter () {
130 this.setTableFilter('')
131 this.setQueryParams('')
134 /* END Table filter functions */
136 isAbuseAccepted (abuse: AdminAbuse) {
137 return abuse.state.id === AbuseState.ACCEPTED
140 isAbuseRejected (abuse: AdminAbuse) {
141 return abuse.state.id === AbuseState.REJECTED
144 getVideoUrl (abuse: AdminAbuse) {
145 return Video.buildClientUrl(abuse.video.uuid)
148 getCommentUrl (abuse: AdminAbuse) {
149 return Video.buildClientUrl(abuse.comment.video.uuid) + ';threadId=' + abuse.comment.threadId
152 getAccountUrl (abuse: ProcessedAbuse) {
153 return '/accounts/' + abuse.flaggedAccount.nameWithHost
156 getVideoEmbed (abuse: AdminAbuse) {
157 return buildVideoEmbed(
159 baseUrl: `${environment.embedUrl}/videos/embed/${abuse.video.uuid}`,
162 startTime: abuse.startAt,
163 stopTime: abuse.endAt
168 switchToDefaultAvatar ($event: Event) {
169 ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
172 async removeAbuse (abuse: AdminAbuse) {
173 const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this abuse report?'), this.i18n('Delete'))
174 if (res === false) return
176 this.abuseService.removeAbuse(abuse).subscribe(
178 this.notifier.success(this.i18n('Abuse deleted.'))
182 err => this.notifier.error(err.message)
186 updateAbuseState (abuse: AdminAbuse, state: AbuseState) {
187 this.abuseService.updateAbuse(abuse, { state })
189 () => this.loadData(),
191 err => this.notifier.error(err.message)
195 onCountMessagesUpdated (event: { abuseId: number, countMessages: number }) {
196 const abuse = this.abuses.find(a => a.id === event.abuseId)
199 console.error('Cannot find abuse %d.', event.abuseId)
203 abuse.countMessages = event.countMessages
206 openAbuseMessagesModal (abuse: AdminAbuse) {
207 this.abuseMessagesModal.openModal(abuse)
210 protected loadData () {
213 return this.abuseService.getAdminAbuses({
214 pagination: this.pagination,
218 async resultList => {
219 this.totalRecords = resultList.total
223 for (const a of resultList.data) {
224 const abuse = a as ProcessedAbuse
226 abuse.reasonHtml = await this.toHtml(abuse.reason)
227 abuse.moderationCommentHtml = await this.toHtml(abuse.moderationComment)
230 abuse.embedHtml = this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(abuse))
232 if (abuse.video.channel?.ownerAccount) {
233 abuse.video.channel.ownerAccount = new Account(abuse.video.channel.ownerAccount)
238 if (abuse.comment.deleted) {
239 abuse.truncatedCommentHtml = abuse.commentHtml = this.i18n('Deleted comment')
241 const truncated = truncate(abuse.comment.text, { length: 100 })
242 abuse.truncatedCommentHtml = await this.markdownRenderer.textMarkdownToHTML(truncated, true)
243 abuse.commentHtml = await this.markdownRenderer.textMarkdownToHTML(abuse.comment.text, true)
247 if (abuse.reporterAccount) {
248 abuse.reporterAccount = new Account(abuse.reporterAccount)
251 if (abuse.flaggedAccount) {
252 abuse.flaggedAccount = new Account(abuse.flaggedAccount)
255 if (abuse.updatedAt === abuse.createdAt) delete abuse.updatedAt
257 this.abuses.push(abuse)
261 err => this.notifier.error(err.message)
265 private buildInternalActions (): DropdownAction<ProcessedAbuse>[] {
268 label: this.i18n('Internal actions'),
272 label: this.i18n('Delete report'),
273 handler: abuse => this.removeAbuse(abuse)
276 label: this.i18n('Messages'),
277 handler: abuse => this.openAbuseMessagesModal(abuse)
280 label: this.i18n('Add internal note'),
281 handler: abuse => this.openModerationCommentModal(abuse),
282 isDisplayed: abuse => !abuse.moderationComment
285 label: this.i18n('Update note'),
286 handler: abuse => this.openModerationCommentModal(abuse),
287 isDisplayed: abuse => !!abuse.moderationComment
290 label: this.i18n('Mark as accepted'),
291 handler: abuse => this.updateAbuseState(abuse, AbuseState.ACCEPTED),
292 isDisplayed: abuse => !this.isAbuseAccepted(abuse)
295 label: this.i18n('Mark as rejected'),
296 handler: abuse => this.updateAbuseState(abuse, AbuseState.REJECTED),
297 isDisplayed: abuse => !this.isAbuseRejected(abuse)
302 private buildFlaggedAccountActions (): DropdownAction<ProcessedAbuse>[] {
305 label: this.i18n('Actions for the flagged account'),
307 isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video
311 label: this.i18n('Mute account'),
312 isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video,
313 handler: abuse => this.muteAccountHelper(abuse.flaggedAccount)
317 label: this.i18n('Mute server account'),
318 isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video,
319 handler: abuse => this.muteServerHelper(abuse.flaggedAccount.host)
324 private buildAccountActions (): DropdownAction<ProcessedAbuse>[] {
327 label: this.i18n('Actions for the reporter'),
329 isDisplayed: abuse => !!abuse.reporterAccount
333 label: this.i18n('Mute reporter'),
334 isDisplayed: abuse => !!abuse.reporterAccount,
335 handler: abuse => this.muteAccountHelper(abuse.reporterAccount)
339 label: this.i18n('Mute server'),
340 isDisplayed: abuse => abuse.reporterAccount && !abuse.reporterAccount.userId,
341 handler: abuse => this.muteServerHelper(abuse.reporterAccount.host)
346 private buildVideoActions (): DropdownAction<ProcessedAbuse>[] {
349 label: this.i18n('Actions for the video'),
351 isDisplayed: abuse => abuse.video && !abuse.video.deleted
354 label: this.i18n('Block video'),
355 isDisplayed: abuse => abuse.video && !abuse.video.deleted && !abuse.video.blacklisted,
357 this.videoBlocklistService.blockVideo(abuse.video.id, undefined, true)
360 this.notifier.success(this.i18n('Video blocked.'))
362 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
365 err => this.notifier.error(err.message)
370 label: this.i18n('Unblock video'),
371 isDisplayed: abuse => abuse.video && !abuse.video.deleted && abuse.video.blacklisted,
373 this.videoBlocklistService.unblockVideo(abuse.video.id)
376 this.notifier.success(this.i18n('Video unblocked.'))
378 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
381 err => this.notifier.error(err.message)
386 label: this.i18n('Delete video'),
387 isDisplayed: abuse => abuse.video && !abuse.video.deleted,
388 handler: async abuse => {
389 const res = await this.confirmService.confirm(
390 this.i18n('Do you really want to delete this video?'),
393 if (res === false) return
395 this.videoService.removeVideo(abuse.video.id)
398 this.notifier.success(this.i18n('Video deleted.'))
400 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
403 err => this.notifier.error(err.message)
410 private buildCommentActions (): DropdownAction<ProcessedAbuse>[] {
413 label: this.i18n('Actions for the comment'),
415 isDisplayed: abuse => abuse.comment && !abuse.comment.deleted
419 label: this.i18n('Delete comment'),
420 isDisplayed: abuse => abuse.comment && !abuse.comment.deleted,
421 handler: async abuse => {
422 const res = await this.confirmService.confirm(
423 this.i18n('Do you really want to delete this comment?'),
426 if (res === false) return
428 this.commentService.deleteVideoComment(abuse.comment.video.id, abuse.comment.id)
431 this.notifier.success(this.i18n('Comment deleted.'))
433 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
436 err => this.notifier.error(err.message)
443 private muteAccountHelper (account: Account) {
444 this.blocklistService.blockAccountByInstance(account)
447 this.notifier.success(
448 this.i18n('Account {{nameWithHost}} muted by the instance.', { nameWithHost: account.nameWithHost })
451 account.mutedByInstance = true
454 err => this.notifier.error(err.message)
458 private muteServerHelper (host: string) {
459 this.blocklistService.blockServerByInstance(host)
462 this.notifier.success(
463 this.i18n('Server {{host}} muted by the instance.', { host: host })
467 err => this.notifier.error(err.message)
471 private toHtml (text: string) {
472 return this.markdownRenderer.textMarkdownToHTML(text)