aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+admin/moderation
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-04-04 10:44:18 +0200
committerChocobozzz <me@florianbigard.com>2019-04-05 10:53:08 +0200
commit693263e936763a851e3c8c020e3739def8bd4eca (patch)
tree7fd333fcf76edbc24f3daf4a78e47ff55f048b04 /client/src/app/+admin/moderation
parent9ba1d64b1ac77304d9ffb1b3432a90ea00ff3281 (diff)
downloadPeerTube-693263e936763a851e3c8c020e3739def8bd4eca.tar.gz
PeerTube-693263e936763a851e3c8c020e3739def8bd4eca.tar.zst
PeerTube-693263e936763a851e3c8c020e3739def8bd4eca.zip
Refactor videos selection components
Diffstat (limited to 'client/src/app/+admin/moderation')
-rw-r--r--client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.html48
-rw-r--r--client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.scss67
-rw-r--r--client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.ts56
3 files changed, 42 insertions, 129 deletions
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
index 5ef497fa7..62dde60bb 100644
--- 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
@@ -1,33 +1,19 @@
1<div i18n *ngIf="pagination.totalItems === 0">No results.</div> 1<my-videos-selection
2 [(selection)]="selection"
3 [(videosModel)]="videos"
4 [miniatureDisplayOptions]="miniatureDisplayOptions"
5 [titlePage]="titlePage"
6 [getVideosObservableFunction]="getVideosObservableFunction"
7>
8 <ng-template ptTemplate="globalButtons">
9 <span class="action-button action-button-unblacklist-selection" (click)="removeSelectedVideosFromBlacklist()">
10 <my-global-icon iconName="tick"></my-global-icon>
11 <ng-container i18n>Unblacklist</ng-container>
12 </span>
13 </ng-template>
2 14
3<div myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" class="videos"> 15 <ng-template ptTemplate="rowButtons" let-video>
4 <div class="video" *ngFor="let video of videos; let i = index"> 16 <my-button i18n-label label="Unblacklist" icon="tick" (click)="removeVideoFromBlacklist(video)"></my-button>
5 <div class="checkbox-container"> 17 </ng-template>
6 <my-peertube-checkbox [inputName]="'video-check-' + video.id" [(ngModel)]="checkedVideos[video.id]"></my-peertube-checkbox>
7 </div>
8 18
9 <my-video-miniature [video]="video" [displayAsRow]="true" [displayOptions]="miniatureDisplayOptions"></my-video-miniature> 19</my-videos-selection>
10
11 <!-- Display only once -->
12 <div class="action-selection-mode" *ngIf="isInSelectionMode() === true && i === 0">
13 <div class="action-selection-mode-child">
14 <span i18n class="action-button action-button-cancel-selection" (click)="abortSelectionMode()">
15 Cancel
16 </span>
17
18 <span class="action-button action-button-unblacklist-selection" (click)="removeSelectedVideosFromBlacklist()">
19 <my-global-icon iconName="tick"></my-global-icon>
20 <ng-container i18n>Unblacklist</ng-container>
21 </span>
22 </div>
23 </div>
24
25 <my-button
26 *ngIf="isInSelectionMode() === false"
27 i18n-label
28 label="Unblacklist"
29 icon="tick"
30 (click)="removeVideoFromBlacklist(video)"
31 ></my-button>
32 </div>
33</div>
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
index e43a2aa7b..85ebc6041 100644
--- 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
@@ -1,67 +1,14 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4.action-selection-mode { 4.action-button-unblacklist-selection {
5 width: 194px; 5 display: inline-block;
6 display: flex;
7 justify-content: flex-end;
8 6
9 .action-selection-mode-child { 7 @include peertube-button;
10 position: fixed; 8 @include orange-button;
9 @include button-with-icon(21px);
11 10
12 .action-button { 11 my-global-icon {
13 display: inline-block; 12 @include apply-svg-color(#fff);
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-miniature {
50 flex-grow: 1;
51 }
52}
53
54@media screen and (max-width: $small-view) {
55 .video {
56 flex-direction: column;
57 height: auto;
58
59 .checkbox-container {
60 display: none;
61 }
62
63 my-button {
64 margin-top: 10px;
65 }
66 } 13 }
67} 14}
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
index d66a6dcae..fb2962b47 100644
--- 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
@@ -1,29 +1,23 @@
1import { Component, OnDestroy, OnInit } from '@angular/core' 1import { Component } from '@angular/core'
2import { I18n } from '@ngx-translate/i18n-polyfill' 2import { I18n } from '@ngx-translate/i18n-polyfill'
3import { ActivatedRoute, Router } from '@angular/router' 3import { ActivatedRoute, Router } from '@angular/router'
4import { AbstractVideoList } from '@app/shared/video/abstract-video-list'
5import { ComponentPagination } from '@app/shared/rest/component-pagination.model' 4import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
6import { AuthService, Notifier, ServerService } from '@app/core' 5import { AuthService, Notifier, ServerService } from '@app/core'
7import { Video } from '@shared/models'
8import { VideoBlacklistService } from '@app/shared' 6import { VideoBlacklistService } from '@app/shared'
9import { immutableAssign } from '@app/shared/misc/utils' 7import { immutableAssign } from '@app/shared/misc/utils'
10import { ScreenService } from '@app/shared/misc/screen.service' 8import { ScreenService } from '@app/shared/misc/screen.service'
11import { MiniatureDisplayOptions } from '@app/shared/video/video-miniature.component' 9import { MiniatureDisplayOptions } from '@app/shared/video/video-miniature.component'
10import { SelectionType } from '@app/shared/video/videos-selection.component'
11import { Video } from '@app/shared/video/video.model'
12 12
13@Component({ 13@Component({
14 selector: 'my-video-auto-blacklist-list', 14 selector: 'my-video-auto-blacklist-list',
15 templateUrl: './video-auto-blacklist-list.component.html', 15 templateUrl: './video-auto-blacklist-list.component.html',
16 styleUrls: [ './video-auto-blacklist-list.component.scss' ] 16 styleUrls: [ './video-auto-blacklist-list.component.scss' ]
17}) 17})
18export class VideoAutoBlacklistListComponent extends AbstractVideoList implements OnInit, OnDestroy { 18export class VideoAutoBlacklistListComponent {
19 titlePage: string 19 titlePage: string
20 checkedVideos: { [ id: number ]: boolean } = {} 20 selection: SelectionType = {}
21 pagination: ComponentPagination = {
22 currentPage: 1,
23 itemsPerPage: 5,
24 totalItems: null
25 }
26
27 miniatureDisplayOptions: MiniatureDisplayOptions = { 21 miniatureDisplayOptions: MiniatureDisplayOptions = {
28 date: true, 22 date: true,
29 views: false, 23 views: false,
@@ -34,6 +28,13 @@ export class VideoAutoBlacklistListComponent extends AbstractVideoList implement
34 blacklistInfo: false, 28 blacklistInfo: false,
35 nsfw: true 29 nsfw: true
36 } 30 }
31 pagination: ComponentPagination = {
32 currentPage: 1,
33 itemsPerPage: 5,
34 totalItems: null
35 }
36 videos: Video[] = []
37 getVideosObservableFunction = this.getVideosObservable.bind(this)
37 38
38 constructor ( 39 constructor (
39 protected router: Router, 40 protected router: Router,
@@ -45,42 +46,21 @@ export class VideoAutoBlacklistListComponent extends AbstractVideoList implement
45 private i18n: I18n, 46 private i18n: I18n,
46 private videoBlacklistService: VideoBlacklistService 47 private videoBlacklistService: VideoBlacklistService
47 ) { 48 ) {
48 super()
49
50 this.titlePage = this.i18n('Auto-blacklisted videos') 49 this.titlePage = this.i18n('Auto-blacklisted videos')
51 } 50 }
52 51
53 ngOnInit () {
54 super.ngOnInit()
55 }
56
57 ngOnDestroy () {
58 super.ngOnDestroy()
59 }
60
61 abortSelectionMode () {
62 this.checkedVideos = {}
63 }
64
65 isInSelectionMode () {
66 return Object.keys(this.checkedVideos).some(k => this.checkedVideos[k] === true)
67 }
68
69 getVideosObservable (page: number) { 52 getVideosObservable (page: number) {
70 const newPagination = immutableAssign(this.pagination, { currentPage: page }) 53 const newPagination = immutableAssign(this.pagination, { currentPage: page })
71 54
72 return this.videoBlacklistService.getAutoBlacklistedAsVideoList(newPagination) 55 return this.videoBlacklistService.getAutoBlacklistedAsVideoList(newPagination)
73 } 56 }
74 57
75 generateSyndicationList () {
76 throw new Error('Method not implemented.')
77 }
78
79 removeVideoFromBlacklist (entry: Video) { 58 removeVideoFromBlacklist (entry: Video) {
80 this.videoBlacklistService.removeVideoFromBlacklist(entry.id).subscribe( 59 this.videoBlacklistService.removeVideoFromBlacklist(entry.id).subscribe(
81 () => { 60 () => {
82 this.notifier.success(this.i18n('Video {{name}} removed from blacklist.', { name: entry.name })) 61 this.notifier.success(this.i18n('Video {{name}} removed from blacklist.', { name: entry.name }))
83 this.reloadVideos() 62
63 this.videos = this.videos.filter(v => v.id !== entry.id)
84 }, 64 },
85 65
86 error => this.notifier.error(error.message) 66 error => this.notifier.error(error.message)
@@ -88,16 +68,16 @@ export class VideoAutoBlacklistListComponent extends AbstractVideoList implement
88 } 68 }
89 69
90 removeSelectedVideosFromBlacklist () { 70 removeSelectedVideosFromBlacklist () {
91 const toReleaseVideosIds = Object.keys(this.checkedVideos) 71 const toReleaseVideosIds = Object.keys(this.selection)
92 .filter(k => this.checkedVideos[ k ] === true) 72 .filter(k => this.selection[ k ] === true)
93 .map(k => parseInt(k, 10)) 73 .map(k => parseInt(k, 10))
94 74
95 this.videoBlacklistService.removeVideoFromBlacklist(toReleaseVideosIds).subscribe( 75 this.videoBlacklistService.removeVideoFromBlacklist(toReleaseVideosIds).subscribe(
96 () => { 76 () => {
97 this.notifier.success(this.i18n('{{num}} videos removed from blacklist.', { num: toReleaseVideosIds.length })) 77 this.notifier.success(this.i18n('{{num}} videos removed from blacklist.', { num: toReleaseVideosIds.length }))
98 78
99 this.abortSelectionMode() 79 this.selection = {}
100 this.reloadVideos() 80 this.videos = this.videos.filter(v => toReleaseVideosIds.includes(v.id) === false)
101 }, 81 },
102 82
103 error => this.notifier.error(error.message) 83 error => this.notifier.error(error.message)