Add videos list admin component

4 files changed, 2 insertions, 106 deletions

diff --git a/client/src/app/shared/shared-moderation/moderation.scss b/client/src/app/shared/shared-moderation/moderation.scss
index 815e2791f..eaf5a8250 100644
--- a/client/src/app/shared/shared-moderation/moderation.scss
+++ b/client/src/app/shared/shared-moderation/moderation.scss
@@ -40,14 +40,6 @@
   }
 }
 
-.screenratio {
-  @include block-ratio($selector: 'div, ::ng-deep iframe') {
-    width: 100% !important;
-    height: 100% !important;
-    left: 0;
-  };
-}
-
 .chip {
   @include chip;
 }
@@ -58,13 +50,6 @@ my-action-dropdown.show {
   }
 }
 
-.table-video-link {
-  @include disable-outline;
-
-  position: relative;
-  top: 3px;
-}
-
 .table-comment-link,
 .table-account-link {
   @include disable-outline;
@@ -81,68 +66,6 @@ my-action-dropdown.show {
   flex-direction: column;
 }
 
-.table-video {
-  display: inline-flex;
-
-  .table-video-image {
-    $image-height: 45px;
-
-    @include miniature-thumbnail;
-    @include margin-right(0.5rem);
-
-    height: $image-height;
-    width: #{math.div(16, 9) * $image-height};
-    border-radius: 2px;
-    border: 0;
-    background: transparent;
-    display: inline-flex;
-    justify-content: center;
-    position: relative;
-
-    img {
-      height: 100%;
-      width: 100%;
-      border-radius: 2px;
-    }
-
-    span {
-      color: pvar(--inputPlaceholderColor);
-    }
-
-    .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;
-    }
-  }
-
-  .table-video-text {
-    display: inline-flex;
-    flex-direction: column;
-    justify-content: center;
-    font-size: 90%;
-    color: pvar(--mainForegroundColor);
-    line-height: 1rem;
-
-    div .glyphicon {
-      @include margin-left(0.1rem);
-
-      font-size: 80%;
-      color: #808080;
-    }
-
-    div + div {
-      color: var(--greyForegroundColor);
-      font-size: 11px;
-    }
-  }
-}
-
 my-abuse-details {
   width: 100%;
 }
diff --git a/client/src/app/shared/shared-moderation/report-modals/report.component.scss b/client/src/app/shared/shared-moderation/report-modals/report.component.scss
index 06e50ac2d..76ec0a6ed 100644
--- a/client/src/app/shared/shared-moderation/report-modals/report.component.scss
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.scss
@@ -19,9 +19,3 @@ textarea {
     @include margin-left(10px);
   }
 }
-
-.screenratio {
-  @include block-ratio($selector: 'div, ::ng-deep iframe') {
-    left: 0;
-  };
-}
diff --git a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
index 1aae64bff..afac108fc 100644
--- a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
@@ -35,9 +35,7 @@
       <div class="col-7">
         <div class="row justify-content-center">
           <div class="col-12 col-lg-9 mb-2">
-            <div class="screenratio">
-              <div [innerHTML]="embedHtml"></div>
-            </div>
+            <my-embed [video]="video"></my-embed>
           </div>
         </div>
 
diff --git a/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts b/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
index 278d60ac6..38dd92910 100644
--- a/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
@@ -1,13 +1,11 @@
 import { mapValues, pickBy } from 'lodash-es'
-import { buildVideoOrPlaylistEmbed } from 'src/assets/player/utils'
 import { Component, Input, OnInit, ViewChild } from '@angular/core'
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
+import { DomSanitizer } from '@angular/platform-browser'
 import { Notifier } from '@app/core'
 import { ABUSE_REASON_VALIDATOR } from '@app/shared/form-validators/abuse-validators'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
-import { decorateVideoLink } from '@shared/core-utils'
 import { abusePredefinedReasonsMap } from '@shared/core-utils/abuse'
 import { AbusePredefinedReasonsString } from '@shared/models'
 import { Video } from '../../shared-main'
@@ -25,7 +23,6 @@ export class VideoReportComponent extends FormReactive implements OnInit {
 
   error: string = null
   predefinedReasons: { id: AbusePredefinedReasonsString, label: string, description?: string, help?: string }[] = []
-  embedHtml: SafeHtml
 
   private openedModal: NgbModalRef
 
@@ -55,20 +52,6 @@ export class VideoReportComponent extends FormReactive implements OnInit {
     return this.form.get('timestamp').value
   }
 
-  getVideoEmbed () {
-    return this.sanitizer.bypassSecurityTrustHtml(
-      buildVideoOrPlaylistEmbed(
-        decorateVideoLink({
-          url: this.video.embedUrl,
-          title: false,
-          warningTitle: false
-        }),
-
-        this.video.name
-      )
-    )
-  }
-
   ngOnInit () {
     this.buildForm({
       reason: ABUSE_REASON_VALIDATOR,
@@ -82,8 +65,6 @@ export class VideoReportComponent extends FormReactive implements OnInit {
     })
 
     this.predefinedReasons = this.abuseService.getPrefefinedReasons('video')
-
-    this.embedHtml = this.getVideoEmbed()
   }
 
   show () {