diff options
Diffstat (limited to 'client/src/app/+admin/moderation/video-auto-blacklist-list')
4 files changed, 244 insertions, 0 deletions
diff --git a/client/src/app/+admin/moderation/video-auto-blacklist-list/index.ts b/client/src/app/+admin/moderation/video-auto-blacklist-list/index.ts new file mode 100644 index 000000000..e3522f68c --- /dev/null +++ b/client/src/app/+admin/moderation/video-auto-blacklist-list/index.ts | |||
@@ -0,0 +1 @@ | |||
export * from './video-auto-blacklist-list.component' | |||
diff --git a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.html b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.html new file mode 100644 index 000000000..fe579ffd7 --- /dev/null +++ b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.html | |||
@@ -0,0 +1,49 @@ | |||
1 | <div i18n *ngIf="pagination.totalItems === 0">No results.</div> | ||
2 | <div | ||
3 | myInfiniteScroller | ||
4 | [pageHeight]="pageHeight" | ||
5 | (nearOfTop)="onNearOfTop()" | ||
6 | (nearOfBottom)="onNearOfBottom()" | ||
7 | (pageChanged)="onPageChanged($event)" | ||
8 | class="videos" #videosElement | ||
9 | > | ||
10 | <div *ngFor="let videos of videoPages; let i = index" class="videos-page"> | ||
11 | <div class="video" *ngFor="let video of videos; let j = index"> | ||
12 | <div class="checkbox-container"> | ||
13 | <my-peertube-checkbox [inputName]="'video-check-' + video.id" [(ngModel)]="checkedVideos[video.id]"></my-peertube-checkbox> | ||
14 | </div> | ||
15 | <my-video-thumbnail [video]="video"></my-video-thumbnail> | ||
16 | |||
17 | <div class="video-info"> | ||
18 | <a class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a> | ||
19 | <div>{{ video.account.displayName }}</div> | ||
20 | <div>{{ video.publishedAt | myFromNow }}</div> | ||
21 | <div><span i18n>Privacy: </span><span>{{ video.privacy.label }}</span></div> | ||
22 | <div><span i18n>Sensitve: </span><span> {{ video.nsfw }}</span></div> | ||
23 | </div> | ||
24 | |||
25 | <!-- Display only once --> | ||
26 | <div class="action-selection-mode" *ngIf="isInSelectionMode() === true && i === 0 && j === 0"> | ||
27 | <div class="action-selection-mode-child"> | ||
28 | <span i18n class="action-button action-button-cancel-selection" (click)="abortSelectionMode()"> | ||
29 | Cancel | ||
30 | </span> | ||
31 | |||
32 | <span class="action-button action-button-unblacklist-selection" (click)="removeSelectedVideosFromBlacklist()"> | ||
33 | <my-global-icon iconName="tick"></my-global-icon> | ||
34 | <ng-container i18n>Unblacklist</ng-container> | ||
35 | </span> | ||
36 | </div> | ||
37 | </div> | ||
38 | |||
39 | <div class="video-buttons" *ngIf="isInSelectionMode() === false"> | ||
40 | <my-button | ||
41 | i18n-label | ||
42 | label="Unblacklist" | ||
43 | icon="tick" | ||
44 | (click)="removeVideoFromBlacklist(video)" | ||
45 | ></my-button> | ||
46 | </div> | ||
47 | </div> | ||
48 | |||
49 | </div> \ No newline at end of file | ||
diff --git a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.scss b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.scss new file mode 100644 index 000000000..a73c17eb9 --- /dev/null +++ b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.scss | |||
@@ -0,0 +1,94 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | .action-selection-mode { | ||
5 | width: 194px; | ||
6 | display: flex; | ||
7 | justify-content: flex-end; | ||
8 | |||
9 | .action-selection-mode-child { | ||
10 | position: fixed; | ||
11 | |||
12 | .action-button { | ||
13 | display: inline-block; | ||
14 | } | ||
15 | |||
16 | .action-button-cancel-selection { | ||
17 | @include peertube-button; | ||
18 | @include grey-button; | ||
19 | |||
20 | margin-right: 10px; | ||
21 | } | ||
22 | |||
23 | .action-button-unblacklist-selection { | ||
24 | @include peertube-button; | ||
25 | @include orange-button; | ||
26 | @include button-with-icon(21px); | ||
27 | |||
28 | my-global-icon { | ||
29 | @include apply-svg-color(#fff); | ||
30 | } | ||
31 | } | ||
32 | } | ||
33 | } | ||
34 | |||
35 | .video { | ||
36 | @include row-blocks; | ||
37 | |||
38 | &:first-child { | ||
39 | margin-top: 47px; | ||
40 | } | ||
41 | |||
42 | .checkbox-container { | ||
43 | display: flex; | ||
44 | align-items: center; | ||
45 | margin-right: 20px; | ||
46 | margin-left: 12px; | ||
47 | } | ||
48 | |||
49 | my-video-thumbnail { | ||
50 | margin-right: 10px; | ||
51 | } | ||
52 | |||
53 | .video-info { | ||
54 | flex-grow: 1; | ||
55 | |||
56 | .video-info-name { | ||
57 | @include disable-default-a-behaviour; | ||
58 | |||
59 | color: var(--mainForegroundColor); | ||
60 | display: block; | ||
61 | width: fit-content; | ||
62 | font-size: 16px; | ||
63 | font-weight: $font-semibold; | ||
64 | } | ||
65 | } | ||
66 | |||
67 | .video-buttons { | ||
68 | min-width: 190px; | ||
69 | } | ||
70 | } | ||
71 | |||
72 | @media screen and (max-width: $small-view) { | ||
73 | .video { | ||
74 | flex-direction: column; | ||
75 | height: auto; | ||
76 | text-align: center; | ||
77 | |||
78 | .video-info-name { | ||
79 | margin: auto; | ||
80 | } | ||
81 | |||
82 | input[type=checkbox] { | ||
83 | display: none; | ||
84 | } | ||
85 | |||
86 | my-video-thumbnail { | ||
87 | margin-right: 0; | ||
88 | } | ||
89 | |||
90 | .video-buttons { | ||
91 | margin-top: 10px; | ||
92 | } | ||
93 | } | ||
94 | } | ||
diff --git a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.ts b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.ts new file mode 100644 index 000000000..b79f574c9 --- /dev/null +++ b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.ts | |||
@@ -0,0 +1,100 @@ | |||
1 | import { Component, OnInit, OnDestroy } from '@angular/core' | ||
2 | import { Location } from '@angular/common' | ||
3 | import { I18n } from '@ngx-translate/i18n-polyfill' | ||
4 | import { Router, ActivatedRoute } from '@angular/router' | ||
5 | import { AbstractVideoList } from '@app/shared/video/abstract-video-list' | ||
6 | import { ComponentPagination } from '@app/shared/rest/component-pagination.model' | ||
7 | import { Notifier, AuthService } from '@app/core' | ||
8 | import { Video } from '@shared/models' | ||
9 | import { VideoBlacklistService } from '@app/shared' | ||
10 | import { immutableAssign } from '@app/shared/misc/utils' | ||
11 | import { ScreenService } from '@app/shared/misc/screen.service' | ||
12 | |||
13 | @Component({ | ||
14 | selector: 'my-video-auto-blacklist-list', | ||
15 | templateUrl: './video-auto-blacklist-list.component.html', | ||
16 | styleUrls: [ './video-auto-blacklist-list.component.scss' ] | ||
17 | }) | ||
18 | export class VideoAutoBlacklistListComponent extends AbstractVideoList implements OnInit, OnDestroy { | ||
19 | titlePage: string | ||
20 | currentRoute = '/admin/moderation/video-auto-blacklist/list' | ||
21 | checkedVideos: { [ id: number ]: boolean } = {} | ||
22 | pagination: ComponentPagination = { | ||
23 | currentPage: 1, | ||
24 | itemsPerPage: 5, | ||
25 | totalItems: null | ||
26 | } | ||
27 | |||
28 | protected baseVideoWidth = -1 | ||
29 | protected baseVideoHeight = 155 | ||
30 | |||
31 | constructor ( | ||
32 | protected router: Router, | ||
33 | protected route: ActivatedRoute, | ||
34 | protected i18n: I18n, | ||
35 | protected notifier: Notifier, | ||
36 | protected location: Location, | ||
37 | protected authService: AuthService, | ||
38 | protected screenService: ScreenService, | ||
39 | private videoBlacklistService: VideoBlacklistService, | ||
40 | ) { | ||
41 | super() | ||
42 | |||
43 | this.titlePage = this.i18n('Auto-blacklisted videos') | ||
44 | } | ||
45 | |||
46 | ngOnInit () { | ||
47 | super.ngOnInit() | ||
48 | } | ||
49 | |||
50 | ngOnDestroy () { | ||
51 | super.ngOnDestroy() | ||
52 | } | ||
53 | |||
54 | abortSelectionMode () { | ||
55 | this.checkedVideos = {} | ||
56 | } | ||
57 | |||
58 | isInSelectionMode () { | ||
59 | return Object.keys(this.checkedVideos).some(k => this.checkedVideos[k] === true) | ||
60 | } | ||
61 | |||
62 | getVideosObservable (page: number) { | ||
63 | const newPagination = immutableAssign(this.pagination, { currentPage: page }) | ||
64 | |||
65 | return this.videoBlacklistService.getAutoBlacklistedAsVideoList(newPagination) | ||
66 | } | ||
67 | |||
68 | generateSyndicationList () { | ||
69 | throw new Error('Method not implemented.') | ||
70 | } | ||
71 | |||
72 | removeVideoFromBlacklist (entry: Video) { | ||
73 | this.videoBlacklistService.removeVideoFromBlacklist(entry.id).subscribe( | ||
74 | () => { | ||
75 | this.notifier.success(this.i18n('Video {{name}} removed from blacklist.', { name: entry.name })) | ||
76 | this.reloadVideos() | ||
77 | }, | ||
78 | |||
79 | error => this.notifier.error(error.message) | ||
80 | ) | ||
81 | } | ||
82 | |||
83 | removeSelectedVideosFromBlacklist () { | ||
84 | const toReleaseVideosIds = Object.keys(this.checkedVideos) | ||
85 | .filter(k => this.checkedVideos[ k ] === true) | ||
86 | .map(k => parseInt(k, 10)) | ||
87 | |||
88 | this.videoBlacklistService.removeVideoFromBlacklist(toReleaseVideosIds).subscribe( | ||
89 | () => { | ||
90 | this.notifier.success(this.i18n('{{num}} videos removed from blacklist.', { num: toReleaseVideosIds.length })) | ||
91 | |||
92 | this.abortSelectionMode() | ||
93 | this.reloadVideos() | ||
94 | }, | ||
95 | |||
96 | error => this.notifier.error(error.message) | ||
97 | ) | ||
98 | } | ||
99 | |||
100 | } | ||