From d6af81469ba9390ce8ce80161a7de3526ae0253d Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Mon, 13 Apr 2020 19:57:57 +0200 Subject: [PATCH] Rich reporter field and video embed in moderation abuse list --- .../moderation/moderation.component.scss | 29 +++++++--- .../video-abuse-list.component.html | 39 ++++++++++---- .../video-abuse-list.component.ts | 33 ++++++++++-- .../video-blacklist-list.component.html | 6 +-- .../users/user-list/user-list.component.html | 19 +++++-- .../users/user-list/user-list.component.scss | 4 ++ .../users/user-list/user-list.component.ts | 5 ++ .../my-account-video-channels.component.ts | 2 +- client/src/sass/include/_mixins.scss | 54 +++++++++++++++++++ 9 files changed, 163 insertions(+), 28 deletions(-) diff --git a/client/src/app/+admin/moderation/moderation.component.scss b/client/src/app/+admin/moderation/moderation.component.scss index 13b019c5b..89e9b47d3 100644 --- a/client/src/app/+admin/moderation/moderation.component.scss +++ b/client/src/app/+admin/moderation/moderation.component.scss @@ -8,18 +8,35 @@ .moderation-expanded-label { font-weight: $font-semibold; - min-width: 200px; display: inline-block; vertical-align: top; + text-align: right; } .moderation-expanded-text { display: inline-block; + word-wrap: break-word; + + ::ng-deep p:last-child { + margin-bottom: 0px !important; + } } -.moderation-expanded { - word-wrap: break-word; - overflow: visible !important; - text-overflow: unset !important; - white-space: unset !important; +.screenratio { + position: relative; + width: 100%; + height: 0; + padding-bottom: 56%; + + ::ng-deep iframe { + position: absolute; + width: 100% !important; + height: 100% !important; + left: 0; + top: 0; + } +} + +.chip { + @include chip; } 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 cf7b61d2a..155d10dda 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 @@ -24,8 +24,19 @@ - - {{ createByString(videoAbuse.reporterAccount) }} + +
+ Avatar +
+ {{ videoAbuse.reporterAccount.displayName }} + {{ createByString(videoAbuse.reporterAccount) }} +
+
@@ -50,14 +61,22 @@ - -
- Reason: - -
-
- Moderation comment: - + +
+
+
+ Reason: + +
+
+ Note: + +
+
+ +
+
+
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 2d991aae9..b135792a7 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 @@ -10,6 +10,10 @@ import { ConfirmService } from '../../../core/index' import { ModerationCommentModalComponent } from './moderation-comment-modal.component' import { Video } from '../../../shared/video/video.model' import { MarkdownService } from '@app/shared/renderer' +import { Actor } from '@app/shared/actor/actor.model' +import { buildVideoLink, buildVideoEmbed } from 'src/assets/player/utils' +import { getAbsoluteAPIUrl } from '@app/shared/misc/utils' +import { DomSanitizer } from '@angular/platform-browser' @Component({ selector: 'my-video-abuse-list', @@ -32,7 +36,8 @@ export class VideoAbuseListComponent extends RestTable implements OnInit { private videoAbuseService: VideoAbuseService, private confirmService: ConfirmService, private i18n: I18n, - private markdownRenderer: MarkdownService + private markdownRenderer: MarkdownService, + private sanitizer: DomSanitizer ) { super() @@ -42,8 +47,14 @@ export class VideoAbuseListComponent extends RestTable implements OnInit { handler: videoAbuse => this.removeVideoAbuse(videoAbuse) }, { - label: this.i18n('Update moderation comment'), - handler: videoAbuse => this.openModerationCommentModal(videoAbuse) + label: this.i18n('Add note'), + handler: videoAbuse => this.openModerationCommentModal(videoAbuse), + isDisplayed: videoAbuse => !videoAbuse.moderationComment + }, + { + label: this.i18n('Update note'), + handler: videoAbuse => this.openModerationCommentModal(videoAbuse), + isDisplayed: videoAbuse => !!videoAbuse.moderationComment }, { label: this.i18n('Mark as accepted'), @@ -90,6 +101,19 @@ export class VideoAbuseListComponent extends RestTable implements OnInit { return Video.buildClientUrl(videoAbuse.video.uuid) } + getVideoEmbed (videoAbuse: VideoAbuse) { + const absoluteAPIUrl = 'http://localhost:9000' || getAbsoluteAPIUrl() + const embedUrl = buildVideoLink({ + baseUrl: absoluteAPIUrl + '/videos/embed/' + videoAbuse.video.uuid, + warningTitle: false + }) + return buildVideoEmbed(embedUrl) + } + + switchToDefaultAvatar ($event: Event) { + ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL() + } + async removeVideoAbuse (videoAbuse: VideoAbuse) { const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this abuse report?'), this.i18n('Delete')) if (res === false) return @@ -125,7 +149,8 @@ export class VideoAbuseListComponent extends RestTable implements OnInit { for (const abuse of this.videoAbuses) { Object.assign(abuse, { reasonHtml: await this.toHtml(abuse.reason), - moderationCommentHtml: await this.toHtml(abuse.moderationComment) + moderationCommentHtml: await this.toHtml(abuse.moderationComment), + embedHtml: this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(abuse)) }) } diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html index a39e7639e..320172e37 100644 --- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html +++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html @@ -42,9 +42,9 @@ - - Blacklist reason: - + + Blacklist reason: + diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html index 15bdb6398..e9ff61283 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.html +++ b/client/src/app/+admin/users/user-list/user-list.component.html @@ -51,19 +51,30 @@ - + - + - - {{ user.username }} + +
+ Avatar +
+ {{ user.account.displayName }} + {{ user.username }} +
+
(banned) diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss index 40f08027f..99b22aaea 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.scss +++ b/client/src/app/+admin/users/user-list/user-list.component.scss @@ -29,3 +29,7 @@ p-tableCheckbox { position: relative; top: -2.5px; } + +.chip { + @include chip; +} diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts index 0de123e93..667a0e1fd 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.ts +++ b/client/src/app/+admin/users/user-list/user-list.component.ts @@ -7,6 +7,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill' import { ServerConfig, User } from '../../../../../../shared' import { UserBanModalComponent } from '@app/shared/moderation' import { DropdownAction } from '@app/shared/buttons/action-dropdown.component' +import { Actor } from '@app/shared/actor/actor.model' @Component({ selector: 'my-user-list', @@ -105,6 +106,10 @@ export class UserListComponent extends RestTable implements OnInit { this.loadData() } + switchToDefaultAvatar ($event: Event) { + ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL() + } + async unbanUsers (users: User[]) { const message = this.i18n('Do you really want to unban {{num}} users?', { num: users.length }) diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts index 153fc0127..75d6d8acd 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts @@ -56,7 +56,7 @@ export class MyAccountVideoChannelsComponent implements OnInit { display: false, ticks: { min: Math.max(0, this.videoChannelsMinimumDailyViews - (3 * this.videoChannelsMaximumDailyViews / 100)), - max: this.videoChannelsMaximumDailyViews + max: Math.max(1, this.videoChannelsMaximumDailyViews) } }] }, diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 975072637..3c420f547 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -796,3 +796,57 @@ } } } + +@mixin chip { + $avatar-height: 1.2rem; + + align-items: center; + border-radius: 5rem; + display: inline-flex; + font-size: 90%; + color: var(--mainForegroundColor); + height: $avatar-height; + line-height: .8rem; + margin: .1rem; + max-width: 320px; + overflow: hidden; + padding: .2rem .4rem; + text-decoration: none; + text-overflow: ellipsis; + vertical-align: middle; + white-space: nowrap; + + .avatar { + margin-left: -.4rem; + margin-right: .2rem; + height: $avatar-height; + width: $avatar-height; + + border-radius: 50%; + display: inline-block; + line-height: 1.25; + position: relative; + vertical-align: middle; + } + + &.two-lines { + $avatar-height: 1.8rem; + + height: $avatar-height; + + .avatar { + height: $avatar-height; + width: $avatar-height; + } + + div { + display: flex; + flex-direction: column; + font-size: 80%; + height: $avatar-height; + margin-left: .1rem; + margin-right: .1rem; + justify-content: center; + } + } +}