mirror of https://github.com/Chocobozzz/PeerTube
Move abuse-list details into its own component
parent
0db536f1e0
commit
801d957155
|
@ -29,6 +29,7 @@ import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
|
||||||
import { VideoRedundancyInformationComponent } from '@app/+admin/follows/video-redundancies-list/video-redundancy-information.component'
|
import { VideoRedundancyInformationComponent } from '@app/+admin/follows/video-redundancies-list/video-redundancy-information.component'
|
||||||
import { ChartModule } from 'primeng/chart'
|
import { ChartModule } from 'primeng/chart'
|
||||||
import { BatchDomainsModalComponent } from './config/shared/batch-domains-modal.component'
|
import { BatchDomainsModalComponent } from './config/shared/batch-domains-modal.component'
|
||||||
|
import { VideoAbuseDetailsComponent } from './moderation/video-abuse-list/video-abuse-details.component'
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
|
@ -60,6 +61,7 @@ import { BatchDomainsModalComponent } from './config/shared/batch-domains-modal.
|
||||||
ModerationComponent,
|
ModerationComponent,
|
||||||
VideoBlacklistListComponent,
|
VideoBlacklistListComponent,
|
||||||
VideoAbuseListComponent,
|
VideoAbuseListComponent,
|
||||||
|
VideoAbuseDetailsComponent,
|
||||||
VideoAutoBlacklistListComponent,
|
VideoAutoBlacklistListComponent,
|
||||||
ModerationCommentModalComponent,
|
ModerationCommentModalComponent,
|
||||||
InstanceServerBlocklistComponent,
|
InstanceServerBlocklistComponent,
|
||||||
|
|
|
@ -0,0 +1,77 @@
|
||||||
|
<div class="d-flex moderation-expanded">
|
||||||
|
<!-- report left part (report details) -->
|
||||||
|
<div class="col-8">
|
||||||
|
|
||||||
|
<!-- report metadata -->
|
||||||
|
<div class="d-flex">
|
||||||
|
<span class="col-3 moderation-expanded-label" i18n>Reporter</span>
|
||||||
|
<span class="col-9 moderation-expanded-text">
|
||||||
|
<a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reporter:"' + videoAbuse.reporterAccount.displayName + '"' }" class="chip">
|
||||||
|
<img
|
||||||
|
class="avatar"
|
||||||
|
[src]="videoAbuse.reporterAccount.avatar.path"
|
||||||
|
(error)="switchToDefaultAvatar($event)"
|
||||||
|
alt="Avatar"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<span class="text-muted">{{ createByString(videoAbuse.reporterAccount) }}</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:"' + videoAbuse.reporterAccount.displayName + '"' }" class="ml-auto text-muted video-details-links" i18n>
|
||||||
|
{videoAbuse.countReportsForReporter, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex">
|
||||||
|
<span class="col-3 moderation-expanded-label" i18n>Reportee</span>
|
||||||
|
<span class="col-9 moderation-expanded-text">
|
||||||
|
<a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:"' +videoAbuse.video.channel.ownerAccount.displayName + '"' }" class="chip">
|
||||||
|
<img
|
||||||
|
class="avatar"
|
||||||
|
[src]="videoAbuse.video.channel.ownerAccount?.avatar.path"
|
||||||
|
(error)="switchToDefaultAvatar($event)"
|
||||||
|
alt="Avatar"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<span class="text-muted">{{ videoAbuse.video.channel.ownerAccount ? createByString(videoAbuse.video.channel.ownerAccount) : '' }}</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:"' +videoAbuse.video.channel.ownerAccount.displayName + '"' }" class="ml-auto text-muted video-details-links" i18n>
|
||||||
|
{videoAbuse.countReportsForReportee, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex" *ngIf="videoAbuse.updatedAt">
|
||||||
|
<span class="col-3 moderation-expanded-label" i18n>Updated</span>
|
||||||
|
<time class="col-9 moderation-expanded-text video-details-date-updated">{{ videoAbuse.updatedAt | date: 'medium' }}</time>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- report text -->
|
||||||
|
<div class="mt-3 d-flex">
|
||||||
|
<span class="col-3 moderation-expanded-label">
|
||||||
|
<ng-container i18n>Report</ng-container>
|
||||||
|
<a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': '#' + videoAbuse.id }" class="ml-1 text-muted">#{{ videoAbuse.id }}</a>
|
||||||
|
</span>
|
||||||
|
<span class="col-9 moderation-expanded-text" [innerHTML]="videoAbuse.reasonHtml"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-3 d-flex" *ngIf="videoAbuse.moderationComment">
|
||||||
|
<span class="col-3 moderation-expanded-label" i18n>Note</span>
|
||||||
|
<span class="col-9 moderation-expanded-text" [innerHTML]="videoAbuse.moderationCommentHtml"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- report right part (video details) -->
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="screenratio">
|
||||||
|
<div *ngIf="videoAbuse.video.deleted || videoAbuse.video.blacklisted">
|
||||||
|
<span i18n *ngIf="videoAbuse.video.deleted">The video was deleted</span>
|
||||||
|
<span i18n *ngIf="!videoAbuse.video.deleted">The video was blacklisted</span>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="!videoAbuse.video.deleted && !videoAbuse.video.blacklisted" [innerHTML]="videoAbuse.embedHtml"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { Component, ViewEncapsulation, Input } from '@angular/core'
|
||||||
|
import { VideoAbuse } from '../../../../../../shared'
|
||||||
|
import { Account } from '@app/shared/account/account.model'
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'my-video-abuse-details',
|
||||||
|
templateUrl: './video-abuse-details.component.html',
|
||||||
|
styleUrls: [ '../moderation.component.scss' ]
|
||||||
|
})
|
||||||
|
export class VideoAbuseDetailsComponent {
|
||||||
|
@Input() videoAbuse: VideoAbuse
|
||||||
|
|
||||||
|
createByString (account: Account) {
|
||||||
|
return Account.CREATE_BY_STRING(account.name, account.host)
|
||||||
|
}
|
||||||
|
}
|
|
@ -133,80 +133,7 @@
|
||||||
<ng-template pTemplate="rowexpansion" let-videoAbuse>
|
<ng-template pTemplate="rowexpansion" let-videoAbuse>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="expand-cell" colspan="6">
|
<td class="expand-cell" colspan="6">
|
||||||
<div class="d-flex moderation-expanded">
|
<my-video-abuse-details [videoAbuse]="videoAbuse"></my-video-abuse-details>
|
||||||
<!-- report left part (report details) -->
|
|
||||||
<div class="col-8">
|
|
||||||
|
|
||||||
<!-- report metadata -->
|
|
||||||
<div class="d-flex">
|
|
||||||
<span class="col-3 moderation-expanded-label" i18n>Reporter</span>
|
|
||||||
<span class="col-9 moderation-expanded-text">
|
|
||||||
<a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reporter:"' + videoAbuse.reporterAccount.displayName + '"' }" class="chip">
|
|
||||||
<img
|
|
||||||
class="avatar"
|
|
||||||
[src]="videoAbuse.reporterAccount.avatar.path"
|
|
||||||
(error)="switchToDefaultAvatar($event)"
|
|
||||||
alt="Avatar"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<span class="text-muted">{{ createByString(videoAbuse.reporterAccount) }}</span>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:"' + videoAbuse.reporterAccount.displayName + '"' }" class="ml-auto text-muted video-details-links" i18n>
|
|
||||||
{videoAbuse.countReportsForReporter, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="d-flex">
|
|
||||||
<span class="col-3 moderation-expanded-label" i18n>Reportee</span>
|
|
||||||
<span class="col-9 moderation-expanded-text">
|
|
||||||
<div class="chip">
|
|
||||||
<img
|
|
||||||
class="avatar"
|
|
||||||
[src]="videoAbuse.video.channel.ownerAccount?.avatar.path"
|
|
||||||
(error)="switchToDefaultAvatar($event)"
|
|
||||||
alt="Avatar"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<span class="text-muted">{{ videoAbuse.video.channel.ownerAccount ? createByString(videoAbuse.video.channel.ownerAccount) : '' }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': 'reportee:"' +videoAbuse.video.channel.ownerAccount.displayName + '"' }" class="ml-auto text-muted video-details-links" i18n>
|
|
||||||
{videoAbuse.countReportsForReportee, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="d-flex">
|
|
||||||
<span class="col-3 moderation-expanded-label" i18n>Updated</span>
|
|
||||||
<time class="col-9 moderation-expanded-text video-details-date-updated">{{ videoAbuse.updatedAt | date: 'medium' }}</time>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- report text -->
|
|
||||||
<div class="mt-3 d-flex">
|
|
||||||
<span class="col-3 moderation-expanded-label" i18n>Report #{{ videoAbuse.id }}</span>
|
|
||||||
<span class="col-9 moderation-expanded-text" [innerHTML]="videoAbuse.reasonHtml"></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-3 d-flex" *ngIf="videoAbuse.moderationComment">
|
|
||||||
<span class="col-3 moderation-expanded-label" i18n>Note</span>
|
|
||||||
<span class="col-9 moderation-expanded-text" [innerHTML]="videoAbuse.moderationCommentHtml"></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- report right part (video details) -->
|
|
||||||
<div class="col-4">
|
|
||||||
<div class="screenratio">
|
|
||||||
<div *ngIf="videoAbuse.video.deleted || videoAbuse.video.blacklisted">
|
|
||||||
<span i18n *ngIf="videoAbuse.video.deleted">The video was deleted</span>
|
|
||||||
<span i18n *ngIf="!videoAbuse.video.deleted">The video was blacklisted</span>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="!videoAbuse.video.deleted && !videoAbuse.video.blacklisted" [innerHTML]="videoAbuse.embedHtml"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
|
|
Loading…
Reference in New Issue