Factorize video display in table for moderation components, apply it to blacklisted videos as well

pull/2711/head
Rigel Kent 2020-04-19 10:20:08 +02:00 committed by Rigel Kent
parent 5fd4ca0051
commit aeb1bed983
6 changed files with 102 additions and 85 deletions

View File

@ -27,7 +27,7 @@
}
}
.video-abuse-states {
.video-table-states {
& > :not(:first-child) {
margin-left: .4rem;
}
@ -68,3 +68,71 @@ my-action-dropdown.show {
display: block !important;
}
}
.video-table-video-link {
@include disable-outline;
position: relative;
top: 3px;
}
.video-table-video {
display: inline-flex;
.video-table-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;
position: relative;
img {
height: 100%;
width: 100%;
border-radius: 2px;
}
span {
color: var(--inputPlaceholderColor);
}
.video-table-video-image-label {
@include static-thumbnail-overlay;
position: absolute;
border-radius: 3px;
font-size: 10px;
padding: 0 3px;
line-height: 1.3;
bottom: 2px;
right: 2px;
}
}
.video-table-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%;
}
}
}

View File

@ -52,16 +52,16 @@
</td>
<td *ngIf="!videoAbuse.video.deleted">
<a [href]="getVideoUrl(videoAbuse)" class="video-abuse-video-link" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
<div class="video-abuse-video">
<div class="video-abuse-video-image">
<a [href]="getVideoUrl(videoAbuse)" class="video-table-video-link" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
<div class="video-table-video">
<div class="video-table-video-image">
<img [src]="videoAbuse.video.thumbnailPath">
<span
class="video-abuse-video-image-label" *ngIf="videoAbuse.count > 1"
class="video-table-video-image-label" *ngIf="videoAbuse.count > 1"
i18n-title title="This video has been reported multiple times."
>{{ videoAbuse.nth }}/{{ videoAbuse.count }}</span>
</div>
<div class="video-abuse-video-text">
<div class="video-table-video-text">
<div>
{{ videoAbuse.video.name }}
<span *ngIf="!videoAbuse.video.blacklisted" class="glyphicon glyphicon-new-window"></span>
@ -74,9 +74,9 @@
</td>
<td *ngIf="videoAbuse.video.deleted" class="c-hand" [pRowToggler]="videoAbuse">
<div class="video-abuse-video" i18n-title title="Video was deleted">
<div class="video-abuse-video-image"><span i18n>Deleted</span></div>
<div class="video-abuse-video-text">
<div class="video-table-video" i18n-title title="Video was deleted">
<div class="video-table-video-image"><span i18n>Deleted</span></div>
<div class="video-table-video-text">
<div>
{{ videoAbuse.video.name }}
<span class="glyphicon glyphicon-trash"></span>
@ -123,7 +123,7 @@
<span class="text-muted">{{ createByString(videoAbuse.reporterAccount) }}</span>
</div>
</div>
<a routerLink="/admin/moderation/video-abuses/list" class="ml-auto text-muted video-abuse-links" i18n>
<a routerLink="/admin/moderation/video-abuses/list" 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>
@ -142,14 +142,14 @@
<span class="text-muted">{{ videoAbuse.video.channel.ownerAccount ? createByString(videoAbuse.video.channel.ownerAccount) : '' }}</span>
</div>
</div>
<a routerLink="/admin/moderation/video-abuses/list" class="ml-auto text-muted video-abuse-links" *ngIf="!videoAbuse.video.deleted" i18n>
<a routerLink="/admin/moderation/video-abuses/list" class="ml-auto text-muted video-details-links" *ngIf="!videoAbuse.video.deleted" 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-abuse-date-updated">{{ videoAbuse.updatedAt | date: 'medium' }}</time>
<time class="col-9 moderation-expanded-text video-details-date-updated">{{ videoAbuse.updatedAt | date: 'medium' }}</time>
</div>
<!-- report text -->

View File

@ -9,78 +9,15 @@
}
}
.video-abuse-date-updated {
.video-details-date-updated {
font-size: 90%;
margin-top: .1rem;
}
.video-abuse-links {
.video-details-links {
@include disable-default-a-behaviour;
}
.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;
position: relative;
img {
height: 100%;
width: 100%;
border-radius: 2px;
}
span {
color: var(--inputPlaceholderColor);
}
.video-abuse-video-image-label {
@include static-thumbnail-overlay;
position: absolute;
border-radius: 3px;
font-size: 10px;
padding: 0 3px;
line-height: 1.3;
bottom: 2px;
right: 2px;
}
}
.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%;
}
}
.video-abuse-states .glyphicon-comment {
margin-left: 0.5rem;
}

View File

@ -8,7 +8,7 @@
<tr>
<th style="width: 40px"></th>
<th i18n pSortableColumn="name">Video <p-sortIcon field="name"></p-sortIcon></th>
<th style="width: 120px;" i18n>Sensitive</th>
<th style="width: 100px;" i18n>Sensitive</th>
<th style="width: 120px;" i18n>Unfederated</th>
<th style="width: 190px;" i18n pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
<th style="width: 120px;"></th>
@ -25,8 +25,19 @@
</td>
<td>
<a [href]="getVideoUrl(videoBlacklist)" i18n-title title="Go to the video" target="_blank" rel="noopener noreferrer">
{{ videoBlacklist.video.name }}
<a [href]="getVideoUrl(videoBlacklist)" class="video-table-video-link" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
<div class="video-table-video">
<div class="video-table-video-image">
<img [src]="videoBlacklist.video.thumbnailPath">
</div>
<div class="video-table-video-text">
<div>
{{ videoBlacklist.video.name }}
<span class="glyphicon glyphicon-new-window"></span>
</div>
<div class="text-muted">by {{ videoBlacklist.video.channel?.displayName }} on {{ videoBlacklist.video.channel?.host }} </div>
</div>
</div>
</a>
</td>

View File

@ -38,7 +38,7 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit {
ngOnInit () {
this.serverService.getConfig()
.subscribe(config => {
// don't filter if auto-blacklist not enabled as this will be only list
// don't filter if auto-blacklist not enabled as this will be the only list
if (config.autoBlacklist.videos.ofUsers.enabled) {
this.listBlacklistTypeFilter = VideoBlacklistType.MANUAL
}

View File

@ -7,11 +7,12 @@ export enum VideoBlacklistType {
export interface VideoBlacklist {
id: number
createdAt: Date
updatedAt: Date
unfederated: boolean
reason?: string
type: VideoBlacklistType
video: Video
createdAt: Date
updatedAt: Date
}