decouple video abuse details from embed, add embed to block list details

client/src/app/+admin/moderation/video-block-list/video-block-list.component.html

@@ -57,12 +57,12 @@ <h6 class="dropdown-header" i18n>Advanced block filters</h6>
       </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 }}
@@ -97,8 +97,20 @@ <h6 class="dropdown-header" i18n>Advanced block filters</h6>
     <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>

client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts

@@ -7,14 +7,17 @@ import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
 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 }
@@ -28,6 +31,7 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
     private confirmService: ConfirmService,
     private videoBlocklistService: VideoBlockService,
     private markdownRenderer: MarkdownService,
+    private sanitizer: DomSanitizer,
     private videoService: VideoService,
     private route: ActivatedRoute,
     private router: Router,
@@ -171,6 +175,16 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
     )
   }
 
+  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,
@@ -184,7 +198,10 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
           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))
+            })
           }
         },
 

client/src/app/shared/shared-abuse-list/abuse-details.component.html

@@ -96,12 +96,8 @@
   <!-- 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">

client/src/app/shared/shared-abuse-list/abuse-details.component.scss

@@ -2,23 +2,6 @@
 @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;

client/src/app/shared/shared-abuse-list/abuse-list-table.component.html

@@ -175,7 +175,7 @@ <h6 class="dropdown-header" i18n>Advanced report filters</h6>
 
   <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>

client/src/app/shared/shared-main/feeds/feed.component.html

@@ -1,6 +1,6 @@
 <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>

client/src/app/shared/shared-moderation/moderation.scss

@@ -22,6 +22,23 @@
   }
 }
 
+.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);
 

client/src/standalone/videos/embed.ts

@@ -17,6 +17,7 @@ import { PeerTubeEmbedApi } from './embed-api'
 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 }
 
@@ -42,6 +43,9 @@ export class PeerTubeEmbed {
   mode: PlayerMode
   scope = 'peertube'
 
+  user: AuthUser
+  headers = new Headers()
+
   static async main () {
     const videoContainerId = 'video-container'
     const embed = new PeerTubeEmbed(videoContainerId)
@@ -57,11 +61,11 @@ export class PeerTubeEmbed {
   }
 
   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> {
@@ -111,6 +115,7 @@ export class PeerTubeEmbed {
 
   async init () {
     try {
+      this.user = AuthUser.load()
       await this.initCore()
     } catch (e) {
       console.error(e)
@@ -163,6 +168,10 @@ export class PeerTubeEmbed {
     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()

client/webpack/webpack.video-embed.js

@@ -27,7 +27,9 @@ module.exports = function () {
       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')
       }
     },