From 86521a67b2edb06a139b095e489c205457eaba8f Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Fri, 17 Apr 2020 10:47:22 +0200 Subject: Add video channel and video thumbnail, rework video appearance in row --- .../instance-server-blocklist.component.html | 7 ++- .../instance-server-blocklist.component.scss | 14 ++++++ .../+admin/moderation/moderation.component.scss | 5 +- .../video-abuse-list.component.html | 23 +++++++-- .../video-abuse-list.component.scss | 57 ++++++++++++++++++++++ .../video-abuse-list/video-abuse-list.component.ts | 49 ++++++++++++++++--- .../users/user-edit/user-update.component.ts | 2 +- 7 files changed, 140 insertions(+), 17 deletions(-) create mode 100644 client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss (limited to 'client/src/app') diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html index 075be8498..19b33a0f5 100644 --- a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html +++ b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html @@ -23,7 +23,12 @@ - {{ serverBlock.blockedServer.host }} + + + {{ serverBlock.blockedServer.host }} + + + {{ serverBlock.createdAt }} diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss index 9d3bedd80..c6c71587f 100644 --- a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss +++ b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss @@ -1,6 +1,20 @@ @import '_variables'; @import '_mixins'; +a { + @include disable-default-a-behaviour; + display: inline-block; + + &, &:hover { + color: var(--mainForegroundColor); + } + + span { + font-size: 80%; + color: var(--inputPlaceholderColor); + } +} + .unblock-button { @include peertube-button; @include grey-button; diff --git a/client/src/app/+admin/moderation/moderation.component.scss b/client/src/app/+admin/moderation/moderation.component.scss index a015b6d85..9ceff1161 100644 --- a/client/src/app/+admin/moderation/moderation.component.scss +++ b/client/src/app/+admin/moderation/moderation.component.scss @@ -29,10 +29,6 @@ } } -.glyphicon-trash { - font-size: 80%; -} - .screenratio { position: relative; width: 100%; @@ -47,6 +43,7 @@ display: inline-flex; justify-content: center; align-items: center; + color: var(--inputPlaceholderColor); } ::ng-deep iframe { diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html index 204cb209e..2204bb371 100644 --- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html +++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html @@ -41,9 +41,22 @@ - - - {{ videoAbuse.video.name }} + +
+
+ + Deleted +
+
+
+ {{ videoAbuse.video.name }} + + + +
+
by {{ videoAbuse.video.channel?.displayName }} on {{ videoAbuse.video.channel?.host }}
+
+
@@ -78,10 +91,10 @@
-
+
The video was {{ videoAbuse.video.deleted ? 'deleted' : 'blacklisted' }}
-
+
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss new file mode 100644 index 000000000..09402fda7 --- /dev/null +++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss @@ -0,0 +1,57 @@ +@import 'mixins'; +@import 'miniature'; + +.video-abuse-video-link { + @include disable-outline; + position: relative; + top: 3px; +} + +.video-abuse-video { + display: inline-flex; + + .video-abuse-video-image { + @include miniature-thumbnail; + + $image-height: 45px; + + height: $image-height; + width: #{(16/9) * $image-height}; + margin-right: 0.5rem; + border-radius: 2px; + border: none; + background: transparent; + display: inline-flex; + justify-content: center; + align-items: center; + + img { + height: 100%; + width: 100%; + border-radius: 2px; + } + + span { + color: var(--inputPlaceholderColor); + } + } + + .video-abuse-video-text { + display: inline-flex; + flex-direction: column; + justify-content: center; + font-size: 90%; + color: var(--mainForegroundColor); + line-height: 1rem; + + div .glyphicon { + font-size: 80%; + color: gray; + margin-left: 0.1rem; + } + + div + div { + font-size: 80%; + } + } +} diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts index 9858cbce2..cc5014ae8 100644 --- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts +++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts @@ -20,14 +20,14 @@ import { VideoService } from '@app/shared/video/video.service' @Component({ selector: 'my-video-abuse-list', templateUrl: './video-abuse-list.component.html', - styleUrls: [ '../moderation.component.scss'] + styleUrls: [ '../moderation.component.scss', './video-abuse-list.component.scss' ] }) export class VideoAbuseListComponent extends RestTable implements OnInit { @ViewChild('moderationCommentModal', { static: true }) moderationCommentModal: ModerationCommentModalComponent videoAbuses: (VideoAbuse & { moderationCommentHtml?: string, reasonHtml?: string })[] = [] totalRecords = 0 - rowsPerPageOptions = [ 20, 50, 100 ] + rowsPerPageOptions = [ 20, 50, 100 ] rowsPerPage = this.rowsPerPageOptions[0] sort: SortMeta = { field: 'createdAt', order: 1 } pagination: RestPagination = { count: this.rowsPerPage, start: 0 } @@ -86,7 +86,7 @@ export class VideoAbuseListComponent extends RestTable implements OnInit { }, { label: this.i18n('Blacklist video'), - isDisplayed: videoAbuse => !videoAbuse.video.deleted, + isDisplayed: videoAbuse => !videoAbuse.video.deleted && !videoAbuse.video.blacklisted, handler: videoAbuse => { this.videoBlacklistService.blacklistVideo(videoAbuse.video.id, undefined, true) .subscribe( @@ -100,11 +100,30 @@ export class VideoAbuseListComponent extends RestTable implements OnInit { ) } }, + { + label: this.i18n('Unblacklist video'), + isDisplayed: videoAbuse => !videoAbuse.video.deleted && videoAbuse.video.blacklisted, + handler: videoAbuse => { + this.videoBlacklistService.removeVideoFromBlacklist(videoAbuse.video.id) + .subscribe( + () => { + this.notifier.success(this.i18n('Video unblacklisted.')) + + 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')) + 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) @@ -126,18 +145,36 @@ export class VideoAbuseListComponent extends RestTable implements OnInit { isHeader: true }, { - label: this.i18n('Mute reporter'), + 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 })) + this.notifier.success( + this.i18n('Account {{nameWithHost}} muted by the instance.', { nameWithHost: account.nameWithHost }) + ) account.mutedByInstance = true }, + err => this.notifier.error(err.message) + ) + } + }, + { + label: this.i18n('Mute server'), + isDisplayed: videoAbuse => !videoAbuse.reporterAccount.userId, + handler: async videoAbuse => { + this.blocklistService.blockServerByInstance(videoAbuse.reporterAccount.host) + .subscribe( + () => { + this.notifier.success( + this.i18n('Server {{host}} muted by the instance.', { host: videoAbuse.reporterAccount.host }) + ) + }, + err => this.notifier.error(err.message) ) } diff --git a/client/src/app/+admin/users/user-edit/user-update.component.ts b/client/src/app/+admin/users/user-edit/user-update.component.ts index fbe3d6950..e0e1fbddf 100644 --- a/client/src/app/+admin/users/user-edit/user-update.component.ts +++ b/client/src/app/+admin/users/user-edit/user-update.component.ts @@ -85,7 +85,7 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy { this.userService.updateUser(this.user.id, userUpdate).subscribe( () => { - this.notifier.success(this.i18n('User {{user.username}} updated.', { username: this.user.username })) + this.notifier.success(this.i18n('User {{username}} updated.', { username: this.user.username })) this.router.navigate([ '/admin/users/list' ]) }, -- cgit v1.2.3