OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

Increase rows per page, add reporter muting for abuse list

pull/2711/head
Rigel Kent 2020-04-16 17:18:55 +02:00 committed by Rigel Kent
parent 68d19a0ace
commit 9b4241e33b
9 changed files with 78 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
View File

@ -8,7 +8,7 @@
<ng-template pTemplate="header">
<tr>
<th i18n>Account</th>
<th style="width: 200px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
<th style="width: 190px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
<th style="width: 100px;"></th> <!-- column for action buttons -->
</tr>
</ng-template>

2
client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html
View File

@ -16,7 +16,7 @@
<ng-template pTemplate="header">
<tr>
<th i18n>Instance</th>
<th style="width: 200px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
<th style="width: 190px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
<th style="width: 100px;"></th> <!-- column for action buttons -->
</tr>
</ng-template>

4
client/src/app/+admin/moderation/moderation.component.scss
View File

@ -29,6 +29,10 @@
}
}
.glyphicon-trash {
font-size: 80%;
}
.screenratio {
position: relative;
width: 100%;

15
client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
View File

@ -1,15 +1,15 @@
<p-table
[value]="videoAbuses" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
[sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
[value]="videoAbuses" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
[sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id" [resizableColumns]="true"
[showCurrentPageReport]="true" i18n-currentPageReportTemplate
currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} reports"
>
<ng-template pTemplate="header">
<tr> <!-- header -->
<th style="width: 40px;"></th>
<th i18n>Reporter</th>
<th style="width: 200px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
<th style="width: 20%;" pResizableColumn i18n>Reporter</th>
<th i18n>Video</th>
<th style="width:190px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
<th i18n pSortableColumn="state" style="width: 80px;">State <p-sortIcon field="state"></p-sortIcon></th>
<th style="width: 120px;"></th>
</tr>
@ -40,14 +40,15 @@
</a>
</td>
<td>{{ videoAbuse.createdAt }}</td>
<td>
<span *ngIf="videoAbuse.video.deleted" i18n-title title="Video was deleted" class="glyphicon glyphicon-trash"></span>
<a [href]="getVideoUrl(videoAbuse)" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
{{ videoAbuse.video.name }}
</a>
</td>
<td>{{ videoAbuse.createdAt }}</td>
<td class="c-hand video-abuse-states" [pRowToggler]="videoAbuse">
<span *ngIf="isVideoAbuseAccepted(videoAbuse)" [title]="videoAbuse.state.label" class="glyphicon glyphicon-ok"></span>
<span *ngIf="isVideoAbuseRejected(videoAbuse)" [title]="videoAbuse.state.label" class="glyphicon glyphicon-remove"></span>
@ -55,7 +56,7 @@
</td>
<td class="action-cell">
<my-action-dropdown placement="bottom-right auto" i18n-label label="Actions" [actions]="videoAbuseActions" [entry]="videoAbuse"></my-action-dropdown>
<my-action-dropdown placement="bottom-right auto" container="body" i18n-label label="Actions" [actions]="videoAbuseActions" [entry]="videoAbuse"></my-action-dropdown>
</td>
</tr>
</ng-template>

54
client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
View File

@ -15,6 +15,7 @@ import { buildVideoLink, buildVideoEmbed } from 'src/assets/player/utils'
import { getAbsoluteAPIUrl } from '@app/shared/misc/utils'
import { DomSanitizer } from '@angular/platform-browser'
import { BlocklistService } from '@app/shared/blocklist'
import { VideoService } from '@app/shared/video/video.service'
@Component({
selector: 'my-video-abuse-list',
@ -26,7 +27,8 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
videoAbuses: (VideoAbuse & { moderationCommentHtml?: string, reasonHtml?: string })[] = []
totalRecords = 0
rowsPerPage = 10
rowsPerPageOptions = [ 20, 50, 100 ]
rowsPerPage = this.rowsPerPageOptions[0]
sort: SortMeta = { field: 'createdAt', order: 1 }
pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
@ -36,6 +38,7 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
private notifier: Notifier,
private videoAbuseService: VideoAbuseService,
private blocklistService: BlocklistService,
private videoService: VideoService,
private videoBlacklistService: VideoBlacklistService,
private confirmService: ConfirmService,
private i18n: I18n,
@ -78,10 +81,12 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
[
{
label: this.i18n('Actions for the video'),
isHeader: true
isHeader: true,
isDisplayed: videoAbuse => !videoAbuse.video.deleted
},
{
label: this.i18n('Blacklist video'),
isDisplayed: videoAbuse => !videoAbuse.video.deleted,
handler: videoAbuse => {
this.videoBlacklistService.blacklistVideo(videoAbuse.video.id, undefined, true)
.subscribe(
@ -91,6 +96,48 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
this.updateVideoAbuseState(videoAbuse, VideoAbuseState.ACCEPTED)
},
err => this.notifier.error(err.message)
)
}
},
{
label: this.i18n('Delete video'),
isDisplayed: videoAbuse => !videoAbuse.video.deleted,
handler: async videoAbuse => {
const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this video?'), this.i18n('Delete'))
if (res === false) return
this.videoService.removeVideo(videoAbuse.video.id)
.subscribe(
() => {
this.notifier.success(this.i18n('Video deleted.'))
this.updateVideoAbuseState(videoAbuse, VideoAbuseState.ACCEPTED)
},
err => this.notifier.error(err.message)
)
}
}
],
[
{
label: this.i18n('Actions for the reporter'),
isHeader: true
},
{
label: this.i18n('Mute reporter'),
handler: async videoAbuse => {
const account = videoAbuse.reporterAccount as Account
this.blocklistService.blockAccountByInstance(account)
.subscribe(
() => {
this.notifier.success(this.i18n('Account {{nameWithHost}} muted by the instance.', { nameWithHost: account.nameWithHost }))
account.mutedByInstance = true
},
err => this.notifier.error(err.message)
)
}
@ -180,7 +227,8 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
Object.assign(abuse, {
reasonHtml: await this.toHtml(abuse.reason),
moderationCommentHtml: await this.toHtml(abuse.moderationComment),
embedHtml: this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(abuse))
embedHtml: this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(abuse)),
reporterAccount: new Account(abuse.reporterAccount)
})
}

2
client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
View File

@ -10,7 +10,7 @@
<th i18n pSortableColumn="name">Video <p-sortIcon field="name"></p-sortIcon></th>
<th style="width: 120px;" i18n>Sensitive</th>
<th style="width: 120px;" i18n>Unfederated</th>
<th style="width: 200px;" i18n pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
<th style="width: 190px;" i18n pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
<th style="width: 120px;"></th>
</tr>
</ng-template>

2
client/src/app/shared/buttons/action-dropdown.component.html
View File

@ -1,4 +1,4 @@
<div class="dropdown-root" ngbDropdown [placement]="placement" container="body" *ngIf="areActionsDisplayed(actions, entry)">
<div class="dropdown-root" ngbDropdown [placement]="placement" [container]="container" *ngIf="areActionsDisplayed(actions, entry)">
<div
class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }"
ngbDropdownToggle role="button"

1
client/src/app/shared/buttons/action-dropdown.component.ts
View File

@ -27,6 +27,7 @@ export class ActionDropdownComponent<T> {
@Input() entry: T
@Input() placement = 'bottom-left auto'
@Input() container: null | 'body'
@Input() buttonSize: DropdownButtonSize = 'normal'
@Input() buttonDirection: DropdownDirection = 'horizontal'

10
client/src/sass/primeng-custom.scss
View File

@ -191,12 +191,22 @@ p-table {
.ui-dropdown {
position: absolute;
top: 3px;
left: 0;
&.ui-state-focus {
box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
}
.ui-dropdown-label {
color: var(--inputPlaceholderColor);
}
}
.ui-paginator-current {
position: absolute;
right: 0;
color: var(--inputPlaceholderColor);
}
.ui-paginator-first,