Factorize video display in table for moderation components, apply it to blacklisted videos as well
This commit is contained in:
Rigel Kent
Rigel Kent
parent
5fd4ca0051
commit
aeb1bed983
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue