Add videos list admin component

11 files changed, 284 insertions, 34 deletions

diff --git a/client/src/app/+admin/admin.component.ts b/client/src/app/+admin/admin.component.ts
index 27d5e0a10..b8a957d1c 100644
--- a/client/src/app/+admin/admin.component.ts
+++ b/client/src/app/+admin/admin.component.ts
@@ -44,6 +44,14 @@ export class AdminComponent implements OnInit {
       })
     }
 
+    if (this.hasVideosRight()) {
+      overviewItems.children.push({
+        label: $localize`Videos`,
+        routerLink: '/admin/videos',
+        iconName: 'videos'
+      })
+    }
+
     if (overviewItems.children.length !== 0) {
       this.menuEntries.push(overviewItems)
     }
@@ -217,4 +225,8 @@ export class AdminComponent implements OnInit {
   private hasVideoCommentsRight () {
     return this.auth.getUser().hasRight(UserRight.SEE_ALL_COMMENTS)
   }
+
+  private hasVideosRight () {
+    return this.auth.getUser().hasRight(UserRight.SEE_ALL_VIDEOS)
+  }
 }
diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts
index a2bd88880..d04c11a20 100644
--- a/client/src/app/+admin/admin.module.ts
+++ b/client/src/app/+admin/admin.module.ts
@@ -10,7 +10,9 @@ import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { SharedMainModule } from '@app/shared/shared-main'
 import { SharedModerationModule } from '@app/shared/shared-moderation'
+import { SharedTablesModule } from '@app/shared/shared-tables'
 import { SharedVideoCommentModule } from '@app/shared/shared-video-comment'
