</td>
<td>
- <a [href]="getVideoUrl(videoBlock)" class="video-table-video-link" [title]="videoBlock.video.name" target="_blank" rel="noopener noreferrer">
- <div class="video-table-video">
- <div class="video-table-video-image">
+ <a [href]="getVideoUrl(videoBlock)" class="table-video-link" [title]="videoBlock.video.name" target="_blank" rel="noopener noreferrer">
+ <div class="table-video">
+ <div class="table-video-image">
<img [src]="videoBlock.video.thumbnailPath">
</div>
- <div class="video-table-video-text">
+ <div class="table-video-text">
<div>
<my-global-icon i18n-title title="The video was blocked due to automatic blocking of new videos" *ngIf="videoBlock.type == 2" iconName="robot"></my-global-icon>
{{ videoBlock.video.name }}
<tr>
<td class="expand-cell" colspan="6">
<div class="d-flex moderation-expanded">
- <span class="col-2 moderation-expanded-label" i18n>Block reason:</span>
- <span class="col-9 moderation-expanded-text" [innerHTML]="videoBlock.reasonHtml"></span>
+
+ <!-- block right part (block details) -->
+ <div class="col-8">
+ <span class="col-3 moderation-expanded-label" i18n>Block reason:</span>
+ <span class="col-9 moderation-expanded-text" [innerHTML]="videoBlock.reasonHtml"></span>
+ </div>
+
+ <!-- block right part (video embed) -->
+ <div class="col-4">
+ <div class="screenratio">
+ <div [innerHTML]="videoBlock.embedHtml"></div>
+ </div>
+ </div>
+
</div>
</td>
</tr>
import { VideoBlockService } from '@app/shared/shared-moderation'
import { I18n } from '@ngx-translate/i18n-polyfill'
import { VideoBlacklist, VideoBlacklistType } from '@shared/models'
+import { buildVideoEmbed, buildVideoLink } from 'src/assets/player/utils'
+import { environment } from 'src/environments/environment'
+import { DomSanitizer } from '@angular/platform-browser'
@Component({
selector: 'my-video-block-list',
templateUrl: './video-block-list.component.html',
- styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-block-list.component.scss' ]
+ styleUrls: [ '../../../shared/shared-moderation/moderation.scss', '../../../shared/shared-abuse-list/abuse-list-table.component.scss', './video-block-list.component.scss' ]
})
export class VideoBlockListComponent extends RestTable implements OnInit, AfterViewInit {
- blocklist: (VideoBlacklist & { reasonHtml?: string })[] = []
+ blocklist: (VideoBlacklist & { reasonHtml?: string, embedHtml?: string })[] = []
totalRecords = 0
sort: SortMeta = { field: 'createdAt', order: -1 }
pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
private confirmService: ConfirmService,
private videoBlocklistService: VideoBlockService,
private markdownRenderer: MarkdownService,
+ private sanitizer: DomSanitizer,
private videoService: VideoService,
private route: ActivatedRoute,
private router: Router,
)
}
+ getVideoEmbed (entry: VideoBlacklist) {
+ return buildVideoEmbed(
+ buildVideoLink({
+ baseUrl: `${environment.embedUrl}/videos/embed/${entry.video.uuid}`,
+ title: false,
+ warningTitle: false
+ })
+ )
+ }
+
protected loadData () {
this.videoBlocklistService.listBlocks({
pagination: this.pagination,
this.blocklist = resultList.data
for (const element of this.blocklist) {
- Object.assign(element, { reasonHtml: await this.toHtml(element.reason) })
+ Object.assign(element, {
+ reasonHtml: await this.toHtml(element.reason),
+ embedHtml: this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(element))
+ })
}
},
<!-- report right part (video/comment details) -->
<div class="col-4">
<div *ngIf="abuse.video" class="screenratio">
- <div>
- <span i18n *ngIf="abuse.video.deleted">The video was deleted</span>
- <span i18n *ngIf="!abuse.video.deleted">The video was blocked</span>
- </div>
-
- <div *ngIf="!abuse.video.deleted && !abuse.video.blacklisted" [innerHTML]="abuse.embedHtml"></div>
+ <div *ngIf="abuse.video.deleted" i18n>The video was deleted</div>
+ <div *ngIf="!abuse.video.deleted" [innerHTML]="abuse.embedHtml"></div>
</div>
<div *ngIf="abuse.comment" class="comment-html">
@import 'mixins';
@import 'miniature';
-.screenratio {
- div {
- @include miniature-thumbnail;
-
- display: inline-flex;
- justify-content: center;
- align-items: center;
- color: pvar(--inputPlaceholderColor);
- }
-
- @include large-screen-ratio($selector: 'div, ::ng-deep iframe') {
- width: 100% !important;
- height: 100% !important;
- left: 0;
- };
-}
-
.comment-html {
background-color: #ececec;
padding: 10px;
<ng-template pTemplate="rowexpansion" let-abuse>
<tr>
- <td class="expand-cell" colspan="6">
+ <td class="expand-cell" colspan="8">
<my-abuse-details [abuse]="abuse" [baseRoute]="baseRoute" [isAdminView]="isAdminView()"></my-abuse-details>
</td>
</tr>
<div class="video-feed">
<my-global-icon
- *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="left auto"
+ *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom left auto"
class="icon-syndication" role="button" iconName="syndication"
>
</my-global-icon>
}
}
+.screenratio {
+ div {
+ @include miniature-thumbnail;
+
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ color: pvar(--inputPlaceholderColor);
+ }
+
+ @include large-screen-ratio($selector: 'div, ::ng-deep iframe') {
+ width: 100% !important;
+ height: 100% !important;
+ left: 0;
+ };
+}
+
.input-group {
@include peertube-input-group(300px);
import { TranslationsManager } from '../../assets/player/translations-manager'
import videojs from 'video.js'
import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
+import { AuthUser } from '@app/core/auth/auth-user.model'
type Translations = { [ id: string ]: string }
mode: PlayerMode
scope = 'peertube'
+ user: AuthUser
+ headers = new Headers()
+
static async main () {
const videoContainerId = 'video-container'
const embed = new PeerTubeEmbed(videoContainerId)
}
loadVideoInfo (videoId: string): Promise<Response> {
- return fetch(this.getVideoUrl(videoId))
+ return fetch(this.getVideoUrl(videoId), { headers: this.headers })
}
loadVideoCaptions (videoId: string): Promise<Response> {
- return fetch(this.getVideoUrl(videoId) + '/captions')
+ return fetch(this.getVideoUrl(videoId) + '/captions', { headers: this.headers })
}
loadConfig (): Promise<Response> {
async init () {
try {
+ this.user = AuthUser.load()
await this.initCore()
} catch (e) {
console.error(e)
const urlParts = window.location.pathname.split('/')
const videoId = urlParts[ urlParts.length - 1 ]
+ if (this.user) {
+ this.headers.set('Authorization', `${this.user.getTokenType()} ${this.user.getAccessToken()}`)
+ }
+
const videoPromise = this.loadVideoInfo(videoId)
const captionsPromise = this.loadVideoCaptions(videoId)
const configPromise = this.loadConfig()
modules: [ helpers.root('src'), helpers.root('node_modules') ],
alias: {
- 'video.js$': path.resolve('node_modules/video.js/core.js')
+ 'video.js$': path.resolve('node_modules/video.js/core.js'),
+ '@app': path.resolve('src/app'),
+ '@shared': path.resolve('../shared')
}
},