}
}
-.video-abuse-states {
+.video-table-states {
& > :not(:first-child) {
margin-left: .4rem;
}
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%;
+ }
+ }
+}
</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>
</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>
<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>
<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 -->
}
}
-.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;
}
<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>
</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>
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
}
export interface VideoBlacklist {
id: number
- createdAt: Date
- updatedAt: Date
unfederated: boolean
reason?: string
type: VideoBlacklistType
video: Video
+
+ createdAt: Date
+ updatedAt: Date
}