+import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
 import { AdminRoutingModule } from './admin-routing.module'
 import { AdminComponent } from './admin.component'
 import {
@@ -33,7 +35,7 @@ import { AbuseListComponent, VideoBlockListComponent } from './moderation'
 import { InstanceAccountBlocklistComponent, InstanceServerBlocklistComponent } from './moderation/instance-blocklist'
 import { ModerationComponent } from './moderation/moderation.component'
 import { VideoCommentListComponent } from './moderation/video-comment-list'
-import { UserCreateComponent, UserListComponent, UserPasswordComponent, UserUpdateComponent } from './overview'
+import { UserCreateComponent, UserListComponent, UserPasswordComponent, UserUpdateComponent, VideoListComponent } from './overview'
 import { PluginListInstalledComponent } from './plugins/plugin-list-installed/plugin-list-installed.component'
 import { PluginSearchComponent } from './plugins/plugin-search/plugin-search.component'
 import { PluginShowInstalledComponent } from './plugins/plugin-show-installed/plugin-show-installed.component'
@@ -56,6 +58,8 @@ import { JobsComponent } from './system/jobs/jobs.component'
     SharedActorImageModule,
     SharedActorImageEditModule,
     SharedCustomMarkupModule,
+    SharedVideoMiniatureModule,
+    SharedTablesModule,
 
     TableModule,
     SelectButtonModule,
@@ -65,6 +69,8 @@ import { JobsComponent } from './system/jobs/jobs.component'
   declarations: [
     AdminComponent,
 
+    VideoListComponent,
+
     FollowsComponent,
     FollowersListComponent,
     FollowingListComponent,
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
index 7efa87dd0..3cd69cfbc 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
@@ -34,9 +34,7 @@
     <tr>
       <td *ngIf="!videoBlock.reason"></td>
       <td *ngIf="videoBlock.reason" class="expand-cell c-hand" [pRowToggler]="videoBlock" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body">
-        <span class="expander">
-          <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
-        </span>
+        <my-table-expander-icon [expanded]="expanded"></my-table-expander-icon>
       </td>
 
       <td class="action-cell">
@@ -47,22 +45,11 @@
       </td>
 
       <td>
-        <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="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 }}
-              </div>
-
-              <div class="text-muted">by {{ videoBlock.video.channel?.displayName }} on {{ videoBlock.video.channel?.host }} </div>
-            </div>
-          </div>
-        </a>
+        <my-video-cell [video]="videoBlock.video">
+          <span name>
+            <my-global-icon *ngIf="videoBlock.type === 2" i18n-title title="The video was blocked due to automatic blocking of new videos" iconName="robot"></my-global-icon>
+          </span>
+        </my-video-cell>
       </td>
 
       <td>
@@ -90,9 +77,7 @@
           </div>
 
           <div class="right">
-            <div class="screenratio">
-              <div [innerHTML]="videoBlock.embedHtml"></div>
-            </div>
+            <my-embed [video]="videoBlock.video"></my-embed>
           </div>
 
         </div>
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
index 7baf34ca2..1fe8d0f9d 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
@@ -3,11 +3,10 @@ import { switchMap } from 'rxjs/operators'
 import { buildVideoOrPlaylistEmbed } from 'src/assets/player/utils'
 import { environment } from 'src/environments/environment'
 import { Component, OnInit } from '@angular/core'
-import { DomSanitizer } from '@angular/platform-browser'
 import { ActivatedRoute, Router } from '@angular/router'
 import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
-import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
+import { DropdownAction, VideoService } from '@app/shared/shared-main'
 import { VideoBlockService } from '@app/shared/shared-moderation'
 import { buildVideoEmbedLink, decorateVideoLink } from '@shared/core-utils'
 import { VideoBlacklist, VideoBlacklistType } from '@shared/models'
@@ -18,7 +17,7 @@ import { VideoBlacklist, VideoBlacklistType } from '@shared/models'
   styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-block-list.component.scss' ]
 })
 export class VideoBlockListComponent extends RestTable implements OnInit {
-  blocklist: (VideoBlacklist & { reasonHtml?: string, embedHtml?: string })[] = []
+  blocklist: (VideoBlacklist & { reasonHtml?: string })[] = []
   totalRecords = 0
   sort: SortMeta = { field: 'createdAt', order: -1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
@@ -50,7 +49,6 @@ export class VideoBlockListComponent extends RestTable implements OnInit {
     private confirmService: ConfirmService,
     private videoBlocklistService: VideoBlockService,
     private markdownRenderer: MarkdownService,
-    private sanitizer: DomSanitizer,
     private videoService: VideoService
   ) {
     super()
@@ -125,10 +123,6 @@ export class VideoBlockListComponent extends RestTable implements OnInit {
     return 'VideoBlockListComponent'
   }
 
-  getVideoUrl (videoBlock: VideoBlacklist) {
-    return Video.buildWatchUrl(videoBlock.video)
-  }
-
   toHtml (text: string) {
     return this.markdownRenderer.textMarkdownToHTML(text)
   }
@@ -176,8 +170,7 @@ export class VideoBlockListComponent extends RestTable implements OnInit {
 
           for (const element of this.blocklist) {
             Object.assign(element, {
-              reasonHtml: await this.toHtml(element.reason),
-              embedHtml: this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(element))
+              reasonHtml: await this.toHtml(element.reason)
             })
           }
         },
diff --git a/client/src/app/+admin/overview/index.ts b/client/src/app/+admin/overview/index.ts
index b71a6a45f..a9c46893f 100644
--- a/client/src/app/+admin/overview/index.ts
+++ b/client/src/app/+admin/overview/index.ts
@@ -1,2 +1,3 @@
 export * from './users'
+export * from './videos'
 export * from './overview.routes'
diff --git a/client/src/app/+admin/overview/overview.routes.ts b/client/src/app/+admin/overview/overview.routes.ts
index cb5986072..1e6686d16 100644
--- a/client/src/app/+admin/overview/overview.routes.ts
+++ b/client/src/app/+admin/overview/overview.routes.ts
@@ -1,6 +1,8 @@
 import { Routes } from '@angular/router'
 import { UsersRoutes } from './users'
+import { VideosRoutes } from './videos'
 
 export const OverviewRoutes: Routes = [
-  ...UsersRoutes
+  ...UsersRoutes,
+  ...VideosRoutes
 ]
diff --git a/client/src/app/+admin/overview/videos/index.ts b/client/src/app/+admin/overview/videos/index.ts
new file mode 100644
index 000000000..40c2ffe72
--- /dev/null
+++ b/client/src/app/+admin/overview/videos/index.ts
@@ -0,0 +1,2 @@
+export * from './video-list.component'
+export * from './video.routes'
diff --git a/client/src/app/+admin/overview/videos/video-list.component.html b/client/src/app/+admin/overview/videos/video-list.component.html
new file mode 100644
index 000000000..1f1e9cc6e
--- /dev/null
+++ b/client/src/app/+admin/overview/videos/video-list.component.html
@@ -0,0 +1,86 @@
+<h1>
+  <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
+  <ng-container i18n>Videos</ng-container>
+</h1>
+
+<p-table
+  [value]="videos" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [sortField]="sort.field" [sortOrder]="sort.order"  dataKey="id" [resizableColumns]="true" [(selection)]="selectedVideos"
+  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} videos"
+  (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
+>
+  <ng-template pTemplate="caption">
+    <div class="caption">
+      <div class="left-buttons">
+        <my-action-dropdown
+          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="orange"
+          [actions]="bulkVideoActions" [entry]="selectedVideos"
+        >
+        </my-action-dropdown>
+      </div>
+
+      <div class="ml-auto">
+        <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
+      </div>
+
+    </div>
+  </ng-template>
+
+  <ng-template pTemplate="header">
+    <tr>
+      <th style="width: 40px">
+        <p-tableHeaderCheckbox ariaLabel="Select all rows" i18n-ariaLabel></p-tableHeaderCheckbox>
+      </th>
+      <th style="width: 40px"></th>
+      <th style="width: 60px;"></th>
+      <th i18n>Video</th>
+      <th i18n>Info</th>
+      <th style="width: 150px;" i18n pSortableColumn="publishedAt">Published <p-sortIcon field="publishedAt"></p-sortIcon></th>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="body" let-expanded="expanded" let-video>
+
+    <tr [pSelectableRow]="video">
+      <td class="checkbox-cell">
+        <p-tableCheckbox [value]="video" ariaLabel="Select this row" i18n-ariaLabel></p-tableCheckbox>
+      </td>
+
+      <td class="expand-cell" [pRowToggler]="video">
+        <my-table-expander-icon [expanded]="expanded"></my-table-expander-icon>
+      </td>
+
+      <td class="action-cell">
+        <my-video-actions-dropdown
+          placement="bottom auto" buttonDirection="horizontal" [buttonStyled]="true" [video]="video"
+          [displayOptions]="videoActionsOptions" (videoRemoved)="onVideoRemoved()"
+        ></my-video-actions-dropdown>
+      </td>
+
+      <td>
+        <my-video-cell [video]="video"></my-video-cell>
+      </td>
+
+      <td>
+        <span class="badge badge-blue" i18n>{{ video.privacy.label }}</span>
+        <span *ngIf="video.nsfw" class="badge badge-red" i18n>NSFW</span>
+        <span *ngIf="video.blocked" class="badge badge-red" i18n>NSFW</span>
+      </td>
+
+      <td>
+        {{ video.publishedAt | date: 'short' }}
+      </td>
+
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="rowexpansion" let-video>
+    <tr>
+      <td colspan="50">
+        <my-embed [video]="video"></my-embed>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
diff --git a/client/src/app/+admin/overview/videos/video-list.component.scss b/client/src/app/+admin/overview/videos/video-list.component.scss
new file mode 100644
index 000000000..fcdb457f2
--- /dev/null
+++ b/client/src/app/+admin/overview/videos/video-list.component.scss
@@ -0,0 +1,10 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+my-embed {
+  display: block;
+  max-width: 500px;
+}
+
+.badge {
+  @include table-badge;
+}
diff --git a/client/src/app/+admin/overview/videos/video-list.component.ts b/client/src/app/+admin/overview/videos/video-list.component.ts
new file mode 100644
index 000000000..a445bc209
--- /dev/null
+++ b/client/src/app/+admin/overview/videos/video-list.component.ts
@@ -0,0 +1,123 @@
+import { SortMeta } from 'primeng/api'
+import { Component, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { AuthService, ConfirmService, Notifier, RestPagination, RestTable } from '@app/core'
+import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
+import { UserRight } from '@shared/models'
+import { AdvancedInputFilter } from '@app/shared/shared-forms'
+import { VideoActionsDisplayType } from '@app/shared/shared-video-miniature'
+
+@Component({
+  selector: 'my-video-list',
+  templateUrl: './video-list.component.html',
+  styleUrls: [ './video-list.component.scss' ]
+})
+export class VideoListComponent extends RestTable implements OnInit {
+  videos: Video[] = []
+
+  totalRecords = 0
+  sort: SortMeta = { field: 'publishedAt', order: 1 }
+  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+
+  bulkVideoActions: DropdownAction<Video[]>[][] = []
+
+  selectedVideos: Video[] = []
+
+  inputFilters: AdvancedInputFilter[] = [
+    {
+      title: $localize`Advanced filters`,
+      children: [
+        {
+          queryParams: { search: 'local:true' },
+          label: $localize`Only local videos`
+        }
+      ]
+    }
+  ]
+
+  videoActionsOptions: VideoActionsDisplayType = {
+    playlist: false,
+    download: false,
+    update: true,
+    blacklist: true,
+    delete: true,
+    report: false,
+    duplicate: true,
+    mute: true,
+    liveInfo: false
+  }
+
+  constructor (
+    protected route: ActivatedRoute,
+    protected router: Router,
+    private confirmService: ConfirmService,
+    private auth: AuthService,
+    private notifier: Notifier,
+    private videoService: VideoService
+  ) {
+    super()
+  }
+
+  get authUser () {
+    return this.auth.getUser()
+  }
+
+  ngOnInit () {
+    this.initialize()
+
+    this.bulkVideoActions = [
+      [
+        {
+          label: $localize`Delete`,
+          handler: videos => this.removeVideos(videos),
+          isDisplayed: () => this.authUser.hasRight(UserRight.REMOVE_ANY_VIDEO)
+        }
+      ]
+    ]
+  }
+
+  getIdentifier () {
+    return 'VideoListComponent'
+  }
+
+  isInSelectionMode () {
+    return this.selectedVideos.length !== 0
+  }
+
+  onVideoRemoved () {
+    this.reloadData()
+  }
+
+  protected reloadData () {
+    this.selectedVideos = []
+
+    this.videoService.getAdminVideos({
+      pagination: this.pagination,
+      sort: this.sort,
+      search: this.search
+    }).subscribe({
+      next: resultList => {
+        this.videos = resultList.data
+        this.totalRecords = resultList.total
+      },
+
+      error: err => this.notifier.error(err.message)
+    })
+  }
+
+  private async removeVideos (videos: Video[]) {
+    const message = $localize`Are you sure you want to delete these ${videos.length} videos?`
+    const res = await this.confirmService.confirm(message, $localize`Delete`)
+    if (res === false) return
+
+    this.videoService.removeVideo(videos.map(v => v.id))
+      .subscribe({
+        next: () => {
+          this.notifier.success($localize`${videos.length} videos deleted.`)
+          this.reloadData()
+        },
+
+        error: err => this.notifier.error(err.message)
+      })
+  }
+}
diff --git a/client/src/app/+admin/overview/videos/video.routes.ts b/client/src/app/+admin/overview/videos/video.routes.ts
new file mode 100644
index 000000000..984df7b82
--- /dev/null
+++ b/client/src/app/+admin/overview/videos/video.routes.ts
@@ -0,0 +1,30 @@
+import { Routes } from '@angular/router'
+import { UserRightGuard } from '@app/core'
+import { UserRight } from '@shared/models'
+import { VideoListComponent } from './video-list.component'
+
+export const VideosRoutes: Routes = [
+  {
+    path: 'videos',
+    canActivate: [ UserRightGuard ],
+    data: {
+      userRight: UserRight.SEE_ALL_VIDEOS
+    },
+    children: [
+      {
+        path: '',
+        redirectTo: 'list',
+        pathMatch: 'full'
+      },
+      {
+        path: 'list',
+        component: VideoListComponent,
+        data: {
+          meta: {
+            title: $localize`Videos list`
+          }
+        }
+      }
+    ]
+  }
+]